From 67afe92195c24232f437700ee24ebb683c84a5ce Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Sun, 14 Aug 2022 11:01:09 +0100
Subject: [PATCH] Theme network page headers and add active network status

---
 core/templates/base.html                      |   5 +-
 .../manage/threshold/irc/network/network.html |   6 +-
 .../manage/threshold/irc/network/relays.html  | 137 ++++++++++--------
 .../threshold/irc/overview/networks.html      |  42 ++++--
 4 files changed, 110 insertions(+), 80 deletions(-)

diff --git a/core/templates/base.html b/core/templates/base.html
index 002be11..e953ae4 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -81,15 +81,16 @@
         transition: opacity 500ms ease-in;
       }
       .htmx-request .htmx-indicator{
-          opacity:1
+        opacity:1
       }
       .htmx-request.htmx-indicator{
-          opacity:1
+        opacity:1
       }
       .dropdown-content {
         height: 20em;
         overflow: auto;
       }
+
       /* @media screen and (min-width: 500px) {
         .datetimepicker-wrapper {
           position: absolute;
diff --git a/core/templates/manage/threshold/irc/network/network.html b/core/templates/manage/threshold/irc/network/network.html
index 434ab5d..6882c27 100644
--- a/core/templates/manage/threshold/irc/network/network.html
+++ b/core/templates/manage/threshold/irc/network/network.html
@@ -5,7 +5,7 @@
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-get="{% url 'threshold_irc_network_info' net %}"
-    hx-trigger="load, every 5s"
+    hx-trigger="load, every 60s"
     hx-target="#info"
     hx-swap="outerHTML">
   </div>
@@ -14,7 +14,7 @@
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-get="{% url 'threshold_irc_network_relays' net %}"
-    hx-trigger="load, every 5s"
+    hx-trigger="load, every 60s"
     hx-target="#relays"
     hx-swap="outerHTML">
   </div>
@@ -23,7 +23,7 @@
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-get="{% url 'threshold_irc_network_channels' net %}"
-    hx-trigger="load, every 5s"
+    hx-trigger="load, every 60s"
     hx-target="#channels"
     hx-swap="outerHTML">
   </div>
diff --git a/core/templates/manage/threshold/irc/network/relays.html b/core/templates/manage/threshold/irc/network/relays.html
index e75066b..84d3d88 100644
--- a/core/templates/manage/threshold/irc/network/relays.html
+++ b/core/templates/manage/threshold/irc/network/relays.html
@@ -7,23 +7,39 @@
         <table class="table is-fullwidth is-hoverable">
           <thead>
             <th>id</th>
-            <th>reg</th>
-            <th>au</th>
-            <th>co</th>
-            <th>on</th>
             <th>
-              <span class="icon">
+              <span class="icon has-tooltip-bottom" data-tooltip="Registered">
+                <i class="fa-solid fa-seal"></i>
+              </span>
+            </th>
+            <th>
+              <span class="icon has-tooltip-bottom" data-tooltip="Authenticated">
+                <i class="fa-solid fa-passport"></i>
+              </span>
+            </th>
+            <th>
+              <span class="icon has-tooltip-bottom" data-tooltip="Connected">
+                <i class="fa-solid fa-cloud-question"></i>
+              </span>
+            </th>
+            <th>
+              <span class="icon has-tooltip-bottom" data-tooltip="Enabled">
+                <i class="fa-solid fa-toggle-on"></i>
+              </span>
+            </th>
+            <th>
+              <span class="icon has-tooltip-bottom" data-tooltip="Channels">
                 <i class="fa-solid fa-hashtag"></i>
               </span>
             </th>
             <th>
-              <span class="icon">
+              <span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
                 <i class="fa-solid fa-list-ol"></i>
               </span>
             </th>
             <th>nick</th>
             <th>
-              <span class="icon">
+              <span class="icon has-tooltip-bottom" data-tooltip="Actions">
                 <i class="fa-solid fa-wrench" aria-hidden="true"></i>
               </span>
             </th>
@@ -84,71 +100,68 @@
                   {{ relay.nick }}
                 </td>
                 <td>
-                  <div class="buttons">
-                    <div class="nowrap-parent">
-                      <div class="nowrap-child">
-                        {% if relay.enabled %}
-                          <button
-                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                            hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
-                            hx-target="#relays"
-                            hx-swap="outerHTML"
-                            class="button is-danger">
-                            <span class="icon" data-tooltip="Disable">
-                              <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
-                            </span>
-                          </button>
-                        {% else %}
-                          <button
-                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                            hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
-                            hx-target="#relays"
-                            hx-swap="outerHTML"
-                            class="button is-success">
-                            <span class="icon" data-tooltip="Enable">
-                              <i class="fa-solid fa-wifi" aria-hidden="true"></i>
-                            </span>
-                          </button>
-                        {% endif %}
-                      </div>
-                      <div class="nowrap-child">
-                        <button
+                  <div class="nowrap-parent">
+                    <div class="nowrap-child">
+                      {% if relay.enabled %}
+                        <a
                           hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                          hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
+                          hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
                           hx-target="#relays"
                           hx-swap="outerHTML"
-                          class="button is-danger">
-                          <span class="icon" data-tooltip="Delete">
-                            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                          class="button has-background-warning">
+                          <span class="icon" data-tooltip="Disable">
+                            <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
                           </span>
-                        </button>
-                      </div>
-                      <div class="nowrap-child">
-                        <button
+                        </a>
+                      {% else %}
+                        <a
                           hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                          hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
+                          hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
                           hx-target="#relays"
                           hx-swap="outerHTML"
-                          class="button is-info">
-                          <span class="icon" data-tooltip="Provision">
-                            <i class="fa-solid fa-wrench" aria-hidden="true"></i>
+                          class="button has-background-success has-text-white">
+                          <span class="icon" data-tooltip="Enable">
+                            <i class="fa-solid fa-wifi" aria-hidden="true"></i>
                           </span>
-                        </button>
-                      </div>
-                      <div class="nowrap-child">
-                        <button
-                          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                          hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
-                          hx-target="#relays"
-                          hx-swap="outerHTML"
-                          class="button is-info">
-                          <span class="icon" data-tooltip="Enable authentication">
-                            <i class="fa-solid fa-passport" aria-hidden="true"></i>
-                          </span>
-                        </button>
-                      </div>
+                        </a>
+                      {% endif %}
+                      <a
+                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                        hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
+                        hx-target="#relays"
+                        hx-swap="outerHTML"
+                        class="button has-background-danger has-text-white">
+                        <span class="icon" data-tooltip="Delete">
+                          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="nowrap-parent">
+                    <div class="nowrap-child">
+                      <a
+                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                        hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
+                        hx-target="#relays"
+                        hx-swap="outerHTML"
+                        class="button has-background-info has-text-white">
+                        <span class="icon" data-tooltip="Provision">
+                          <i class="fa-solid fa-wrench" aria-hidden="true"></i>
+                        </span>
+                      </a>
+                      <a
+                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                        hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
+                        hx-target="#relays"
+                        hx-swap="outerHTML"
+                        class="button has-background-info has-text-white">
+                        <span class="icon" data-tooltip="Enable authentication">
+                          <i class="fa-solid fa-passport" aria-hidden="true"></i>
+                        </span>
+                      </a>
                     </div>
                   </div>
+
                 </td>
               </tr>
             {% endfor %}
diff --git a/core/templates/manage/threshold/irc/overview/networks.html b/core/templates/manage/threshold/irc/overview/networks.html
index cb737ca..9d9febc 100644
--- a/core/templates/manage/threshold/irc/overview/networks.html
+++ b/core/templates/manage/threshold/irc/overview/networks.html
@@ -4,15 +4,28 @@
     <table class="table is-fullwidth is-hoverable">
       <thead>
         <th>net</th>
-        <th>relays</th>
         <th>
-          <span class="icon">
+          <span class="icon has-tooltip-bottom" data-tooltip="Relays">
+            <i class="fa-brands fa-unity"></i>
+          </span>
+        </th>
+        <th>
+          <span class="icon has-tooltip-bottom" data-tooltip="Active">
+            <i class="fa-solid fa-signal-bars-good"></i>
+          </span>
+        </th>
+        <th>
+          <span class="icon has-tooltip-bottom" data-tooltip="Channels">
             <i class="fa-solid fa-hashtag"></i>
           </span>
         </th>
-        <th>records</th>
         <th>
-          <span class="icon">
+          <span class="icon has-tooltip-bottom" data-tooltip="Records">
+            <i class="fa-solid fa-album"></i>
+          </span>
+        </th>
+        <th>
+          <span class="icon has-tooltip-bottom" data-tooltip="Actions">
             <i class="fa-solid fa-wrench" aria-hidden="true"></i>
           </span>
         </th>
@@ -22,21 +35,24 @@
           <th><a href="{% url 'threshold_irc_network' key %}">{{ key }}</a></th>
           <td>
             
-            <span class="icon">
-              <i class="fa-brands fa-unity"></i>
-            </span>
+
             {{ net.relays }}
           </td>
           <td>
-            <span class="icon">
-              <i class="fa-solid fa-hashtag"></i>
-            </span>
+            {% if net.active %}
+              <span class="icon has-text-success">
+                <i class="fa-solid fa-check" aria-hidden="true"></i>
+              </span>
+            {% else %}
+              <span class="icon has-text-danger">
+                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+              </span>
+            {% endif %}
+          </td>
+          <td>
             {{ net.channels }}
           </td>
           <td>
-            <span class="icon">
-              <i class="fa-solid fa-album"></i>
-            </span>
             {{ net.records }}
           </td>
           <td>