You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
4.2 KiB
HTML
151 lines
4.2 KiB
HTML
{% 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 }}"}'
|
|
hx-get="{% url 'threshold_irc_network_info' net %}"
|
|
hx-trigger="load, every 60s"
|
|
hx-target="#info"
|
|
hx-swap="outerHTML">
|
|
</div>
|
|
|
|
<div
|
|
style="display: none;"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{% url 'threshold_irc_network_relays' net %}"
|
|
hx-trigger="load, every 60s"
|
|
hx-target="#relays"
|
|
{# hx-swap="innerHTML" #}
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
style="display: none;"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{% url 'threshold_irc_network_channels' net %}"
|
|
hx-trigger="load, every 60s"
|
|
hx-target="#channels"
|
|
hx-swap="outerHTML">
|
|
</div>
|
|
|
|
<div
|
|
style="display: none;"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{% url 'threshold_irc_network_actions' net %}"
|
|
hx-trigger="load"
|
|
hx-target="#actions"
|
|
hx-swap="outerHTML">
|
|
</div>
|
|
|
|
|
|
<div
|
|
style="display: none;"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{% url 'threshold_irc_network_list' net %}"
|
|
hx-trigger="load"
|
|
hx-target="#stats"
|
|
hx-swap="outerHTML">
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="box">
|
|
<div id="info">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <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>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="box">
|
|
<div id="channels">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="box">
|
|
<div id="stats">
|
|
Stats here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
{# This is the only thing included without HTMX because it isn't interactive #}
|
|
{# It needs no dynamic message element because it posts messages to chanels #}
|
|
<div class="box">
|
|
<form method="POST">
|
|
<div class="field has-addons">
|
|
<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 class="control">
|
|
<button
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
class="button is-info 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 class="column">
|
|
<div class="box">
|
|
<div id="actions">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="modals-here">
|
|
</div>
|
|
{% endblock %}
|