Produits Entr'ouvert » Intégrations graphiques Publik

div#nearby-list {

	> div {

		margin: 5px auto;

		display: flex;

		align-items: center;

		align-content: center;

		justify-content: space-between;

		border: $widget-border;

		padding: 5px;

	}

	span {

		margin: 0 5px;

		&.problem-digest {

			width: 60%;

		}

		&.problem-datetime {

			width: 20%;

			@media screen and (max-width: $mobile-limit) {

				width: 30%;

			}

		}

	}

	a {

		&.marker-counter {

			background: $button-background;

			padding: 5px 10px;

			color: $button-color;

			min-width: 0.5em;

			max-width: 1em;

			border-radius: 3px;

		}

	}

}

div.leaflet-div-icon {

	padding: 3px;

	border-radius: 3px;

	display: flex;

	display: -ms-flexbox;

	justify-content: space-around;

	-ms-justify-content: space-around;

	a {

		line-height: 1em;

	}

}

.signalements-thanks ~ div.buttons {

	div.submit-button, div.previous-button {

		display: none;

	}

	div.cancel-button button {

		text-indent: -9999px;

		line-height: 0;

		&::after {

			text-indent: 0;

			line-height: initial;

			display: block;

			content: 'Continuer';

		}

	}

}

{% extends "qommon/forms/widgets/map.html" %}

{% load qommon l10n %}

{% block widget-title %}

{% endblock %}

{% block widget-content %}

{% if form %}

<input type="hidden" name="{{widget.name}}$latlng">

<div id="map-{{widget.name}}" class="qommon-map"

  data-readonly="true"

  {% for key, value in widget.map_attributes.items %}{{key}}="{{value}}" {% endfor %}

  {% localize off %}

  data-init-lat="{{ form_var_carte_lat }}"

  data-init-lng="{{ form_var_carte_lon }}"

  {% endlocalize %}

></div>

{% block list-header %}

  <h3>Si votre signalement ne figure pas dans la liste ci-dessous, continuez</h3>

{% endblock %}

<div id="nearby-list">

  {% with distance=form_option_distance|default:100|add:50 %}

  {% with demands=form.objects.pending|distance_filter:distance %}

  {% for formdata in demands %}

      <div data-id="{{formdata.number}}"

           {% localize off %}

           data-geoloc-lat="{{formdata.geoloc.base.lat}}"

           data-geoloc-lon="{{formdata.geoloc.base.lon}}"

           {% endlocalize %}

           >

              <a class="marker-counter" name="nearby-{{forloop.counter}}">{{forloop.counter}}</a>

              {% block problem-digest %}

              <span class="problem-digest">{{ formdata.digest }}</span>

              {% endblock %}

              <span class="problem-datetime">Signalé le {{ formdata.receipt_date }}</span>

              {% if activate_plus1_action == "True" %}

              <a class="plus1 pk-button" href="#" data-plus1-url="{{formdata.api_url}}hooks/plus1/">+1</a>

              {% endif %}

      </div>

  {% endfor %}

{% endwith %}

{% endwith %}

</div>

<script type="text/javascript">

$(function() {

  if ($('#nearby-list').length) {

    $(document).on('wcs:maps-ready', function() {

      var $map_widget = $('.qommon-map');

      var map = $map_widget[0].leaflet_map;

      var geojson_data = Array();

      $('#nearby-list div[data-id]').each(function(idx, elem) {

        var feature = {

          type: 'Feature',

          properties: {

            id: $(elem).data('id'),

            counter: $(elem).find('.marker-counter').text()

          },

          geometry: {

            type: 'Point',

            coordinates: [$(elem).data('geoloc-lon'), $(elem).data('geoloc-lat')]

          }

        };

        geojson_data.push(feature);

      });

      $(map).on('zoomend moveend', function() {

        /* filter display of nearby items to match the displayed map area */

        var nearby_list = $('#nearby-list');

        nearby_list.find('> div').hide();

        map.eachLayer(function(layer){

          if (layer instanceof L.Marker && map.getBounds().contains(layer.getLatLng())) {

            if (layer.feature && layer.feature.properties.id) {

              nearby_list.find('[data-id="' + layer.feature.properties.id + '"]').show();

              return;

            }

          }

        });

      });

      if (geojson_data) {

        var geo_json = L.geoJson(geojson_data,

          {

            pointToLayer: function (feature, latlng) {

              marker = L.divIcon({

                                  iconAnchor: [0, 0],

                                  popupAnchor: [5, -45],

                                  html: '<a href="#nearby-' + feature.properties.counter + '" class="demand-map-marker">' +

                                         feature.properties.counter + '</a>'

                                 });

              return L.marker(latlng, {icon: marker});

            }

          });

        geo_json.addTo(map);

        $(map).trigger('moveend');

      }

      {% if activate_plus1_action == "True" %}

      $('a.plus1').on('click', function() {

        var plus1_url = $(this).data('plus1-url');

        var $dialog = null;

        $dialog = $('<div id="plus1-dialog">'

                    + '{% if user.is_authenticated %}<p>Vous allez confirmer le signalement.'

                    + 'Vous pouvez également décider de recevoir un message une fois celui-ci pris en charge.</p>'

                    + '<label><input type="checkbox">Recevoir un message</input></label>'

                    + '{% else %}<p>Vous allez confirmer le signalement.</p>{% endif %}'

                    + '</div>');

        $dialog.dialog({

          modal: true,

          buttons: [

                    {text: 'Annuler',

                     'class': 'cancel-button',

                     click: function() {

                       $(this).dialog('destroy');

                     }

                    },

                    {text: 'Confirmer',

                     click: function() {

                       var checked = ($(this).find('[type=checkbox]:checked').length > 0);

                       $.ajax({

                         url: plus1_url,

                         data: JSON.stringify({'checked': checked}),

                         type: 'POST',

                         contentType: 'application/json; charset=utf-8',

                         dataType: 'json',

                         success: function(resp) {

                           $dialog.dialog('destroy');

                           $map_widget.parent().find('[type=hidden]').val('0;0');

                           $('div.buttons button[name=submit]').click();

                         }

                       });

                     }

                    }

                   ],

          close: function() {}

        });

        return false;

      });

      {% endif %}

    });

  }

})

</script>

{% else %} {# no form, this is the admin preview #}

<div class="infonotice">

  {% block preview-impossible %}

  Signalements à proximité, prévisualisation impossible.

  {% endblock %}

</div>

{% endif %}

{% endblock %}