minor tweaks and improvements
BiRabittoh andronacomarco@gmail.com
Wed, 29 May 2024 17:26:10 +0200
2 files changed,
171 insertions(+),
103 deletions(-)
M
templates/index.html
→
templates/index.html
@@ -1,5 +1,6 @@
<!DOCTYPE html> <html> + <head> <title>Ricorrenze</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">@@ -7,28 +8,34 @@ <style>
body { font-family: Arial, sans-serif; } + table { width: 100%; border-collapse: collapse; } - table, th, td { + + table, + th, + td { border: 1px solid black; } - th, td { + + th, + td { padding: 10px; text-align: left; } + th { background-color: #f2f2f2; } - .actions { - display: flex; - gap: 10px; - } + .actions i { cursor: pointer; + padding-right: 5px; } - .add-row-button { + + .cute-button { margin-top: 20px; background-color: #4CAF50; border: none;@@ -43,11 +50,72 @@ transition-duration: 0.4s;
cursor: pointer; border-radius: 12px; } - .add-row-button:hover { + + .cute-button:hover { background-color: #45a049; } + + .cute-button-red { + background-color: #af4c4c; + } + + .cute-button-red:hover { + background-color: #a14545; + } + + .hidden { + display: none; + } </style> - <script> +</head> + +<body> + <h1>Ricorrenze</h1> + <table> + <tr> + <th>ID</th> + <th>Nome</th> + <th>Descrizione</th> + <th>Data (gg/mm)</th> + <th>Notifica</th> + <th>Azioni</th> + </tr> + {{ range .Occurrences }} + <tr id="occurrence-{{ .ID }}"> + <td>{{ .ID }}</td> + <td>{{ .Name }}</td> + <td>{{ .Description }}</td> + <td>{{ padZero .Day }}/{{ padZero .Month }}</td> + <td><input type="checkbox" {{if .Notify}}checked{{end}} disabled></td> + <td class="actions"> + <i class="fas fa-edit" title="Edit" onclick="editOccurrence('{{ .ID }}')"></i> + <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence('{{ .ID }}')"></i> + </td> + </tr> + {{ else }} + <tr> + <td colspan="6">Nessuna ricorrenza.</td> + </tr> + {{ end }} + </table> + <div style="margin-top: 10px; text-align: center;"> + <button id="add-row-button" class="cute-button" onclick="addNewOccurrenceRow()"> + <i class="fas fa-plus"></i> Aggiungi</button> + <button id="save-row-button" class="cute-button hidden" onclick="saveNewOccurrence()"> + <i class="fas fa-save"></i> Salva + </button> + <button id="cancel-row-button" class="cute-button cute-button-red hidden" onclick="cancelNewOccurrence()"> + <i class="fas fa-times"></i> Annulla + </button> + </div> + + + <script defer> + const hiddenClass = 'hidden'; + const addButton = document.getElementById('add-row-button'); + const saveButton = document.getElementById('save-row-button'); + const cancelButton = document.getElementById('cancel-row-button'); + function submitForm(event) { event.preventDefault();@@ -72,38 +140,56 @@ 'Content-Type': 'application/json'
}, body: JSON.stringify(data) }) - .then(response => { - if (response.ok) { - window.location.reload(); - } else { - alert('Failed to add occurrence'); - } - }) - .catch(error => { - console.error('Error:', error); - alert('Failed to add occurrence'); - }); - } - - function deleteOccurrence(id) { - if (confirm('Are you sure you want to delete this occurrence?')) { - fetch(`/occurrences/${id}`, { - method: 'DELETE' - }) .then(response => { if (response.ok) { window.location.reload(); } else { - alert('Failed to delete occurrence'); + alert('Failed to add occurrence'); } }) .catch(error => { console.error('Error:', error); - alert('Failed to delete occurrence'); + alert('Failed to add occurrence'); }); + } + + function deleteOccurrence(id) { + if (confirm('Sei sicuro di voler eliminare questa ricorrenza?')) { + fetch(`/occurrences/${id}`, { + method: 'DELETE' + }) + .then(response => { + if (response.ok) { + window.location.reload(); + } else { + alert('Eliminazione fallita.'); + } + }) + .catch(error => { + console.error('Error:', error); + alert('Non sono riuscito a contattare il backend.'); + }); } } + function padNumber(input, n=2) { + return input.toString().padStart(n, '0'); + } + + function createRow(id, name, description, day, month, notify) { + return ` + <td>${id}</td> + <td>${name}</td> + <td>${description}</td> + <td>${padNumber(day)}/${padNumber(month)}</td> + <td><input type="checkbox" ${notify ? 'checked' : ''} disabled></td> + <td class="actions"> + <i class="fas fa-edit" title="Edit" onclick="editOccurrence(${id})"></i> + <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence(${id})"></i> + </td> + `; + } + function createInputFields(id, name, description, day, month, notify, isNew) { return ` <td>${isNew ? '' : id}</td>@@ -112,8 +198,10 @@ <td><input type="text" value="${description || ''}" id="${isNew ? 'new' : 'edit'}-description-${id}"></td>
<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> <td><input type="checkbox" id="${isNew ? 'new' : 'edit'}-notify-${id}" ${notify ? 'checked' : ''}></td> <td class="actions"> - <i class="fas fa-save" title="Save" onclick="${isNew ? 'saveNewOccurrence()' : `saveOccurrence(${id})`}"></i> - <i class="fas fa-times" title="Cancel" onclick="${isNew ? 'cancelNewOccurrence()' : `cancelEdit(${id}, '${name}', '${description}', ${day}, ${month}, ${notify})`}"></i> + ${isNew ? '' : ` + <i class="fas fa-save" title="Save" onclick="saveOccurrence(${id})"></i> + <i class="fas fa-times" title="Cancel" onclick="cancelEdit(${id}, '${name}', '${description}', ${day}, ${month}, ${notify})"></i> + `} </td> `; }@@ -132,17 +220,7 @@ }
function cancelEdit(id, name, description, day, month, notify) { const row = document.getElementById(`occurrence-${id}`); - row.innerHTML = ` - <td>${id}</td> - <td>${name}</td> - <td>${description}</td> - <td>${day}/${month}</td> - <td><input type="checkbox" ${notify ? 'checked' : ''} disabled></td> - <td class="actions"> - <i class="fas fa-edit" title="Edit" onclick="editOccurrence(${id})"></i> - <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence(${id})"></i> - </td> - `; + row.innerHTML = createRow(id, name, description, day, month, notify); } function saveOccurrence(id) {@@ -168,17 +246,17 @@ 'Content-Type': 'application/json'
}, body: JSON.stringify(updatedData) }) - .then(response => { - if (response.ok) { - window.location.reload(); - } else { - alert('Failed to update occurrence'); - } - }) - .catch(error => { - console.error('Error:', error); - alert('Failed to update occurrence'); - }); + .then(response => { + if (response.ok) { + window.location.reload(); + } else { + alert('Failed to update occurrence'); + } + }) + .catch(error => { + console.error('Error:', error); + alert('Non sono riuscito a contattare il backend.'); + }); } function addNewOccurrenceRow() {@@ -186,6 +264,21 @@ const table = document.querySelector('table');
const newRow = table.insertRow(-1); newRow.id = 'new-occurrence'; newRow.innerHTML = createInputFields('new', '', '', '', '', true, true); + + hideAddButton(); + } + function hideAddButton() { + addButton.classList.add(hiddenClass); + saveButton.classList.remove(hiddenClass); + cancelButton.classList.remove(hiddenClass); + console.log("hidden"); + } + + function showAddButton() { + addButton.classList.remove(hiddenClass); + saveButton.classList.add(hiddenClass); + cancelButton.classList.add(hiddenClass); + console.log("shown"); } function saveNewOccurrence() {@@ -205,63 +298,38 @@ };
fetch('/occurrences', { method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, + headers: {'Content-Type': 'application/json'}, body: JSON.stringify(newData) }) - .then(response => { - if (response.ok) { - window.location.reload(); - } else { - alert('Failed to add occurrence'); - } - }) - .catch(error => { - console.error('Error:', error); - alert('Failed to add occurrence'); - }); + .then(response => { + if (!response.ok) { + console.error('Error:', response.status); + alert('Controlla che i campi siano validi.'); + return; + } + const newRow = document.getElementById('new-occurrence'); + response.json().then((res) => { + newRow.id = `occurrence-${res.id}`; + newRow.innerHTML = createRow(res.id, name, description, day, month, notify); + showAddButton(); + }) + + }) + .catch(error => { + console.error('Error:', error); + alert('Non sono riuscito a contattare il backend.'); + }); } function cancelNewOccurrence() { + // Remove the newly added row const newRow = document.getElementById('new-occurrence'); newRow.parentNode.removeChild(newRow); + + showAddButton(); } </script> -</head> -<body> - <h1>Ricorrenze</h1> - <table> - <tr> - <th>ID</th> - <th>Nome</th> - <th>Descrizione</th> - <th>Data (gg/mm)</th> - <th>Notifica</th> - <th>Azioni</th> - </tr> - {{ range .Occurrences }} - <tr id="occurrence-{{ .ID }}"> - <td>{{ .ID }}</td> - <td>{{ .Name }}</td> - <td>{{ .Description }}</td> - <td>{{ padZero .Day }}/{{ padZero .Month }}</td> - <td><input type="checkbox" {{if .Notify}}checked{{end}} disabled></td> - <td class="actions"> - <i class="fas fa-edit" title="Edit" onclick="editOccurrence('{{ .ID }}')"></i> - <i class="fas fa-trash-alt" title="Delete" onclick="deleteOccurrence('{{ .ID }}')"></i> - </td> - </tr> - {{ else }} - <tr> - <td colspan="6">Nessuna ricorrenza.</td> - </tr> - {{ end }} - </table> - <div style="margin-top: 10px; text-align: center;"> - <button class="add-row-button" onclick="addNewOccurrenceRow()"><i class="fas fa-plus"></i> Aggiungi</button> - </div> - </body> -</html> + +</html>