diff options
Diffstat (limited to 'public/js/calendar.js')
| -rw-r--r-- | public/js/calendar.js | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/public/js/calendar.js b/public/js/calendar.js index 8809246..b3aa927 100644 --- a/public/js/calendar.js +++ b/public/js/calendar.js | |||
| @@ -1,7 +1,7 @@ | |||
| 1 | // js/calendar.js | 1 | // js/calendar.js |
| 2 | 2 | ||
| 3 | document.addEventListener('DOMContentLoaded', function(){ | 3 | document.addEventListener('DOMContentLoaded', function(){ |
| 4 | const calendarEl = document.getElementById('calendar'); | 4 | const calendarEl = getElementOrThrow('calendar'); |
| 5 | let selected_start_string = null; | 5 | let selected_start_string = null; |
| 6 | 6 | ||
| 7 | const calendar = new FullCalendar.Calendar(calendarEl,{ | 7 | const calendar = new FullCalendar.Calendar(calendarEl,{ |
| @@ -58,7 +58,10 @@ document.addEventListener('DOMContentLoaded', function(){ | |||
| 58 | //unselect: function(event, view){}, | 58 | //unselect: function(event, view){}, |
| 59 | 59 | ||
| 60 | eventClick: function(info){ | 60 | eventClick: function(info){ |
| 61 | const aside = document.querySelector('aside'); | 61 | const modal = getElementOrThrow('event_modal'); |
| 62 | if(!info.event.start || !info.event.end){ | ||
| 63 | throw new Error('modale non conforme'); | ||
| 64 | } | ||
| 62 | const checked = info.event.allDay ? 'checked' : ''; | 65 | const checked = info.event.allDay ? 'checked' : ''; |
| 63 | 66 | ||
| 64 | // change des objets Date en chaînes compatibles avec les input | 67 | // change des objets Date en chaînes compatibles avec les input |
| @@ -75,25 +78,25 @@ document.addEventListener('DOMContentLoaded', function(){ | |||
| 75 | const start_date = start.split('T')[0]; | 78 | const start_date = start.split('T')[0]; |
| 76 | const start_hour = (info.event.allDay ? '' : '<br>à ' + start.split('T')[1]).replace(":", "h"); | 79 | const start_hour = (info.event.allDay ? '' : '<br>à ' + start.split('T')[1]).replace(":", "h"); |
| 77 | const formated_start = start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour; | 80 | const formated_start = start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour; |
| 78 | const end = formatDate(info.event.allDay ? minusOneDay(info.event.end) : info.event.end, info.event.allDay); | 81 | const end = formatDate(info.event.allDay ? minusOneDay(info.event.end) : info.event.end); |
| 79 | const end_date = end.split('T')[0]; | 82 | const end_date = end.split('T')[0]; |
| 80 | const end_hour = (info.event.allDay ? '' : '<br>à ' + end.split('T')[1]).replace(":", "h"); | 83 | const end_hour = (info.event.allDay ? '' : '<br>à ' + end.split('T')[1]).replace(":", "h"); |
| 81 | const formated_end = end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour; | 84 | const formated_end = end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour; |
| 82 | 85 | ||
| 83 | let aside_content = `<div id="event" style="border-color: ` + info.event.backgroundColor +`;"> | 86 | let modal_content = `<div id="event" style="border-color: ` + info.event.backgroundColor +`;"> |
| 84 | <h3>` + info.event.title + `</h3> | 87 | <h3>` + info.event.title + `</h3> |
| 85 | <p><i>` + info.event.extendedProps.description + `</i></p>`; | 88 | <p><i>` + info.event.extendedProps.description + `</i></p>`; |
| 86 | if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour | 89 | if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour |
| 87 | aside_content = aside_content + `<p>le ` + formated_start + `</p>`; | 90 | modal_content = modal_content + `<p>le ` + formated_start + `</p>`; |
| 88 | } | 91 | } |
| 89 | else{ | 92 | else{ |
| 90 | aside_content = aside_content + `<p>du ` + formated_start + `</p> | 93 | modal_content = modal_content + `<p>du ` + formated_start + `</p> |
| 91 | <p>au ` + formated_end + `</p>`; | 94 | <p>au ` + formated_end + `</p>`; |
| 92 | } | 95 | } |
| 93 | aside_content += `<button class="event_close_button">Fermer</button> | 96 | modal_content += `<button class="event_close_button">Fermer</button> |
| 94 | </div>`; | 97 | </div>`; |
| 95 | 98 | ||
| 96 | aside.innerHTML = aside_content; | 99 | modal.innerHTML = modal_content; |
| 97 | calendar.updateSize(); | 100 | calendar.updateSize(); |
| 98 | }, | 101 | }, |
| 99 | viewDidMount: function(info){ // déclenché lorsque qu'une nouvelle vue est chargée (mois, semaine...) | 102 | viewDidMount: function(info){ // déclenché lorsque qu'une nouvelle vue est chargée (mois, semaine...) |
| @@ -105,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function(){ | |||
| 105 | }); | 108 | }); |
| 106 | 109 | ||
| 107 | function hideModal(){ | 110 | function hideModal(){ |
| 108 | const aside = document.querySelector('aside'); | 111 | const modal = getElementOrThrow('event_modal'); |
| 109 | aside.innerHTML = ''; | 112 | modal.innerHTML = ''; |
| 110 | calendar.updateSize(); | 113 | calendar.updateSize(); |
| 111 | } | 114 | } |
| 112 | 115 | ||
| @@ -118,6 +121,10 @@ document.addEventListener('DOMContentLoaded', function(){ | |||
| 118 | 121 | ||
| 119 | // technique de la délégation d'événements pour utiliser un bouton ajouté dynamiquement | 122 | // technique de la délégation d'événements pour utiliser un bouton ajouté dynamiquement |
| 120 | document.addEventListener('click', function(event){ | 123 | document.addEventListener('click', function(event){ |
| 124 | if(!event.target){ | ||
| 125 | throw new Error('évènement click non conforme'); | ||
| 126 | } | ||
| 127 | assertElementType(event.target, HTMLElement); | ||
| 121 | if(event.target.classList.contains('event_close_button')){ | 128 | if(event.target.classList.contains('event_close_button')){ |
| 122 | hideModal(); | 129 | hideModal(); |
| 123 | } | 130 | } |
