Add "Show rules" checkbox and attendent css and js

The only problem here is that as the column headings stick to the
page their background covers only the columns, not the entire
width of the screen/enclosing div.  Which means that when background
rules are displayed they are uncovered in the horizontal area
where the table headings appear.  The backround_rules.css
_could_ apply the rules to the table instead of the div, but then
the rules don't go all the way across the page.

There is surely a way to fiddle with this but it's not worth bothering
with now.

diff --git a/src/pgwui_sql/static/background_rules.css b/src/pgwui_sql/static/background_rules.css
new file mode 100644 (file)
index 0000000..303e4fb
--- /dev/null
+++ b/src/pgwui_sql/static/background_rules.css
@@ -0,0 +1,26 @@
+/* Copyright (C) 2024 The Meme Factory, Inc.  http://www.karlpinc.com/
+ *
+ * This file is part of PGWUI_SQL.
+ *
+ * This program is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <http://www.gnu.org/licenses/>.
+ *
+ * Turned on and off to put "rules" in the container background.
+ *
+ * Karl O. Pinc <kop@karlpinc.com>
+ */
+
+div.stickycontainer {
+    background: repeating-linear-gradient(white 0 4em, lightcyan 0 8em);
+}

diff --git a/src/pgwui_sql/static/pgwui_sql.css b/src/pgwui_sql/static/pgwui_sql.css
index bb547b4edeeff5dfbeebca578cfa398633c9f869..3594c6de0c8285b4055454ebcfdb1a3b0efd258c 100644 (file)
--- a/src/pgwui_sql/static/pgwui_sql.css
+++ b/src/pgwui_sql/static/pgwui_sql.css
@@ -55,9 +55,10 @@ textarea.sqltext { height: 40em;
    So don't try.  Instead, set the background to "white", the same that
    we set in the body's background.  And then assume that all the backgrounds
    in-between are transparent. */
-.stickyheading { position: sticky;         /* attach to heading */
+.stickyheading { position: sticky;           /* attach to heading */
                  top: 0;
-                 background-color: white;  /* kludge, see above */
+                 background-color: white;    /* kludge, see above */
+                 border-collapse: collapse;  /* cover tbody background */
                  text-align: left; }
 .stickycontainer { overflow-y: clip; }     /* attach to heading's container */
 .stickyfooting { position: sticky;         /* attach to footer */

diff --git a/src/pgwui_sql/static/pgwui_sql.js b/src/pgwui_sql/static/pgwui_sql.js
index 6c943b21a567506cf774a77111726f2912e6ee0e..b34d06a185b55387e116baf9094bdc73c25608f6 100644 (file)
--- a/src/pgwui_sql/static/pgwui_sql.js
+++ b/src/pgwui_sql/static/pgwui_sql.js
@@ -44,6 +44,14 @@ function whitespaceDisplay(checked) {
          }
 }
 
+function rulesDisplay(checked) {
+         if (checked) {
+           globalThis.horizontalRuleSheet.disabled = false;
+         } else {
+           globalThis.horizontalRuleSheet.disabled = true;
+         }
+}
+
 /* Functions for initialization */
 function getSheet(url) {
     for (const sheet of document.styleSheets) {
@@ -60,8 +68,10 @@ function initializeStyling() {
         }
     }
     applyCheckbox('show_spaces_id', whitespaceDisplay);
+    applyCheckbox('show_rules_id', rulesDisplay);
 }
 
 /* Initialization */
 globalThis.tdSqltextSheet = getSheet(pgwuiSqlShowWhitespaceURL());
+globalThis.horizontalRuleSheet = getSheet(pgwuiSqlBackgroundRulesURL());
 initializeStyling();

diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 182ca091a7d6053309faeec13f5f9989f8db0d6e..de4970f3ec61ef0c904e910b775030f95f176721 100644 (file)
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -26,6 +26,8 @@
     search_path  The requested search_path
     sql          Text of the sql command(s)
     result_rows  List of SQLResult objects
+    show_rules   HTML attribute of input element indicating checked checkbox
+                 of the "Show rules" checkbox
     show_spaces  HTML attribute of input element indicating checked checkbox
                  of the "Show spaces" checkbox
 </%doc>
@@ -48,6 +50,10 @@
            return '${request.static_url(
                          "pgwui_sql:static/show_whitespace.css")}';
   }
