classe CalendarModalView, contrôles getElementOrThrow et assertElementTypeHEADmaster

1 files changed, 120 insertions, 0 deletions

diff --git a/public/js/CalendarModalView.js b/public/js/CalendarModalView.js
new file mode 100644
index 0000000..a7afba9
--- /dev/null
+++ b/public/js/CalendarModalView.js
@@ -0,0 +1,120 @@
+// js/CalendarModalView.js
+
+class CalendarModalView {
+    constructor(data) {
+        this.modal = '';
+        if (data.mode !== 'show' && data.mode !== 'new' && data.mode !== 'edit') {
+            throw new Error("unknown mode in CalendarModal's constructor");
+        }
+        this.data = data;
+    }
+    getView() {
+        switch (this.data.mode) {
+            case 'show':
+                this.makeShowView();
+                break;
+            case 'new':
+            case 'edit':
+                this.makeEditView();
+                break;
+            default:
+                throw new Error("unknown mode set in CalendarModal");
+        }
+        return this.modal;
+    }
+    makeShowView() {
+        if (this.data.mode !== 'show') {
+            throw new Error('');
+        }
+        if (this.data.all_day) {
+            this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur
+        }
+        this.modal += `<div id="event" style="border-color: ` + this.escapeHtml(this.data.color) + `;">
+            <h3>` + this.escapeHtml(this.data.title) + `</h3>
+            <p><i>` + this.escapeHtml(this.data.description) + `</i></p>`;
+        // allDay un jour
+        if (this.data.all_day && (this.data.start.getTime() === this.data.end.getTime())) { // comparaison des timestamps
+            this.modal += `<p>le ` + this.escapeHtml(this.displayDate(this.data.start)) + `</p>`; // affichage simplifié évènement d'un jour
+        }
+        // allDay plusieurs jours
+        else if (this.data.all_day) {
+            this.modal += `<p>du ` + this.escapeHtml(this.displayDate(this.data.start)) + `<br>
+                au ` + this.escapeHtml(this.displayDate(this.data.end)) + `</p>`;
+        }
+        // non allDay
+        else {
+            this.modal += `<p>du ` + this.escapeHtml(this.displayDate(this.data.start)) + `<br>
+                à ` + this.escapeHtml(this.displayHour(this.data.start)) + `</p>
+            <p>au ` + this.escapeHtml(this.displayDate(this.data.end)) + `<br>
+                à ` + this.escapeHtml(this.displayHour(this.data.end)) + `</p>`;
+        }
+        this.modal += `<button class="event_close_button">Fermer</button>
+        </div>`;
+    }
+    displayDate(date) {
+        return date.getDate().toString().padStart(2, '0') + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getFullYear();
+    }
+    displayHour(date) {
+        return date.getHours().toString().padStart(2, '0') + 'h' + date.getMinutes().toString().padStart(2, '0');
+    }
+    makeEditView() {
+        if (this.data.mode === 'show') {
+            throw new Error('');
+        }
+        if (this.data.all_day) {
+            this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur
+        }
+        const title = this.data.mode === 'edit' ? this.data.title : '';
+        const id = this.data.mode === 'edit' ? this.data.id : '';
+        const description = this.data.mode === 'edit' ? this.data.description : '';
+        const color = this.data.mode === 'edit' ? this.data.color : '#3788D8'; // bleu par défaut
+        this.modal += `<div id="event" style="border-color: ` + this.escapeHtml(color) + `;">
+                                <div class="event_title_box">
+                            <h2>` + (this.data.mode === 'edit' ? "Modifier un" : "Nouvel") + ` évènement</h2>
+                        </div>
+                        <div class="">
+                            <label for="event_title">Nom</label>
+                            <input type="text" id="event_title" value="` + this.escapeHtml(title !== null && title !== void 0 ? title : '') + `">
+                            <input type="hidden" id="event_id" value="` + this.escapeHtml(id !== null && id !== void 0 ? id : '') + `">
+                        </div>
+                        <div class="">
+                            <label for="event_description">Description</label>
+                            <textarea id="event_description" cols="27">` + this.escapeHtml(description !== null && description !== void 0 ? description : '') + `</textarea>
+                        </div>
+                        <div class="">
+                            <input type="checkbox" id="event_all_day" class="event_all_day" ` + (this.data.all_day ? 'checked' : '') + `>
+                            <label for="event_all_day">Journée entière</label>
+                        </div>
+                        <div class="">
+                            <label for="event_start">Début</label>
+                            <input type="` + this.escapeHtml(this.data.input_type) + `" id="event_start" value="` + this.escapeHtml(this.makeInputValue(this.data.start)) + `">
+                        </div>
+                        <div class="">
+                            <label for="event_end">Fin</label>
+                            <input type="` + this.escapeHtml(this.data.input_type) + `" id="event_end" value="` + this.escapeHtml(this.makeInputValue(this.data.end)) + `">
+                        </div>
+                        <div class="">
+                            <label for="event_color">Couleur</label>
+                            <input type="color" id="event_color" value="` + this.escapeHtml(color) + `">
+                        </div>`
+            + (this.data.mode === 'edit'
+                ? '<button class="submit_update_event">Modifier</button><button class="delete_event">Supprimer</button>'
+                : '<button class="submit_new_event">Enregistrer</button>')
+            + `<button class="event_close_button">Annuler</button>
+                    </div>`;
+    }
+    makeInputValue(date) {
+        return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')
+            + (this.data.all_day ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0'));
+    }
+    escapeHtml(html) {
+        if (html === null || html === undefined)
+            return '';
+        return String(html)
+            .replace(/&/g, "&amp;") // & en premier
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+}