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

@ -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;

View File

@ -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>

View File

@ -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 %}

View File

@ -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>