+  function pgwuiSqlBackgroundRulesURL() {
+           return '${request.static_url(
+                         "pgwui_sql:static/background_rules.css")}';
+  }
   // Set window name so that the sql_edit window can vary the target
   // by db/user/etc. and have multiple result windows open at once.
   window.name='${self.sql_results_target()}';
@@ -66,6 +72,9 @@
   <link rel="stylesheet"
         href="${request.static_url('pgwui_sql:static/show_whitespace.css')}"
         type="text/css" />
+  <link rel="stylesheet"
+        href="${request.static_url('pgwui_sql:static/background_rules.css')}"
+        type="text/css" />
 </%block>
 
 <%block name="action_success">
@@ -144,6 +153,19 @@
     % endfor
     <div class="stickyfooting">
       <hr>
+      <self.lib:td_label for_id="show_rules_id">
+        Show rules
+      </self.lib:td_label>
+      <self.lib:td_input tab_index="${tab_index}">
+        <input name="show_rules"
+               id="show_rules_id"
+               tabindex="${tab_index.val}"
+               type="checkbox"
+               ${show_rules | n}
+               onchange="rulesDisplay(this.checked)"
+        />
+      </self.lib:td_input>
+
       <self.lib:td_label for_id="show_spaces_id">
         Show spaces
       </self.lib:td_label>

diff --git a/src/pgwui_sql/views/sql.py b/src/pgwui_sql/views/sql.py
index f261302dd8eb70e109bd745ef4fed306d3e67478..69eeab18f3424c59b223a25f383cd771a2d63b06 100644 (file)
--- a/src/pgwui_sql/views/sql.py
+++ b/src/pgwui_sql/views/sql.py
@@ -47,6 +47,7 @@ log = logging.getLogger(__name__)
 @attrs.define(slots=False)
 class SQLInitialPost(pgwui_sql.views.base.SQLBaseInitialPost):
     show_spaces = attrs.field(default=False)
+    show_rules = attrs.field(default=False)
 
 
 class SQLWTForm(pgwui_sql.views.base.SQLBaseWTForm):
@@ -56,6 +57,8 @@ class SQLWTForm(pgwui_sql.views.base.SQLBaseWTForm):
     # just to keep my hand in.
     show_spaces = wtforms.fields.BooleanField(
         'Show spaces', id='show_spaces_id')
+    show_rules = wtforms.fields.BooleanField(
+        'Show rules', id='show_rules_id')
 
 
 @attrs.define(slots=False)
@@ -67,6 +70,7 @@ class SQLForm(pgwui_sql.views.base.SQLBaseForm):
       uh      The UploadHandler instance using the form
     '''
     show_spaces = attrs.field(default=False)
+    show_rules = attrs.field(default=False)
 
     def read(self):
         '''
@@ -77,16 +81,24 @@ class SQLForm(pgwui_sql.views.base.SQLBaseForm):
 
         # Read our own data
         self['show_spaces'] = self._form.show_spaces.data
+        self['show_rules'] = self._form.show_rules.data
 
     def write(self, result, errors):
         '''
         Produces the dict pyramid will use to render the form.
         '''
         response = super().write(result, errors)
+
         if self['show_spaces']:
             response['show_spaces'] = CHECKED
         else:
             response['show_spaces'] = UNCHECKED
+
+        if self['show_rules']:
+            response['show_rules'] = CHECKED
+        else:
+            response['show_rules'] = UNCHECKED
+
         return response