From dc8622e92245a9f2d23a46a20fd979c373997aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Fri, 11 Aug 2017 15:08:59 +0200
Subject: [PATCH] general: add a widget template for event selection (#12551)

---
 static/includes/_misc.scss                         |  37 +++++++
 .../qommon/forms/widgets/select--meetings.html     | 106 +++++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 templates/qommon/forms/widgets/select--meetings.html

diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index b3cd2bb..5564519 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -448,3 +448,40 @@ table.centered-cells td {
 div.a2-continue {
 	padding: 1em;
 }
+
+div.meetings_table {
+	/* style for templates/qommon/forms/widgets/select--meetings.html */
+	margin-top: 1ex;
+	display: flex;
+	width: 100%;
+	& > div {
+		flex: 0 1 auto;
+		width: 20%;
+		text-align: center;
+		display: none;
+	}
+
+	div.head {
+		padding-bottom: 1ex;
+	}
+
+	div span {
+		display: block;
+		cursor: pointer;
+		padding: 0.3ex 0;
+		&.disabled {
+			opacity: 0.3;
+		}
+	}
+
+	span.selectable {
+		&:hover {
+			background: #ccc;
+			color: black;
+		}
+		&.on {
+			background: $button-background;
+			color: $button-color;
+		}
+	}
+}
diff --git a/templates/qommon/forms/widgets/select--meetings.html b/templates/qommon/forms/widgets/select--meetings.html
new file mode 100644
index 0000000..227f637
--- /dev/null
+++ b/templates/qommon/forms/widgets/select--meetings.html
@@ -0,0 +1,106 @@
+{% extends "qommon/forms/widget.html" %}
+{% 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 %}>
+  {% for option in widget.get_options %}
+  <option{% for attr in option.attrs.items %} {{attr.0}}="{{attr.1}}"{% endfor %}>{{ option.description }}</option>
+  {% empty %}
+    {% if widget.separate_hint or not widget.hint %}
+    <option value="">---</option>
+    {% endif %}
+  {% endfor %}
+</select>
+<div id="form_{{widget.name}}_table" class="meetings_table">
+</div>
+<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;
+}
+
+div.meetings_table div span.disabled {
+}
+
+div.meetings_table div.head {
+  padding-bottom: 1ex;
+}
+</style>
+<script>
+$(function() {
+  var options = $('#form_{{widget.name}} 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_date = $(options[i]).attr('value').split(':')[1].split('-', 3).join('-');
+    if (option_date !== current_date) {
+      var day_label = $(options[i]).text().split(' ', 3).join(' ');
+      nb_days += 1;
+      current_day_div = $('<div><div class="head">' + day_label + '</div></div>');
+      current_day_div.appendTo($('#form_{{widget.name}}_table'));
+      current_date = option_date;
+    }
+    var day_time = $(options[i]).text().split(' ')[3];
+    var option_span = $('<span class="selectable" data-idx="' + i + '">' + day_time + '</span>').appendTo(current_day_div);
+    if ($(options[i]).attr('disabled')) {
+      $(option_span).addClass('disabled').removeClass('selectable');
+    }
+    if ($(options[i]).attr('selected')) {
+      current_offset = nb_days - 1;
+      $(option_span).addClass('on');
+    }
+  }
+  var go_prev = $('<button class="prev">&lt;</button>');
+  var go_next = $('<button class="next">&gt;</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-5));
+    display(current_offset);
+    return false;
+  });
+
+  function display(offset) {
+    $('#form_{{widget.name}}_table > div').each(function(idx, elem) {
+      if (idx >= offset && idx < offset+5) {
+        $(elem).show();
+      } else {
+        $(elem).hide();
+      }
+    });
+    current_offset = offset;
+  }
+  display(current_offset);
+  $('#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'));
+  });
+});
+</script>
+{% endblock %}
-- 
2.14.1