Produits Entr'ouvert » Intégrations graphiques Publik

		&.selected {

			background: $button-background;

			color: $button-color;

		}

{% 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 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 %}