view_list_form_responses.html
1 <@messages errors=errors warnings=warnings infos=infos />
2
3 <#-- Freemarker macros -->
4 <#macro searchTagsToolbar>
5 <div class='search-tags align-items-center mb-3'>
6
7 <div>
8
9
10 <button label='Carte' class='outline toggle-listmap p-2' type='button' params=' aria-pressed="false"'/>
11
12 </div>
13 </div>
14 </#macro>
15
16
17
18 ${formsreponseedito.labelrichtextUn!''}
19
20 <input type="hidden" id="display-map" name="display_map" value="${display_map!}">
21 <#if points?? && (points?size > 0)>
22 <div class='search-tags align-items-center mb-3'>
23
24 <div>
25
26
27 <button label='Carte' class='outline toggle-listmap p-2' type='button' params=' aria-pressed="false"'>Carte/liste</button>
28
29 </div>
30 </div>
31 </#if>
32 <div id="result-list" >
33 <#list listFormResponsePaginator as formRep>
34 <#list formRep.steps as formQuestionResponseSteps>
35 <#list formQuestionResponseSteps.questions as questionResponse>
36 ${questionResponse.question.title} :
37 <#list questionResponse.entryResponse as response>
38 ${response.responseValue!}
39 </#list>
40 </br>
41 </#list>
42 </#list>
43 </#list>
44
45 <!-- Liens de pagination -->
46 <div class="pagination">
47 <#if (paginator.pagesCount > 1) >
48 <#list 1..paginator.pagesCount as page>
49 <#if page == paginator.pageCurrent>
50 <strong>${page}</strong>
51 <#else>
52 <a href="${urlPaginator}&page_index=${page}">
53 ${page}
54 </a>
55 </#if>
56 </#list>
57 </#if>
58 </div>
59
60
61 <form name="search" method="post" action="${urlPaginator}">
62 <div>
63 <#-- Number of documents per page selector -->
64 #i18n{portal.search.search_results.labelNbDocsPerPage}:
65 <@NbItemsPerPageSelectorCombo nb_items_per_page?string />
66 </div>
67 <span>
68 <input type="submit" value="soumettre" />
69 </span>
70 </form>
71
72 </div>
73
74
75 <script type="text/javascript">
76 var loadresource = document.createElement('link');
77 loadresource.setAttribute("rel", "stylesheet");
78 loadresource.setAttribute("type", "text/css");
79 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/leaflet.css");
80 document.getElementsByTagName("head")[0].appendChild(loadresource);
81
82 loadresource = document.createElement('link');
83 loadresource.setAttribute("rel", "stylesheet");
84 loadresource.setAttribute("type", "text/css");
85 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.css");
86 document.getElementsByTagName("head")[0].appendChild(loadresource);
87
88 loadresource = document.createElement('link');
89 loadresource.setAttribute("rel", "stylesheet");
90 loadresource.setAttribute("type", "text/css");
91 loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.Default.css");
92 document.getElementsByTagName("head")[0].appendChild(loadresource);
93 </script>
94
95 <script src = "js/plugins/leaflet/leaflet/leaflet.js"></script>
96 <script src="js/plugins/leaflet/leaflet/leaflet.markercluster.js"></script>
97
98 <script type="text/javascript">
99 $(window).on('load', function () {
100 var map = L.map('map').setView([48.85632, 2.33272], 12);
101 var points = [
102 <#list points as point>
103 {
104 "type": "${point.type}",
105 "code": "${point.code}",
106 "id": "${point.id}",
107 "geojson": ${point.geojson},
108 "datalayertitle" : "${point.data_layer_title}",
109 "datalayerpopup" : "${point.data_layer_popup!' '}",
110 "idPicto" : "${point.layer_properties.iconImage!""}"
111 }<#if point_has_next>,</#if>
112 </#list>
113 ];
114
115
116 // create the tile layer with correct attribution
117 var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
118 var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
119 var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 16, attribution: osmAttrib}).addTo(map);
120
121 var marker_clusters = {};
122 var marker_icons = {};
123
124 //Workardound https://github.com/Leaflet/Leaflet/issues/3696
125 var defaultIcon = L.Icon.extend({
126 options: {
127 iconSize: [25, 41],
128 iconAnchor: [12, 41],
129 popupAnchor: [1, -34],
130 shadowSize: [41, 41],
131 shadowUrl: L.Icon.Default.imagePath + '/marker-shadow.png'
132 }
133 });
134 var greenIcon = new defaultIcon({
135 iconUrl: L.Icon.Default.imagePath + '/marker-icon-green.png',
136 iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-green-2x.png',
137 });
138 var yellowIcon = new defaultIcon({
139 iconUrl: L.Icon.Default.imagePath + '/marker-icon-yellow.png',
140 iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-yellow-2x.png'
141 });
142 var redIcon = new defaultIcon({
143 iconUrl: L.Icon.Default.imagePath + '/marker-icon-red.png',
144 iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-red-2x.png'
145 });
146 var createGreenCluster = function (cluster) {
147 var childCount = cluster.getChildCount();
148 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-small', iconSize: new L.Point(40, 40) });
149 };
150 var createYellowCluster = function (cluster) {
151 var childCount = cluster.getChildCount();
152 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-medium', iconSize: new L.Point(40, 40) });
153 };
154 var createRedCluster = function (cluster) {
155 var childCount = cluster.getChildCount();
156 return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-large', iconSize: new L.Point(40, 40) });
157 };
158
159 for (var i = 0; i < points.length; i++) {
160 var markers = undefined;
161 var icon = undefined;
162 var layer = "";
163 var popupContent = undefined;
164
165 //Image icone
166 var idPictoUrl = points[i]["idPicto"];
167 if ( idPictoUrl != null && idPictoUrl != '' )
168 {
169 fontAwesomeIcon = L.icon({
170 iconUrl: "image?id="+ idPictoUrl + "&resource_type=public_image_resource",
171 iconSize: [28, 88],
172 className: 'myDivIcon'
173 });
174 }
175
176 var properties = points[i]["geojson"]["properties"];
177 if (typeof(properties) != 'undefined') {
178 layer = properties["layer"];
179 }
180 if (!layer) {
181 layer = points[i]["datalayertitle"];
182 }
183 if (typeof(marker_clusters[layer]) != "undefined") {
184 markers = marker_clusters[layer];
185 icon = marker_icons[layer];
186 } else {
187 if (typeof(properties) != 'undefined' && typeof(properties["icon"]) != 'undefined') {
188 var clusterIconCreateFunction = undefined;
189 if (properties["icon"] == 'red' ) {
190 icon = redIcon;
191 clusterIconCreateFunction = createRedCluster;
192 } else if (properties["icon"] == 'green' ) {
193 icon = greenIcon;
194 clusterIconCreateFunction = createGreenCluster;
195 } else if (properties["icon"] == 'yellow' ) {
196 icon = yellowIcon;
197 clusterIconCreateFunction = createYellowCluster;
198 }
199
200 if (typeof(clusterIconCreateFunction) != 'undefined') {
201 markers = new L.MarkerClusterGroup({
202 iconCreateFunction: clusterIconCreateFunction
203 });
204 }
205 }
206
207 if (typeof(icon) == 'undefined') {
208 markers = new L.MarkerClusterGroup();
209 icon = new L.Icon.Default();
210 }
211
212 marker_clusters[layer] = markers;
213 marker_icons[layer] = icon;
214 }
215
216 var marker;
217
218 if ( points[i]["geojson"]["geometry"]["type"] == "Point" ) {
219 marker = L.marker([points[i]["geojson"]["geometry"]["coordinates"][1],points[i]["geojson"]["geometry"]["coordinates"][0]] ,{icon: fontAwesomeIcon});
220 }
221 else if ( points[i]["geojson"]["geometry"]["type"] == "Polygon" ) {
222
223 var aPolygon = points[i]["geojson"]["geometry"]["coordinates"];
224 marker = L.polygon(aPolygon, {color: points[i]["colorPolygon"], weight: points[i]["weight"] } );
225 }
226 else if ( points[i]["geojson"]["geometry"]["type"] == "Polyline" ) {
227 var coordPolyline = points[i]["geojson"]["geometry"]["coordinates"];
228 marker = L.polyline(coordPolyline );
229 }
230
231 marker.bindPopup( points[i]["datalayerpopup"] );
232
233 markers.addLayer(marker);
234 }
235 for (var markers in marker_clusters) {
236 if (marker_clusters.hasOwnProperty(markers)) {
237 map.addLayer(marker_clusters[markers]);
238 }
239 }
240
241 var baseMaps = {
242 "osm": osm
243 };
244 var overlayMaps = marker_clusters;
245 // paramétrage et ajout du L.control.layers à la carte
246 L.control.layers(baseMaps, overlayMaps).addTo(map);
247 });
248
249
250
251
252
253 <#if points?? && (points?size > 0)>
254 $('.toggle-listmap').on('click', function () {
255
256
257 $('#result-list').toggle();
258 //$('#map-wrapper').toggleClass('map-absolute');
259 $('#map-wrapper').toggle();
260 // Send event to resize Map and center it
261 window.dispatchEvent(new Event('resize'))
262 });
263
264
265
266
267
268 </script>
269
270 <div id='map-wrapper' class='map-absolute' style="display: none">
271 <div id="map" style="height: 400px; width: 100%"></div>
272 </div>
273 </#if>
274
275 ${formsreponseedito.labelrichtextDeux!''}
276
277 <#-- Number of items per page selector - Combo Box implementation -->
278 <#macro NbItemsPerPageSelectorCombo nb_items_per_page>
279 <select name="items_per_page">
280 <#list [ "10" , "20" , "50" , "100" ] as nb>
281 <#if nb_items_per_page = nb >
282 <option selected="selected" value="${nb}">${nb}</option>
283 <#else>
284 <option value="${nb}">${nb}</option>
285 </#if>
286 </#list>
287 </select>
288 </#macro>
289