From 850d00de196846565d202bdbe3cd57891c5d05f3 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Fri, 26 Aug 2022 22:04:30 +0100
Subject: [PATCH] Implement relay scroll restore

---
 .../manage/threshold/irc/network/network.html |  37 +-
 .../manage/threshold/irc/network/relays.html  | 423 +++++++++---------
 2 files changed, 246 insertions(+), 214 deletions(-)

diff --git a/core/templates/manage/threshold/irc/network/network.html b/core/templates/manage/threshold/irc/network/network.html
index 6882c27..146849b 100644
--- a/core/templates/manage/threshold/irc/network/network.html
+++ b/core/templates/manage/threshold/irc/network/network.html
@@ -1,6 +1,28 @@
 {% extends "base.html" %}
 {% block content %}
+  <script>
+    document.addEventListener("restore-relay-scroll", function(event) {
+      var modalContent = document.getElementsByClassName("relay_table_container")[0];
+      var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
+      var scrollpos = localStorage.getItem('scrollpos_relays_table');
+      if (scrollpos == 'BOTTOM') {
+        modalContent.scrollTop = maxScroll;
+      } else if (scrollpos) {
+        modalContent.scrollTop = scrollpos;
+      };
+    });
 
+    document.addEventListener("htmx:beforeSwap", function(event) {
+      var modalContent = document.getElementsByClassName("relay_table_container")[0];
+      var scrollpos = modalContent.scrollTop;
+      if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
+        localStorage.setItem('scrollpos_relays_table', 'BOTTOM');
+      } else {
+        localStorage.setItem('scrollpos_relays_table', scrollpos);
+      }
+
+    });
+  </script>
   <div
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
@@ -16,7 +38,8 @@
     hx-get="{% url 'threshold_irc_network_relays' net %}"
     hx-trigger="load, every 60s"
     hx-target="#relays"
