|
1 |
{% extends "qommon/forms/widget.html" %}
|
|
2 |
{% load qommon %}
|
|
3 |
{% block widget-control %}
|
|
4 |
<div id="form_{{widget.name}}" {% for attr in widget.attrs.items %}
|
|
5 |
{% ifnotequal attr.0 'options_with_attributes' %}{{attr.0}}="{{attr.1}}"{% endifnotequal %}
|
|
6 |
{% endfor %} {% if widget.inline %}class="inline"{% endif %}
|
|
7 |
style="display: none;">
|
|
8 |
{% regroup widget.get_options by extra_options.datetime|parse_datetime|date as date_groups %}
|
|
9 |
{% for group in date_groups %}
|
|
10 |
<h2>{{ group.grouper }}</h2>
|
|
11 |
{% for w in group.list %}
|
|
12 |
{% with datetime=w.extra_options.datetime|parse_datetime %}
|
|
13 |
<div {% if "disabled" in w %}class="disabled"{% endif %}>
|
|
14 |
<label>
|
|
15 |
{% if widget.readonly or "disabled" in w %}
|
|
16 |
<input type="hidden" name="{{w.name}}" value="yes" >
|
|
17 |
{% endif %}
|
|
18 |
<input type="checkbox" value="yes" name="{{w.name}}"
|
|
19 |
{% if widget.readonly or "disabled" in w %}disabled{% endif %}
|
|
20 |
{% if w.value %}checked="checked"{% endif %}
|
|
21 |
{% for key, value in w.attrs.items %}{{key}}="{{value}}"{% endfor %}
|
|
22 |
data-weekday="{{ datetime|date:"l" }}"
|
|
23 |
data-date="{{ datetime|date:"Y-m-d" }}"
|
|
24 |
data-displaydate="{{ datetime|date:"d M Y" }}"
|
|
25 |
data-time="{{ datetime|date:"H:i" }}"/>
|
|
26 |
<span>{{ w.title }}</span></label>
|
|
27 |
</div>
|
|
28 |
{% endwith %}
|
|
29 |
{% endfor %}
|
|
30 |
{% endfor %}
|
|
31 |
</div>
|
|
32 |
<div id="form_{{widget.name}}_table" class="meetings_table">
|
|
33 |
</div>
|
|
34 |
<script>
|
|
35 |
$(function() {
|
|
36 |
var options = $('#form_{{widget.name}} input[type="checkbox"]');
|
|
37 |
var current_date = null;
|
|
38 |
var current_day_div = null;
|
|
39 |
var current_offset = 0;
|
|
40 |
var nb_days = 0;
|
|
41 |
|
|
42 |
for (var i=0; i<options.length; i++) {
|
|
43 |
var $option = $(options[i]);
|
|
44 |
if ($option.attr('value') == '') continue;
|
|
45 |
var option_date = $option.data('date');
|
|
46 |
if (option_date !== current_date) {
|
|
47 |
var date_object = $option.data('display_date');
|
|
48 |
var weekday = $option.data('weekday');
|
|
49 |
nb_days += 1;
|
|
50 |
current_day_div = $('<div><div class="head">' + weekday + '<br>' + $option.data('displaydate') +
|
|
51 |
'</div></div>');
|
|
52 |
current_day_div.appendTo($('#form_{{widget.name}}_table'));
|
|
53 |
current_date = option_date;
|
|
54 |
}
|
|
55 |
var day_time = $option.data('time');
|
|
56 |
var option_span = $('<span class="selectable" data-idx="' + i + '">' + day_time + '</span>').appendTo(current_day_div);
|
|
57 |
if ($option.attr('checked') == 'checked') {
|
|
58 |
$(option_span).addClass('selected');
|
|
59 |
}
|
|
60 |
if ($option.attr('disabled')) {
|
|
61 |
$(option_span).addClass('disabled').removeClass('selectable');
|
|
62 |
}
|
|
63 |
}
|
|
64 |
var go_prev = $('<button class="prev"><</button>');
|
|
65 |
var go_next = $('<button class="next">></button>');
|
|
66 |
go_prev.prependTo($('#form_{{widget.name}}_table'));
|
|
67 |
go_next.appendTo($('#form_{{widget.name}}_table'));
|
|
68 |
go_prev.on('click', function() {
|
|
69 |
current_offset = Math.max(0, current_offset-1);
|
|
70 |
display(current_offset);
|
|
71 |
return false;
|
|
72 |
});
|
|
73 |
go_next.on('click', function() {
|
|
74 |
current_offset = Math.min(current_offset+1, Math.max(0, nb_days-5));
|
|
75 |
display(current_offset);
|
|
76 |
return false;
|
|
77 |
});
|
|
78 |
|
|
79 |
function display(offset) {
|
|
80 |
$('#form_{{widget.name}}_table > div').each(function(idx, elem) {
|
|
81 |
if (idx >= offset && idx < offset+5) {
|
|
82 |
$(elem).show();
|
|
83 |
} else {
|
|
84 |
$(elem).hide();
|
|
85 |
}
|
|
86 |
});
|
|
87 |
current_offset = offset;
|
|
88 |
}
|
|
89 |
display(current_offset);
|
|
90 |
$('#form_{{widget.name}}_table span.selectable').on('click', function() {
|
|
91 |
var from = $('#form_{{widget.name}}_table span.on');
|
|
92 |
var to = $(this)
|
|
93 |
if (from.length == 0 || from.length > 1) {
|
|
94 |
from.removeClass('on');
|
|
95 |
to.addClass('on');
|
|
96 |
$(options[to.data('idx')]).attr('checked', 'checked');
|
|
97 |
$('#form_{{widget.name}}').val([$(options[to.data('idx')]).attr('name')]);
|
|
98 |
}
|
|
99 |
if (from.length == 1) {
|
|
100 |
$('#form_{{widget.name}}_table span').each(function(index) {
|
|
101 |
var $this = $(this);
|
|
102 |
if (parseInt($this.data('idx')) <= parseInt(to.data('idx')) &&
|
|
103 |
parseInt($this.data('idx')) > parseInt(from.data('idx'))) {
|
|
104 |
$this.addClass('on')
|
|
105 |
$('#form_{{widget.name}}').val(function(idx, old_val) {
|
|
106 |
if (old_val === undefined || !Array.isArray(old_val)) {
|
|
107 |
old_val = [];
|
|
108 |
}
|
|
109 |
$(options[$this.data('idx')]).attr('checked', 'checked');
|
|
110 |
old_val.push($(options[$this.data('idx')]).attr('name'));
|
|
111 |
return old_val;
|
|
112 |
});
|
|
113 |
}
|
|
114 |
});
|
|
115 |
}
|
|
116 |
});
|
|
117 |
});
|
|
118 |
</script>
|
|
119 |
{% if request.quixote_request.is_in_backoffice %}
|
|
120 |
<style>
|
|
121 |
div.meetings_table {
|
|
122 |
margin-top: 1ex;
|
|
123 |
display: flex;
|
|
124 |
width: 100%;
|
|
125 |
}
|
|
126 |
|
|
127 |
div.meetings_table > div {
|
|
128 |
flex: 0 1 auto;
|
|
129 |
width: 20%;
|
|
130 |
text-align: center;
|
|
131 |
display: none;
|
|
132 |
}
|
|
133 |
|
|
134 |
div.meetings_table div span {
|
|
135 |
display: block;
|
|
136 |
cursor: pointer;
|
|
137 |
padding: 0.3ex 0;
|
|
138 |
}
|
|
139 |
|
|
140 |
div.meetings_table div span.disabled {
|
|
141 |
opacity: 0.3;
|
|
142 |
}
|
|
143 |
|
|
144 |
div.meetings_table div span.selectable.on {
|
|
145 |
background: #215D9C;
|
|
146 |
color: white;
|
|
147 |
}
|
|
148 |
|
|
149 |
div.meetings_table div.head {
|
|
150 |
padding-bottom: 1ex;
|
|
151 |
}
|
|
152 |
</style>
|
|
153 |
{% endif %}
|
|
154 |
{% endblock %}
|
|
155 |
|
|
156 |
{% block widget-hint %}
|
|
157 |
{% if widget.hint %}<div class="hint">{{widget.hint}}</div>{% endif %}
|
|
158 |
{% endblock %}
|
0 |
|
-
|