Implement relay scroll restore
This commit is contained in:
parent
fbd933f6c6
commit
850d00de19
GPG Key ID:
5ACFCEED46C0904F
|
|
@ -1,6 +1,28 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<script>
|
||||||
|
document.addEventListener("restore-relay-scroll", function(event) {
|
||||||
|
var modalContent = document.getElementsByClassName("relay_table_container")[0];
|
||||||
|
var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
|
||||||
|
var scrollpos = localStorage.getItem('scrollpos_relays_table');
|
||||||
|
if (scrollpos == 'BOTTOM') {
|
||||||
|
modalContent.scrollTop = maxScroll;
|
||||||
|
} else if (scrollpos) {
|
||||||
|
modalContent.scrollTop = scrollpos;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("htmx:beforeSwap", function(event) {
|
||||||
|
var modalContent = document.getElementsByClassName("relay_table_container")[0];
|
||||||
|
var scrollpos = modalContent.scrollTop;
|
||||||
|
if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
|
||||||
|
localStorage.setItem('scrollpos_relays_table', 'BOTTOM');
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('scrollpos_relays_table', scrollpos);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
<div
|
<div
|
||||||
style="display: none;"
|
style="display: none;"
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
|
|
@ -16,7 +38,8 @@
|
||||||
hx-get="{% url 'threshold_irc_network_relays' net %}"
|
hx-get="{% url 'threshold_irc_network_relays' net %}"
|
||||||
hx-trigger="load, every 60s"
|
hx-trigger="load, every 60s"
|
||||||
hx-target="#relays"
|
hx-target="#relays"
|
||||||
hx-swap="outerHTML">
|
{# hx-swap="innerHTML" #}
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -54,11 +77,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<!-- <div class="column">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div id="relays">
|
<div id="relays">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="column">
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<div class="content" style="max-height: 30em; overflow: auto;">
|
||||||
|
<div class="table-container relay_table_container" id="relays">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,222 +1,221 @@
|
||||||
{% load index %}
|
{% load index %}
|
||||||
<div id="relays">
|
|
||||||
{% if relays is not None %}
|
<div class="table-container relay_table_container" id="relays">
|
||||||
<div class="content" style="max-height: 30em; overflow: auto;">
|
<table class="table is-fullwidth is-hoverable relays-table">
|
||||||
<div class="table-container">
|
<thead>
|
||||||
<table class="table is-fullwidth is-hoverable relays-table">
|
<th>id</th>
|
||||||
<thead>
|
<th>
|
||||||
<th>id</th>
|
<span class="icon has-tooltip-bottom" data-tooltip="Registered">
|
||||||
<th>
|
<i class="fa-solid fa-seal"></i>
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Registered">
|
</span>
|
||||||
<i class="fa-solid fa-seal"></i>
|
</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 has-tooltip-bottom" data-tooltip="Chanlimit">
|
||||||
|
<i class="fa-solid fa-list-ol"></i>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th>nick</th>
|
||||||
|
<th>
|
||||||
|
<span class="icon has-tooltip-bottom" data-tooltip="Actions">
|
||||||
|
<i class="fa-solid fa-wrench"></i>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for relay in relays %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ relay.id }}</td>
|
||||||
|
<td>
|
||||||
|
{% if relay.registered %}
|
||||||
|
<span class="icon has-text-success">
|
||||||
|
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% else %}
|
||||||
<th>
|
<span class="icon has-text-danger">
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Authenticated">
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||||
<i class="fa-solid fa-passport"></i>
|
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% endif %}
|
||||||
<th>
|
</td>
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Connected">
|
<td>
|
||||||
<i class="fa-solid fa-cloud-question"></i>
|
{% if relay.authed %}
|
||||||
|
<span class="icon has-text-success">
|
||||||
|
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% else %}
|
||||||
<th>
|
<span class="icon has-text-danger">
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Enabled">
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||||
<i class="fa-solid fa-toggle-on"></i>
|
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% endif %}
|
||||||
<th>
|
</td>
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Channels">
|
<td>
|
||||||
<i class="fa-solid fa-hashtag"></i>
|
{% if relay.conn %}
|
||||||
|
<span class="icon has-text-success">
|
||||||
|
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% else %}
|
||||||
<th>
|
<span class="icon has-text-danger">
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||||
<i class="fa-solid fa-list-ol"></i>
|
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% endif %}
|
||||||
<th>nick</th>
|
</td>
|
||||||
<th>
|
<td>
|
||||||
<span class="icon has-tooltip-bottom" data-tooltip="Actions">
|
{% if relay.enabled %}
|
||||||
<i class="fa-solid fa-wrench"></i>
|
<span class="icon has-text-success">
|
||||||
|
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
{% else %}
|
||||||
</thead>
|
<span class="icon has-text-danger">
|
||||||
<tbody>
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||||
{% for relay in relays %}
|
</span>
|
||||||
<tr>
|
{% endif %}
|
||||||
<td>{{ relay.id }}</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{% if relay.registered %}
|
{{ relay.chans }}
|
||||||
<span class="icon has-text-success">
|
</td>
|
||||||
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
<td>{{ relay.limit }}</td>
|
||||||
</span>
|
<td>
|
||||||
{% else %}
|
{{ relay.nick }}
|
||||||
<span class="icon has-text-danger">
|
</td>
|
||||||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
<td>
|
||||||
</span>
|
<a
|
||||||
{% endif %}
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
</td>
|
hx-post="{% url 'modal_context' %}"
|
||||||
<td>
|
hx-vals='{"net": "{{ net }}",
|
||||||
{% if relay.authed %}
|
"num": "{{ relay.id }}",
|
||||||
<span class="icon has-text-success">
|
"src": "irc",
|
||||||
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
"channel": "*status",
|
||||||
</span>
|
"time": "None",
|
||||||
{% else %}
|
"date": "None",
|
||||||
<span class="icon has-text-danger">
|
"index": "int",
|
||||||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
"type": "znc",
|
||||||
</span>
|
"mtype": "None",
|
||||||
{% endif %}
|
"nick": "*status",
|
||||||
</td>
|
"dedup": "on"}'
|
||||||
<td>
|
hx-target="#modals-here"
|
||||||
{% if relay.conn %}
|
hx-trigger="click"
|
||||||
<span class="icon has-text-success">
|
class="button is-small has-background-info has-text-white">
|
||||||
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
<span class="icon has-tooltip-left" data-tooltip="ZNC context">
|
||||||
</span>
|
<i class="fa-brands fa-unity" aria-hidden="true"></i>
|
||||||
{% else %}
|
</span>
|
||||||
<span class="icon has-text-danger">
|
</a>
|
||||||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
</td>
|
||||||
</span>
|
</tr>
|
||||||
{% endif %}
|
<tr>
|
||||||
</td>
|
<td>
|
||||||
<td>
|
<a
|
||||||
{% if relay.enabled %}
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
<span class="icon has-text-success">
|
hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
|
||||||
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
hx-target="#relays"
|
||||||
</span>
|
hx-swap="outerHTML"
|
||||||
{% else %}
|
class="button is-small has-background-danger has-text-white">
|
||||||
<span class="icon has-text-danger">
|
<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>
|
||||||
{% endif %}
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{{ relay.chans }}
|
<a
|
||||||
</td>
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
<td>{{ relay.limit }}</td>
|
hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
|
||||||
<td>
|
hx-target="#relays"
|
||||||
{{ relay.nick }}
|
hx-swap="outerHTML"
|
||||||
</td>
|
class="button is-small has-background-info has-text-white">
|
||||||
<td>
|
<span class="icon" data-tooltip="Provision">
|
||||||
<a
|
<i class="fa-solid fa-wrench" aria-hidden="true"></i>
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
</span>
|
||||||
hx-post="{% url 'modal_context' %}"
|
</a>
|
||||||
hx-vals='{"net": "{{ net }}",
|
</td>
|
||||||
"num": "{{ relay.id }}",
|
<td>
|
||||||
"src": "irc",
|
<a
|
||||||
"channel": "*status",
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
"time": "None",
|
hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
|
||||||
"date": "None",
|
hx-target="#relays"
|
||||||
"index": "int",
|
hx-swap="outerHTML"
|
||||||
"type": "znc",
|
class="button is-small has-background-info has-text-white">
|
||||||
"mtype": "None",
|
<span class="icon" data-tooltip="Enable authentication">
|
||||||
"nick": "*status",
|
<i class="fa-solid fa-passport" aria-hidden="true"></i>
|
||||||
"dedup": "on"}'
|
</span>
|
||||||
hx-target="#modals-here"
|
</a>
|
||||||
hx-trigger="click"
|
</td>
|
||||||
class="button is-small has-background-info has-text-white">
|
<td></td>
|
||||||
<span class="icon has-tooltip-left" data-tooltip="ZNC context">
|
<td>
|
||||||
<i class="fa-brands fa-unity" aria-hidden="true"></i>
|
{% if relay.enabled %}
|
||||||
</span>
|
<a
|
||||||
</a>
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
</td>
|
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
|
||||||
</tr>
|
hx-target="#relays"
|
||||||
<tr>
|
hx-swap="outerHTML"
|
||||||
<td>
|
class="button is-small has-background-warning">
|
||||||
<a
|
<span class="icon" data-tooltip="Disable">
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
|
||||||
hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
|
</span>
|
||||||
hx-target="#relays"
|
</a>
|
||||||
hx-swap="outerHTML"
|
{% else %}
|
||||||
class="button is-small has-background-danger has-text-white">
|
<a
|
||||||
<span class="icon" data-tooltip="Delete">
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
|
||||||
</span>
|
hx-target="#relays"
|
||||||
</a>
|
hx-swap="outerHTML"
|
||||||
</td>
|
class="button is-small has-background-success has-text-white">
|
||||||
<td>
|
<span class="icon" data-tooltip="Enable">
|
||||||
<a
|
<i class="fa-solid fa-wifi" aria-hidden="true"></i>
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
</span>
|
||||||
hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
|
</a>
|
||||||
hx-target="#relays"
|
{% endif %}
|
||||||
hx-swap="outerHTML"
|
</td>
|
||||||
class="button is-small has-background-info has-text-white">
|
<td></td>
|
||||||
<span class="icon" data-tooltip="Provision">
|
<td></td>
|
||||||
<i class="fa-solid fa-wrench" aria-hidden="true"></i>
|
<td></td>
|
||||||
</span>
|
<td>
|
||||||
</a>
|
<a
|
||||||
</td>
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||||
<td>
|
hx-post="{% url 'modal_context' %}"
|
||||||
<a
|
hx-vals='{"net": "{{ net }}",
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
"num": "{{ relay.id }}",
|
||||||
hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
|
"src": "irc",
|
||||||
hx-target="#relays"
|
"channel": "{{ sinst.entity }}",
|
||||||
hx-swap="outerHTML"
|
"time": "None",
|
||||||
class="button is-small has-background-info has-text-white">
|
"date": "None",
|
||||||
<span class="icon" data-tooltip="Enable authentication">
|
"index": "int",
|
||||||
<i class="fa-solid fa-passport" aria-hidden="true"></i>
|
"type": "auth",
|
||||||
</span>
|
"mtype": "None",
|
||||||
</a>
|
"nick": "{{ sinst.entity }}",
|
||||||
</td>
|
"dedup": "on"}'
|
||||||
<td></td>
|
hx-target="#modals-here"
|
||||||
<td>
|
hx-trigger="click"
|
||||||
{% if relay.enabled %}
|
class="button is-small has-background-info has-text-white">
|
||||||
<a
|
<span class="icon has-tooltip-left" data-tooltip="Auth ({{ sinst.entity }})">
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
<i class="fa-solid fa-signature" aria-hidden="true"></i>
|
||||||
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
|
</span>
|
||||||
hx-target="#relays"
|
</a>
|
||||||
hx-swap="outerHTML"
|
</td>
|
||||||
class="button is-small has-background-warning">
|
</tr>
|
||||||
<span class="icon" data-tooltip="Disable">
|
{% endfor %}
|
||||||
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
|
</tbody>
|
||||||
</span>
|
</table>
|
||||||
</a>
|
<script>
|
||||||
{% else %}
|
var modal_event = new Event('restore-relay-scroll');
|
||||||
<a
|
document.dispatchEvent(modal_event);
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
</script>
|
||||||
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
|
|
||||||
hx-target="#relays"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
class="button is-small has-background-success has-text-white">
|
|
||||||
<span class="icon" data-tooltip="Enable">
|
|
||||||
<i class="fa-solid fa-wifi" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>
|
|
||||||
<a
|
|
||||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
||||||
hx-post="{% url 'modal_context' %}"
|
|
||||||
hx-vals='{"net": "{{ net }}",
|
|
||||||
"num": "{{ relay.id }}",
|
|
||||||
"src": "irc",
|
|
||||||
"channel": "{{ sinst.entity }}",
|
|
||||||
"time": "None",
|
|
||||||
"date": "None",
|
|
||||||
"index": "int",
|
|
||||||
"type": "auth",
|
|
||||||
"mtype": "None",
|
|
||||||
"nick": "{{ sinst.entity }}",
|
|
||||||
"dedup": "on"}'
|
|
||||||
hx-target="#modals-here"
|
|
||||||
hx-trigger="click"
|
|
||||||
class="button is-small has-background-info has-text-white">
|
|
||||||
<span class="icon has-tooltip-left" data-tooltip="Auth ({{ sinst.entity }})">
|
|
||||||
<i class="fa-solid fa-signature" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% include 'manage/threshold/partials/notify.html' %}
|
{% include 'manage/threshold/partials/notify.html' %}
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue