1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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, "&") // & en premier
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
}
|
