Pathogen
/
neptune
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dynamically update search query when elements are clicked

This commit is contained in:
Mark Veidemanis 2022-08-03 07:20:30 +01:00
parent b2c009080d
commit 83b6285931
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/templates/ui/drilldown/drilldown.html
View File

@ -2,6 +2,21 @@
{% load static %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function populateSearch(field, value) {
var queryElement = document.getElementById('query');
var toAppend = ` AND ${field}: ${value}`;
if (!queryElement.value.includes(toAppend)) {
queryElement.value+=toAppend;
} else {
queryElement.value = queryElement.value.replace(toAppend, "");
}
if (field == "src") {
document.getElementById("source").selectedIndex = 0;
}
htmx.trigger("#search", "click");
}
</script>
<div>
<form method="POST" hx-post="{% url 'search_drilldown' %}"
hx-trigger="change"
@ -18,7 +33,7 @@
hx-post="{% url 'search_drilldown' %}"
hx-trigger="keyup changed delay:200ms"
hx-target="#results"
hx-swap="innerHTML" name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
hx-swap="innerHTML" id="query" 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>
@ -26,6 +41,7 @@
<div class="control">
<div class="field">
<button
id="search"
class="button is-info is-fullwidth"
hx-post="{% url 'search_drilldown' %}"
hx-trigger="click"
@ -77,7 +93,7 @@
<div class="field has-addons">
<div class="control has-icons-left">
<span class="select">
<select name="source">
<select id="source" name="source">
<option selected value="all">All</option>
<option value="irc">IRC</option>
<option value="dis">Discord</option>

29
core/templates/ui/drilldown/results.html
View File

@ -64,6 +64,8 @@
<tr>
{% endif %}
<td>
<a class="has-text-link is-underlined"
onclick="populateSearch('src', '{{ item.src }}')">
{% if item.src == 'irc' %}
<span class="icon" data-tooltip="IRC">
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
@ -73,8 +75,11 @@
<i class="fa-brands fa-discord" aria-hidden="true"></i>
</span>
{% endif %}
</a>
</td>
<td>
<a class="has-text-link is-underlined"
onclick="populateSearch('type', '{{ item.type }}')">
{% if item.type == 'msg' %}
<span class="icon" data-tooltip="Message">
<i class="fa-solid fa-message"></i>
@ -106,13 +111,19 @@
{% else %}
{{ item.type }}
{% endif %}
</a>
</td>
<td>
<p>{{ item.date }}</p>
<p>{{ item.time }}</p>
</td>
<td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
<td>{{ item.host }}</td>
<td>
<a class="has-text-link is-underlined"
onclick="populateSearch('host', '{{ item.host }}')">
{{ item.host }}
</a>
</td>
<td>
<div class="nowrap-parent">
<div class="nowrap-child">
@ -130,9 +141,9 @@
</span>
{% endif %}
</div>
<div class="nowrap-child">
<a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick }}')">
{{ item.nick }}
</div>
</a>
{% if item.num_chans is not None %}
<div class="nowrap-child">
<span class="tag">
@ -157,9 +168,10 @@
</td>
<td>
<div class="nowrap-parent">
<div class="nowrap-child">
<a class="nowrap-child has-text-link is-underlined"
onclick="populateSearch('channel', '{{ item.channel }}')">
{{ item.channel }}
</div>
</a>
{% if item.num_users is not None %}
<div class="nowrap-child">
<span class="tag">
@ -169,7 +181,12 @@
{% endif %}
</div>
</td>
<td>{{ item.net }}</td>
<td>
<a class="has-text-link is-underlined"
onclick="populateSearch('net', '{{ item.net }}')">
{{ item.net }}
</a>
</td>
</tr>
{% endfor %}
</tbody>