Implement joining and parting channels

core/templates/manage/threshold/irc/network/channels.html

@@ -1,8 +1,17 @@
 <div id="channels">
+  {% if message is not None %}
+    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
+      {{ message }}
+    </div>
+  {% endif %}
   {% if channels is not None %}
     <div class="content" style="max-height: 30em; overflow: auto;">
       <div class="table-container">
         <table class="table is-fullwidth is-hoverable">
+          <thead>
+            <th>channel</th>
+            <th>actions</th>
+          </thead>
           <tbody>
             {% for channel, info in channels.items %}
               <tr>
@@ -12,6 +21,18 @@
                     {{ info }}
                   </span>
                 </td>
+                <td>
+                  <button
+                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                    hx-delete="{% url 'threshold_irc_network_channel' net channel %}"
+                    hx-target="#channels"
+                    hx-swap="outerHTML"
+                    class="button is-danger is-small">
+                    <span class="icon" data-tooltip="Part">
+                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                </td>
               </tr>
             {% endfor %}
           </tbody>

core/templates/manage/threshold/irc/network/network.html

@@ -5,7 +5,7 @@
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-post="{% url 'threshold_irc_network_info' net %}"
-    hx-trigger="load"
+    hx-trigger="load, every 5s"
     hx-target="#info"
     hx-swap="outerHTML">
   </div>
@@ -13,8 +13,8 @@
   <div
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-    hx-post="{% url 'threshold_irc_network_relays' net %}"
-    hx-trigger="load"
+    hx-get="{% url 'threshold_irc_network_relays' net %}"
+    hx-trigger="load, every 5s"
     hx-target="#relays"
     hx-swap="outerHTML">
   </div>
@@ -23,7 +23,7 @@
     style="display: none;"
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-post="{% url 'threshold_irc_network_channels' net %}"
-    hx-trigger="load"
+    hx-trigger="load, every 5s"
     hx-target="#channels"
     hx-swap="outerHTML">
   </div>
@@ -57,4 +57,37 @@
       </div>
     </div>
   </div>
+  <div class="columns">
+    <div class="column is-half">
+      <div class="box">
+        <form method="POST">
+          <div class="field">
+            <div class="field-body">
+              <div class="field">
+                <div class="control is-expanded has-icons-left">
+                  <input id="query" name="channel" class="input" type="text" placeholder="channel">
+                  <span class="icon is-small is-left">
+                    <i class="fa-solid fa-hashtag"></i>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <button
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                class="button is-primary is-fullwidth"
+                hx-put="{% url 'threshold_irc_network_channel' net %}"
+                hx-trigger="click"
+                hx-target="#channels"
+                hx-swap="outerHTML">
+                Join
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 {% endblock %}

core/templates/manage/threshold/irc/network/relays.html

@@ -1,4 +1,10 @@
+{% load index %}
 <div id="relays">
+  {% if message is not None %}
+    <div class="notification is-{{ class }}" hx-ext="remove-me" remove-me="3s">
+      {{ message }}
+    </div>
+  {% endif %}
   {% if relays is not None %}
     <div class="content" style="max-height: 30em; overflow: auto;">
       <div class="table-container">
@@ -34,10 +40,30 @@
                     <span class="icon">
                       <i class="fa-solid fa-check" aria-hidden="true"></i>
                     </span>
+                    <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 is-small">
+                      <span class="icon" data-tooltip="Disable">
+                        <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
+                      </span>
+                    </button>
                   {% else %}
                     <span class="icon">
                       <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                     </span>
+                    <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 is-small">
+                      <span class="icon" data-tooltip="Enable">
+                        <i class="fa-solid fa-wifi" aria-hidden="true"></i>
+                      </span>
+                    </button>
                   {% endif %}
                 </td>
                 <td>