table column toggles

server/src/lib.rs

@@ -68,7 +68,7 @@ pub async fn start(
                 .layer(cors_policy(&config.site_url))
                 .layer(SetResponseHeaderLayer::overriding(
                     header::CONTENT_SECURITY_POLICY,
-                    "default-src 'self'; child-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline';"
+                    "default-src 'self'; child-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
                         .parse::<HeaderValue>()
                         .expect("Invalid CSP header value"),
                 )),

server/static/table_toggle.js

@@ -0,0 +1,82 @@
+// Get the table and checkboxes
+const dataTable = document.getElementById('status-tbl');
+const toggleColumnCheckboxes = document.querySelectorAll('.toggle-column');
+
+// Add event listeners to individual column toggle checkboxes
+toggleColumnCheckboxes.forEach(checkbox => {
+    checkbox.addEventListener('change', function () {
+        const columnName = checkbox.getAttribute('data-name');
+        let checked = checkbox.checked;
+        toggleColumn(columnName,checked);
+        saveSettings();
+    });
+});
+
+function saveSettings() {
+    let data = {};
+    toggleColumnCheckboxes.forEach(checkbox => {
+        const columnName = checkbox.getAttribute('data-name');
+        let checked = checkbox.checked;
+        data[columnName] = checked;
+    });    
+    setCookie(COOKIE_NAME, JSON.stringify(data),30);
+}
+
+// Function to toggle the visibility of a column based on its name or id
+function toggleColumn(name,checked) {
+    const cellsTd = dataTable.querySelectorAll(`td[data-name="${name}"]`);
+    
+    cellsTd.forEach(cell => {
+        cell.style.display = checked ? '' : 'none';
+    });
+    const cells = dataTable.querySelectorAll(`th[data-name="${name}"]`);
+    
+    cells.forEach(cell => {
+        cell.style.display = checked ? '' : 'none';
+    });
+}
+
+const COOKIE_NAME = "table_settings";
+document.addEventListener("DOMContentLoaded", function(event) {
+  let val = getCookie(COOKIE_NAME);
+  if (val) {
+    let res = JSON.parse( val );
+    console.log(res);
+    for (const [key, value] of Object.entries(res)) {
+        console.log(key, value);
+        toggleColumn(key,value);
+        toggleColumnCheckboxes.forEach(checkbox => {
+            if (checkbox.getAttribute('data-name') == key) {
+                checkbox.checked = value;
+            }
+        });
+    }
+  } else {
+    toggleColumnCheckboxes.forEach(checkbox => {
+    const columnName = checkbox.getAttribute('data-name');
+    let checked = checkbox.checked;
+        toggleColumn(columnName,checked);
+    });
+  }
+});
+
+function setCookie(name,value,days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+
+function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}

server/templates/about.html.j2

@@ -35,6 +35,8 @@
       <li><code>Points</code> is a weighted instance score based on the availability over the last 3h, 30 and 120 days, together with the version.</li>
     </ul>
 
+    <p>Table settings are stored locally per client.</p>
+
     <p><a rel="nofollow" href="https://github.com/4cuck/nitter-status">Sourcecode</a></p>
     <p>License: AGPL3</p>
   </body>

server/templates/instances.html.j2

@@ -21,19 +21,20 @@
     <p><a href="/about">About</a></p>
     <p>Please use <a rel="nofollow" href="/api/v1/instances">/api/v1/instances</a> for bots.</p>
     <p>Last Updated {{last_updated}} <a rel="nofollow" href="https://time.is/UTC">UTC</a>.</p>
+    <p>You can customize the visible columns at the bottom.</p>
     <div class="table-responsive">
-      <table class="table sortable">
+      <table id="status-tbl" class="table sortable table-hover table-sm">
       <thead>
           <tr>
           <th scope="col">Instance</th>
-          <th scope="col">Country</th>
+          <th data-name="country" scope="col">Country</th>
           <th scope="col">Healthy</th>
           <th scope="col">Health History</th>
-          <th scope="col">Average (ms)</th>
+          <th data-name="average" scope="col">Average (ms)</th>
           <th scope="col">All Healthy %</th>
-          <th scope="col">RSS</th>
-          <th scope="col">Version</th>
-          <th scope="col">Connectivity</th>
+          <th data-name="rss" scope="col">RSS</th>
+          <th data-name="version" scope="col">Version</th>
+          <th data-name="connectivity" scope="col">Connectivity</th>
           <th scope="col">Points</th>
           </tr>
       </thead>
@@ -41,7 +42,7 @@
           {% for host in instances -%}
           <tr>
           <td><a rel="nofollow external" href="{{host.url}}">{{host.domain}}</a></td>
-          <td>{{host.country}}</td>
+          <td data-name="country">{{host.country}}</td>
           <td>
           {%- if host.is_bad_host -%}
             <div title="Host known for blocking healthchecks">❓</div>
@@ -79,10 +80,10 @@
             {%- endif -%}
           </td>
           {%- if host.recent_checks -%}
-          <td>{{host.ping_avg}}</td>
+          <td data-name="average">{{host.ping_avg}}</td>
           {% endif %}
           <td>{{host.healthy_percentage_overall}}</td>
-          <td>{% if host.rss -%} ✅ {%- else -%} ❌ {%- endif -%}</td>
+          <td data-name="rss">{% if host.rss -%} ✅ {%- else -%} ❌ {%- endif -%}</td>
           {%- if host.healthy and not host.version -%}
             {%- set version = "Dmissing" -%}
           {%- elif host.version and not host.is_upstream -%}
@@ -94,7 +95,7 @@
           {%- else -%}
             {%- set version = "Eunknown" -%}
           {%- endif -%}
-          <td data-sort="{{version}}{{host.version | default(value='')}}">
+          <td data-name="version" data-sort="{{version}}{{host.version | default(value='')}}">
           {%- if host.version_url -%}
             <a title="{{host.version}}" href="{{host.version_url}}">
             {{host.version | truncate(length=18) | default(value="missing version")}}
@@ -113,16 +114,50 @@
               {%- endif -%}
           </td>
           {# <td>{%- if host.connectivity ==  -%}</td> #}
-          <td>{{host.connectivity}}</td>
+          <td data-name="connectivity">{{host.connectivity}}</td>
           <td>{{host.points}}</td>
           </tr>
           {%- endfor -%}
       </tbody>
       </table>
     </div>
+    <noscript>Toggling table columns and sorting requires JS.</noscript>
+    <div class="form mt-2">
+      <div class="form-check">
+        <input class="form-check-input toggle-column" data-name="connectivity" type="checkbox" id="checkConnectivity">
+        <label class="form-check-label" for="checkConnectivity">
+          Connectivity Column
+        </label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input toggle-column" data-name="country" type="checkbox" id="checkCountry" checked>
+        <label class="form-check-label" for="checkCountry">
+          Country Column
+        </label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input toggle-column" data-name="rss" type="checkbox" id="checkRSS" checked>
+        <label class="form-check-label" for="checkRSS">
+          RSS Column
+        </label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input toggle-column" data-name="version" type="checkbox" id="checkVersion" checked>
+        <label class="form-check-label" for="checkVersion">
+          Version Column
+        </label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input toggle-column" data-name="average" type="checkbox" id="checkAverage">
+        <label class="form-check-label" for="checkAverage">
+          Average ms Column
+        </label>
+      </div>
+    </div>
   </div>
       <script src="/static/bootstrap.min.js"></script>
       <link href="/static/sorting.css" rel="stylesheet" />
       <script src="/static/sortable.min.js"></script>
+      <script src="/static/table_toggle.js"></script>
   </body>
 </html>