From 83b628593109ceb484785b0fb50d16dbbba3772d Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Wed, 3 Aug 2022 07:20:30 +0100
Subject: [PATCH] Dynamically update search query when elements are clicked

---
 core/templates/ui/drilldown/drilldown.html |  20 +++-
 core/templates/ui/drilldown/results.html   | 109 ++++++++++++---------
 2 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/core/templates/ui/drilldown/drilldown.html b/core/templates/ui/drilldown/drilldown.html
index 1366ea4..abfd4e9 100644
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@@ -2,6 +2,21 @@
 {% load static %}
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script>
+    function populateSearch(field, value) {
+      var queryElement = document.getElementById('query');
+      var toAppend = ` AND ${field}: ${value}`;
+      if (!queryElement.value.includes(toAppend)) {
+        queryElement.value+=toAppend;
+      } else {
+        queryElement.value = queryElement.value.replace(toAppend, "");
+      }
+      if (field == "src") {
+        document.getElementById("source").selectedIndex = 0;
+      }
+      htmx.trigger("#search", "click");
+    }
+  </script>
   <div>
     <form method="POST" hx-post="{% url 'search_drilldown' %}"
     hx-trigger="change"
@@ -18,7 +33,7 @@
               hx-post="{% url 'search_drilldown' %}"
               hx-trigger="keyup changed delay:200ms"
               hx-target="#results"
-              hx-swap="innerHTML" name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
+              hx-swap="innerHTML" id="query" name="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>
@@ -26,6 +41,7 @@
             <div class="control">
               <div class="field">
                 <button
+                  id="search"
                   class="button is-info is-fullwidth"
                   hx-post="{% url 'search_drilldown' %}"
                   hx-trigger="click"
@@ -77,7 +93,7 @@
           <div class="field has-addons">
             <div class="control has-icons-left">
               <span class="select">
-                <select name="source">
+                <select id="source" name="source">
                   <option selected value="all">All</option>
                   <option value="irc">IRC</option>
                   <option value="dis">Discord</option>
diff --git a/core/templates/ui/drilldown/results.html b/core/templates/ui/drilldown/results.html
index d31648f..2b8ece7 100644
--- a/core/templates/ui/drilldown/results.html
+++ b/core/templates/ui/drilldown/results.html
@@ -64,55 +64,66 @@
               <tr>
             {% endif %}
               <td>
-                {% if item.src == 'irc' %}
-                  <span class="icon" data-tooltip="IRC">
-                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
-                  </span>
-                {% elif item.src == 'dis' %}
-                  <span class="icon" data-tooltip="Discord">
-                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
-                  </span>
-                {% endif %}
+                <a class="has-text-link is-underlined"
+                  onclick="populateSearch('src', '{{ item.src }}')">
+                  {% if item.src == 'irc' %}
+                    <span class="icon" data-tooltip="IRC">
+                      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                    </span>
+                  {% elif item.src == 'dis' %}
+                    <span class="icon" data-tooltip="Discord">
+                      <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                    </span>
+                  {% endif %}
+                </a>
               </td>
               <td>
-                {% if item.type == 'msg' %}
-                  <span class="icon" data-tooltip="Message">
-                    <i class="fa-solid fa-message"></i>
-                  </span>
-                {% elif item.type == 'join' %}
-                  <span class="icon" data-tooltip="Join">
-                    <i class="fa-solid fa-person-to-portal"></i>
-                  </span>
-                {% elif item.type == 'part' %}
-                  <span class="icon" data-tooltip="Part">
-                    <i class="fa-solid fa-person-from-portal"></i>
-                  </span>
-                {% elif item.type == 'quit' %}
-                  <span class="icon" data-tooltip="Quit">
-                    <i class="fa-solid fa-circle-xmark"></i>
-                  </span>
-                {% elif item.type == 'kick' %}
-                  <span class="icon" data-tooltip="Kick">
-                    <i class="fa-solid fa-user-slash"></i>
-                  </span>
-                {% elif item.type == 'nick' %}
-                  <span class="icon" data-tooltip="Nick">
-                    <i class="fa-solid fa-signature"></i>
-                  </span>
-                {% elif item.type == 'mode' %}
-                  <span class="icon" data-tooltip="Mode">
-                    <i class="fa-solid fa-gear"></i>
-                  </span>
-                {% else %}
-                  {{ item.type }}
-                {% endif %}
+                <a class="has-text-link is-underlined"
+                  onclick="populateSearch('type', '{{ item.type }}')">
+                  {% if item.type == 'msg' %}
+                    <span class="icon" data-tooltip="Message">
+                      <i class="fa-solid fa-message"></i>
+                    </span>
+                  {% elif item.type == 'join' %}
+                    <span class="icon" data-tooltip="Join">
+                      <i class="fa-solid fa-person-to-portal"></i>
+                    </span>
+                  {% elif item.type == 'part' %}
+                    <span class="icon" data-tooltip="Part">
+                      <i class="fa-solid fa-person-from-portal"></i>
+                    </span>
+                  {% elif item.type == 'quit' %}
+                    <span class="icon" data-tooltip="Quit">
+                      <i class="fa-solid fa-circle-xmark"></i>
+                    </span>
+                  {% elif item.type == 'kick' %}
+                    <span class="icon" data-tooltip="Kick">
+                      <i class="fa-solid fa-user-slash"></i>
+                    </span>
+                  {% elif item.type == 'nick' %}
+                    <span class="icon" data-tooltip="Nick">
+                      <i class="fa-solid fa-signature"></i>
+                    </span>
+                  {% elif item.type == 'mode' %}
+                    <span class="icon" data-tooltip="Mode">
+                      <i class="fa-solid fa-gear"></i>
+                    </span>
+                  {% else %}
+                    {{ item.type }}
+                  {% endif %}
+                </a>
               </td>
               <td>
                 <p>{{ item.date }}</p>
                 <p>{{ item.time }}</p>
               </td>
               <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
-              <td>{{ item.host }}</td>
+              <td>
+                <a class="has-text-link is-underlined"
+                  onclick="populateSearch('host', '{{ item.host }}')">
+                  {{ item.host }}
+                </a>
+              </td>
               <td>
                 <div class="nowrap-parent">
                   <div class="nowrap-child">
@@ -130,9 +141,9 @@
                       </span>
                     {% endif %}
                   </div>
-                  <div class="nowrap-child">
+                  <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick }}')">
                     {{ item.nick }}
-                  </div>
+                  </a>
                     {% if item.num_chans is not None %}
                     <div class="nowrap-child">
                       <span class="tag">
@@ -157,9 +168,10 @@
               </td>
               <td>
                 <div class="nowrap-parent">
-                  <div class="nowrap-child">
+                  <a class="nowrap-child has-text-link is-underlined"
+                    onclick="populateSearch('channel', '{{ item.channel }}')">
                     {{ item.channel }}
-                  </div>
+                  </a>
                   {% if item.num_users is not None %}
                     <div class="nowrap-child">
                       <span class="tag">
@@ -169,7 +181,12 @@
                   {% endif %}
                 </div>
               </td>
-              <td>{{ item.net }}</td>
+              <td>
+                <a class="has-text-link is-underlined"
+                  onclick="populateSearch('net', '{{ item.net }}')">
+                  {{ item.net }}
+                </a>
+              </td>
             </tr>
           {% endfor %}
         </tbody>