table column toggles

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>