Implement relay scroll restore

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>
 

core/templates/manage/threshold/irc/network/relays.html

@@ -1,8 +1,6 @@
 {% load index %}
-<div id="relays">
+
-  {% if relays is not None %}
+<div class="table-container relay_table_container" id="relays">
-    <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>
@@ -215,8 +213,9 @@
       {% endfor %}
     </tbody>
   </table>
-      </div>
+  <script>
-    </div>
+    var modal_event = new Event('restore-relay-scroll');
-  {% endif %}
+    document.dispatchEvent(modal_event);
+  </script>
   {% include 'manage/threshold/partials/notify.html' %}
 </div>