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>