templates/index.html (view raw)
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Ricorrenze</title>
5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
6 <style>
7 body {
8 font-family: Arial, sans-serif;
9 }
10 table {
11 width: 100%;
12 border-collapse: collapse;
13 }
14 table, th, td {
15 border: 1px solid black;
16 }
17 th, td {
18 padding: 10px;
19 text-align: left;
20 }
21 th {
22 background-color: #f2f2f2;
23 }
24 .actions {
25 display: flex;
26 gap: 10px;
27 }
28 .actions i {
29 cursor: pointer;
30 }
31 .add-row-button {
32 margin-top: 20px;
33 background-color: #4CAF50;
34 border: none;
35 color: white;
36 padding: 10px 20px;
37 text-align: center;
38 text-decoration: none;
39 display: inline-block;
40 font-size: 16px;
41 margin: 4px 2px;
42 transition-duration: 0.4s;
43 cursor: pointer;
44 border-radius: 12px;
45 }
46 .add-row-button:hover {
47 background-color: #45a049;
48 }
49 </style>
50 <script>
51 function submitForm(event) {
52 event.preventDefault();
53
54 const name = document.getElementById('name').value;
55 const description = document.getElementById('description').value;
56 const month = document.getElementById('month').value;
57 const day = document.getElementById('day').value;
58 const notify = document.getElementById('notify').checked;
59
60 const data = {
61 name: name,
62 description: description,
63 month: parseInt(month),
64 day: parseInt(day),
65 notify: notify
66 };
67
68 fetch('/occurrences', {
69 method: 'POST',
70 headers: {
71 'Content-Type': 'application/json'
72 },
73 body: JSON.stringify(data)
74 })
75 .then(response => {
76 if (response.ok) {
77 window.location.reload();
78 } else {
79 alert('Failed to add occurrence');
80 }
81 })
82 .catch(error => {
83 console.error('Error:', error);
84 alert('Failed to add occurrence');
85 });
86 }
87
88 function deleteOccurrence(id) {
89 if (confirm('Are you sure you want to delete this occurrence?')) {
90 fetch(`/occurrences/${id}`, {
91 method: 'DELETE'
92 })
93 .then(response => {
94 if (response.ok) {
95 window.location.reload();
96 } else {
97 alert('Failed to delete occurrence');
98 }
99 })
100 .catch(error => {
101 console.error('Error:', error);
102 alert('Failed to delete occurrence');
103 });
104 }
105 }
106
107 function createInputFields(id, name, description, day, month, notify, isNew) {
108 return `
109 <td>${isNew ? '' : id}</td>
110 <td><input type="text" value="${name || ''}" id="${isNew ? 'new' : 'edit'}-name-${id}"></td>
111 <td><input type="text" value="${description || ''}" id="${isNew ? 'new' : 'edit'}-description-${id}"></td>
112 <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>
113 <td><input type="checkbox" id="${isNew ? 'new' : 'edit'}-notify-${id}" ${notify ? 'checked' : ''}></td>
114 <td class="actions">
115 <i class="fas fa-save" title="Save" onclick="${isNew ? 'saveNewOccurrence()' : `saveOccurrence(${id})`}"></i>
116 <i class="fas fa-times" title="Cancel" onclick="${isNew ? 'cancelNewOccurrence()' : `cancelEdit(${id}, '${name}', '${description}', ${day}, ${month}, ${notify})`}"></i>
117 </td>
118 `;
119 }
120
121 function editOccurrence(id) {
122 const row = document.getElementById(`occurrence-${id}`);
123 const cells = row.getElementsByTagName('td');
124
125 const name = cells[1].innerText;
126 const description = cells[2].innerText;
127 const [day, month] = cells[3].innerText.split('/');
128 const notify = cells[4].getElementsByTagName('input')[0].checked;
129
130 row.innerHTML = createInputFields(id, name, description, day, month, notify, false);
131 }
132
133 function cancelEdit(id, name, description, day, month, notify) {
134 const row = document.getElementById(`occurrence-${id}`);
135 row.innerHTML = `
136 <td>${id}</td>
137 <td>${name}</td>
138 <td>${description}</td>
139 <td>${day}/${month}</td>
140 <td><input type="checkbox" ${notify ? 'checked' : ''} disabled></td>
141 <td class="actions">
142 <i class="fas fa-edit" title="Edit" onclick="editOccurrence(${id})"></i>
143 <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence(${id})"></i>
144 </td>
145 `;
146 }
147
148 function saveOccurrence(id) {
149 const name = document.getElementById(`edit-name-${id}`).value;
150 const description = document.getElementById(`edit-description-${id}`).value;
151 const day = parseInt(document.getElementById(`edit-day-${id}`).value);
152 const month = parseInt(document.getElementById(`edit-month-${id}`).value);
153 const notify = document.getElementById(`edit-notify-${id}`).checked;
154
155 const updatedData = {
156 id: id,
157 name: name,
158 description: description,
159 month: month,
160 day: day,
161 notify: notify
162 };
163
164 fetch('/occurrences', {
165 method: 'POST',
166 headers: {
167 'Content-Type': 'application/json'
168 },
169 body: JSON.stringify(updatedData)
170 })
171 .then(response => {
172 if (response.ok) {
173 window.location.reload();
174 } else {
175 alert('Failed to update occurrence');
176 }
177 })
178 .catch(error => {
179 console.error('Error:', error);
180 alert('Failed to update occurrence');
181 });
182 }
183
184 function addNewOccurrenceRow() {
185 const table = document.querySelector('table');
186 const newRow = table.insertRow(-1);
187 newRow.id = 'new-occurrence';
188 newRow.innerHTML = createInputFields('new', '', '', '', '', true, true);
189 }
190
191 function saveNewOccurrence() {
192 const name = document.getElementById('new-name-new').value;
193 const description = document.getElementById('new-description-new').value;
194 const day = parseInt(document.getElementById('new-day-new').value);
195 const month = parseInt(document.getElementById('new-month-new').value);
196 const notify = document.getElementById('new-notify-new').checked;
197
198 const newData = {
199 name: name,
200 description: description,
201 month: month,
202 day: day,
203 notify: notify
204 };
205
206 fetch('/occurrences', {
207 method: 'POST',
208 headers: {
209 'Content-Type': 'application/json'
210 },
211 body: JSON.stringify(newData)
212 })
213 .then(response => {
214 if (response.ok) {
215 window.location.reload();
216 } else {
217 alert('Failed to add occurrence');
218 }
219 })
220 .catch(error => {
221 console.error('Error:', error);
222 alert('Failed to add occurrence');
223 });
224 }
225
226 function cancelNewOccurrence() {
227 const newRow = document.getElementById('new-occurrence');
228 newRow.parentNode.removeChild(newRow);
229 }
230 </script>
231</head>
232<body>
233 <h1>Ricorrenze</h1>
234 <table>
235 <tr>
236 <th>ID</th>
237 <th>Nome</th>
238 <th>Descrizione</th>
239 <th>Data (gg/mm)</th>
240 <th>Notifica</th>
241 <th>Azioni</th>
242 </tr>
243 {{ range .Occurrences }}
244 <tr id="occurrence-{{ .ID }}">
245 <td>{{ .ID }}</td>
246 <td>{{ .Name }}</td>
247 <td>{{ .Description }}</td>
248 <td>{{ padZero .Day }}/{{ padZero .Month }}</td>
249 <td><input type="checkbox" {{if .Notify}}checked{{end}} disabled></td>
250 <td class="actions">
251 <i class="fas fa-edit" title="Edit" onclick="editOccurrence('{{ .ID }}')"></i>
252 <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence('{{ .ID }}')"></i>
253 </td>
254 </tr>
255 {{ else }}
256 <tr>
257 <td colspan="6">Nessuna ricorrenza.</td>
258 </tr>
259 {{ end }}
260 </table>
261 <div style="margin-top: 10px; text-align: center;">
262 <button class="add-row-button" onclick="addNewOccurrenceRow()"><i class="fas fa-plus"></i> Aggiungi</button>
263 </div>
264
265
266</body>
267</html>