Make search page layout draggable
parent
20be8a8ed7
commit
594efd06a6
GPG Key ID:
5ACFCEED46C0904F
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,421 @@
|
||||
<form class="skipEmptyFields" method="POST" hx-post="{% url 'search' %}"
|
||||
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 id="query" class="control is-expanded has-icons-left">
|
||||
<input
|
||||
hx-post="{% url 'search' %}"
|
||||
hx-trigger="keyup changed delay:200ms"
|
||||
hx-target="#results"
|
||||
hx-swap="innerHTML"
|
||||
name="query"
|
||||
value="{{ params.query }}"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="(science | tech | art) + (interest) -hello">
|
||||
<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' %}"
|
||||
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
|
||||
data-script="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="block is-hidden">
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-narrow">
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select name="size">
|
||||
{% for size in sizes %}
|
||||
{% if size == params.size %}
|
||||
<option selected value="{{ size }}">{{ size }}</option>
|
||||
{% else %}
|
||||
<option value="{{ size }}">{{ size }}</option>
|
||||
{% endif %}
|
||||
{% 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 class="control">
|
||||
<div class="field rounded-tooltip">
|
||||
<input
|
||||
id="full_query"
|
||||
type="checkbox"
|
||||
class="switch is-rounded is-info"
|
||||
{% if params.query_full is not None %}checked="checked"{% else %}none{% endif %}
|
||||
{% if not perms.core.query_search %}
|
||||
disabled
|
||||
{% endif %}
|
||||
data-script="on click toggle .is-hidden on #query_full">
|
||||
<label
|
||||
for="full_query">
|
||||
Full query
|
||||
</label>
|
||||
{% if not perms.core.query_search %}
|
||||
<span class="tooltiptext tag is-danger is-light">No access</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="field has-addons block">
|
||||
<div class="control has-icons-left">
|
||||
<span class="select">
|
||||
<select id="source" name="source">
|
||||
{% if params.source == 'irc' %}
|
||||
<option selected value="irc">IRC</option>
|
||||
{% else %}
|
||||
<option value="irc">IRC</option>
|
||||
{% endif %}
|
||||
|
||||
{% if params.source == 'dis' %}
|
||||
<option selected value="dis">Discord</option>
|
||||
{% else %}
|
||||
<option value="dis">Discord</option>
|
||||
{% endif %}
|
||||
|
||||
{% if params.source == None %}
|
||||
<option selected value="all">All</option>
|
||||
{% elif params.source == 'all' %}
|
||||
<option selected value="all">All</option>
|
||||
{% else %}
|
||||
<option value="all">All</option>
|
||||
{% endif %}
|
||||
|
||||
</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 class="control">
|
||||
<div class="field">
|
||||
<input
|
||||
id="dedup_switch"
|
||||
type="checkbox"
|
||||
class="switch is-rounded is-info"
|
||||
name="dedup"
|
||||
{% if params.dedup == "on" %}
|
||||
checked="checked"
|
||||
{% endif %}>
|
||||
<label
|
||||
for="dedup_switch">
|
||||
Deduplicate results
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="sentiment">
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input
|
||||
{% if params.check_sentiment != "on" %}
|
||||
disabled="undefined"
|
||||
{% endif %}
|
||||
name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1"
|
||||
{% if params.sentiment == None %}
|
||||
value="0"
|
||||
{% else %}
|
||||
value="{{ params.sentiment }}"
|
||||
{% endif %}
|
||||
step="0.05" type="range">
|
||||
<output for="sliderWithValue" class="slider-output">
|
||||
{% if params.sentiment == None %}
|
||||
0
|
||||
{% else %}
|
||||
{{ params.sentiment }}
|
||||
{% endif %}
|
||||
</output>
|
||||
<script>bulmaSlider.attach();</script>
|
||||
</div>
|
||||
<p class="control">
|
||||
<a class="button is-static">
|
||||
sentiment
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="radio button has-text-link">
|
||||
<input type="radio"
|
||||
value="below"
|
||||
class="sentiment-radio"
|
||||
{% if params.sentiment_method == 'below' %}
|
||||
checked
|
||||
{% endif %}
|
||||
name="sentiment_method"
|
||||
{% if params.check_sentiment != "on" %}
|
||||
disabled
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="Below">
|
||||
<i class="fa-solid fa-face-frown"></i>
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio button has-text-link is-hidden">
|
||||
<input type="radio"
|
||||
value="exact"
|
||||
class="sentiment-radio"
|
||||
{% if params.sentiment_method == 'exact' %}
|
||||
checked
|
||||
{% endif %}
|
||||
name="sentiment_method"
|
||||
{% if params.check_sentiment != "on" %}
|
||||
disabled
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="Exact">
|
||||
<i class="fa-solid fa-face-smile"></i>
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio button has-text-link">
|
||||
<input type="radio"
|
||||
value="above"
|
||||
class="sentiment-radio"
|
||||
{% if params.sentiment_method == 'above' %}
|
||||
checked
|
||||
{% endif %}
|
||||
name="sentiment_method"
|
||||
{% if params.check_sentiment != "on" %}
|
||||
disabled
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="Above">
|
||||
<i class="fa-solid fa-face-smile"></i>
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio button has-text-link">
|
||||
<input type="radio"
|
||||
value="nonzero"
|
||||
class="sentiment-radio"
|
||||
{% if params.sentiment_method == 'nonzero' %}
|
||||
checked
|
||||
{% endif %}
|
||||
name="sentiment_method"
|
||||
{% if params.check_sentiment != "on" %}
|
||||
disabled
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="Nonzero">
|
||||
<i class="fa-solid fa-face-meh-blank"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="field">
|
||||
<input
|
||||
id="sentiment_switch"
|
||||
type="checkbox"
|
||||
class="switch is-rounded is-info"
|
||||
name="check_sentiment"
|
||||
data-script="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment then toggle @disabled on .sentiment-radio"
|
||||
{% if params.check_sentiment == "on" %}
|
||||
checked
|
||||
{% endif %}>
|
||||
<label
|
||||
for="sentiment_switch">
|
||||
Check sentiment
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="field">
|
||||
<input
|
||||
id="sentiment_graph_switch"
|
||||
type="checkbox"
|
||||
class="switch is-rounded is-info"
|
||||
name="show_sentiment"
|
||||
data-script="on click toggle .is-hidden on #sentiment-container">
|
||||
|
||||
<label
|
||||
for="sentiment_graph_switch">
|
||||
Show graph
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="date">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="date" name="dates" value="{{ params.date }}">
|
||||
<script>
|
||||
var options = {
|
||||
"type": "datetime",
|
||||
"isRange": true,
|
||||
"color": "info",
|
||||
"validateLabel": "Save",
|
||||
"dateFormat": "yyyy-MM-dd",
|
||||
"startDate": "{{ params.from_date|escapejs }}",
|
||||
"startTime": "{{ params.from_time|escapejs }}",
|
||||
"endDate": "{{ params.to_date|escapejs }}",
|
||||
"endTime": "{{ params.to_time|escapejs }}",
|
||||
"displayMode": "dialog"
|
||||
};
|
||||
// Initialize all input of type date
|
||||
var calendars = bulmaCalendar.attach('[type="date"]', options);
|
||||
|
||||
// Loop on each calendar initialized
|
||||
for(var i = 0; i < calendars.length; i++) {
|
||||
// Add listener to select event
|
||||
calendars[i].on('save', date => {
|
||||
htmx.trigger("#search", "click");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<label class="radio button has-text-link">
|
||||
<input type="radio" value="desc" name="sorting"
|
||||
{% if params.sorting == None %}
|
||||
checked
|
||||
{% elif params.sorting == 'desc' %}
|
||||
checked
|
||||
{% endif %}
|
||||
>
|
||||
<span class="icon" data-tooltip="Sort descending">
|
||||
<i class="fa-solid fa-sort-down"></i>
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio button">
|
||||
<input type="radio" value="asc" name="sorting"
|
||||
{% if params.sorting == 'asc' %}
|
||||
checked
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="Sort ascending">
|
||||
<i class="fa-solid fa-sort-up"></i>
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio button">
|
||||
<input type="radio" value="none" name="sorting"
|
||||
{% if params.sorting == 'none' %}
|
||||
checked
|
||||
{% endif %}>
|
||||
<span class="icon" data-tooltip="No sort">
|
||||
<i class="fa-solid fa-sort"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow rounded-tooltip">
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left">
|
||||
<span class="select is-warning">
|
||||
<select {% if not user.is_superuser %}disabled{% endif %} id="index" name="index">
|
||||
{% if params.index == 'main' %}
|
||||
<option selected value="main">Main</option>
|
||||
{% elif params.index == None %}
|
||||
<option selected value="main">Main</option>
|
||||
{% else %}
|
||||
<option value="main">Main</option>
|
||||
{% endif %}
|
||||
|
||||
{% if params.index == 'int' %}
|
||||
<option selected value="int">Internal</option>
|
||||
{% else %}
|
||||
<option value="int">Internal</option>
|
||||
{% endif %}
|
||||
|
||||
{% if params.index == 'meta' %}
|
||||
<option selected value="meta">Meta</option>
|
||||
{% else %}
|
||||
<option value="meta">Meta</option>
|
||||
{% endif %}
|
||||
|
||||
</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">
|
||||
index
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% if not user.is_superuser %}
|
||||
<span class="tooltiptext tag is-danger is-light">No access</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="query_full" class="block {% if params.query_full is None %}is-hidden{% endif %}">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input
|
||||
hx-post="{% url 'search' %}"
|
||||
hx-trigger="keyup changed delay:200ms"
|
||||
hx-target="#results"
|
||||
hx-swap="innerHTML"
|
||||
name="query_full"
|
||||
value="{{ params.query_full }}"
|
||||
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>
|
||||
<div class="block">
|
||||
<input
|
||||
hx-trigger="change"
|
||||
hx-post="{% url 'search' %}"
|
||||
hx-target="#results"
|
||||
hx-swap="innerHTML"
|
||||
id="tags"
|
||||
class="input"
|
||||
type="tags"
|
||||
name="tags"
|
||||
placeholder="Add tags"
|
||||
value="{{ params.tags }}">
|
||||
</div>
|
||||
<div class="is-hidden"></div>
|
||||
</div>
|
||||
</form>
|
||||
Loading…
Reference in New Issue