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

Dynamically update search query when elements are clicked

Browse Source
modern-tables
Mark Veidemanis 2 years ago
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

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

@ -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>

109
core/templates/ui/drilldown/results.html
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save