manage_appointmentdesks.html
1 <link rel="stylesheet" href="css/admin/plugins/appointment/appointment_desk.css">
2 <#if list_comments?size gt 3>
3 <style>#selectable thead { height: ${list_comments?size*3}vh;}</style>
4 </#if>
5 <@appointmentTabs tab='day' form=appointmentForm context=context>
6 <div id="calendar" class="fc fc-ltr">
7 <div class="fc-toolbar fc-header-toolbar">
8 <div class="fc-left">
9 <@tform class='d-inline-block' name='manage_appointmentdesk' action='jsp/admin/plugins/appointment/modules/desk/ManageAppointmentDesks.jsp' method='get'>
10 <#assign dDay = day?date>
11 <#assign pDay = dDay?long - (1 * 24 * 60 * 60 * 1000)>
12 <@input type='hidden' name='id_form' value='${idForm!1}' />
13 <@input type='hidden' name='day' value='${pDay?number_to_date}' />
14 <@input type='hidden' name='context' value='' />
15 <button type="submit" class="btn btn-primary btn-sm">#i18n{module.appointment.desk.label.prevDay}</button>
16 </@tform>
17 </div>
18 <div class="fc-right">
19 <@tform class='d-inline-block' name='manage_appointmentdesk' action='jsp/admin/plugins/appointment/modules/desk/ManageAppointmentDesks.jsp' method='get' class='hidden-xs'>
20 <#assign nDay = dDay?long + (1 * 24 * 60 * 60 * 1000)>
21 <@input type='hidden' name='id_form' value='${idForm!1}' />
22 <@input type='hidden' name='day' value='${nDay?number_to_date}' />
23 <@input type='hidden' name='context' value='' />
24 <button type="submit" class="btn btn-primary btn-sm">#i18n{module.appointment.desk.label.nextDay}</button>
25 </@tform>
26 </div>
27 <div class="fc-center">
28 <#if day?date?string != .now?date?string >
29 <@tform class='d-inline-block'name='manage_appointmentdesk' action='jsp/admin/plugins/appointment/modules/desk/ManageAppointmentDesks.jsp' method='get'>
30 <#assign dDay = .now>
31 <@input type='hidden' name='id_form' value='${idForm!1}' />
32 <@input type='hidden' name='day' value='${dDay?date}' />
33 <@input type='hidden' name='context' value='' />
34 <button type="submit" class="btn btn-primary btn-sm">#i18n{module.appointment.desk.label.today}</button>
35 </@tform>
36 </#if>
37 <@tform type='inline' id='manage_appointmentdesk' name='manage_appointmentdesk' action='jsp/admin/plugins/appointment/modules/desk/ManageAppointmentDesks.jsp' method='get'>
38 <@input type='hidden' name='id_form' value='${idForm!1}' />
39 <@input type='hidden' name='context' value='${context!"desk"}' />
40 <button type="button" class="fc-datepicker btn btn-primary btn-sm">Choisir une date </button>
41 <input type='text' class='h2' name='day' id='day' value="${day!''}" />
42 </@tform>
43 </div>
44 </div>
45 <#if list_slot?size gt 0>
46 <div class="fc-clear"></div>
47 <div class="fc-view-container ui-widget ">
48 <div class="fc-view fc-agendaWeek-view fc-agenda-view">
49 <@table id='selectable' class='clearfix' headBody=true>
50 <tr>
51 <th>
52 <#-- Check if day selected is less than today, if < 0 the add desk button is not displayed -->
53 <#assign isLteToday = (day?date?long / 86400000)?round - (.now?date?long / 86400000)?round + 1 />
54 <#if activateEditMode && isLteToday gte 0 >
55 <@button type='button' color='link' params=' data-bs-toggle="modal" data-bs-target="#deskModal"' title='#i18n{appointmentdesk.manage_appointmentdesks.label.addDesk}' hideTitle=[''] >
56 <@iconStack class='fa-1x'>
57 <@icon style='desktop' class='fa-stack-2x' />
58 <@icon style='plus mt-1' class='fa-stack-1x' />
59 </@iconStack>
60 </@button>
61 </#if>
62 </th>
63 <#assign x=numb_desk>
64 <#list 1..x as seq >
65 <th>#i18n{module.appointment.desk.label.desk} #i18n{module.appointment.desk.label.deskNo}${seq}</th>
66 </#list>
67 <th class="header-surbook bg-danger">#i18n{module.appointment.desk.label.surbooking}</th>
68 </tr>
69 <tr>
70 <td>
71 <#if permission_add_comment?boolean>
72 <@button id='toggle-add-comment' style='none' color='info mt-2 me-1' title='#i18n{appointment.create_comment.pageTitle}' params='data-bs-toggle="modal" data-bs-target="#commentModal" ' hideTitle=[''] >
73 <@iconStack class='fa-xs'>
74 <@icon prefix='' style='far fa-comment fa-stack-2x' />
75 <@icon prefix='' style='fas fa-plus fa-stack-1x' />
76 </@iconStack>
77 </@button>
78 </#if>
79 </td>
80 <td colspan="${x}">
81 <#if list_comments?size gt 0>
82 <#list list_comments as comment>
83 <#assign comment_class=''/>
84 <#if ( comment.startingValidityTime?? && comment.startingValidityTime == '00:00' && comment.endingValidityTime?? &&comment.endingValidityTime == '00:00' )>
85 <#assign comment_class=' allday'/>
86 </#if>
87 <#compress>
88 <#assign comment_title>${comment.comment?replace('\n', '')?replace('\r', '')?replace('\rn', '')?replace('\'', ''')}</#assign>
89 </#compress>
90 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end comments${comment_class!}" data-author="${comment.creatorUserName!}" id="comment-C${comment.id!}" data-json='{"id_comment":"C${comment.id}", "comment_text": "${comment_title!?json_string}", "start":"${comment.startingValidityDate!}", "comment_start":"${comment.startingValidityDate!}", "comment_start_time":"${comment.startingValidityTime!}", "start_time":"${comment.startingValidityTime!}", "comment_end":"${comment.endingValidityDate!}", "validity_end":"${comment.endingValidityDate!}", "comment_end_time":"${comment.endingValidityTime!}", "end_time":"${comment.endingValidityTime!}", "comment_creation_user":"${comment.userFirstName!} ${comment.userLastName!}", "comment_creation_date":"${comment.creationDate?date.xs!''}"}' style="cursor: pointer;">
91 <div class="fc-content">
92 <span class="fc-title">
93 <p>
94 <#if ( comment.startingValidityTime?? && comment.startingValidityTime != '00:00' && comment.endingValidityTime?? &&comment.endingValidityTime != '00:00' )>
95 ${comment.startingValidityTime!}/${comment.endingValidityTime!}
96 </#if>
97 ${comment_title!?remove_beginning('<p>')?remove_ending('</p>')?replace('\\\\"', '\\"')?replace('\\"', '\"')}
98 </p>
99 </span>
100 </div>
101 </a>
102 </#list>
103 </#if>
104 </td>
105 <td class="bg-danger"></td>
106 </tr>
107 <@tableHeadBodySeparator />
108 <#assign idx=1>
109 <#list list_slot?sort_by('startingDateTime') as slot>
110 <tr <#if idx=1>class="first"</#if>>
111 <td data-selectable="row" data-head-start="${slot.startingDateTime?datetime.iso?string["HH:mm"]}">${slot.startingTime!} </td>
112 <#setting datetime_format="iso">
113 <#list 1..x as seq >
114 <td class="${strClass!} place desk-${seq} slot-${slot.idSlot!} start-${slot.startingDateTime?datetime.iso?string["ddMM-HHmm"]} selectable <#if slot.isOpen && ( seq - slot.maxCapacity lte 0) >slot-open<#else>slot-close</#if>" data-start="${slot.startingDateTime!?datetime.iso?string["HHmm"]}" data-end="${slot.endingDateTime!?datetime.iso?string["HHmm"]}" data-marker=".desk-${seq}.slot-${slot.idSlot!}.start-${slot.startingDateTime?datetime.iso?string["ddMM-HHmm"]}" data-slot="{'idSlot':'${slot.idSlot!}','startingDateTime':'${slot.startingDateTime}','endingDateTime':'${slot.endingDateTime}','maxCapacity':'${slot.maxCapacity}','isOpen':'<#if slot.isOpen && seq lte slot.maxCapacity >true<#else>false</#if>','isSpecific':'${slot.isSpecific?c}','idForm':'${slot.idForm!1}'}" ></td>
115 </#list>
116 <td class="desk-${x+1} start-${slot.startingDateTime?datetime.iso?string["ddMM-HHmm"]} bg-danger is-surbook" data-slot="" >
117 </tr>
118 <#assign idx=0>
119 </#list>
120 </@table>
121 </div>
122 </div>
123 <#else>
124 <@row>
125 <@columns offsetSm=3 sm=4>
126 <@alert class='' color='warning'>
127 <p class="text-center">#i18n{module.appointment.desk.message.noDataAvailable} </p>
128 </@alert>
129 </@columns>
130 </@row>
131 </#if>
132 </div>
133 </@appointmentTabs>
134 <@modal id='qModal'>
135 <@modalBody>
136 <p id="loader" class="text-center">
137 <i class="fa fa-circle-o-notch fa-spin fa-5x fa-fw"></i>
138 <span class="sr-only">#i18n{module.appointment.desk.message.labelLoading}</span>
139 </p>
140 <iframe style="width:100%;height:60vh;border:0" frameborder="0" id="qModalFrame" src=""></iframe>
141 </@modalBody>
142 </@modal>
143 <@modal id='slottoggle' size='sm'>
144 <@modalBody>
145 <div style="margin-left:25%">
146 <@radioButton id='doOpenSlot' name='doManageSlot' value='1' labelFor='doOpenSlot' labelKey='#i18n{module.appointment.desk.label.open}' />
147 <@radioButton id='doCloseSlot' name='doManageSlot' value='0' labelFor='doCloseSlot' labelKey='#i18n{module.appointment.desk.label.close}' />
148 </div>
149 <div style="text-align: center;">
150 <@button id='saveSlotState' color='primary' title='#i18n{module.appointment.desk.label.save}' />
151 <@button id='cancelSlotState' color='secondary' title='#i18n{module.appointment.desk.label.cancel}' params='data-bs-dismiss="modal" aria-label="#i18n{module.appointment.desk.label.cancel}"' />
152 </div>
153 </@modalBody>
154 </@modal>
155 <#if activateEditMode>
156 <@modal id='deskModal'>
157 <@modalHeader modalTitle='#i18n{module.appointment.desk.increment.defaultTitle}' />
158 <@modalBody>
159 <p class="text-center">#i18n{module.appointment.desk.increment.defaultTitle}</p>
160 <@tform id='form-validate' action='jsp/admin/plugins/appointment/modules/desk/ManageAppointmentDesks.jsp' params='enctype="multipart/form-data"'>
161 <@input type='hidden' name='action' value='incrementMaxCapacity' />
162 <@input type='hidden' name='id_form' value='${idForm!}' />
163 <@input type='hidden' id='day' name='day' value='${day!}' />
164 <@formGroup labelFor='incrementing_value' labelKey='#i18n{module.appointment.desk.increment.labelIncrementingValue}' helpKey='${formGroupHelpKey!}' mandatory=true>
165 <@input type='number' name='incrementing_value' id='incrementing_value' value='1' maxlength=2 params='onkeypress="return validateQty(event);"' min=1 max=10 />
166 </@formGroup>
167 <@formGroup labelFor='type' labelKey='#i18n{module.appointment.desk.increment.labelType}'>
168 <@select name='type' id='type' items=list_types default_value='' />
169 </@formGroup>
170 <@formGroup labelFor='startingDate' labelKey='#i18n{module.appointment.desk.increment.labelStartingDate}'>
171 <@inputGroup>
172 <@input type='text' name='starting_date' id='startingDate' value="${day!}" />
173 <@inputGroupItem type='text'>
174 <@icon style='calendar' />
175 </@inputGroupItem>
176 </@inputGroup>
177 </@formGroup>
178 <@formGroup labelFor='startingTime' labelKey='#i18n{module.appointment.desk.increment.labelStartingTime}'>
179 <@inputGroup>
180 <@input type='text' name='starting_time' id='startingTime' value='' />
181 <@inputGroupItem type='text'>
182 <@icon style='clock' />
183 </@inputGroupItem>
184 </@inputGroup>
185 </@formGroup>
186 <@formGroup labelFor='endingDate' labelKey='#i18n{module.appointment.desk.increment.labelEndingDate}'>
187 <@inputGroup>
188 <@input type='text' name='ending_date' id='endingDate' value="${day!}" />
189 <@inputGroupItem type='text'>
190 <@icon style='calendar' />
191 </@inputGroupItem>
192 </@inputGroup>
193 </@formGroup>
194 <@formGroup labelFor='endingTime' labelKey='#i18n{module.appointment.desk.increment.labelEndingTime}'>
195 <@inputGroup>
196 <@input type='text' name='ending_time' id='endingTime' value='' />
197 <@inputGroupItem type='text'>
198 <@icon style='clock' />
199 </@inputGroupItem>
200 </@inputGroup>
201 </@formGroup>
202 <@formGroup>
203 <@button type='submit' name='save' id='save' buttonIcon='check' title='#i18n{module.appointment.desk.increment.labelValidate}' />
204 </@formGroup>
205 </@tform>
206 </@modalBody>
207 </@modal>
208 </#if>
209 <@getCommentModal 'commentModal' '#i18n{appointment.create_comment.pageTitle}' "comment" "startingValidityDate" "endingValidityDate" "idStartingTime" "idEndingTime" "doAddComment" idForm mailing_list />
210 <@getCommentModal 'modify-comment' '#i18n{appointment.modify_comment.pageTitle}' "comment" "modifyStartingValidityDate" "modifyEndingValidityDate" "idModifyStartingTime" "idModifyEndingTime" "doModifyComment" idForm mailing_list />
211
212 <#if activateEditMode>
213 <script src="js/admin/plugins/appointment/selectable.min.js"></script>
214 <script src="js/admin/plugins/appointment/selectable.table.min.js"></script>
215 </#if>
216 <script src="js/admin/plugins/appointment/appointment_desk.js"></script>
217 <script>
218 $(function () {
219 <#if activateEditMode>
220 /* Add selectable function to table cell */
221 setSelection();
222 </#if>
223 $('#day').datepicker({
224 language : '${language}',
225 weekStart : 1,
226 todayBtn : true,
227 todayHighLight : true,
228 autoclose : true
229 }).on( 'changeDate', function(e) {
230 $('#manage_appointmentdesk').submit();
231 });
232
233 $('.fc-datepicker').click( function(){
234 $('#day').datepicker('show');
235 });
236
237 $('#qModal').on('shown.bs.modal', function () {
238 $('#qModalFrame').attr("src", urlPublished );
239 $('#qModalFrame').load( function () {
240 $('#qModalFrame').show();
241 $('#loader').hide();
242 });
243 });
244 <#if activateEditMode>
245 // DESK ADD MODAL
246 $('#startingTime').datetimepicker({
247 format: 'HH:mm',
248 stepping: 14
249 });
250
251 $('#endingTime').datetimepicker({
252 format: 'HH:mm',
253 stepping: 1
254 });
255
256 $('#startingDate').datepicker({
257 language : "${language}",
258 weekStart : 1,
259 todayBtn : true,
260 todayHighLight : true,
261 autoclose : true
262 }).on( 'changeDate', function(e) {
263 $('#deskModal #day').val( $(this).val() );
264 });
265
266 $('#endingDate').datepicker({
267 language : "${language}",
268 weekStart : 1,
269 todayBtn : true,
270 todayHighLight : true,
271 autoclose : true
272 });
273 </#if>
274
275 $('.comments').each( function(){
276 moment.locale("${language}");
277 var json = { "container": "body", "placement" : "bottom", "html" : true, "trigger" : "hover" };
278 var event = JSON.parse( $(this).attr( 'data-json') ), labelEventDate='';
279
280 /* Add comment render */
281 labelEventDate=setLabelComment( event );
282
283 json.content = '<p>' + labelEventDate +'</p><p>Créé par <em>' + event.comment_creation_user + '</em> le <date>' + event.comment_creation_date + '</date></p><hr><p>' + event.comment_text + '</p>';
284 const popover = new bootstrap.Popover( this, json )
285
286 // Set comments backgrounds
287 var cDay=$('#day').val()
288 setCommentsBg( event, cDay, '${language}' );
289 });
290
291 // Manage Hour Comments highlight
292 $('.fa-comment').hover( function(){
293 hourComment( $(this), true )
294 return false;
295 }, function(){
296 hourComment( $(this), false )
297 });
298
299 var isCommentModerator=${permission_moderate_comment};
300 $('.comments').click(function(e) {
301 if( $(this).data('author') === '${permission_access_code}' || isCommentModerator ){
302 <@commentModal update=true />
303 }
304 });
305
306 /* Show udpates by highlighting */
307 slotChangeHighlight()
308 });
309
310 /* Get appointment list to set in day view */
311 const appointments = [<#list list_appointment?sort_by('appointmentTakenSqlDate')?reverse?sort_by('nbPlaces')?reverse as app>
312 <#compress>
313 {"id":"${app.idAppointment}","lastName" : "${app.user.lastName}","firstName" : "${app.user.firstName}","places": ${app.nbPlaces},"slots":[<#list app.slot?sort_by('startingDateTime') as slot>{"id" : "${slot.idSlot}", "start" : "${slot.startingDateTime!?datetime.iso?string["ddMM-HHmm"]}", },</#list>],},
314 </#compress>
315 </#list>];
316
317 /* Begin set RDV */
318 const nDesks=${numb_desk+1}, isMultiSlot=${appointmentForm.isMultislotAppointment?c}, appUrlDetail='jsp/admin/plugins/appointment/ManageAppointments.jsp?view=viewAppointment&id_form=${idForm!}&id_appointment=';
319
320 /* Add RDV in day view */
321 setDayView( appointments );
322 document.getElementById('loader').remove();
323 </script>
324 <#include "/admin/util/editor/editor.html" />
325 <@initEditor type='comment' />