misc: make select--meetings totally inherit from wcs timetable template (#57329)
This commit is contained in:
parent
099201733a
commit
9afef10d73
|
|
@ -655,7 +655,7 @@ div.a2-continue {
|
|||
padding: 1em;
|
||||
}
|
||||
|
||||
div.meetings_table {
|
||||
div.timetable-widget {
|
||||
// style for templates/qommon/forms/widgets/select--meetings.html
|
||||
margin-top: 0.7em;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -348,7 +348,7 @@ ul#evolutions li span.item {
|
|||
height: calc(100% - 40px - 30px);
|
||||
}
|
||||
|
||||
div.meetings_table button,
|
||||
div.timetable-widget button,
|
||||
div#content form#wf-actions button {
|
||||
padding: 15px 20px;
|
||||
text-decoration: none;
|
||||
|
|
@ -368,7 +368,7 @@ div#content form#wf-actions button {
|
|||
}
|
||||
}
|
||||
|
||||
div.meetings_table button {
|
||||
div.timetable-widget button {
|
||||
padding: 0;
|
||||
&.next,
|
||||
&.prev {
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ div#main-content br:last-child {
|
|||
display: none;
|
||||
}
|
||||
|
||||
div#main-content div.meetings_table br:last-child {
|
||||
div#main-content div.timetable-widget br:last-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ div#main-content br:last-child {
|
|||
display: none;
|
||||
}
|
||||
|
||||
div#main-content div.meetings_table br:last-child {
|
||||
div#main-content div.timetable-widget br:last-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -592,7 +592,7 @@ div#content div#login-page {
|
|||
}
|
||||
}
|
||||
|
||||
div.meetings_table {
|
||||
div.timetable-widget {
|
||||
span.selectable {
|
||||
background: #ffebf6;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -257,7 +257,7 @@ div#rub_service {
|
|||
}
|
||||
}
|
||||
|
||||
div.meetings_table span.selectable.on {
|
||||
div.timetable-widget span.selectable.on {
|
||||
background: $secondary-color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ input, textarea, select {
|
|||
}
|
||||
}
|
||||
|
||||
div.meetings_table {
|
||||
div.timetable-widget {
|
||||
|
||||
div.head {
|
||||
border-bottom: 2px solid $primary-color;
|
||||
|
|
|
|||
|
|
@ -1,189 +1 @@
|
|||
{% extends "qommon/forms/widget.html" %}
|
||||
{% load qommon i18n %}
|
||||
{% block widget-control %}
|
||||
<select style="display: none" id="form_{{widget.name}}" name="{{widget.name}}"
|
||||
{% for attr in widget.attrs.items %}{{attr.0}}="{{attr.1}}"{% endfor %}>
|
||||
<option value="">---</option>
|
||||
{% for option in widget.get_options %}
|
||||
{% with datetime=option.options.datetime|parse_datetime %}
|
||||
<option{% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}
|
||||
data-weekday="{{ datetime|date:"l" }}"
|
||||
data-date="{{ datetime|date:"Y-m-d" }}"
|
||||
data-time="{{ datetime|date:"H:i" }}"
|
||||
>{{ option.description }}</option>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div id="form_{{widget.name}}_table" class="meetings_table">
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
var WEEKDAYS = ["{% trans "Sunday" %}", "{% trans "Monday" %}",
|
||||
"{% trans "Tuesday" %}", "{% trans "Wednesday" %}",
|
||||
"{% trans "Thursday" %}", "{% trans "Friday" %}",
|
||||
"{% trans "Saturday" %}"];
|
||||
var $select = $('#form_{{widget.name}}');
|
||||
var $table = $('#form_{{widget.name}}_table');
|
||||
var column_count = 5;
|
||||
|
||||
function fill_with_items(items) {
|
||||
$select.empty();
|
||||
$('<option value=""></option>').appendTo($select);
|
||||
for (var i=0; i<items.length; i++) {
|
||||
var $option = $('<option></option>', {value: items[i].id, text: items[i].text});
|
||||
if (items[i].disabled) {
|
||||
$option.prop('disabled', true);
|
||||
}
|
||||
var date = new Date(items[i].datetime);
|
||||
$option.attr('data-weekday', WEEKDAYS[date.getDay()]);
|
||||
$option.attr('data-date', items[i].datetime.slice(0, 10));
|
||||
$option.attr('data-time', items[i].datetime.slice(11, 16));
|
||||
$option.appendTo($select);
|
||||
}
|
||||
}
|
||||
|
||||
$select.on('wcs:options-change', function(ev, data) {
|
||||
if (data !== undefined) {
|
||||
fill_with_items(data.items);
|
||||
}
|
||||
$table.empty();
|
||||
var options = $select.find('option');
|
||||
var current_date = null;
|
||||
var current_day_div = null;
|
||||
var current_offset = 0;
|
||||
var nb_days = 0;
|
||||
|
||||
for (var i=0; i<options.length; i++) {
|
||||
var $option = $(options[i]);
|
||||
if ($option.attr('value') == '') continue;
|
||||
var option_date = $option.data('date');
|
||||
if (option_date !== current_date) {
|
||||
var day_label = $option.text().split(' ', 3).join(' ');
|
||||
if (Intl && Intl.DateTimeFormat) {
|
||||
// create day label from actual date, this works for event agendas.
|
||||
var date = new Date(option_date);
|
||||
var month = new Intl.DateTimeFormat('fr', {month: 'long'}).format(date);
|
||||
day_label = date.getDate() + ' ' + month + ' ' + date.getFullYear();
|
||||
}
|
||||
var weekday = $option.data('weekday');
|
||||
nb_days += 1;
|
||||
current_day_div = $('<div><div class="head">' + weekday + '<br>' + day_label + '</div></div>');
|
||||
current_day_div.appendTo($('#form_{{widget.name}}_table'));
|
||||
current_date = option_date;
|
||||
}
|
||||
var day_time = $option.data('time');
|
||||
var option_span = $('<span class="selectable" data-idx="' + i + '">' + day_time + '</span>').appendTo(current_day_div);
|
||||
if ($option.attr('disabled')) {
|
||||
$(option_span).addClass('disabled').removeClass('selectable');
|
||||
}
|
||||
if ($option.attr('selected')) {
|
||||
current_offset = nb_days - 1;
|
||||
$(option_span).addClass('on');
|
||||
}
|
||||
}
|
||||
var go_prev = $('<button class="prev">←</button>');
|
||||
var go_next = $('<button class="next">→</button>');
|
||||
go_prev.prependTo($('#form_{{widget.name}}_table'));
|
||||
go_next.appendTo($('#form_{{widget.name}}_table'));
|
||||
go_prev.on('click', function() {
|
||||
current_offset = Math.max(0, current_offset-1);
|
||||
display(current_offset);
|
||||
return false;
|
||||
});
|
||||
go_next.on('click', function() {
|
||||
current_offset = Math.min(current_offset+1, Math.max(0, nb_days-column_count));
|
||||
display(current_offset);
|
||||
return false;
|
||||
});
|
||||
|
||||
function display(offset) {
|
||||
$('#form_{{widget.name}}_table > div').each(function(idx, elem) {
|
||||
if (idx >= offset && idx < offset+column_count) {
|
||||
$(elem).show();
|
||||
} else {
|
||||
$(elem).hide();
|
||||
}
|
||||
});
|
||||
if (go_prev.next().is(':visible')) {
|
||||
go_prev.prop('disabled', true);
|
||||
} else {
|
||||
go_prev.prop('disabled', null);
|
||||
}
|
||||
if (go_next.prev().is(':visible')) {
|
||||
go_next.prop('disabled', true);
|
||||
} else {
|
||||
go_next.prop('disabled', null);
|
||||
}
|
||||
current_offset = offset;
|
||||
}
|
||||
|
||||
function set_layout() {
|
||||
if ($select.parents('form').width() > 600) {
|
||||
// desktop layout
|
||||
column_count = 5;
|
||||
$table.removeClass('mobile');
|
||||
} else {
|
||||
// mobile layout
|
||||
column_count = 1;
|
||||
$table.addClass('mobile');
|
||||
}
|
||||
display(current_offset);
|
||||
t1 = new Date();
|
||||
}
|
||||
set_layout();
|
||||
var layout_change_timeout_id = null;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(layout_change_timeout_id);
|
||||
layout_change_timeout_id = setTimeout(set_layout, 200);
|
||||
});
|
||||
|
||||
$('#form_{{widget.name}}_table span.selectable').on('click', function() {
|
||||
$('#form_{{widget.name}}_table span').removeClass('on');
|
||||
$(this).addClass('on');
|
||||
$('#form_{{widget.name}}').val($(options[$(this).data('idx')]).attr('value'));
|
||||
});
|
||||
});
|
||||
$select.trigger('wcs:options-change');
|
||||
});
|
||||
</script>
|
||||
{% if request.quixote_request.is_in_backoffice %}
|
||||
<style>
|
||||
div.meetings_table {
|
||||
margin-top: 1ex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.meetings_table > div {
|
||||
flex: 0 1 auto;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.meetings_table div span {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 0.3ex 0;
|
||||
}
|
||||
|
||||
div.meetings_table div span.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
div.meetings_table div span.selectable.on {
|
||||
background: #215D9C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.meetings_table div.head {
|
||||
padding-bottom: 1ex;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block widget-hint %}
|
||||
{% if widget.hint %}<div class="hint">{{widget.hint}}</div>{% endif %}
|
||||
{% endblock %}
|
||||
{% extends "qommon/forms/widgets/select-timetable.html" %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue