Implement date picker

modern-tables
Mark Veidemanis 2 years ago
parent 2ce90a43f5
commit d8b96ad66e
Signed by: m
GPG Key ID: 5ACFCEED46C0904F

@ -152,6 +152,8 @@ def query_results(request, size=None):
message = None
message_class = None
add_bool = []
add_top = []
sort = None
if request.user.is_anonymous:
sizes = settings.OPENSEARCH_MAIN_SIZES_ANON
else:
@ -172,6 +174,40 @@ def query_results(request, size=None):
if source != "all":
add_bool.append({"src": source})
if "dates" in request.POST:
dates = request.POST["dates"]
spl = dates.split(" - ")
if all(spl):
spl = [f"{x.replace(' ', 'T')}Z" for x in spl]
if not len(spl) == 2:
message = "Invalid dates"
message_class = "danger"
return {"message": message, "class": message_class}
from_ts, to_ts = spl
range_query = {
"range": {
"ts": {
"gt": from_ts,
"lt": to_ts,
}
}
}
add_top.append(range_query)
if "sorting" in request.POST:
sorting = request.POST["sorting"]
if sorting not in ("asc", "desc", "none"):
message = "Invalid sort"
message_class = "danger"
return {"message": message, "class": message_class}
if sorting in ("asc", "desc"):
sort = [
{
"ts": {
"order": sorting,
}
}
]
if "check-sentiment" in request.POST:
if "sentiment" in request.POST:
sentiment = request.POST["sentiment"]
@ -188,6 +224,11 @@ def query_results(request, size=None):
if add_bool:
for item in add_bool:
search_query["query"]["bool"]["must"].append({"match": item})
if add_top:
for item in add_top:
search_query["query"]["bool"]["must"].append(item)
if sort:
search_query["sort"] = sort
results = run_main_query(
client,
request.user, # passed through run_main_query to filter_blacklisted
@ -280,12 +321,5 @@ def construct_query(query, size):
]
}
},
"sort": [
{
"ts": {
"order": "desc",
}
}
],
}
return query

@ -13,6 +13,8 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/css/bulma-slider.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css">
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/js/bulma-slider.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script>

@ -77,89 +77,142 @@
</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>
<div id="options" class="box 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 %}
<option value="{{ size }}">{{ size }}</option>
{% endfor %}
</select>
<span class="icon is-small is-left">
<i class="fas fa-magnifying-glass"></i>
</span>
</span>
</span>
</div>
<p class="control">
<a class="button is-static">
results
</a>
</p>
</div>
<p class="control">
<a class="button is-static">
source
</a>
</p>
</div>
</div>
<div class="column">
<div id="sentiment">
<div class="column is-narrow">
<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 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">
sentiment
source
</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 class="column is-narrow">
<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 class="column is-narrow">
<div id="date">
<div class="field">
<div class="control">
<input type="date" name="dates">
<script>
var options = {
"type": "datetime",
"isRange": true,
"color": "info",
"validateLabel": "Save",
"dateFormat": "yyyy-MM-dd",
};
// Initialize all input of type date
var calendars = bulmaCalendar.attach('[type="date"]', options);
<label class="checkbox">
<input type="checkbox" name="check-sentiment"
_="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment">
Check sentiment
</label>
// Loop on each calendar initialized
for(var i = 0; i < calendars.length; i++) {
// Add listener to select event
calendars[i].on('save', date => {
console.log(date);
htmx.trigger("#search", "click");
});
}
// To access to bulmaCalendar instance of an element
var element = document.querySelector('#my-element');
if (element) {
// bulmaCalendar instance is available as element.bulmaCalendar
element.bulmaCalendar.on('select', function(datepicker) {
console.log(datepicker.data.value());
});
}
</script>
</div>
</div>
<div class="control">
<label class="radio">
<input type="radio" value="desc" name="sorting" checked>
Desc
</label>
<label class="radio">
<input type="radio" value="asc" name="sorting">
Asc
</label>
<label class="radio">
<input type="radio" value="none" name="sorting">
None
</label>
</div>
</div>
</div>
</div>
</div>
<div class="is-hidden"></div>

@ -13,14 +13,14 @@ services:
env_file:
- .env
pyroscope:
image: pyroscope/pyroscope
environment:
- PYROSCOPE_LOG_LEVEL=debug
ports:
- '4040:4040'
command:
- 'server'
# pyroscope:
# image: pyroscope/pyroscope
# environment:
# - PYROSCOPE_LOG_LEVEL=debug
# ports:
# - '4040:4040'
# command:
# - 'server'
networks:
default:

Loading…
Cancel
Save