neptune/core/templates/ui/drilldown/drilldown.html

175 lines
6.0 KiB
HTML

{% extends "base.html" %}
{% 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 present = true;
if (present == true) {
var toAppend = ` AND ${field}: "${value}"`;
var toRemove = `${field}: "${value}"`;
} else {
var toAppend = ` AND NOT ${field}: "${value}"`;
var toRemove = `NOT ${field}: "${value}"`;
}
if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
queryElement.value+=toAppend;
} else {
queryElement.value = queryElement.value.replaceAll(toAppend, "");
queryElement.value = queryElement.value.replaceAll(toRemove, "");
}
if (field == "src") {
document.getElementById("source").selectedIndex = 0;
}
if (queryElement.value.startsWith(" AND ")) {
queryElement.value = queryElement.value.replace(" AND ", "");
}
htmx.trigger("#search", "click");
}
</script>
<div>
<form method="POST" hx-post="{% url 'search_drilldown' %}"
hx-trigger="change"
hx-target="#results"
hx-swap="innerHTML"
hx-indicator="#spinner">
{% csrf_token %}
<div class="columns">
<div class="column">
<div class="field has-addons">
<div class="control is-expanded has-icons-left">
<input
hx-post="{% url 'search_drilldown' %}"
hx-trigger="keyup changed delay:200ms"
hx-target="#results"
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>
</div>
<div class="control">
<div class="field">
<button
id="search"
class="button is-info is-fullwidth"
hx-post="{% url 'search_drilldown' %}"
hx-trigger="click"
hx-target="#results"
hx-swap="innerHTML">
Search
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="nowrap-parent">
<div
_="on click toggle .is-hidden on #options"
class="button is-light has-text-link is-right nowrap-child">
Options
</div>
<div class="nowrap-child">
<span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
</div>
</div>
</div>
</div>
<div id="options" class="columns is-hidden">
<div class="column">
<div class="field has-addons">
<div class="control has-icons-left">
<span class="select">
<select name="size">
{% for size in sizes %}
<option value="{{ size }}">{{ size }}</option>
{% endfor %}
</select>
<span class="icon is-small is-left">
<i class="fas fa-magnifying-glass"></i>
</span>
</span>
</div>
<p class="control">
<a class="button is-static">
results
</a>
</p>
</div>
</div>
<div class="column">
<div class="field has-addons">
<div class="control has-icons-left">
<span class="select">
<select id="source" name="source">
<option selected value="all">All</option>
<option value="irc">IRC</option>
<option value="dis">Discord</option>
</select>
<span class="icon is-small is-left">
<i class="fas fa-magnifying-glass"></i>
</span>
</span>
</div>
<p class="control">
<a class="button is-static">
source
</a>
</p>
</div>
</div>
<div class="column">
<div id="sentiment">
<div class="field has-addons">
<div class="control">
<input disabled="undefined" name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1" value="0" step="0.05" type="range">
<output for="sliderWithValue" class="slider-output">0</output>
<script>bulmaSlider.attach();</script>
</div>
<p class="control">
<a class="button is-static">
sentiment
</a>
</p>
</div>
<div class="control">
<label class="radio">
<input type="radio" value="below" name="sentiment-method">
Below
</label>
<label class="radio">
<input type="radio" value="exact" name="sentiment-method">
Exact
</label>
<label class="radio">
<input type="radio" value="above" name="sentiment-method">
Above
</label>
<label class="radio">
<input type="radio" value="nonzero" name="sentiment-method">
Nonzero
</label>
</div>
</div>
<label class="checkbox">
<input type="checkbox" name="check-sentiment"
_="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
Check sentiment
</label>
</div>
</div>
<div class="is-hidden"></div>
</form>
</div>
<div class="block">
<div id="results">
</div>
</div>
<div id="modals-here">
</div>
{% endblock %}