Implement more UI elements
This commit is contained in:
@@ -9,6 +9,7 @@
|
||||
<title>Pathogen - {{ request.path_info }}</title>
|
||||
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
|
||||
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" />
|
||||
<script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
|
||||
110
core/templates/modals/info.html
Normal file
110
core/templates/modals/info.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<script>
|
||||
var modal = document.querySelector('.modal'); // assuming you have only 1
|
||||
var html = document.querySelector('html');
|
||||
modal.querySelector('.modal-background').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
modal.classList.remove('is-active');
|
||||
html.classList.remove('is-clipped');
|
||||
});
|
||||
modal.querySelector('.modal-close').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
modal.classList.remove('is-active');
|
||||
html.classList.remove('is-clipped');
|
||||
});
|
||||
|
||||
var TABS = [...document.querySelectorAll('#tabs li')];
|
||||
var CONTENT = [...document.querySelectorAll('#tab-content div')];
|
||||
var ACTIVE_CLASS = 'is-active';
|
||||
initTabs();
|
||||
</script>
|
||||
<style>
|
||||
#tab-content div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tab-content div.is-active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<div class="modal is-active is-clipped">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<div class="tabs is-toggle is-fullwidth" id="tabs">
|
||||
<ul>
|
||||
<li class="is-active" data-tab="1">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa-solid fa-user"></i></span>
|
||||
<span>Channels</span>
|
||||
</a>
|
||||
</li>
|
||||
<li data-tab="2">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
|
||||
<span>Users</span>
|
||||
</a>
|
||||
</li>
|
||||
<li data-tab="3">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa-solid fa-people"></i></span>
|
||||
<span>Intersection</span>
|
||||
</a>
|
||||
</li>
|
||||
<li data-tab="4">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa-solid fa-hashtag"></i></span>
|
||||
<span>Intersection</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="tab-content">
|
||||
<div class="is-active" data-content="1">
|
||||
<h4 class="subtitle is-4">Channels {{ nick }} is on</h4>
|
||||
{% for channel in chans %}
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{ channel }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div data-content="2">
|
||||
<h4 class="subtitle is-4">Users on {{ channel }}</h4>
|
||||
{% for user in users %}
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa-solid fa-user" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{ user }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div data-content="3">
|
||||
<h4 class="subtitle is-4">Users sharing channels with {{ nick }}</h4>
|
||||
{% for user in inter_users %}
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa-solid fa-user" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{ user }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div data-content="4">
|
||||
<h4 class="subtitle is-4">Channels sharing users with {{ channel }}</h4>
|
||||
{% for channel in inter_chans %}
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||
</span>
|
||||
{{ channel }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,6 +2,38 @@
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
function initTabs() {
|
||||
TABS.forEach((tab) => {
|
||||
tab.addEventListener('click', (e) => {
|
||||
let selected = tab.getAttribute('data-tab');
|
||||
updateActiveTab(tab);
|
||||
updateActiveContent(selected);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function updateActiveTab(selected) {
|
||||
TABS.forEach((tab) => {
|
||||
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
|
||||
tab.classList.remove(ACTIVE_CLASS);
|
||||
}
|
||||
});
|
||||
selected.classList.add(ACTIVE_CLASS);
|
||||
}
|
||||
|
||||
function updateActiveContent(selected) {
|
||||
CONTENT.forEach((item) => {
|
||||
if (item && item.classList.contains(ACTIVE_CLASS)) {
|
||||
item.classList.remove(ACTIVE_CLASS);
|
||||
}
|
||||
let data = item.getAttribute('data-content');
|
||||
if (data === selected) {
|
||||
item.classList.add(ACTIVE_CLASS);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div class="box">
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
@@ -10,7 +42,7 @@
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input name="query" class="input" type="text" placeholder="Query">
|
||||
<input name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-magnifying-glass"></i>
|
||||
</span>
|
||||
|
||||
@@ -9,14 +9,21 @@
|
||||
<script src="{% static 'chart.js' %}"></script>
|
||||
</div>
|
||||
<div class="box">
|
||||
<span class="tag is-success">Online</span>
|
||||
<span class="tag is-danger">Offline</span>
|
||||
<span class="tag is-warning">Unknown</span>
|
||||
IRC: <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||
Discord: <i class="fa-brands fa-discord" aria-hidden="true"></i>
|
||||
<div class="table-container">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>src</th>
|
||||
<th>TS</th>
|
||||
<th>msg</th>
|
||||
<th>host</th>
|
||||
<th>nick</th>
|
||||
<th>actions</th>
|
||||
<th>channel</th>
|
||||
<th>net</th>
|
||||
</tr>
|
||||
@@ -25,10 +32,43 @@
|
||||
<tbody>
|
||||
{% for item in results %}
|
||||
<tr>
|
||||
<td>{{ item.ts }}</td>
|
||||
<td>
|
||||
{% if item.src == 'irc' %}
|
||||
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||
{% elif item.src == 'dis' %}
|
||||
<i class="fa-brands fa-discord" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<p>{{ item.date }}</p>
|
||||
<p>{{ item.time }}</p>
|
||||
</td>
|
||||
<td>{{ item.msg }}</td>
|
||||
<td>{{ item.host }}</td>
|
||||
<td>{{ item.nick }}</td>
|
||||
<td>
|
||||
{% if item.online is True %}
|
||||
<span class="tag is-success">{{ item.nick }}</span>
|
||||
{% elif item.online is False %}
|
||||
<span class="tag is-danger">{{ item.nick }}</span>
|
||||
{% else %}
|
||||
<span class="tag is-warning">{{ item.nick }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if item.src == 'irc' %}
|
||||
<button
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-post="{% url 'modal_info' %}"
|
||||
hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
|
||||
hx-target="#modals-here"
|
||||
hx-trigger="click"
|
||||
class="btn btn-primary"
|
||||
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
|
||||
Information
|
||||
</button>
|
||||
<div id="modals-here"></div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ item.channel }}</td>
|
||||
<td>{{ item.net }}</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user