Dynamically update search query when elements are clicked
This commit is contained in:
parent
b2c009080d
commit
83b6285931
GPG Key ID:
5ACFCEED46C0904F
|
|
@ -2,6 +2,21 @@
|
||||||
{% load static %}
|
{% load static %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<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>
|
<div>
|
||||||
<form method="POST" hx-post="{% url 'search_drilldown' %}"
|
<form method="POST" hx-post="{% url 'search_drilldown' %}"
|
||||||
hx-trigger="change"
|
hx-trigger="change"
|
||||||
|
|
@ -18,7 +33,7 @@
|
||||||
hx-post="{% url 'search_drilldown' %}"
|
hx-post="{% url 'search_drilldown' %}"
|
||||||
hx-trigger="keyup changed delay:200ms"
|
hx-trigger="keyup changed delay:200ms"
|
||||||
hx-target="#results"
|
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">
|
<span class="icon is-small is-left">
|
||||||
<i class="fas fa-magnifying-glass"></i>
|
<i class="fas fa-magnifying-glass"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -26,6 +41,7 @@
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<button
|
<button
|
||||||
|
id="search"
|
||||||
class="button is-info is-fullwidth"
|
class="button is-info is-fullwidth"
|
||||||
hx-post="{% url 'search_drilldown' %}"
|
hx-post="{% url 'search_drilldown' %}"
|
||||||
hx-trigger="click"
|
hx-trigger="click"
|
||||||
|
|
@ -77,7 +93,7 @@
|
||||||
<div class="field has-addons">
|
<div class="field has-addons">
|
||||||
<div class="control has-icons-left">
|
<div class="control has-icons-left">
|
||||||
<span class="select">
|
<span class="select">
|
||||||
<select name="source">
|
<select id="source" name="source">
|
||||||
<option selected value="all">All</option>
|
<option selected value="all">All</option>
|
||||||
<option value="irc">IRC</option>
|
<option value="irc">IRC</option>
|
||||||
<option value="dis">Discord</option>
|
<option value="dis">Discord</option>
|
||||||
|
|
|
||||||
|
|
@ -64,55 +64,66 @@
|
||||||
<tr>
|
<tr>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<td>
|
<td>
|
||||||
{% if item.src == 'irc' %}
|
<a class="has-text-link is-underlined"
|
||||||
<span class="icon" data-tooltip="IRC">
|
onclick="populateSearch('src', '{{ item.src }}')">
|
||||||
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
{% if item.src == 'irc' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="IRC">
|
||||||
{% elif item.src == 'dis' %}
|
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||||
<span class="icon" data-tooltip="Discord">
|
</span>
|
||||||
<i class="fa-brands fa-discord" aria-hidden="true"></i>
|
{% elif item.src == 'dis' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Discord">
|
||||||
{% endif %}
|
<i class="fa-brands fa-discord" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{% if item.type == 'msg' %}
|
<a class="has-text-link is-underlined"
|
||||||
<span class="icon" data-tooltip="Message">
|
onclick="populateSearch('type', '{{ item.type }}')">
|
||||||
<i class="fa-solid fa-message"></i>
|
{% if item.type == 'msg' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Message">
|
||||||
{% elif item.type == 'join' %}
|
<i class="fa-solid fa-message"></i>
|
||||||
<span class="icon" data-tooltip="Join">
|
</span>
|
||||||
<i class="fa-solid fa-person-to-portal"></i>
|
{% elif item.type == 'join' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Join">
|
||||||
{% elif item.type == 'part' %}
|
<i class="fa-solid fa-person-to-portal"></i>
|
||||||
<span class="icon" data-tooltip="Part">
|
</span>
|
||||||
<i class="fa-solid fa-person-from-portal"></i>
|
{% elif item.type == 'part' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Part">
|
||||||
{% elif item.type == 'quit' %}
|
<i class="fa-solid fa-person-from-portal"></i>
|
||||||
<span class="icon" data-tooltip="Quit">
|
</span>
|
||||||
<i class="fa-solid fa-circle-xmark"></i>
|
{% elif item.type == 'quit' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Quit">
|
||||||
{% elif item.type == 'kick' %}
|
<i class="fa-solid fa-circle-xmark"></i>
|
||||||
<span class="icon" data-tooltip="Kick">
|
</span>
|
||||||
<i class="fa-solid fa-user-slash"></i>
|
{% elif item.type == 'kick' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Kick">
|
||||||
{% elif item.type == 'nick' %}
|
<i class="fa-solid fa-user-slash"></i>
|
||||||
<span class="icon" data-tooltip="Nick">
|
</span>
|
||||||
<i class="fa-solid fa-signature"></i>
|
{% elif item.type == 'nick' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Nick">
|
||||||
{% elif item.type == 'mode' %}
|
<i class="fa-solid fa-signature"></i>
|
||||||
<span class="icon" data-tooltip="Mode">
|
</span>
|
||||||
<i class="fa-solid fa-gear"></i>
|
{% elif item.type == 'mode' %}
|
||||||
</span>
|
<span class="icon" data-tooltip="Mode">
|
||||||
{% else %}
|
<i class="fa-solid fa-gear"></i>
|
||||||
{{ item.type }}
|
</span>
|
||||||
{% endif %}
|
{% else %}
|
||||||
|
{{ item.type }}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<p>{{ item.date }}</p>
|
<p>{{ item.date }}</p>
|
||||||
<p>{{ item.time }}</p>
|
<p>{{ item.time }}</p>
|
||||||
</td>
|
</td>
|
||||||
<td style="max-width: 10em" class="wrap">{{ item.msg }}</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>
|
<td>
|
||||||
<div class="nowrap-parent">
|
<div class="nowrap-parent">
|
||||||
<div class="nowrap-child">
|
<div class="nowrap-child">
|
||||||
|
|
@ -130,9 +141,9 @@
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="nowrap-child">
|
<a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick }}')">
|
||||||
{{ item.nick }}
|
{{ item.nick }}
|
||||||
</div>
|
</a>
|
||||||
{% if item.num_chans is not None %}
|
{% if item.num_chans is not None %}
|
||||||
<div class="nowrap-child">
|
<div class="nowrap-child">
|
||||||
<span class="tag">
|
<span class="tag">
|
||||||
|
|
@ -157,9 +168,10 @@
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="nowrap-parent">
|
<div class="nowrap-parent">
|
||||||
<div class="nowrap-child">
|
<a class="nowrap-child has-text-link is-underlined"
|
||||||
|
onclick="populateSearch('channel', '{{ item.channel }}')">
|
||||||
{{ item.channel }}
|
{{ item.channel }}
|
||||||
</div>
|
</a>
|
||||||
{% if item.num_users is not None %}
|
{% if item.num_users is not None %}
|
||||||
<div class="nowrap-child">
|
<div class="nowrap-child">
|
||||||
<span class="tag">
|
<span class="tag">
|
||||||
|
|
@ -169,7 +181,12 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>{{ item.net }}</td>
|
<td>
|
||||||
|
<a class="has-text-link is-underlined"
|
||||||
|
onclick="populateSearch('net', '{{ item.net }}')">
|
||||||
|
{{ item.net }}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue