carto_solr_search_results.html

 1   <#setting url_escaping_charset="UTF-8">
 2   
 3   <#if conf_user_query??>
 4   <#assign conf_query = "&conf=${conf_user_query}">
 5   <#else>
 6   <#assign conf_query = "">
 7   </#if>
 8   
 9   <#-- Encode facet queries -->
 10   <#macro EncodeFQ list_fq optionalParam="" optionalParamDate=false >
 11   <#assign encoded_facets_queries = "">
 12   <#list list_fq as facet>
 13           <#assign facet_url = facet?url>
 14           <#if !optionalParam?has_content>
 15                   <#assign encoded_facets_queries = encoded_facets_queries+"&fq="+facet_url>
 16           <#else>
 17                   <#if optionalParam != facet_url && optionalParamDate == false>
 18                           <#assign encoded_facets_queries = encoded_facets_queries+"&fq="+facet_url>
 19                   </#if>
 20                   <#if optionalParam != facet_url?url && optionalParamDate== true >
 21                           <#assign encoded_facets_queries = encoded_facets_queries+"&fq="+facet_url>
 22                   </#if>
 23           </#if>
 24   </#list>
 25   ${encoded_facets_queries}
 26   </#macro>
 27   <#if conf.extraMappingQuery>
 28     <script type="text/javascript">
 29         var loadresource = document.createElement('link');
 30         loadresource.setAttribute("rel", "stylesheet");
 31         loadresource.setAttribute("type", "text/css");
 32         loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/leaflet.css");
 33         document.getElementsByTagName("head")[0].appendChild(loadresource);
 34   
 35         loadresource = document.createElement('link');
 36         loadresource.setAttribute("rel", "stylesheet");
 37         loadresource.setAttribute("type", "text/css");
 38         loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.css");
 39         document.getElementsByTagName("head")[0].appendChild(loadresource);
 40   
 41         loadresource = document.createElement('link');
 42         loadresource.setAttribute("rel", "stylesheet");
 43         loadresource.setAttribute("type", "text/css");
 44         loadresource.setAttribute("href", "js/plugins/leaflet/leaflet/MarkerCluster.Default.css");
 45         document.getElementsByTagName("head")[0].appendChild(loadresource);
 46     </script>
 47   
 48     <script src = "js/plugins/leaflet/leaflet/leaflet.js"></script>
 49     <script src="js/plugins/leaflet/leaflet/leaflet.markercluster.js"></script>
 50   
 51     <script type="text/javascript">
 52     $(window).on('load', function () {
 53   	  	var defaultZoom = ${mapLoaded.defaultZoom};
 54   		var defautCenterMapY = ${mapLoaded.centerMapX?c};
 55   		var defautCenterMapX = ${mapLoaded.centerMapY?c};
 56   	  
 57   	    //var map = L.map('map').setView([48.85632, 2.33272], 12);
 58   	    var map = L.map('map').setView([defautCenterMapX, defautCenterMapY], defaultZoom);
 59           var points = [
 60               <#list points as point>
 61               {
 62                   "type": "${point.type}",
 63                   "code": "${point.code}",
 64                   "id": "${point.id}",
 65                   "geojson": ${point.geojson}
 66               }<#if point_has_next>,</#if>
 67               </#list>
 68           ];
 69   
 70           // create the tile layer with correct attribution
 71           var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 72           var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 73           var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 16, attribution: osmAttrib}).addTo(map);
 74   
 75           var marker_clusters = {};
 76           var marker_icons = {};
 77   
 78           //Workardound https://github.com/Leaflet/Leaflet/issues/3696
 79           var defaultIcon = L.Icon.extend({
 80               options: {
 81                   iconSize: [25, 41],
 82                   iconAnchor: [12, 41],
 83                   popupAnchor: [1, -34],
 84                   shadowSize: [41, 41],
 85                   shadowUrl: L.Icon.Default.imagePath + '/marker-shadow.png'
 86               }
 87           });
 88           var greenIcon = new defaultIcon({
 89               iconUrl: L.Icon.Default.imagePath + '/marker-icon-green.png',
 90               iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-green-2x.png',
 91           });
 92           var yellowIcon = new defaultIcon({
 93                iconUrl: L.Icon.Default.imagePath + '/marker-icon-yellow.png',
 94                iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-yellow-2x.png'
 95           });
 96           var redIcon = new defaultIcon({
 97               iconUrl: L.Icon.Default.imagePath + '/marker-icon-red.png',
 98               iconRetinaUrl: L.Icon.Default.imagePath + '/marker-icon-red-2x.png'
 99           });
 100           var createGreenCluster = function (cluster) {
 101               var childCount = cluster.getChildCount();
 102               return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-small', iconSize: new L.Point(40, 40) });
 103           };
 104           var createYellowCluster = function (cluster) {
 105               var childCount = cluster.getChildCount();
 106               return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-medium', iconSize: new L.Point(40, 40) });
 107           };
 108           var createRedCluster = function (cluster) {
 109               var childCount = cluster.getChildCount();
 110               return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-large', iconSize: new L.Point(40, 40) });
 111           };
 112   
 113           for (var i = 0; i < points.length; i++) {
 114               var markers = undefined;
 115               var icon = undefined;
 116               var layer = "";
 117               var popupContent = undefined;
 118   
 119               var properties = points[i]["geojson"]["properties"];
 120               if (typeof(properties) != 'undefined') {
 121                   layer = properties["layer"];
 122               }
 123               if (!layer) {
 124                   layer = points[i]["code"];
 125               }
 126               if (typeof(marker_clusters[layer]) != "undefined") {
 127                   markers = marker_clusters[layer];
 128                   icon    = marker_icons[layer];
 129               } else {
 130                   if (typeof(properties) != 'undefined' && typeof(properties["icon"]) != 'undefined') {
 131                       var clusterIconCreateFunction = undefined;
 132                       if (properties["icon"] == 'red' ) {
 133                           icon = redIcon;
 134                           clusterIconCreateFunction = createRedCluster;
 135                       } else if (properties["icon"] == 'green' ) {
 136                           icon = greenIcon;
 137                           clusterIconCreateFunction = createGreenCluster;
 138                       } else if (properties["icon"] == 'yellow' ) {
 139                           icon = yellowIcon;
 140                           clusterIconCreateFunction = createYellowCluster;
 141                       }
 142   
 143                       if (typeof(clusterIconCreateFunction) != 'undefined') {
 144                           markers = new L.MarkerClusterGroup({
 145                               iconCreateFunction: clusterIconCreateFunction
 146                           });
 147                       }
 148                   }
 149   
 150                   if (typeof(icon) == 'undefined') {
 151                       markers = new L.MarkerClusterGroup();
 152                       icon = new L.Icon.Default();
 153                   }
 154   
 155                   marker_clusters[layer] = markers;
 156                   marker_icons[layer] = icon;
 157               }
 158   
 159   			var marker;
 160               
 161               if ( points[i]["geojson"]["geometry"]["type"] == "Point" ) {
 162               	marker = L.marker([points[i]["geojson"]["geometry"]["coordinates"][1],points[i]["geojson"]["geometry"]["coordinates"][0]] ,{icon: icon});
 163               }
 164               else if ( points[i]["geojson"]["geometry"]["type"] == "Polygon" ) {
 165                   
 166               	//var a = JSON.parse( points[i]["geojson"]["geometry"]["coordinates"] );
 167               	var aPolygon = points[i]["geojson"]["geometry"]["coordinates"];
 168   			//var inverse = L.GeoJSON.coordsToLatLng(aPolygon) 
 169       		    
 170   	    		marker = L.polygon(aPolygon, {color: points[i]["colorPolygon"], weight: points[i]["weight"] } );
 171               }
 172               else if ( points[i]["geojson"]["geometry"]["type"] == "Polyline" ) {
 173                 	 var coordPolyline = points[i]["geojson"]["geometry"]["coordinates"];
 174                 	marker = L.polyline(coordPolyline );
 175               }
 176   
 177               if ( (typeof(properties) != 'undefined') && (typeof(properties["popupContent"]) != 'undefined') ) {
 178                   if (properties["popupContent"]) {
 179                       marker.bindPopup(properties["popupContent"])
 180                   }
 181               } else {
 182                   popupContent = points[i]["type"] + " " + points[i]["id"] + " " + points[i]["code"] + "...</p>";
 183                   marker.bindPopup(popupContent)
 184                   /*
 185                   marker.on('click', (function(point) {
 186                       return function(e) {
 187                           var properties = point["properties"];
 188                           var popup = e.target.getPopup();
 189                           var url;
 190                           if ( (typeof(properties) != 'undefined') && (typeof(properties["popupAjax"]) != 'undefined') ) {
 191                               url = properties["popupAjax"];
 192                           } else {
 193                               url = "rest/leaflet/popup/" + point["type"] + "/" + point["id"] + "/" + point["code"];
 194                           }
 195        
 196                           $.get(url).done(function(data) {
 197                               popup.setContent(data);
 198                               popup.update();
 199                           }).fail(function() {
 200                               map.closePopup();
 201                           });
 202                       };
 203                   })(points[i]));
 204                   */
 205               }
 206   
 207               markers.addLayer(marker);
 208           }
 209           for (var markers in marker_clusters) {
 210               if (marker_clusters.hasOwnProperty(markers)) {
 211                   map.addLayer(marker_clusters[markers]);
 212               }
 213           }
 214   
 215         var baseMaps = {
 216             "osm": osm
 217         };
 218         var overlayMaps = marker_clusters;
 219         // paramétrage et ajout du L.control.layers à la carte
 220         L.control.layers(baseMaps, overlayMaps).addTo(map);
 221     });
 222     </script>
 223   </#if>
 224   
 225   <div class="row">
 226   <#-- facets -->
 227   <div class="col-sm-3 well" >
 228   
 229       <#-- Historique -->
 230       <div id="histoique" class="portlet -lutece-border-radius append-bottom">
 231           <table>
 232               <tr>
 233                   <td>
 234                       <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}${conf_query}">#i18n{search.solr.display.result.raffinement.clear}</a>
 235                   </td>
 236               </tr>
 237           </table>
 238       </div>
 239   
 240       <#-- facet refining -->
 241       <div id="facets" class="portlet -lutece-border-radius append-bottom">
 242           <#-- facets field -->
 243           <#if facets??><#-- empty or null when no connection to server -->
 244           <#list facets as facet>
 245           <#if facet.values?? >
 246           <#-- when there is no result, facet is not null, but facet.values is -->
 247           <table>
 248               <th>
 249                   ${solr_fields[facet.name].label} 
 250               </th>
 251               <tr>
 252                   <td>
 253                       <ul>
 254                           <#list facet.values as count>
 255   				<#assign sh = "">
 256               			<#list historique as fh>
 257   					<#if fh.name = facet.name+":"+count.name>
 258   						<#assign sh = facet.name+":"+count.name>
 259   					</#if>
 260               			</#list>
 261   
 262                           <li>
 263    			<#if sh?has_content >
 264   							${count.name}(${count.count})
 265                               <a  class="glyphicon glyphicon-remove" href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}<@EncodeFQ facets_list sh?url />${conf_query}"></a>
 266               <#else>
 267                               <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}&facetlabel=${count.name}&facetname=${facet.name}&fq=${facet.name}:${count.name?url}<@EncodeFQ facets_list />${conf_query}">${count.name}(${count.count})</a>
 268   			</#if>
 269                           </li>
 270                           </#list>
 271                       </ul>
 272                   </td>
 273               </tr>
 274           </table>
 275           </#if>
 276           </#list>
 277           </#if>
 278   
 279           <#-- facets date refining -->
 280           <#if facets_date??>
 281           <#list facets_date as field>
 282           <#if field.counts??>
 283           <#-- when there is no result, facet is not null, but facet.counts is -->
 284           <table>
 285               <th>
 286                   ${solr_fields[field.name].label}
 287               </th>
 288               <tr>
 289                   <td>
 290                       <ul>
 291                           <#list field.counts as count>
 292                           <#if count.count != 0>
 293                           <li>
 294                               <#assign toDate = "${count.value}"?datetime("yyyy-MM-dd'T'HH:mm:ss'Z'")>
 295                               <#assign daterange = "${field.name}:[${count.value} TO ${count.value}${facetDateGap}]"?url>
 296                               <#assign toString = "${toDate?string('yyyy')}">
 297                                   <#assign sh = "">
 298                                   <#list historique as fh>
 299                                           <#if fh.name?url = daterange>
 300                                                   <#assign sh = daterange>
 301                                           </#if>
 302                                   </#list>
 303                           <#if sh?has_content >
 304                                   ${toString}(${count.count})
 305                               <a class="glyphicon glyphicon-remove" href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}<@EncodeFQ  facets_list sh?url true />${conf_query}"></a>
 306                           <#else>
 307                               <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}&facetlabel=${toString}&facetname=${field.name}&fq=${daterange}<@EncodeFQ  facets_list />${conf_query}">${toString}(${count.count})</a>
 308                           </#if>
 309                           </li>
 310                           </#if>
 311                           </#list>
 312                       </ul>
 313                   </td>
 314               </tr>
 315           </table>
 316           </#if>
 317           </#list>
 318           </#if>	
 319       </div>
 320   
 321       <#-- facets Intersection -->
 322       <#if facet_tree??>
 323       <div id="intersection" class="portlet -lutece-border-radius append-bottom">
 324           <#list facet_tree?keys as key>
 325           <table>
 326               <th>
 327                   <#assign field1= "${key}"?split(",")[0] >
 328                   <#assign field2= "${key}"?split(",")[1] >
 329                   ${solr_fields[field1].label} / ${solr_fields[field2].label}
 330               </th>
 331               <#list facet_tree[key] as facet>
 332               <#if facet.values??>
 333               <#-- when there is no result, facet is not null, but facet.values is -->
 334               <tr>
 335                   <td>
 336                       <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}&fq=${field1}:${facet.name?url}<@EncodeFQ  facets_list/>${conf_query}">${facet.name}</a>
 337                   </td>
 338               </tr>
 339               <tr>
 340                   <td>
 341                       <ul>
 342                           <#list facet.values as count>
 343                           <li>
 344                               <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&sort_name=${sort_name!}&sort_order=${sort_order!}&query=${query?url}&fq=${field1}:${facet.name?url}&fq=${field2}:${count.name?url}<@EncodeFQ  facets_list/>${conf_query}">${count.name}(${count.count})</a>
 345                           </li>
 346                           </#list>
 347                       </ul>
 348                   </td>
 349               </tr>
 350               </#if>
 351               </#list>
 352           </table>
 353           </#list>
 354       </div>
 355       </#if>
 356   
 357       <#-- sort order -->
 358       <#if sort_list??>
 359       <div id="tri" class="portlet -lutece-border-radius append-bottom">
 360           <table>
 361               <th>
 362                   #i18n{search.solr.display.result.sort}
 363               </th>
 364               <#list sort_list as field>
 365               <#if field.enableSort>
 366               <tr>
 367                   <td>
 368                       <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&query=${query?url}<@EncodeFQ  facets_list />&sort_name=${field.solrName}&sort_order=desc${conf_query}">${field.label} desc</a>
 369                   </td>
 370               </tr>
 371               <tr>
 372                   <td>
 373                       <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&query=${query?url}<@EncodeFQ  facets_list />&sort_name=${field.solrName}&sort_order=asc${conf_query}">${field.label} asc</a>
 374                   </td>
 375               </tr>
 376               </#if>
 377               </#list>
 378           </table>
 379       </div>
 380       </#if>
 381   </div>
 382   
 383   <#-- results -->
 384   <div id="resultList" class="col-sm-6">
 385       <#-- new Search -->
 386       <div id="newSearch" class="append-bottom ">
 387   	<div class="well">
 388   		<form name="search" method="post" action="${fullUrl}">
 389   		    <div class="hide">
 390   		        <input type="hidden" name="page" value="search-solr" />
 391   		        <#if conf_user_query??>
 392   		        <input type="hidden" name="conf" value="${conf_user_query}" />
 393   		        </#if>
 394   		        <input type="hidden" name="sort_name" value="${sort_name!}" />
 395   		        <input type="hidden" name="sort_order" value="${sort_order!}" />
 396   		        <#if facets_list??>
 397   		        <#list facets_list as facet>
 398   		        <input type="hidden" name="fq" value="${facet}" />
 399   		        </#list>
 400   		        </#if>
 401   
 402   		    </div>
 403   		    <div style="text-align:center;">
 404   		        <input type="text" name="query" size="35" value="${query?if_exists}" id="solr" /> 
 405   			<span>
 406   		        	<input type="submit" value="#i18n{portal.search.search_results.buttonSearch}" />
 407   			</span>
 408   		    </div>
 409   	    </div>
 410   
 411               <div>
 412                   <#-- Number of documents per page selector -->
 413                   #i18n{portal.search.search_results.labelNbDocsPerPage}: 
 414                   <@NbItemsPerPageSelectorCombo nb_items_per_page?string />
 415               </div>
 416           </form>
 417       </div>
 418       <div id="resultList2" class="portlet -lutece-border-radius">
 419       	<button id='Liste' class='outline toggle-listmap active p-2' type='button' aria-pressed="true" > Liste </button>
 420           <button id='Carte' class='outline toggle-listmap p-2'  type='button' aria-pressed="false" > Carte </button>
 421           <legend>#i18n{portal.search.search_results.title}</legend>
 422           <#if error?has_content>
 423           <div class="error">${error}</div>
 424           </#if>
 425           <div>#i18n{portal.search.search_results.labelResultsCount} : <strong>${paginator.itemsCount}</strong></div>
 426           
 427   
 428           <#-- spellChecker -->
 429   		<#if suggestion?has_content>
 430           <div id="spellchecker">
 431             #i18n{search.solr.display.result.spellchecker}
 432             <#list suggestion as sugg>
 433                   <#assign newQuery="" >
 434                   <a href="${fullUrl}?page=search-solr&items_per_page=${nb_items_per_page}&query=${sugg.getCollationQueryString()?url}<@EncodeFQ  facets_list  />${conf_query}">${sugg.getCollationQueryString()}</a>
 435           </#list>
 436           </div>
 437           </#if>
 438   
 439   
 440           <div>&nbsp;</div>
 441           <div id="pagination" class="pagination">
 442               <p>
 443                   <@pagination paginator=paginator />
 444               </p>
 445           </div>
 446   		
 447   		<#if conf.extraMappingQuery>
 448           
 449           <div id="map" style="height: 400px; width: 100%"></div>
 450           </#if>
 451   
 452   
 453           <div id="resultItems" class="">
 454               <div>
 455                   <#list results_list as result>
 456                   <div id="item" >
 457                       <!-- <img src="document?id=${result.id}&id_attribute=79" style="float:left; margin-right:12px"/> -->
 458                       <div style="font-weight:bold; font-size:1.2em">${result.title}</div>
 459   
 460                       <#if result.summary??>${(result.highlight.map["summary"][0])!result.summary}</#if>
 461                       <#if result.highlight??>
 462                       <#-- get a extract from the "content" field where there is one (or more) of the searched words -->
 463                       <#if result.highlight.map["content"]??>
 464                       #i18n{search.solr.display.result.summary.extract} : 
 465                       <#list result.highlight.map["content"] as extrait>
 466                       ${extrait}
 467                       </#list>
 468                       </#if>
 469                       </#if>
 470                       <br />
 471                       <div style="text-align:right; font-size:0.8em;" ><#if result.date?has_content>${result.date?date}</#if></div>
 472                   </div>
 473   		<hr/>
 474                   </#list>
 475               </div>
 476           </div>
 477       </div>
 478       <div>#i18n{portal.search.search_results.labelResultsRange} : <strong>${paginator.rangeMin} - ${paginator.rangeMax}</strong></div>
 479   </div>
 480   </div>
 481   <#-- Freemarker macros -->
 482   
 483   <#-- Number of items per page selector - Combo Box implementation -->
 484   <#macro NbItemsPerPageSelectorCombo nb_items_per_page>
 485   <select name="items_per_page">
 486       <#list [ "10" , "20" , "50" , "100" ] as nb>
 487       <#if nb_items_per_page = nb >
 488       <option selected="selected" value="${nb}">${nb}</option>
 489       <#else>
 490       <option value="${nb}">${nb}</option>
 491       </#if>
 492       </#list>
 493   </select>
 494   </#macro>
 495   
 496   <#-- Number of items per page selector - Radio List implementation -->
 497   <#macro NbItemsPerPageSelectorRadioList nb_items_per_page>
 498   <#list [ "5" , "10" , "20" , "50" ] as nb>
 499   <#if nb = nb_items_per_page > 
 500   <input value="${nb}" id="items_per_page${nb}" name="items_per_page" class="radio" type="radio" checked /><label for="items_per_page${nb}">${nb}</label>
 501   <#else>
 502   <input value="${nb}" id="items_per_page${nb}" name="items_per_page" class="radio" type="radio" /><label for="items_per_page${nb}">${nb}</label>
 503   </#if>
 504   </#list>
 505   </#macro>
 506   
 507   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 508     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 509     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 510   
 511   
 512   <script>
 513   
 514   $(function() {
 515     $('#solr').autocomplete({
 516       source: function(request, response) {
 517         $.ajax({
 518           url: '@base_url@servlet/plugins/SolrSuggest',
 519           dataType: 'jsonp',
 520   minLength: 3,
 521   data: {
 522   q: request.term,
 523   },
 524   success: function(data) {
 525   var formattedResponse = $.map(data.response.docs, function (item) {
 526   return {
 527   label: item.title,
 528   value: item.title,
 529   };
 530   });
 531   response( formattedResponse );
 532   }
 533   });
 534   },
 535   
 536   });
 537   });
 538   
 539   
 540   </script>
 541   
 542   
 543   <script type="text/javascript">
 544   
 545   //$('#map-wrapper').toggleClass('map-absolute');
 546   $('#map').toggle();
 547   $('.toggle-listmap').on('click', function( ){
 548           $('.toggle-listmap').each( function(){
 549               if( $(this).attr('aria-pressed') === 'false' ){
 550                   $(this).attr('aria-pressed','true')
 551               } else {
 552                   $(this).attr('aria-pressed','false')
 553               }
 554           });
 555           $('.pagination').toggle();
 556           $('#resultItems').toggle();
 557          
 558           $('#map').toggle();
 559           //$('#map-wrapper').toggleClass('map-absolute');
 560           // Send event to resize Map and center it
 561           window.dispatchEvent(new Event('resize'))
 562       });
 563   </script>