Dynamically update search query when elements are clicked

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>

core/templates/ui/drilldown/results.html

@@ -64,6 +64,8 @@
               <tr>
             {% endif %}
               <td>
+                <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>
@@ -73,8 +75,11 @@
                       <i class="fa-brands fa-discord" aria-hidden="true"></i>
                     </span>
                   {% endif %}
+                </a>
               </td>
               <td>
+                <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>
@@ -106,13 +111,19 @@
                   {% 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>