search.html

 1   <#assign items_time= [
 2       { "code":"06:00", "name":"06h00"},
 3       { "code":"09:00", "name":"09h00"},
 4       { "code":"12:00", "name":"12h00"},
 5       { "code":"15:00", "name":"15h00"},
 6       { "code":"18:00", "name":"18h00"},
 7       { "code":"21:00", "name":"21h00"}
 8       ]>
 9   <#assign items_minutes= [
 10       { "code": "360", "name":"06h00"},
 11       { "code": "540", "name":"09h00"},
 12       { "code": "720", "name":"12h00"},
 13       { "code": "900", "name":"15h00"},
 14       { "code":"1080", "name":"18h00"},
 15       { "code":"1260", "name":"21h00"}
 16       ]>
 17   <div class="row">
 18       <div class="col-sm-12">
 19           <div class="container">        	
 20               <div class="row">
 21               	<@messages infos=infos errors=errors/>
 22   				<div  class="col-xs-12">
 23   					<div class="formGroupContainer messageContainer" id="message-carto"></div>
 24   				</div>
 25                   <div class="col-xs-12">
 26   					<#if (results.values)?? >
 27                           <#list results.values as groupcommand>
 28   							<#if  groupcommand.values?size gt 0>
 29   								<h3>#i18n{module.appointment.solrsearchapp.map}</h3>
 30   								<p><a href="jsp/site/Portal.jsp?page=appointmentsearch&view=search<#if category??>&amp;category=${category}</#if>&amp;nb_consecutive_slots=${nb_consecutive_slots!'1'}&amp;role=${role!'none'}#rdv_liste">#i18n{module.appointment.solrsearchapp.displayAvailableSlots}</a></p><p class="visible-xs">#i18n{module.appointment.solrsearchapp.mapAvailableForBigScreen}</p>
 31   							<#else>
 32   								<h3 class="text-warning" style="margin-bottom: 30px;font-size:30px"><i class="fa fa-exclamation-triangle"></i> #i18n{module.appointment.solrsearchapp.noMoreAvailableSlots}</h3>
 33   							</#if>
 34                           </#list>
 35   					</#if>
 36   			   </div>
 37               </div>
 38               <div class="row">
 39                   <div id="map_col" class="hidden-xs col-sm-12 col-md-12" style="position:relative; display:none;">
 40                       <div class="row">
 41                           <div id="map" class="col-xs-12">
 42                               <div class="leaflet-appointment-search" style="height:520px;"></div>
 43                               <a class="btn btn-primary btn-sm" id="tgSearchForm" href="#"><i class="fa fa-chevron-left hidden-xs hidden-sm"></i><i class="fa fa-angle-double-down hidden-md hidden-lg"></i><span class="hidden-xs hidden-sm"> #i18n{module.appointment.solrsearchapp.search}</span></a>
 44                           </div>
 45                       </div>
 46                       <div class="row text-center" id="occupancyRate">
 47                           <div class="col-xs-4">
 48                               <p style="margin: 5px 0px;">
 49                                   <img src="js/plugins/leaflet/leaflet/images/marker_hole.png"/> : #i18n{module.appointment.solrsearchapp.lessThanSeventy}
 50                               </p>
 51                           </div>
 52                           <div class="col-xs-4">
 53                               <p style="margin: 5px 0px;">
 54                                   <img src="js/plugins/leaflet/leaflet/images/marker_hole_yellow.png"/> : #i18n{module.appointment.solrsearchapp.lessThanNinety}
 55                               </p>
 56                           </div>
 57                           <div class="col-xs-4">
 58                               <p style="margin: 5px 0px;">
 59                                   <img src="js/plugins/leaflet/leaflet/images/marker_hole_red.png"/> : #i18n{module.appointment.solrsearchapp.moreThanNinety}
 60                               </p>
 61                           </div>
 62                       </div>
 63                   </div>
 64                   <div class="col-xs-12 col-sm-12 col-md-4" id="searchForm">
 65                       <div class="form-horizontal">
 66                           <legend>#i18n{module.appointment.solrsearchapp.simpleSearch}</legend>
 67                           <div class="form-group">
 68                               <div class="col-xs-12">
 69                                   <form method="post" action="jsp/site/Portal.jsp?page=appointmentsearch<#if category??>&amp;category=${category}</#if>" style="display:inline-block">
 70                                       <input name="to_date" value="${(.now?long + 7 * 86400000)?number_to_date?string("dd/MM/yyyy")}" type="hidden">
 71                                       <button type="submit" class="btn btn-primary btn-sm" name="view_search">#i18n{module.appointment.solrsearchapp.sevenDays}</button>
 72                                   </form>
 73                                   <form method="post" action="jsp/site/Portal.jsp?page=appointmentsearch<#if category??>&amp;category=${category}</#if>" style="display:inline-block">
 74                                       <input name="to_date" value="${(.now?long + 14 * 86400000)?number_to_date?string("dd/MM/yyyy")}" type="hidden">
 75                                       <button type="submit" class="btn btn-primary btn-sm" name="view_search">#i18n{module.appointment.solrsearchapp.fourteenDays}</button>
 76                                   </form>
 77                               </div>
 78                           </div>
 79                       </div>
 80                       <fieldset>
 81                           <legend id="advanced_search_button">#i18n{module.appointment.solrsearchapp.advancedSearch} <i class="fa fa-cogs"></i></legend>
 82                           <form name="search" method="post" action="jsp/site/Portal.jsp?page=appointmentsearch<#if category??>&amp;category=${category}</#if>">
 83                               <input name="page" value="appointmentsearch" type="hidden">
 84                               <input name="role" value="${role!'none'}" type="hidden">
 85                               <div id="advanced_search">
 86                                   <div class="form-group">
 87                                       <label>#i18n{module.appointment.solrsearchapp.dates}</label>
 88                                       <div class="row" style="margin-bottom:3px;">
 89                                           <div class="col-sm-6">    
 90                                               <label for="from_date" class="sr-only">#i18n{module.appointment.solrsearchapp.from}</label>
 91                                               <div class="input-group">
 92                                                   <span class="input-group-addon">#i18n{module.appointment.solrsearchapp.from}</span>
 93                                                   <input class="form-control" id="from_date" name="from_date" type="text" value="${from_date!}" />
 94                                               </div>
 95                                           </div>
 96                                           <div class="col-sm-6">
 97                                               <@comboWithParams name="from_time" default_value=from_time! additionalParameters='class="form-control"' items=items_time />
 98                                           </div>
 99                                       </div>
 100                                       <div class="row">
 101                                           <div class="col-sm-6">
 102                                               <label for="to_date" class="sr-only">
 103                                                   #i18n{module.appointment.solrsearchapp.to}
 104                                               </label>
 105                                               <div class="input-group">
 106                                                   <span class="input-group-addon">#i18n{module.appointment.solrsearchapp.to}</span>
 107                                                   <input class="form-control" id="to_date" name="to_date" type="text" value="${to_date!}" />
 108                                               </div>
 109                                           </div>
 110                                           <div class="col-sm-6">
 111                                               <@comboWithParams name="to_time" default_value=to_time! additionalParameters='class="form-control"' items=items_time />
 112                                           </div>
 113                                       </div>
 114                                   </div>
 115                                   <div class="form-group">
 116                                       <label>#i18n{module.appointment.solrsearchapp.schedule}</label>
 117                                       <div class="row">
 118                                           <div class="col-sm-6">
 119                                               <@comboWithParams name="from_day_minute" default_value=from_day_minute! additionalParameters='class="form-control"' items=items_minutes />
 120                                           </div>
 121                                           <div class="col-sm-6">
 122                                               <@comboWithParams name="to_day_minute" default_value=to_day_minute! additionalParameters='class="form-control"' items=items_minutes />
 123                                           </div>
 124                                       </div>
 125                                   </div>
 126                                   <div class="form-group">
 127                                   	<label>#i18n{module.appointment.solrsearchapp.form.nbSlots.label}</label>
 128                                       <div class="row">
 129                                       	<div class="col-sm-6">
 130   	                                    	<@input type='number' name="nb_consecutive_slots" min=1 value=nb_consecutive_slots!'1' />
 131   	                                    </div>
 132                                       </div>
 133                                   </div>
 134                                   <div class="form-group">
 135                                       <label>
 136                                           #i18n{module.appointment.solrsearchapp.daysOfTheWeek}
 137                                       </label>
 138                                       <div class="checkbox">
 139                                           <div class="row">
 140                                               <#if items_days_of_week??>
 141                                                   <#list items_days_of_week as item>
 142                                                       <#if item?size &gt; 4>
 143                                                           <#if item?index == 0 || item?index == 4><div class="col-sm-6"></#if>
 144                                                       </#if>
 145                                                       <#if item.checked >
 146                                                           <label for="document_type" class="col-xs-12">
 147                                                               <input checked class="checkbox" type="checkbox" name="days_of_week" value="${item.code}" />
 148                                                               &nbsp;${item.name}
 149                                                           </label>
 150                                                       <#else>
 151                                                           <label for="document_type" class="col-xs-12">
 152                                                               <input class="checkbox" type="checkbox" name="days_of_week" value="${item.code}" />
 153                                                               &nbsp;${item.name}
 154                                                           </label>
 155                                                       </#if>
 156                                                       <#if item?size &gt; 4>
 157                                                           <#if item?index == 3 || item?index == 6></div></#if>
 158                                                       </#if>
 159                                                   </#list>
 160                                               </#if>
 161                                           </div>
 162                                       </div>
 163                                   </div>
 164                                   <div class="form-group">
 165                                       <button type="submit" class="btn btn-primary btn-sm" name="action_search" value="#i18n{module.appointment.solrsearchapp.search}">
 166                                           #i18n{module.appointment.solrsearchapp.search}
 167                                       </button>
 168                                       <button type="submit" class="btn btn-danger btn-sm" name="action_clear" value="#i18n{module.appointment.solrsearchapp.reset}">
 169                                           #i18n{module.appointment.solrsearchapp.reset}
 170                                       </button>
 171                                   </div>
 172                               </div>
 173                           </form>
 174                       </fieldset>
 175                   </div>
 176               </div>
 177               <div class="row">
 178                   <div class="col-xs-12">
 179                       <#if (results.values)?? >
 180                           <#list results.values as groupcommand>
 181   							<#if  groupcommand.values?size gt 0>
 182   								<h3 id="rdv_liste">#i18n{module.appointment.solrsearchapp.firstAvailableSlots}</h3>
 183   								<div class="nextAvailableAppointments">
 184                                   <#list groupcommand.values as group>
 185                                       <div>
 186                                           <div><h4>${group.result.list[0].title?html}</h4></div>
 187                                           <div>
 188                                               <div>
 189                                                   <#if (group.result.list[0].appointmentslot_address_text)??>
 190                                                       <p><!-- #i18n{module.appointment.solrsearchapp.address} :  -->${group.result.list[0].appointmentslot_address_text?html}</p>
 191                                                   </#if>
 192                                                   <p class="emphasize_default">#i18n{module.appointment.solrsearchapp.nextAvailableSlots} :</p>
 193                                                   <ul>
 194                                                   <#list group.result.list as slot>
 195                                                       <li>
 196                                                           <a title="${slot.date?datetime?string["dd MMMM yyyy HH:mm"]}" href="${slot.url}&nbPlacesToTake=${nb_consecutive_slots!'1'}"<#if slot_index = 0> id="link_${group.groupValue?json_string}_first_slot"</#if>>${slot.date?datetime?string["dd MMMM yyyy HH:mm"]}</a>
 197                                                       </li>
 198                                                   </#list>
 199                                                   </ul>
 200                                                   <p>${group.result.numFound - group.result.list?size} #i18n{module.appointment.solrsearchapp.otherAvailableSchedules}</p>
 201                                                   <!-- <p><span class="emphasize_default">#i18n{module.appointment.solrsearchapp.nbOfFreeSlots} :</span> ${freePlacesCount[group.groupValue]} (#i18n{module.appointment.solrsearchapp.occupancyRate} : ${((totalPlacesCount[group.groupValue] - freePlacesCount[group.groupValue]) / totalPlacesCount[group.groupValue])?string.percent})</p> -->
 202                                               </div>
 203                                               <div>
 204                                                   <a id="link_${group.groupValue?json_string}_full_calendar" class="btn btn-primary btn-sm" href="${group.result.list[0].url_form_string}&nbPlacesToTake=${nb_consecutive_slots!'1'}">#i18n{module.appointment.solrsearchapp.completeSchedule}</a>
 205                                               </div>
 206                                           </div>
 207                                       </div>
 208                                   </#list>
 209   								</div>
 210   							</#if>
 211                           </#list>
 212   					</#if>
 213                   </div>
 214               </div>
 215           </div>
 216       </div>
 217   </div>
 218   <script src="js/jquery/plugins/ui/jquery-ui.min.js"></script>
 219   <script src="js/jquery/plugins/ui/ui.datepicker-fr.js"></script>
 220   <script>
 221       $( "#from_date" ).datepicker({
 222           regional: "fr",    
 223           changeMonth: true,
 224           changeYear: true,
 225           onClose: function( selectedDate ) {
 226               $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
 227         }
 228       }).datepicker(  );
 229       $( "#to_date" ).datepicker({
 230         regional: "fr",    
 231         changeMonth: true,
 232         changeYear: true,
 233         onClose: function( selectedDate ) {
 234           $( "#from_date" ).datepicker( "option", "maxDate", selectedDate );
 235         }
 236       });
 237       <#assign comma=false>
 238       window.lutece_appointment_solrsearchapp_points = [
 239           <#if (results.values)??>
 240           <#list results.values as groupcommand>
 241           <#list groupcommand.values as group>
 242           <#if (group.result.list[0].appointmentslot_geojson)??>
 243           <#if comma>,<#else><#assign comma=true></#if>
 244           {
 245               "type": "appointment",
 246               "code": "appointment",
 247               "url_base": "${group.result.list[0].url_base_string?json_string}",
 248               "id": "${group.result.list[0].uid_form_string?json_string}",
 249               "geojson": ${group.result.list[0].appointmentslot_geojson}
 250           }
 251           </#if>
 252           </#list>
 253           </#list>
 254           </#if>
 255       ];
 256       window.lutece_appointment_solrsearchapp_freePlaces = {
 257           <#if (results.values)??>
 258           <#list results.values as groupcommand>
 259           <#list groupcommand.values as group>
 260           "${group.groupValue?json_string}": {
 261               "free": ${freePlacesCount[group.groupValue]},
 262               "total": ${totalPlacesCount[group.groupValue]}
 263           }<#if group_has_next>,</#if>
 264           </#list>
 265           </#list>
 266           </#if>
 267       }
 268       $(document).ready(function() {
 269           $("#map_col").show();
 270           $("#searchForm").hide();
 271           doDisplaySearchForm();
 272           /*$("#advanced_search").hide();*/
 273           $("#advanced_search_button").click(function () {
 274               $("#advanced_search").toggle();
 275           });
 276           $("#tgSearchForm").click(function () {
 277               doDisplaySearchForm();
 278               return false;
 279           });
 280           function doDisplaySearchForm(){
 281   			var msgCarto = $('#cartomessage').html();
 282   			$('#message-carto').html( msgCarto );
 283               $("#searchForm").toggle();
 284               $("#map_col").toggleClass("col-md-8").toggleClass("col-md-12");
 285               $("#tgSearchForm > i.hidden-xs").toggleClass("fa fa-chevron-left").toggleClass("fa fa-chevron-right");
 286               $("#tgSearchForm > i.hidden-md").toggleClass("fa fa-angle-double-down").toggleClass("fa fa-angle-double-up");
 287               $("#tgSearchForm > span.hidden-xs").toggleClass("hidden");
 288               if ( typeof(map) != 'undefined' ) {
 289                   map.invalidateSize(true);
 290               }
 291           }
 292       });
 293   </script>