Implement more UI elements

core/templates/ui/drilldown.html

@@ -2,6 +2,38 @@
 {% load static %}
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script>
+    function initTabs() {
+    TABS.forEach((tab) => {
+      tab.addEventListener('click', (e) => {
+        let selected = tab.getAttribute('data-tab');
+        updateActiveTab(tab);
+        updateActiveContent(selected);
+      })
+    })
+  }
+
+  function updateActiveTab(selected) {
+    TABS.forEach((tab) => {
+      if (tab && tab.classList.contains(ACTIVE_CLASS)) {
+        tab.classList.remove(ACTIVE_CLASS);
+      }
+    });
+    selected.classList.add(ACTIVE_CLASS);
+  }
+
+  function updateActiveContent(selected) {
+    CONTENT.forEach((item) => {
+      if (item && item.classList.contains(ACTIVE_CLASS)) {
+        item.classList.remove(ACTIVE_CLASS);
+      }
+      let data = item.getAttribute('data-content');
+      if (data === selected) {
+        item.classList.add(ACTIVE_CLASS);
+      }
+    });
+  }
+  </script>
   <div class="box">
     <form method="POST">
       {% csrf_token %}
@@ -10,7 +42,7 @@
         <div class="field-body">
           <div class="field">
             <div class="control is-expanded has-icons-left">
-              <input name="query" class="input" type="text" placeholder="Query">
+              <input 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>

core/templates/ui/results.html

@@ -9,14 +9,21 @@
       <script src="{% static 'chart.js' %}"></script>
     </div>
     <div class="box">
+      <span class="tag is-success">Online</span>
+      <span class="tag is-danger">Offline</span>
+      <span class="tag is-warning">Unknown</span>
+      IRC: <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+      Discord: <i class="fa-brands fa-discord" aria-hidden="true"></i>
       <div class="table-container">
         <table class="table is-striped is-hoverable is-fullwidth">
           <thead>
             <tr>
+              <th>src</th>
               <th>TS</th>
               <th>msg</th>
               <th>host</th>
               <th>nick</th>
+              <th>actions</th>
               <th>channel</th>
               <th>net</th>
             </tr>
@@ -25,10 +32,43 @@
           <tbody>
             {% for item in results %}
               <tr>
-                <td>{{ item.ts }}</td>
+                <td>
+                  {% if item.src == 'irc' %}
+                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                  {% elif item.src == 'dis' %}
+                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                  {% endif %}
+                </td>
+                <td>
+                  <p>{{ item.date }}</p>
+                  <p>{{ item.time }}</p>
+                </td>
                 <td>{{ item.msg }}</td>
                 <td>{{ item.host }}</td>
-                <td>{{ item.nick }}</td>
+                <td>
+                  {% if item.online is True %}
+                    <span class="tag is-success">{{ item.nick }}</span>
+                  {% elif item.online is False %}
+                    <span class="tag is-danger">{{ item.nick }}</span>
+                  {% else %}
+                    <span class="tag is-warning">{{ item.nick }}</span>
+                  {% endif %}
+                </td>
+                <td>
+                  {% if item.src == 'irc' %}
+                    <button
+                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                      hx-post="{% url 'modal_info' %}"
+                      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
+                      hx-target="#modals-here" 
+                      hx-trigger="click"
+                      class="btn btn-primary"
+                      _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
+                        Information
+                    </button>
+                    <div id="modals-here"></div>
+                  {% endif %}
+                </td>
                 <td>{{ item.channel }}</td>
                 <td>{{ item.net }}</td>
               </tr>