montpellier-themes/portail-citoyen/templates/blurps/demarches.html

{% load i18n sekizai_tags static blurp_tags %}
{% with demarches=agglo.data %}
{% if demarches %}
<h3 class="aq-catgr-plg-title"><a href="{{ wcs_url }}/login">Démarches de Montpellier Méditerranée Métropole</a></h3>
<ul class="aq-forms-plg-listing demarches-agglo" {% if demarches|length <= 1 %}style="-moz-column-count: 1; -webkit-column-count: 1; column-count: 1"{% endif %}>
    {% for data in demarches %}
    <li class="aq-forms-plg-item">
      <a class="aq-forms-plg-link" href="{{ wcs_url}}/login/?ReturnUrl={{ data.url }}">{{ data.title }}</a>
    </li>
  {% endfor %}
</ul>
{% endif %}
{% endwith %}

<div class="ma_commune">
<ul class="aq-forms-plg-listing">
</ul>
</div>

<div class="aq-catgr-plg" data-empty="{% trans "Other procedures.." %}">
  <h3 class="aq-catgr-plg-title">{% trans "Les démarches dans les autres communes" %}</h3>
  <div class="aq-catgr-plg-selector-container">
  </div>
</div>

{% addtoblock "js" %}
<script type="text/javascript">

function get_base_url(url) {
    var urlArray = url.split('/');
    return urlArray[0] + '//' + urlArray[2];
}

$(document).ready(function () {
    var demarches = {};
    var city_to_id_map = {};
    var id_to_city_map = {};
    {% if clapiers %}
    demarches['clapiers'] = {{ clapiers.data|jsonify }};
    city_to_id_map['Clapiers'] = 'clapiers';
    id_to_city_map['clapiers'] = 'Clapiers';
    {% endif %}
    {% if laverune %}
    demarches['laverune'] = {{ laverune.data|jsonify }};
    city_to_id_map['Lavérune'] = 'laverune';
    id_to_city_map['laverune'] = 'Lavérune';
    {% endif %}
    {% if vendargues %}
    demarches['vendargues'] = {{ vendargues.data|jsonify }};
    city_to_id_map['Vendargues'] = 'vendargues';
    id_to_city_map['vendargues'] = 'Vendargues';
    {% endif %}
    {% if villeneuve %}
    demarches['villeneuve'] = {{ villeneuve.data|jsonify }};
    city_to_id_map['Villeneuve-lès-Maguelone'] = 'villeneuve';
    id_to_city_map['villeneuve'] = 'Villeneuve-lès-Maguelone';
    {% endif %}
    {% if fabregues %}
    demarches['fabregues'] = {{ fabregues.data|jsonify }};
    city_to_id_map['Fabrègues'] = 'fabregues';
    id_to_city_map['fabregues'] = 'Fabrègues';
    {% endif %}
    {% if saint_georges_dorques %}
    demarches['saint-georges'] = {{ saint_georges_dorques.data|jsonify }};
    city_to_id_map['Saint-Georges-d\'Orques'] = 'saint-georges';
    id_to_city_map['saint-georges'] = 'Saint-Georges-d\'Orques';
    {% endif %}
    {% if sussargues %}
    demarches['sussargues'] = {{ sussargues.data|jsonify }};
    city_to_id_map['Sussargues'] = 'sussargues';
    id_to_city_map['sussargues'] = 'Sussargues';
    {% endif %}
    {% if cournonterral %}
    demarches['cournonterral'] = {{ cournonterral.data|jsonify }};
    city_to_id_map['Cournonterral'] = 'cournonterral';
    id_to_city_map['cournonterral'] = 'Cournonterral';
    {% endif %}
    {% if lattes %}
    demarches['lattes'] = {{ lattes.data|jsonify }};
    city_to_id_map['Lattes'] = 'lattes';
    id_to_city_map['lattes'] = 'Lattes';
    {% endif %}
    var city = '{{ user.socialaccount_set.all.0.extra_data.ville }}';
    var city_id = city_to_id_map[city];
    if (demarches[city_id] != undefined && demarches[city_id].length > 0) {
        var base_url = get_base_url(demarches[city_id][0].url) + '/login/';
        var ma_commune = '{% trans "Démarches de ma commune : " %} <a href="'+ base_url + '">' + city + '</a>';
        var h3 = '<h3 class="aq-catgr-plg-title">' + ma_commune + '</h3>';
        $('.ma_commune').prepend(h3);
        $.each(demarches[city_id], function(index, value) {
            var li = '<li class="aq-forms-plg-item"><a class="aq-forms-plg-link" href="' + base_url + '?ReturnUrl=' + value.url + '">' + value.title + '</a><li>';
            $('.ma_commune .aq-forms-plg-listing').append(li);
        });
    }

    var $p = $('<p/>');
    var $select = $('<select/>');
    $select.append('<option value="">Vos Communes...</option>');
    $.each(demarches, function (name, elements) {
        if (name == city_id)
            return;
        if (elements.length == 0) return;
        var $option = $('<option/>');
        var id = name;
        var city_name = id_to_city_map[name];
        $option.text(city_name);
        $option.val(id);
        $select.append($option);
        var $container = $('<div/>');
        var $title = $('<h3/>');
        var $listing = $('<ul/>');
        if (elements.length <= 1)
            $listing.attr('style', "-moz-column-count: 1; -webkit-column-count: 1; column-count: 1");
        $listing.attr('class', 'aq-forms-plg-listing');
        $container.attr({'id': id, 'class': "aq-catgr-plg-body"});
        $title.attr('class', "aq-catgr-plg-title");
        var base_url;
        if (elements.length > 0) {
            base_url = get_base_url(elements[0].url) + '/login/';
            var title_link = '<a href="' + base_url + '">{% trans "Démarches de" %} ' + city_name + '</a>';
            $title.append(title_link);
        } else {
            $title.text(name);
        }
        $container.append($title);
        $.each(elements, function(index, elt) {
            var item = '<li class="aq-forms-plg-item"><a class="aq-forms-plg-link" href="' + base_url + '?ReturnUrl=' + elt.url + '">' + elt.title + '</a><li>';
            $listing.append(item);
        });
        $container.append($listing);
        $("div.aq-catgr-plg").append($container);
        $container.hide();
    });
    $p.append($select);
    $('.aq-catgr-plg-selector-container').append($p);

    // Show selected categories
    var on_select_change = function(event) {
        var $option = $('option:selected', event.target);
        if ($option.val()) {
            var id = '#' + $option.val();
            $('.aq-catgr-plg .aq-catgr-plg-body').not(id).hide();
            $(id).show();
        } else {
            $('.aq-catgr-plg .aq-catgr-plg-body').hide();
        }
    }
    $select.bind('change', on_select_change);
  });
</script>
{% endaddtoblock %}