Produits Entr'ouvert » w.c.s.

            nds_options = [(

                x.slug, x.name, x.slug, {

                    'data-type': x.type,

                    'data-maybe-datetimes': 'true' if x.maybe_datetimes() else 'false'})

                for x in NamedDataSource.select()]

        options.append(('json', _('JSON URL'), 'json', {'data-maybe-datetimes': 'true'}))

    def maybe_datetimes(self):

        return self.type == 'json' and 'datetimes' in (self.data_source.get('value') or '')

        elif display_mode == 'datetimes':

            # SingleSelectHintWidget with custom template

            kwargs['template-name'] = 'qommon/forms/widgets/select-datetimes.html'

                   ('datetimes', _('Date/times'), 'datetimes'),

        if 'template-name' in kwargs:

            self.template_name = kwargs.pop('template-name')

      // show everything

      $('select[name="data_source$type"] option').show();

      // then restrict

      }

      if ($(this).val() == 'datetimes') {

        $('input[name="data_mode"][value="data-source"]').click()

        $('select[name="data_source$type"] option:not([data-maybe-datetimes="true"])').hide();

        if ($('select[name="data_source$type"] option:selected:visible').length == 0) {

          $('select[name="data_source$type"] option:visible').first().prop('selected', true);

        }

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