templates/index.html (view raw)
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>Ricorrenze</title>
6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
7 <style>
8 body {
9 font-family: Arial, sans-serif;
10 }
11
12 table {
13 width: 100%;
14 border-collapse: collapse;
15 }
16
17 table,
18 th,
19 td {
20 border: 1px solid black;
21 }
22
23 th,
24 td {
25 padding: 10px;
26 text-align: left;
27 }
28
29 th {
30 background-color: #f2f2f2;
31 }
32
33 .actions i {
34 cursor: pointer;
35 padding-right: 5px;
36 }
37
38 .cute-button {
39 margin-top: 20px;
40 background-color: #4CAF50;
41 border: none;
42 color: white;
43 padding: 10px 20px;
44 text-align: center;
45 text-decoration: none;
46 display: inline-block;
47 font-size: 16px;
48 margin: 4px 2px;
49 transition-duration: 0.4s;
50 cursor: pointer;
51 border-radius: 12px;
52 }
53
54 .cute-button:hover {
55 background-color: #45a049;
56 }
57
58 .cute-button-red {
59 background-color: #af4c4c;
60 }
61
62 .cute-button-red:hover {
63 background-color: #a14545;
64 }
65
66 .hidden {
67 display: none;
68 }
69 </style>
70</head>
71
72<body>
73 <h1>Ricorrenze</h1>
74 <table>
75 <tr>
76 <th>ID</th>
77 <th>Nome</th>
78 <th>Descrizione</th>
79 <th>Data (gg/mm)</th>
80 <th>Notifica</th>
81 <th>Azioni</th>
82 </tr>
83 {{ range .Occurrences }}
84 <tr id="occurrence-{{ .ID }}">
85 <td>{{ .ID }}</td>
86 <td>{{ .Name }}</td>
87 <td>{{ .Description }}</td>
88 <td>{{ padZero .Day }}/{{ padZero .Month }}</td>
89 <td><input type="checkbox" {{if .Notify}}checked{{end}} disabled></td>
90 <td class="actions">
91 <i class="fas fa-edit" title="Edit" onclick="editOccurrence('{{ .ID }}')"></i>
92 <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence('{{ .ID }}')"></i>
93 </td>
94 </tr>
95 {{ else }}
96 <tr>
97 <td colspan="6">Nessuna ricorrenza.</td>
98 </tr>
99 {{ end }}
100 </table>
101 <div style="margin-top: 10px; text-align: center;">
102 <button id="add-row-button" class="cute-button" onclick="addNewOccurrenceRow()">
103 <i class="fas fa-plus"></i> Aggiungi</button>
104 <button id="save-row-button" class="cute-button hidden" onclick="saveNewOccurrence()">
105 <i class="fas fa-save"></i> Salva
106 </button>
107 <button id="cancel-row-button" class="cute-button cute-button-red hidden" onclick="cancelNewOccurrence()">
108 <i class="fas fa-times"></i> Annulla
109 </button>
110 </div>
111
112
113 <script defer>
114 const hiddenClass = 'hidden';
115 const addButton = document.getElementById('add-row-button');
116 const saveButton = document.getElementById('save-row-button');
117 const cancelButton = document.getElementById('cancel-row-button');
118
119 function submitForm(event) {
120 event.preventDefault();
121
122 const name = document.getElementById('name').value;
123 const description = document.getElementById('description').value;
124 const month = document.getElementById('month').value;
125 const day = document.getElementById('day').value;
126 const notify = document.getElementById('notify').checked;
127
128 const data = {
129 name: name,
130 description: description,
131 month: parseInt(month),
132 day: parseInt(day),
133 notify: notify
134 };
135
136 fetch('/occurrences', {
137 method: 'POST',
138 headers: {
139 'Content-Type': 'application/json'
140 },
141 body: JSON.stringify(data)
142 })
143 .then(response => {
144 if (response.ok) {
145 window.location.reload();
146 } else {
147 alert('Failed to add occurrence');
148 }
149 })
150 .catch(error => {
151 console.error('Error:', error);
152 alert('Failed to add occurrence');
153 });
154 }
155
156 function deleteOccurrence(id) {
157 if (confirm('Sei sicuro di voler eliminare questa ricorrenza?')) {
158 fetch(`/occurrences/${id}`, {
159 method: 'DELETE'
160 })
161 .then(response => {
162 if (response.ok) {
163 window.location.reload();
164 } else {
165 alert('Eliminazione fallita.');
166 }
167 })
168 .catch(error => {
169 console.error('Error:', error);
170 alert('Non sono riuscito a contattare il backend.');
171 });
172 }
173 }
174
175 function padNumber(input, n=2) {
176 return input.toString().padStart(n, '0');
177 }
178
179 function createRow(id, name, description, day, month, notify) {
180 return `
181 <td>${id}</td>
182 <td>${name}</td>
183 <td>${description}</td>
184 <td>${padNumber(day)}/${padNumber(month)}</td>
185 <td><input type="checkbox" ${notify ? 'checked' : ''} disabled></td>
186 <td class="actions">
187 <i class="fas fa-edit" title="Edit" onclick="editOccurrence(${id})"></i>
188 <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence(${id})"></i>
189 </td>
190 `;
191 }
192
193 function createInputFields(id, name, description, day, month, notify, isNew) {
194 return `
195 <td>${isNew ? '' : id}</td>
196 <td><input type="text" value="${name || ''}" id="${isNew ? 'new' : 'edit'}-name-${id}"></td>
197 <td><input type="text" value="${description || ''}" id="${isNew ? 'new' : 'edit'}-description-${id}"></td>
198 <td><input type="number" value="${day || ''}" id="${isNew ? 'new' : 'edit'}-day-${id}" min="1" max="31"> / <input type="number" value="${month || ''}" id="${isNew ? 'new' : 'edit'}-month-${id}" min="1" max="12"></td>
199 <td><input type="checkbox" id="${isNew ? 'new' : 'edit'}-notify-${id}" ${notify ? 'checked' : ''}></td>
200 <td class="actions">
201 ${isNew ? '' : `
202 <i class="fas fa-save" title="Save" onclick="saveOccurrence(${id})"></i>
203 <i class="fas fa-times" title="Cancel" onclick="cancelEdit(${id}, '${name}', '${description}', ${day}, ${month}, ${notify})"></i>
204 `}
205 </td>
206 `;
207 }
208
209 function editOccurrence(id) {
210 const row = document.getElementById(`occurrence-${id}`);
211 const cells = row.getElementsByTagName('td');
212
213 const name = cells[1].innerText;
214 const description = cells[2].innerText;
215 const [day, month] = cells[3].innerText.split('/');
216 const notify = cells[4].getElementsByTagName('input')[0].checked;
217
218 row.innerHTML = createInputFields(id, name, description, day, month, notify, false);
219 }
220
221 function cancelEdit(id, name, description, day, month, notify) {
222 const row = document.getElementById(`occurrence-${id}`);
223 row.innerHTML = createRow(id, name, description, day, month, notify);
224 }
225
226 function saveOccurrence(id) {
227 const name = document.getElementById(`edit-name-${id}`).value;
228 const description = document.getElementById(`edit-description-${id}`).value;
229 const day = parseInt(document.getElementById(`edit-day-${id}`).value);
230 const month = parseInt(document.getElementById(`edit-month-${id}`).value);
231 const notify = document.getElementById(`edit-notify-${id}`).checked;
232
233 const updatedData = {
234 id: id,
235 name: name,
236 description: description,
237 month: month,
238 day: day,
239 notify: notify
240 };
241
242 fetch('/occurrences', {
243 method: 'POST',
244 headers: {
245 'Content-Type': 'application/json'
246 },
247 body: JSON.stringify(updatedData)
248 })
249 .then(response => {
250 if (response.ok) {
251 window.location.reload();
252 } else {
253 alert('Failed to update occurrence');
254 }
255 })
256 .catch(error => {
257 console.error('Error:', error);
258 alert('Non sono riuscito a contattare il backend.');
259 });
260 }
261
262 function addNewOccurrenceRow() {
263 const table = document.querySelector('table');
264 const newRow = table.insertRow(-1);
265 newRow.id = 'new-occurrence';
266 newRow.innerHTML = createInputFields('new', '', '', '', '', true, true);
267
268 hideAddButton();
269 }
270 function hideAddButton() {
271 addButton.classList.add(hiddenClass);
272 saveButton.classList.remove(hiddenClass);
273 cancelButton.classList.remove(hiddenClass);
274 console.log("hidden");
275 }
276
277 function showAddButton() {
278 addButton.classList.remove(hiddenClass);
279 saveButton.classList.add(hiddenClass);
280 cancelButton.classList.add(hiddenClass);
281 console.log("shown");
282 }
283
284 function saveNewOccurrence() {
285 const name = document.getElementById('new-name-new').value;
286 const description = document.getElementById('new-description-new').value;
287 const day = parseInt(document.getElementById('new-day-new').value);
288 const month = parseInt(document.getElementById('new-month-new').value);
289 const notify = document.getElementById('new-notify-new').checked;
290
291 const newData = {
292 name: name,
293 description: description,
294 month: month,
295 day: day,
296 notify: notify
297 };
298
299 fetch('/occurrences', {
300 method: 'POST',
301 headers: {'Content-Type': 'application/json'},
302 body: JSON.stringify(newData)
303 })
304 .then(response => {
305 if (!response.ok) {
306 console.error('Error:', response.status);
307 alert('Controlla che i campi siano validi.');
308 return;
309 }
310 const newRow = document.getElementById('new-occurrence');
311 response.json().then((res) => {
312 newRow.id = `occurrence-${res.id}`;
313 newRow.innerHTML = createRow(res.id, name, description, day, month, notify);
314 showAddButton();
315 })
316
317 })
318 .catch(error => {
319 console.error('Error:', error);
320 alert('Non sono riuscito a contattare il backend.');
321 });
322 }
323
324 function cancelNewOccurrence() {
325 // Remove the newly added row
326 const newRow = document.getElementById('new-occurrence');
327 newRow.parentNode.removeChild(newRow);
328
329 showAddButton();
330 }
331 </script>
332
333</body>
334
335</html>