Theme network page headers and add active network status

This commit is contained in:
Mark Veidemanis 2022-08-14 11:01:09 +01:00
parent 69b4cb8865
commit 67afe92195
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
4 changed files with 110 additions and 80 deletions

View File

@ -90,6 +90,7 @@
height: 20em; height: 20em;
overflow: auto; overflow: auto;
} }
/* @media screen and (min-width: 500px) { /* @media screen and (min-width: 500px) {
.datetimepicker-wrapper { .datetimepicker-wrapper {
position: absolute; position: absolute;

View File

@ -5,7 +5,7 @@
style="display: none;" style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_info' net %}" hx-get="{% url 'threshold_irc_network_info' net %}"
hx-trigger="load, every 5s" hx-trigger="load, every 60s"
hx-target="#info" hx-target="#info"
hx-swap="outerHTML"> hx-swap="outerHTML">
</div> </div>
@ -14,7 +14,7 @@
style="display: none;" style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_relays' net %}" hx-get="{% url 'threshold_irc_network_relays' net %}"
hx-trigger="load, every 5s" hx-trigger="load, every 60s"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML"> hx-swap="outerHTML">
</div> </div>
@ -23,7 +23,7 @@
style="display: none;" style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_channels' net %}" hx-get="{% url 'threshold_irc_network_channels' net %}"
hx-trigger="load, every 5s" hx-trigger="load, every 60s"
hx-target="#channels" hx-target="#channels"
hx-swap="outerHTML"> hx-swap="outerHTML">
</div> </div>

View File

@ -7,23 +7,39 @@
<table class="table is-fullwidth is-hoverable"> <table class="table is-fullwidth is-hoverable">
<thead> <thead>
<th>id</th> <th>id</th>
<th>reg</th>
<th>au</th>
<th>co</th>
<th>on</th>
<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> <i class="fa-solid fa-hashtag"></i>
</span> </span>
</th> </th>
<th> <th>
<span class="icon"> <span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
<i class="fa-solid fa-list-ol"></i> <i class="fa-solid fa-list-ol"></i>
</span> </span>
</th> </th>
<th>nick</th> <th>nick</th>
<th> <th>
<span class="icon"> <span class="icon has-tooltip-bottom" data-tooltip="Actions">
<i class="fa-solid fa-wrench" aria-hidden="true"></i> <i class="fa-solid fa-wrench" aria-hidden="true"></i>
</span> </span>
</th> </th>
@ -84,71 +100,68 @@
{{ relay.nick }} {{ relay.nick }}
</td> </td>
<td> <td>
<div class="buttons">
<div class="nowrap-parent"> <div class="nowrap-parent">
<div class="nowrap-child"> <div class="nowrap-child">
{% if relay.enabled %} {% if relay.enabled %}
<button <a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}" hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML" hx-swap="outerHTML"
class="button is-danger"> class="button has-background-warning">
<span class="icon" data-tooltip="Disable"> <span class="icon" data-tooltip="Disable">
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i> <i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
</span> </span>
</button> </a>
{% else %} {% else %}
<button <a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}" hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML" hx-swap="outerHTML"
class="button is-success"> class="button has-background-success has-text-white">
<span class="icon" data-tooltip="Enable"> <span class="icon" data-tooltip="Enable">
<i class="fa-solid fa-wifi" aria-hidden="true"></i> <i class="fa-solid fa-wifi" aria-hidden="true"></i>
</span> </span>
</button> </a>
{% endif %} {% endif %}
</div> <a
<div class="nowrap-child">
<button
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}" hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML" hx-swap="outerHTML"
class="button is-danger"> class="button has-background-danger has-text-white">
<span class="icon" data-tooltip="Delete"> <span class="icon" data-tooltip="Delete">
<i class="fa-solid fa-xmark" aria-hidden="true"></i> <i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span> </span>
</button> </a>
</div> </div>
</div>
<div class="nowrap-parent">
<div class="nowrap-child"> <div class="nowrap-child">
<button <a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}" hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML" hx-swap="outerHTML"
class="button is-info"> class="button has-background-info has-text-white">
<span class="icon" data-tooltip="Provision"> <span class="icon" data-tooltip="Provision">
<i class="fa-solid fa-wrench" aria-hidden="true"></i> <i class="fa-solid fa-wrench" aria-hidden="true"></i>
</span> </span>
</button> </a>
</div> <a
<div class="nowrap-child">
<button
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}" hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
hx-target="#relays" hx-target="#relays"
hx-swap="outerHTML" hx-swap="outerHTML"
class="button is-info"> class="button has-background-info has-text-white">
<span class="icon" data-tooltip="Enable authentication"> <span class="icon" data-tooltip="Enable authentication">
<i class="fa-solid fa-passport" aria-hidden="true"></i> <i class="fa-solid fa-passport" aria-hidden="true"></i>
</span> </span>
</button> </a>
</div>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}

View File

@ -4,15 +4,28 @@
<table class="table is-fullwidth is-hoverable"> <table class="table is-fullwidth is-hoverable">
<thead> <thead>
<th>net</th> <th>net</th>
<th>relays</th>
<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> <i class="fa-solid fa-hashtag"></i>
</span> </span>
</th> </th>
<th>records</th>
<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> <i class="fa-solid fa-wrench" aria-hidden="true"></i>
</span> </span>
</th> </th>
@ -22,21 +35,24 @@
<th><a href="{% url 'threshold_irc_network' key %}">{{ key }}</a></th> <th><a href="{% url 'threshold_irc_network' key %}">{{ key }}</a></th>
<td> <td>
<span class="icon">
<i class="fa-brands fa-unity"></i>
</span>
{{ net.relays }} {{ net.relays }}
</td> </td>
<td> <td>
<span class="icon"> {% if net.active %}
<i class="fa-solid fa-hashtag"></i> <span class="icon has-text-success">
<i class="fa-solid fa-check" aria-hidden="true"></i>
</span> </span>
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
{% endif %}
</td>
<td>
{{ net.channels }} {{ net.channels }}
</td> </td>
<td> <td>
<span class="icon">
<i class="fa-solid fa-album"></i>
</span>
{{ net.records }} {{ net.records }}
</td> </td>
<td> <td>