-    hx-swap="outerHTML">
+    {# hx-swap="innerHTML" #}
+    >
   </div>
 
   <div
@@ -54,11 +77,21 @@
         </div>
       </div>
     </div>
-    <div class="column">
+    <!-- <div class="column">
       <div class="box">
         <div id="relays">
         </div>
       </div>
+    </div> -->
+    <div class="column">
+      <div class="box">
+        <div>
+          <div class="content" style="max-height: 30em; overflow: auto;">
+            <div class="table-container relay_table_container" id="relays">
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
diff --git a/core/templates/manage/threshold/irc/network/relays.html b/core/templates/manage/threshold/irc/network/relays.html
index bc441a5..49a4d6e 100644
--- a/core/templates/manage/threshold/irc/network/relays.html
+++ b/core/templates/manage/threshold/irc/network/relays.html
@@ -1,222 +1,221 @@
 {% load index %}
-<div id="relays">
-  {% if relays is not None %}
-    <div class="content" style="max-height: 30em; overflow: auto;">
-      <div class="table-container">
-        <table class="table is-fullwidth is-hoverable relays-table">
-          <thead>
-            <th>id</th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Registered">
-                <i class="fa-solid fa-seal"></i>
+
+<div class="table-container relay_table_container" id="relays">
+  <table class="table is-fullwidth is-hoverable relays-table">
+    <thead>
+      <th>id</th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Registered">
+          <i class="fa-solid fa-seal"></i>
+        </span>
+      </th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Authenticated">
+          <i class="fa-solid fa-passport"></i>
+        </span>
+      </th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Connected">
+          <i class="fa-solid fa-cloud-question"></i>
+        </span>
+      </th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Enabled">
+          <i class="fa-solid fa-toggle-on"></i>
+        </span>
+      </th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Channels">
+          <i class="fa-solid fa-hashtag"></i>
+        </span>
+      </th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
+          <i class="fa-solid fa-list-ol"></i>
+        </span>
+      </th>
+      <th>nick</th>
+      <th>
+        <span class="icon has-tooltip-bottom" data-tooltip="Actions">
+          <i class="fa-solid fa-wrench"></i>
+        </span>
+      </th>
+    </thead>
+    <tbody>
+      {% for relay in relays %}
+        <tr>
+          <td>{{ relay.id }}</td>
+          <td>
+            {% if relay.registered %}
+              <span class="icon has-text-success">
+                <i class="fa-solid fa-check" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Authenticated">
-                <i class="fa-solid fa-passport"></i>
+            {% else %}
+              <span class="icon has-text-danger">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Connected">
-                <i class="fa-solid fa-cloud-question"></i>
+            {% endif %}
+          </td>
+          <td>
+            {% if relay.authed %}
+              <span class="icon has-text-success">
+                <i class="fa-solid fa-check" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Enabled">
-                <i class="fa-solid fa-toggle-on"></i>
+            {% else %}
+              <span class="icon has-text-danger">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Channels">
-                <i class="fa-solid fa-hashtag"></i>
+            {% endif %}
+          </td>
+          <td>
+            {% if relay.conn %}
+              <span class="icon has-text-success">
+                <i class="fa-solid fa-check" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
-                <i class="fa-solid fa-list-ol"></i>
+            {% else %}
+              <span class="icon has-text-danger">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
               </span>
-            </th>
-            <th>nick</th>
-            <th>
-              <span class="icon has-tooltip-bottom" data-tooltip="Actions">
-                <i class="fa-solid fa-wrench"></i>
+            {% endif %}
+          </td>
+          <td>
+            {% if relay.enabled %}
+              <span class="icon has-text-success">
+                <i class="fa-solid fa-check" aria-hidden="true"></i>
               </span>
-            </th>
-          </thead>
-          <tbody>
-            {% for relay in relays %}
-              <tr>
-                <td>{{ relay.id }}</td>
-                <td>
-                  {% if relay.registered %}
-                    <span class="icon has-text-success">
-                      <i class="fa-solid fa-check" aria-hidden="true"></i>
-                    </span>
-                  {% else %}
-                    <span class="icon has-text-danger">
-                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                    </span>
-                  {% endif %}
-                </td>
-                <td>
-                  {% if relay.authed %}
-                    <span class="icon has-text-success">
-                      <i class="fa-solid fa-check" aria-hidden="true"></i>
-                    </span>
-                  {% else %}
-                    <span class="icon has-text-danger">
-                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                    </span>
-                  {% endif %}
-                </td>
-                <td>
-                  {% if relay.conn %}
-                    <span class="icon has-text-success">
-                      <i class="fa-solid fa-check" aria-hidden="true"></i>
-                    </span>
-                  {% else %}
-                    <span class="icon has-text-danger">
-                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                    </span>
-                  {% endif %}
-                </td>
-                <td>
-                  {% if relay.enabled %}
-                    <span class="icon has-text-success">
-                      <i class="fa-solid fa-check" aria-hidden="true"></i>
-                    </span>
-                  {% else %}
-                    <span class="icon has-text-danger">
-                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                    </span>
-                  {% endif %}
-                </td>
-                <td>
-                  {{ relay.chans }}
-                </td>
-                <td>{{ relay.limit }}</td>
-                <td>
-                  {{ relay.nick }}
-                </td>
-                <td>
-                  <a
-                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-post="{% url 'modal_context' %}"
-                    hx-vals='{"net": "{{ net }}",
-                             "num": "{{ relay.id }}",
-                             "src": "irc",
-                             "channel": "*status",
-                             "time": "None",
-                             "date": "None",
-                             "index": "int",
-                             "type": "znc",
-                             "mtype": "None",
-                             "nick": "*status",
-                             "dedup": "on"}'
-                    hx-target="#modals-here" 
-                    hx-trigger="click"
-                    class="button is-small has-background-info has-text-white">
-                    <span class="icon has-tooltip-left" data-tooltip="ZNC context">
-                      <i class="fa-brands fa-unity" aria-hidden="true"></i>
-                    </span>
-                  </a>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <a
-                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
-                    hx-target="#relays"
-                    hx-swap="outerHTML"
-                    class="button is-small has-background-danger has-text-white">
-                    <span class="icon" data-tooltip="Delete">
-                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-                    </span>
-                  </a>
-                </td>
-                <td>
-                  <a
-                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
-                    hx-target="#relays"
-                    hx-swap="outerHTML"
-                    class="button is-small has-background-info has-text-white">
-                    <span class="icon" data-tooltip="Provision">
-                      <i class="fa-solid fa-wrench" aria-hidden="true"></i>
-                    </span>
-                  </a>
-                </td>
-                <td>
-                  <a
-                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
-                    hx-target="#relays"
-                    hx-swap="outerHTML"
-                    class="button is-small has-background-info has-text-white">
-                    <span class="icon" data-tooltip="Enable authentication">
-                      <i class="fa-solid fa-passport" aria-hidden="true"></i>
-                    </span>
-                  </a>
-                </td>
-                <td></td>
-                <td>
-                  {% if relay.enabled %}
-                    <a
-                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                      hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
-                      hx-target="#relays"
-                      hx-swap="outerHTML"
-                      class="button is-small has-background-warning">
-                      <span class="icon" data-tooltip="Disable">
-                        <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
-                      </span>
-                    </a>
-                  {% else %}
-                    <a
-                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                      hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
-                      hx-target="#relays"
-                      hx-swap="outerHTML"
-                      class="button is-small has-background-success has-text-white">
-                      <span class="icon" data-tooltip="Enable">
-                        <i class="fa-solid fa-wifi" aria-hidden="true"></i>
-                      </span>
-                    </a>
-                  {% endif %}
-                </td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td>
-                  <a
-                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-post="{% url 'modal_context' %}"
-                    hx-vals='{"net": "{{ net }}",
-                             "num": "{{ relay.id }}",
-                             "src": "irc",
-                             "channel": "{{ sinst.entity }}",
-                             "time": "None",
-                             "date": "None",
-                             "index": "int",
-                             "type": "auth",
-                             "mtype": "None",
-                             "nick": "{{ sinst.entity }}",
-                             "dedup": "on"}'
-                    hx-target="#modals-here" 
-                    hx-trigger="click"
-                    class="button is-small has-background-info has-text-white">
-                    <span class="icon has-tooltip-left" data-tooltip="Auth ({{ sinst.entity }})">
-                      <i class="fa-solid fa-signature" aria-hidden="true"></i>
-                    </span>
-                  </a>
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  {% endif %}
+            {% else %}
+              <span class="icon has-text-danger">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+              </span>
+            {% endif %}
+          </td>
+          <td>
+            {{ relay.chans }}
+          </td>
+          <td>{{ relay.limit }}</td>
+          <td>
+            {{ relay.nick }}
+          </td>
+          <td>
+            <a
+              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+              hx-post="{% url 'modal_context' %}"
+              hx-vals='{"net": "{{ net }}",
+                       "num": "{{ relay.id }}",
+                       "src": "irc",
+                       "channel": "*status",
+                       "time": "None",
+                       "date": "None",
+                       "index": "int",
+                       "type": "znc",
+                       "mtype": "None",
+                       "nick": "*status",
+                       "dedup": "on"}'
+              hx-target="#modals-here" 
+              hx-trigger="click"
+              class="button is-small has-background-info has-text-white">
+              <span class="icon has-tooltip-left" data-tooltip="ZNC context">
+                <i class="fa-brands fa-unity" aria-hidden="true"></i>
+              </span>
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a
+              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+              hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
+              hx-target="#relays"
+              hx-swap="outerHTML"
+              class="button is-small has-background-danger has-text-white">
+              <span class="icon" data-tooltip="Delete">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+              </span>
+            </a>
+          </td>
+          <td>
+            <a
+              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+              hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
+              hx-target="#relays"
+              hx-swap="outerHTML"
+              class="button is-small has-background-info has-text-white">
+              <span class="icon" data-tooltip="Provision">
+                <i class="fa-solid fa-wrench" aria-hidden="true"></i>
+              </span>
+            </a>
+          </td>
+          <td>
+            <a
+              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+              hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
+              hx-target="#relays"
+              hx-swap="outerHTML"
+              class="button is-small has-background-info has-text-white">
+              <span class="icon" data-tooltip="Enable authentication">
+                <i class="fa-solid fa-passport" aria-hidden="true"></i>
+              </span>
+            </a>
+          </td>
+          <td></td>
+          <td>
+            {% if relay.enabled %}
+              <a
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
+                hx-target="#relays"
+                hx-swap="outerHTML"
+                class="button is-small has-background-warning">
+                <span class="icon" data-tooltip="Disable">
+                  <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
+                </span>
+              </a>
+            {% else %}
+              <a
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
+                hx-target="#relays"
+                hx-swap="outerHTML"
+                class="button is-small has-background-success has-text-white">
+                <span class="icon" data-tooltip="Enable">
+                  <i class="fa-solid fa-wifi" aria-hidden="true"></i>
+                </span>
+              </a>
+            {% endif %}
+          </td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td>
+            <a
+              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+              hx-post="{% url 'modal_context' %}"
+              hx-vals='{"net": "{{ net }}",
+                       "num": "{{ relay.id }}",
+                       "src": "irc",
+                       "channel": "{{ sinst.entity }}",
+                       "time": "None",
+                       "date": "None",
+                       "index": "int",
+                       "type": "auth",
+                       "mtype": "None",
+                       "nick": "{{ sinst.entity }}",
+                       "dedup": "on"}'
+              hx-target="#modals-here" 
+              hx-trigger="click"
+              class="button is-small has-background-info has-text-white">
+              <span class="icon has-tooltip-left" data-tooltip="Auth ({{ sinst.entity }})">
+                <i class="fa-solid fa-signature" aria-hidden="true"></i>
+              </span>
+            </a>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  <script>
+    var modal_event = new Event('restore-relay-scroll');
+    document.dispatchEvent(modal_event);
+  </script>
   {% include 'manage/threshold/partials/notify.html' %}
 </div>
\ No newline at end of file