From d36f397c6ec3424c584c61e865423aa82dedc707 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Wed, 10 Aug 2022 20:35:34 +0100
Subject: [PATCH] Make the table dynamic

---
 .../ui/drilldown/table_results_partial.html   | 173 +++++++++++++++++-
 core/views/ui/tables.py                       |   6 +
 2 files changed, 177 insertions(+), 2 deletions(-)

diff --git a/core/templates/ui/drilldown/table_results_partial.html b/core/templates/ui/drilldown/table_results_partial.html
index 78f9dbc..0c4a7c2 100644
--- a/core/templates/ui/drilldown/table_results_partial.html
+++ b/core/templates/ui/drilldown/table_results_partial.html
@@ -1,6 +1,8 @@
 {% load django_tables2 %}
 {% load i18n %}
 {% load django_tables2_bulma_template %}
+{% load joinsep %}
+
 {% block table-wrapper %}
   <div class="container">
     {% block table %}
@@ -49,10 +51,157 @@
           <tbody {{ table.attrs.tbody.as_html }}>
             {% for row in table.paginated_rows %}
               {% block table.tbody.row %}
-                <tr {{ row.attrs.as_html }}>
+                <tr class="{% if row.cells.exemption == True %}
+                             has-background-grey-lighter
+                           {% elif row.cells.type == 'join' %}
+                             has-background-success-light
+                           {% elif row.cells.type == 'quit' %}
+                             has-background-danger-light
+                           {% elif row.cells.type == 'kick' %}
+                             has-background-danger-light
+                           {% elif row.cells.type == 'part' %}
+                             has-background-warning-light
+                           {% elif row.cells.type == 'mode' %}
+                             has-background-info-light
+                           {% endif %}">
                   {% for column, cell in row.items %}
                     {% block table.tbody.td %}
