Implement relay scroll restore

master
Mark Veidemanis 2 years ago
parent fbd933f6c6
commit 850d00de19
Signed by: m
GPG Key ID: 5ACFCEED46C0904F

@ -1,6 +1,28 @@
{% extends "base.html" %}
{% 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
style="display: none;"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
@ -16,7 +38,8 @@
hx-get="{% url 'threshold_irc_network_relays' net %}"
hx-trigger="load, every 60s"
hx-target="#relays"
hx-swap="outerHTML">
{# hx-swap="innerHTML" #}
>
</div>
<div
@ -54,11 +77,21 @@
</div>
</div>
</div>
<div class="column">
<!-- <div class="column">
<div class="box">
<div id="relays">
</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>

@ -1,222 +1,221 @@
{% load index %}
<div id="relays">
{% if relays is not None %}
<div class="content" style="max-height: 30em; overflow: auto;">
<div class="table-container">
<table class="table is-fullwidth is-hoverable relays-table">
<thead>
<th>id</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Registered">
<i class="fa-solid fa-seal"></i>
<div class="table-container relay_table_container" id="relays">
<table class="table is-fullwidth is-hoverable relays-table">
<thead>
<th>id</th>
<th>
<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 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>
</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Authenticated">
<i class="fa-solid fa-passport"></i>
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Connected">
<i class="fa-solid fa-cloud-question"></i>
{% endif %}
</td>
<td>
{% if relay.authed %}
<span class="icon has-text-success">
<i class="fa-solid fa-check" aria-hidden="true"></i>
</span>
</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Enabled">
<i class="fa-solid fa-toggle-on"></i>
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Channels">
<i class="fa-solid fa-hashtag"></i>
{% endif %}
</td>
<td>
{% if relay.conn %}
<span class="icon has-text-success">
<i class="fa-solid fa-check" aria-hidden="true"></i>
</span>
</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Chanlimit">
<i class="fa-solid fa-list-ol"></i>
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
</th>
<th>nick</th>
<th>
<span class="icon has-tooltip-bottom" data-tooltip="Actions">
<i class="fa-solid fa-wrench"></i>
{% endif %}
</td>
<td>
{% if relay.enabled %}
<span class="icon has-text-success">
<i class="fa-solid fa-check" aria-hidden="true"></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>
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
{% endif %}
</td>
<td>
{% if relay.authed %}
<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>
{% if relay.conn %}
<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>
{% if relay.enabled %}
<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>
{{ relay.chans }}
</td>
<td>{{ relay.limit }}</td>
<td>
{{ relay.nick }}
</td>
<td>
<a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'modal_context' %}"
hx-vals='{"net": "{{ net }}",
"num": "{{ relay.id }}",
"src": "irc",
"channel": "*status",
"time": "None",
"date": "None",
"index": "int",
"type": "znc",
"mtype": "None",
"nick": "*status",
"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="ZNC context">
<i class="fa-brands fa-unity" aria-hidden="true"></i>
</span>
</a>
</td>
</tr>
<tr>
<td>
<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 is-small has-background-danger has-text-white">
<span class="icon" data-tooltip="Delete">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
</a>
</td>
<td>
<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 is-small has-background-info has-text-white">
<span class="icon" data-tooltip="Provision">
<i class="fa-solid fa-wrench" aria-hidden="true"></i>
</span>
</a>
</td>
<td>
<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 is-small 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>
</td>
<td></td>
<td>
{% if relay.enabled %}
<a
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-small has-background-warning">
<span class="icon" data-tooltip="Disable">
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
</span>
</a>
{% else %}
<a
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-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 %}
{% else %}
<span class="icon has-text-danger">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
{% endif %}
</td>
<td>
{{ relay.chans }}
</td>
<td>{{ relay.limit }}</td>
<td>
{{ relay.nick }}
</td>
<td>
<a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'modal_context' %}"
hx-vals='{"net": "{{ net }}",
"num": "{{ relay.id }}",
"src": "irc",
"channel": "*status",
"time": "None",
"date": "None",
"index": "int",
"type": "znc",
"mtype": "None",
"nick": "*status",
"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="ZNC context">
<i class="fa-brands fa-unity" aria-hidden="true"></i>
</span>
</a>
</td>
</tr>
<tr>
<td>
<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 is-small has-background-danger has-text-white">
<span class="icon" data-tooltip="Delete">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</span>
</a>
</td>
<td>
<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 is-small has-background-info has-text-white">
<span class="icon" data-tooltip="Provision">
<i class="fa-solid fa-wrench" aria-hidden="true"></i>
</span>
</a>
</td>
<td>
<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 is-small 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>
</td>
<td></td>
<td>
{% if relay.enabled %}
<a
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-small has-background-warning">
<span class="icon" data-tooltip="Disable">
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
</span>
</a>
{% else %}
<a
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-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>
<script>
var modal_event = new Event('restore-relay-scroll');
document.dispatchEvent(modal_event);
</script>
{% include 'manage/threshold/partials/notify.html' %}
</div>
Loading…
Cancel
Save