From eb1dfe9124ca794938b1ff792e5a68d5b9980776 Mon Sep 17 00:00:00 2001
From: Elias Showk <eshowk@entrouvert.com>
Date: Fri, 4 May 2018 18:56:07 +0200
Subject: [PATCH] qommon: add checkboxes--meetings.html using get_options
 (#23230)

---
 static/includes/_misc.scss                    |   4 +
 .../forms/widgets/checkboxes--meetings.html   | 158 ++++++++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 templates/qommon/forms/widgets/checkboxes--meetings.html

diff --git a/static/includes/_misc.scss b/static/includes/_misc.scss
index 164c24f..590a2ef 100644
--- a/static/includes/_misc.scss
+++ b/static/includes/_misc.scss
@@ -536,6 +536,10 @@ div.meetings_table {
 		&.disabled {
 			opacity: 0.3;
 		}
+		&.selected {
+			background: $button-background;
+			color: $button-color;
+		}
 	}
 
 	span.selectable {
diff --git a/templates/qommon/forms/widgets/checkboxes--meetings.html b/templates/qommon/forms/widgets/checkboxes--meetings.html
new file mode 100644
index 0000000..71a49f9
--- /dev/null
+++ b/templates/qommon/forms/widgets/checkboxes--meetings.html
@@ -0,0 +1,158 @@
+{% extends "qommon/forms/widget.html" %}
+{% load qommon %}
+{% block widget-control %}
+<div id="form_{{widget.name}}" {% for attr in widget.attrs.items %}
+  {% ifnotequal attr.0 'options_with_attributes' %}{{attr.0}}="{{attr.1}}"{% endifnotequal %}
+  {% endfor %} {% if widget.inline %}class="inline"{% endif %}
+  style="display: none;">
+  {% regroup widget.get_options by options.datetime|parse_datetime|date as date_groups %}
+  {% for group in date_groups %}
+    <h2>{{ group.grouper }}</h2>
+    {% for w in group.list %}
+      {% with datetime=w.options.datetime|parse_datetime %}
+      <div {% if "disabled" in w %}class="disabled"{% endif %}>
+        <label>
+          {% if widget.readonly or "disabled" in w %}
+          <input type="hidden" name="{{w.name}}" value="yes" >
+          {% endif %}
+          <input type="checkbox" value="yes" name="{{w.name}}{% if widget.readonly %}xx{% endif %}"
+             {% if widget.readonly or "disabled" in w %}disabled{% endif %}
+             {% if w.checked %}checked="checked"{% endif %}
+             {% for key, value in w.attrs.items %}{{key}}="{{value}}"{% endfor %}
+             data-weekday="{{ datetime|date:"l" }}"
+             data-date="{{ datetime|date:"Y-m-d" }}"
+             data-displaydate="{{ datetime|date:"d M Y" }}"
+             data-time="{{ datetime|date:"H:i" }}"/>
+          <span>{{ w.title }}</span></label>
+      </div>
+      {% endwith %}
+    {% endfor %}
+  {% endfor %}
+</div>
+<div id="form_{{widget.name}}_table" class="meetings_table">
+</div>
+<script>
+$(function() {
+  var options = $('#form_{{widget.name}} input[type="checkbox"]');
+  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 date_object = $option.data('display_date');
+      var weekday = $option.data('weekday');
+      nb_days += 1;
+      current_day_div = $('<div><div class="head">' + weekday + '<br>' + $option.data('displaydate') +
+        '</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('checked') == 'checked') {
+      $(option_span).addClass('selected');
+    }
+    if ($option.attr('disabled')) {
+      $(option_span).addClass('disabled').removeClass('selectable');
+    }
+  }
+  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() {
+    var from = $('#form_{{widget.name}}_table span.on');
+    var to = $(this)
+    if (from.length == 0 || from.length > 1) {
+      from.removeClass('on');
+      to.addClass('on');
+      $(options[to.data('idx')]).attr('checked', 'checked');
+      $('#form_{{widget.name}}').val([$(options[to.data('idx')]).attr('name')]);
+    }
+    if (from.length == 1) {
+      $('#form_{{widget.name}}_table span').each(function(index) {
+        var $this = $(this);
+        if (parseInt($this.data('idx')) <= parseInt(to.data('idx')) &&
+          parseInt($this.data('idx')) > parseInt(from.data('idx'))) {
+            $this.addClass('on')
+            $('#form_{{widget.name}}').val(function(idx, old_val) {
+              if (old_val === undefined || !Array.isArray(old_val)) {
+                old_val = [];
+              }
+              $(options[$this.data('idx')]).attr('checked', 'checked');
+              old_val.push($(options[$this.data('idx')]).attr('name'));
+              return old_val;
+            });
+        }
+      });
+    }
+  });
+});
+</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;
+  }
+
+  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 %}
-- 
2.17.0