Implement scrollback modal

core/templates/modals/context.html

@@ -4,10 +4,44 @@
 <script src="{% static 'modal.js' %}"></script>
 <link rel ="stylesheet" href="{% static 'tabs.css' %}">
 <script src="{% static 'tabs.js' %}"></script>
+
+<div
+  class="modal-refresh"
+  style="display: none;"
+  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+  hx-post="{% url 'modal_context' %}"
+  hx-vals='{"net": "{{ net }}",
+            "num": "{{ num }}",
+            "src": "{{ src }}",
+            "channel": "{{ channel }}",
+            "time": "{{ time }}",
+            "date": "{{ date }}",
+            "index": "{{ index }}"
+          }'
+  hx-target="#modals-here"
+  hx-trigger="every 3s">
+</div>
+
+<script>
+  document.addEventListener("restore-modal-scroll", function(event) {
+      var scrollpos = localStorage.getItem('scrollpos_modal_content');
+      if (scrollpos) {
+        document.getElementsByClassName("modal-content")[0].scrollTop = scrollpos;
+      };
+  });
+
+  document.addEventListener("htmx:beforeSwap", function(event) {
+    var contentScroll = document.getElementsByClassName("modal-content")[0].scrollTop;
+    localStorage.setItem('scrollpos_modal_content', contentScroll);
+
+  });
+</script>
+
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">
     <div class="box">
+      {% include 'partials/notify.html' %}
       <div class="tabs is-toggle is-fullwidth is-info" id="tabs">
         <ul>
           <li class="is-active" data-tab="1">
@@ -39,7 +73,52 @@
       <div id="tab-content">
         <div class="is-active" data-content="1">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
-          scrollback
+          <article class="table-container">
+            <table class="table">
+              <thead>
+                <th></th>
+              </thead>
+              <tbody>
+                {% for item in object_list %}
+                  {% if item.type == 'msg' %}
+                    <tr>
+                      <td>{{ item.time }}</td>
+                      <td
+                        class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
+                        data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
+                      <td class="wrap">{{ item.msg }}</td>
+                    </tr>
+                  {% endif %}
+                {% endfor %}
+              </tbody>
+            </table>
+          </article>
+          <div class="field has-addons">
+            <div class="control is-expanded has-icons-left">
+              <input
+                hx-post="{% url 'search' %}"
+                hx-trigger="keyup changed delay:200ms"
+                hx-target="#results"
+                hx-swap="innerHTML" id="query" name="query" value="{{ params.query }}" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
+              <span class="icon is-small is-left">
+                <i class="fas fa-magnifying-glass"></i>
+              </span>
+            </div>
+            <div class="control">
+              <div class="field">
+                <button
+                  id="search"
+                  class="button is-info is-fullwidth"
+                  hx-post="{% url 'search' %}"
+                  hx-trigger="click"
+                  hx-target="#results"
+                  hx-swap="innerHTML">
+                  Search
+                </button>
+              </div>
+            </div>
+          </div>
+
         </div>
         <div data-content="2">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }} around {{ ts }}</h4>
@@ -56,6 +135,10 @@
       </div>
     </div>
     <button class="modal-close is-large" aria-label="close"></button>
+    <script>
+      var modal_event = new Event('restore-modal-scroll');
+      document.dispatchEvent(modal_event);
+    </script>
     {# <script>activateButtons();</script> #}
   </div>
 </div>

core/templates/ui/drilldown/drilldown.html

@@ -2,6 +2,22 @@
 {% load static %}
 {% load joinsep %}
 {% block content %}
+  {% if params.modal == 'context' %}
+    <div style="display: none;"
+    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+    hx-post="{% url 'modal_context' %}"
+    hx-vals='{"net": "{{ params.net|escapejs }}",
+              "num": "{{ params.num|escapejs }}",
+              "src": "{{ params.src|escapejs }}",
+              "channel": "{{ params.channel|escapejs }}",
+              "time": "{{ params.time|escapejs }}",
+              "date": "{{ params.date|escapejs }}",
+              "index": "{{ params.index }}"
+            }'
+    hx-target="#modals-here" 
+    hx-trigger="load">
+  </div>
+  {% endif %}
   <script src="{% static 'js/chart.js' %}"></script>
   <script>
     function setupTags() {

core/templates/ui/drilldown/table_results.html

@@ -2,6 +2,7 @@
 {% load index %}
 {% load joinsep %}
 {% include 'partials/notify.html' %}
+
 {% if table %}
   <script src="{% static 'js/column-shifter.js' %}"></script>
   <div style="display: none" id="jsonData" data-json="{{ data }}">
@@ -26,7 +27,7 @@
       {% endif %}
     {% endif %}
   </div>
-  {% if params.index == 'main' %}
+  {% if params.index != 'int' and params.index != 'meta' %}
     <div class="box">
       <div style="height: 30rem">
         <canvas id="volume"></canvas>
@@ -34,6 +35,7 @@
       <script src="{% static 'chart.js' %}"></script>
     </div>
   {% endif %}
+  {{ params }}
   {% include 'ui/drilldown/table_results_partial.html' %}
 {% endif %}
 {# Update the tags in case the user changed the query #}

core/templates/ui/drilldown/table_results_partial.html

@@ -52,7 +52,7 @@
         });
 
       </script>
-      <div class="table-container" style="display:none;">
+      <div id="table-container" class="table-container" style="display:none;">
         <table {% render_attrs table.attrs class="table is-striped is-hoverable is-fullwidth" %}>
           {% block table.thead %}
             {% if table.show_header %}
@@ -219,10 +219,10 @@
                                  hx-vals='{"net": "{{ row.cells.net|escapejs }}",
                                            "num": "{{ row.cells.num|escapejs }}",
                                            "src": "{{ row.cells.src|escapejs }}",
-                                           "nick": "{{ row.cells.nick|escapejs }}",
                                            "channel": "{{ row.cells.channel|escapejs }}",
                                            "time": "{{ row.cells.time|escapejs }}",
-                                           "date": "{{ row.cells.date|escapejs }}"
+                                           "date": "{{ row.cells.date|escapejs }}",
+                                           "index": "{{ params.index }}"
                                           }'
                                  hx-target="#modals-here" 
                                  hx-trigger="click">