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                                   <#--
 127   								FIXME REMOVED TEMPORARLY
 128                                   <div class="form-group">
 129                                   	<label>#i18n{module.appointment.titre.appointmenttitresearch.form.nbSlots.label}</label>
 130                                       <div class="row">
 131                                       	<div class="col-sm-6">
 132   	                                    	<@input type='number' name="nb_consecutive_slots" min=1 max=6 value=nb_consecutive_slots!'1' />
 133   	                                    </div>
 134                                       </div>
 135                                   </div>
 136   								-->
 137                                   <div class="form-group">
 138                                       <label>
 139                                           #i18n{module.appointment.solrsearchapp.daysOfTheWeek}
 140                                       </label>
 141                                       <div class="checkbox">
 142                                           <div class="row">
 143                                               <#if items_days_of_week??>
 144                                                   <#list items_days_of_week as item>
 145                                                       <#if item?size &gt; 4>
 146                                                           <#if item?index == 0 || item?index == 4><div class="col-sm-6"></#if>
 147                                                       </#if>
 148                                                       <#if item.checked >
 149                                                           <label for="document_type" class="col-xs-12">
 150                                                               <input checked class="checkbox" type="checkbox" name="days_of_week" value="${item.code}" />
 151                                                               &nbsp;${item.name}
 152                                                           </label>
 153                                                       <#else>
 154                                                           <label for="document_type" class="col-xs-12">
 155                                                               <input class="checkbox" type="checkbox" name="days_of_week" value="${item.code}" />
 156                                                               &nbsp;${item.name}
 157                                                           </label>
 158                                                       </#if>
 159                                                       <#if item?size &gt; 4>
 160                                                           <#if item?index == 3 || item?index == 6></div></#if>
 161                                                       </#if>
 162                                                   </#list>
 163                                               </#if>
 164                                           </div>
 165                                       </div>
 166                                   </div>
 167                                   <div class="form-group">
 168                                       <button type="submit" class="btn btn-primary btn-sm" name="action_search" value="#i18n{module.appointment.solrsearchapp.search}">
 169                                           #i18n{module.appointment.solrsearchapp.search}
 170                                       </button>
 171                                       <button type="submit" class="btn btn-danger btn-sm" name="action_clear" value="#i18n{module.appointment.solrsearchapp.reset}">
 172                                           #i18n{module.appointment.solrsearchapp.reset}
 173                                       </button>
 174                                   </div>
 175                               </div>
 176                           </form>
 177                       </fieldset>
 178                   </div>
 179               </div>
 180               <div class="row">
 181                   <div class="col-xs-12">
 182                       <#if (results.values)?? >
 183                           <#list results.values as groupcommand>
 184   							<#if  groupcommand.values?size gt 0>
 185   								<h3 id="rdv_liste">#i18n{module.appointment.solrsearchapp.firstAvailableSlots}</h3>
 186   								<div class="nextAvailableAppointments">
 187                                   <#list groupcommand.values as group>
 188                                       <div>
 189                                           <div><h4>${group.result.list[0].title?html}</h4></div>
 190                                           <div>
 191                                               <div>
 192                                                   <#if (group.result.list[0].appointmentslot_address_text)??>
 193                                                       <p><!-- #i18n{module.appointment.solrsearchapp.address} :  -->${group.result.list[0].appointmentslot_address_text?html}</p>
 194                                                   </#if>
 195                                                   <p class="emphasize_default">#i18n{module.appointment.solrsearchapp.nextAvailableSlots} :</p>
 196                                                   <ul>
 197                                                   <#list group.result.list as slot>
 198                                                       <li>
 199                                                           <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>
 200                                                       </li>
 201                                                   </#list>
 202                                                   </ul>
 203                                                   <p>${group.result.numFound - group.result.list?size} #i18n{module.appointment.solrsearchapp.otherAvailableSchedules}</p>
 204                                                   <!-- <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> -->
 205                                               </div>
 206                                               <div>
 207                                                   <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>
 208                                               </div>
 209                                           </div>
 210                                       </div>
 211                                   </#list>
 212   								</div>
 213   							</#if>
 214                           </#list>
 215   					</#if>
 216                   </div>
 217               </div>
 218           </div>
 219       </div>
 220   </div>
 221   <script src="js/jquery/plugins/ui/jquery-ui.min.js"></script>
 222   <script src="js/jquery/plugins/ui/ui.datepicker-fr.js"></script>
 223   <script>
 224       $( "#from_date" ).datepicker({
 225           regional: "fr",    
 226           changeMonth: true,
 227           changeYear: true,
 228           onClose: function( selectedDate ) {
 229               $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
 230         }
 231       }).datepicker(  );
 232       $( "#to_date" ).datepicker({
 233         regional: "fr",    
 234         changeMonth: true,
 235         changeYear: true,
 236         onClose: function( selectedDate ) {
 237           $( "#from_date" ).datepicker( "option", "maxDate", selectedDate );
 238         }
 239       });
 240       <#assign comma=false>
 241       window.lutece_appointment_solrsearchapp_points = [
 242           <#if (results.values)??>
 243           <#list results.values as groupcommand>
 244           <#list groupcommand.values as group>
 245           <#if (group.result.list[0].appointmentslot_geojson)??>
 246           <#if comma>,<#else><#assign comma=true></#if>
 247           {
 248               "type": "appointment",
 249               "code": "appointment",
 250               "url_base": "${group.result.list[0].url_base_string?json_string}",
 251               "id": "${group.result.list[0].uid_form_string?json_string}",
 252               "geojson": ${group.result.list[0].appointmentslot_geojson}
 253           }
 254           </#if>
 255           </#list>
 256           </#list>
 257           </#if>
 258       ];
 259       window.lutece_appointment_solrsearchapp_freePlaces = {
 260           <#if (results.values)??>
 261           <#list results.values as groupcommand>
 262           <#list groupcommand.values as group>
 263           "${group.groupValue?json_string}": {
 264               "free": ${freePlacesCount[group.groupValue]},
 265               "total": ${totalPlacesCount[group.groupValue]}
 266           }<#if group_has_next>,</#if>
 267           </#list>
 268           </#list>
 269           </#if>
 270       }
 271       $(document).ready(function() {
 272           $("#map_col").show();
 273           $("#searchForm").hide();
 274           doDisplaySearchForm();
 275           /*$("#advanced_search").hide();*/
 276           $("#advanced_search_button").click(function () {
 277               $("#advanced_search").toggle();
 278           });
 279           $("#tgSearchForm").click(function () {
 280               doDisplaySearchForm();
 281               return false;
 282           });
 283           function doDisplaySearchForm(){
 284   			var msgCarto = $('#cartomessage').html();
 285   			$('#message-carto').html( msgCarto );
 286               $("#searchForm").toggle();
 287               $("#map_col").toggleClass("col-md-8").toggleClass("col-md-12");
 288               $("#tgSearchForm > i.hidden-xs").toggleClass("fa fa-chevron-left").toggleClass("fa fa-chevron-right");
 289               $("#tgSearchForm > i.hidden-md").toggleClass("fa fa-angle-double-down").toggleClass("fa fa-angle-double-up");
 290               $("#tgSearchForm > span.hidden-xs").toggleClass("hidden");
 291               if ( typeof(map) != 'undefined' ) {
 292                   map.invalidateSize(true);
 293               }
 294           }
 295       });
 296   </script>