-                      <td {{ column.attrs.td.as_html }}>{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}</td>
+                      {% if column.name == 'src' %}
+                        <td>
+                          <a class="has-text-link is-underlined"
+                             onclick="populateSearch('src', '{{ cell|escapejs }}')">
+                            {% if row.cells.src == 'irc' %}
+                              <span class="icon" data-tooltip="IRC">
+                                <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                              </span>
+                            {% elif row.cells.src == 'dis' %}
+                              <span class="icon" data-tooltip="Discord">
+                                <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                              </span>
+                            {% endif %}
+                          </a>
+                        </td>
+                      {% elif column.name == 'type' %}
+                        <td>
+                          <a class="has-text-link is-underlined"
+                             onclick="populateSearch('type', '{{ cell|escapejs }}')">
+                            {% if row.cells.type == 'msg' %}
+                              <span class="icon" data-tooltip="Message">
+                                <i class="fa-solid fa-message"></i>
+                              </span>
+                            {% elif row.cells.type == 'join' %}
+                              <span class="icon" data-tooltip="Join">
+                                <i class="fa-solid fa-person-to-portal"></i>
+                              </span>
+                            {% elif row.cells.type == 'part' %}
+                              <span class="icon" data-tooltip="Part">
+                                <i class="fa-solid fa-person-from-portal"></i>
+                              </span>
+                            {% elif row.cells.type == 'quit' %}
+                              <span class="icon" data-tooltip="Quit">
+                                <i class="fa-solid fa-circle-xmark"></i>
+                              </span>
+                            {% elif row.cells.type == 'kick' %}
+                              <span class="icon" data-tooltip="Kick">
+                                <i class="fa-solid fa-user-slash"></i>
+                              </span>
+                            {% elif row.cells.type == 'nick' %}
+                              <span class="icon" data-tooltip="Nick">
+                                <i class="fa-solid fa-signature"></i>
+                              </span>
+                            {% elif row.cells.type == 'mode' %}
+                              <span class="icon" data-tooltip="Mode">
+                                <i class="fa-solid fa-gear"></i>
+                              </span>
+                            {% elif row.cells.type == 'action' %}
+                              <span class="icon" data-tooltip="Action">
+                                <i class="fa-solid fa-exclamation"></i>
+                              </span>
+                            {% else %}
+                              {{ row.cells.type }}
+                            {% endif %}
+                          </a>
+                        </td>
+                      {% elif column.name == 'msg' %}
+                        <td style="max-width: 10em" class="wrap">{{ row.cells.msg }}</td>
+                      {% elif column.name == 'host' %}
+                        <td>
+                          <a class="has-text-link is-underlined"
+                             onclick="populateSearch('host', '{{ cell|escapejs }}')">
+                            {{ cell }}
+                          </a>
+                        </td>
+                      {% elif column.name == 'nick' %}
+                        <td>
+                          <div class="nowrap-parent">
+                            <div class="nowrap-child">
+                              {% if row.cells.online is True %}
+                                <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
+                                  <i class="fa-solid fa-circle"></i>
+                                </span>
+                              {% elif row.cells.online is False %}
+                                <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
+                                  <i class="fa-solid fa-circle"></i>
+                                </span>
+                              {% else %}
+                                <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
+                                  <i class="fa-solid fa-circle"></i>
+                                </span>
+                              {% endif %}
+                            </div>
+                            <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ cell|escapejs }}')">
+                              {{ cell }}
+                            </a>
+                            <div class="nowrap-child">
+                              {% if row.cells.src == 'irc' %}
+                                <button
+                                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                                  hx-post="{% url 'modal_drilldown' %}"
+                                  hx-vals='{"net": "{{ row.cells.net }}", "nick": "{{ row.cells.nick }}", "channel": "{{ row.cells.channel }}"}'
+                                  hx-target="#modals-here" 
+                                  hx-trigger="click"
+                                  class="button is-small">
+                                  Information
+                                </button>
+                              {% endif %}
+                            </div>
+                            {% if row.cells.num_chans is not None %}
+                              <div class="nowrap-child">
+                                <span class="tag">
+                                  {{ row.cells.num_chans }}
+                                </span>
+                              </div>
+                            {% endif %}
+                          </div>
+                        </td>
+                      {% elif column.name == 'channel' %}
+                        <td>
+                          <div class="nowrap-parent">
+                            <a class="nowrap-child has-text-link is-underlined"
+                               onclick="populateSearch('channel', '{{ cell|escapejs }}')">
+                              {{ cell }}
+                            </a>
+                            {% if row.cells.num_users is not None %}
+                              <div class="nowrap-child">
+                                <span class="tag">
+                                  {{ row.cells.num_users }}
+                                </span>
+                              </div>
+                            {% endif %}
+                          </div>
+                        </td>
+                      {% elif column.name == 'net' %}
+                        <td>
+                          <a class="has-text-link is-underlined"
+                             onclick="populateSearch('net', '{{ cell|escapejs }}')">
+                            {{ cell }}
+                          </a>
+                        </td>
+                      {% else %}
+                        <td>
+                          {{ cell }}
+                        </td>
+                      {% endif %}
                     {% endblock table.tbody.td %}
                   {% endfor %}
                 </tr>
@@ -160,4 +309,24 @@
       {% endif %}
     {% endblock pagination %}
   </div>
+  {# Update the tags in case the user changed the query #}
+  {# Check for focus and refocus #}
+  <script>
+    var inputTags = document.getElementsByClassName('tags-input');
+    var inputBox = document.querySelector("[placeholder='Add query']");
+    var isFocused = (document.activeElement === inputBox);
+    for (index = 0; index < inputTags.length; index++) {
+      if (index == 0) {
+        inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
+      } else {
+        inputTags[index].remove();
+      }
+    }
+    // inputTags[0].outerHTML = '<input id="tags" class="input" type="tags" placeholder="Add query" value="{{ tags|joinsep:',' }}">';
+    setupTags();
+    var inputBox = document.querySelector("[placeholder='Add query']");
+    if (isFocused) {
+      inputBox.focus();
+    }
+  </script>
 {% endblock table-wrapper %}
\ No newline at end of file
diff --git a/core/views/ui/tables.py b/core/views/ui/tables.py
index ed64836..ca93a12 100644
--- a/core/views/ui/tables.py
+++ b/core/views/ui/tables.py
@@ -15,6 +15,8 @@ class DrilldownTable(Table):
     num = Column()
     src = Column()
     ts = Column()
+    # date = Column()
+    # time = Column()
     type = Column()
     bot = Column()
     channel = Column()
@@ -32,5 +34,9 @@ class DrilldownTable(Table):
     status = Column()
     user = Column()
     version_sentiment = Column()
+    exemption = Column()
+    num_chans = Column()
+    num_users = Column()
     template_name = "ui/drilldown/table_results.html"
     paginate_by = 5
+    row_attrs = "is-primary"