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

Implement date picker

Browse Source
This commit is contained in:
Mark Veidemanis
2022-08-03 07:20:30 +01:00
parent 2ce90a43f5
commit d8b96ad66e
4 changed files with 177 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
core/templates/ui/drilldown/drilldown.html
View File

@@ -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>
</span>
</span>
</div>
<p class="control">
<a class="button is-static">
source
</a>
</p>
</div>
</div>
<div class="column">
<div id="sentiment">
<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">
<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 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">
sentiment
results
</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 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 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>
<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);
// 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>