V 1.1.0 - Bearbeiten bei Liste geht, auch Löschen.
This commit is contained in:
133
public/global.js
133
public/global.js
@@ -42,35 +42,66 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let editId = null;
|
||||
|
||||
// Modal für Fehleranzeige
|
||||
function showModal(message, callback) {
|
||||
// Vorherige Modals entfernen
|
||||
document.querySelectorAll('.custom-modal-popup').forEach(m => m.remove());
|
||||
function showModal(message, showCancelButton, callback) {
|
||||
// Remove previous modals
|
||||
document.querySelectorAll('.custom-modal-popup').forEach(m => m.remove());
|
||||
|
||||
let modal = document.createElement('div');
|
||||
modal.className = 'custom-modal-popup';
|
||||
let modal = document.createElement('div');
|
||||
modal.className = 'custom-modal-popup';
|
||||
|
||||
let box = document.createElement('div');
|
||||
box.className = 'custom-modal-box';
|
||||
let box = document.createElement('div');
|
||||
box.className = 'custom-modal-box';
|
||||
|
||||
let msg = document.createElement('div');
|
||||
msg.className = 'custom-modal-msg';
|
||||
msg.textContent = message;
|
||||
box.appendChild(msg);
|
||||
let msg = document.createElement('div');
|
||||
msg.className = 'custom-modal-msg';
|
||||
msg.textContent = message;
|
||||
box.appendChild(msg);
|
||||
|
||||
let btn = document.createElement('button');
|
||||
btn.className = 'custom-modal-btn';
|
||||
btn.textContent = 'OK';
|
||||
btn.onclick = () => {
|
||||
let btndiv = document.createElement('div')
|
||||
btndiv.className = 'twobuttons'
|
||||
|
||||
// Cancel Button (only if showCancelButton is true)
|
||||
if (showCancelButton) {
|
||||
let btnCancel = document.createElement('button');
|
||||
btnCancel.className = 'custom-modal-btn';
|
||||
btnCancel.textContent = 'Abbruch';
|
||||
btnCancel.onclick = () => {
|
||||
if (modal.parentNode) {
|
||||
modal.parentNode.removeChild(modal);
|
||||
}
|
||||
if (callback) callback();
|
||||
if (callback) callback(false); // Pass false for Cancel
|
||||
};
|
||||
box.appendChild(btn);
|
||||
modal.appendChild(box);
|
||||
document.body.appendChild(modal);
|
||||
btndiv.appendChild(btnCancel);
|
||||
}
|
||||
|
||||
// OK Button
|
||||
let btnOk = document.createElement('button');
|
||||
btnOk.className = 'custom-modal-btn';
|
||||
btnOk.textContent = 'OK';
|
||||
btnOk.onclick = () => {
|
||||
if (modal.parentNode) {
|
||||
modal.parentNode.removeChild(modal);
|
||||
}
|
||||
if (callback) callback(true); // Pass true for OK
|
||||
};
|
||||
|
||||
btndiv.appendChild(btnOk);
|
||||
box.appendChild(btndiv)
|
||||
|
||||
|
||||
modal.appendChild(box);
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Optional: Close modal when clicking outside
|
||||
modal.onclick = (e) => {
|
||||
if (e.target === modal) {
|
||||
if (modal.parentNode) {
|
||||
modal.parentNode.removeChild(modal);
|
||||
}
|
||||
if (callback) callback(false); // Treat as cancel
|
||||
}
|
||||
};
|
||||
}
|
||||
// Sensornummer nur Zahlen erlauben
|
||||
sensorNumberInput.addEventListener('input', () => {
|
||||
sensorNumberInput.value = sensorNumberInput.value.replace(/\D/g, '');
|
||||
@@ -99,7 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
} else {
|
||||
addressInput.value = '';
|
||||
sensorNumberInput.disabled = true;
|
||||
showModal('Sensor unbekannt', () => {
|
||||
showModal('Sensor unbekannt', false, () => {
|
||||
sensorNumberInput.disabled = false;
|
||||
sensorNumberInput.focus();
|
||||
});
|
||||
@@ -108,7 +139,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
console.error('Fehler beim Abrufen der Adresse:', err);
|
||||
addressInput.value = '';
|
||||
sensorNumberInput.disabled = true;
|
||||
showModal('Sensor unbekannt', () => {
|
||||
showModal('Sensor unbekannt', false, () => {
|
||||
sensorNumberInput.disabled = false;
|
||||
sensorNumberInput.focus();
|
||||
});
|
||||
@@ -141,8 +172,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const url = editId ? `/api/update/${editId}` : '/api/save';
|
||||
const method = editId ? 'PUT' : 'POST';
|
||||
const url = '/api/save';
|
||||
const method = 'POST';
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
@@ -154,8 +185,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (data.error) {
|
||||
resultDiv.textContent = data.error;
|
||||
} else {
|
||||
resultDiv.textContent = editId ? 'Aktualisiert!' : 'Gespeichert!';
|
||||
clearForm();
|
||||
resultDiv.textContent = 'OK!';
|
||||
setTimeout(() => {
|
||||
resultDiv.textContent = ''
|
||||
saveBtn.textContent = 'Speichern';
|
||||
}, 5000)
|
||||
clearForm(false);
|
||||
await loadEntries();
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -165,14 +200,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
|
||||
function clearForm() {
|
||||
function clearForm(mitButton) {
|
||||
espIdInput.value = '';
|
||||
sensorNumberInput.value = '';
|
||||
nameInput.value = '';
|
||||
descriptionInput.value = '';
|
||||
addressInput.value = '';
|
||||
editId = null;
|
||||
saveBtn.textContent = 'Speichern';
|
||||
if (mitButton) {
|
||||
saveBtn.textContent = 'Speichern';
|
||||
}
|
||||
}
|
||||
|
||||
// Globale Sortier-Variable
|
||||
@@ -193,16 +230,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
function renderTable(sortedItems) {
|
||||
tableBody.innerHTML = '';
|
||||
sortedItems.forEach(item => {
|
||||
const date = new Date(item.chip.createdAt).toISOString().split('T')[0];
|
||||
const date = new Date(item.chip.lastUpdatedAt).toISOString().split('T')[0];
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${item._id}</td>
|
||||
<td id="tdSensornumber">${item._id}</td>
|
||||
<td>${item.chip.id}</td>
|
||||
<td>${item.chip.name || ''}</td>
|
||||
<td id="tdBeschreibung">${item.chip.description || ''}</td>
|
||||
<td id="tdDate">${date}</td>
|
||||
<td>
|
||||
<button data-id="${item._id}" class="editBtn">Bearbeiten</button>
|
||||
<div class=twobuttons>
|
||||
<button data-id="${item._id}" class="editBtn">Bearbeiten</button>
|
||||
<button data-id="${item._id}" class="deleteBtn">Löschen</button>
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
tableBody.appendChild(tr);
|
||||
@@ -219,8 +259,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
valA = a.chip.id;
|
||||
valB = b.chip.id;
|
||||
} else if (key === 'date') {
|
||||
valA = new Date(a.chip.createdAt);
|
||||
valB = new Date(b.chip.createdAt);
|
||||
valA = new Date(a.chip.lastUpdatedAt);
|
||||
valB = new Date(b.chip.lastUpdatedAt);
|
||||
}
|
||||
if (valA < valB) return asc ? -1 : 1;
|
||||
if (valA > valB) return asc ? 1 : -1;
|
||||
@@ -303,22 +343,29 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
async function deleteEntry(id) {
|
||||
if (!confirm('Wirklich löschen?')) return;
|
||||
try {
|
||||
const res = await fetch(`/api/delete/${id}`, { method: 'DELETE' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
await loadEntries();
|
||||
showModal('Wirklich löschen?', true, async (confirmed) => {
|
||||
if (confirmed) {
|
||||
try {
|
||||
const res = await fetch(`/api/delete/${id}`, { method: 'DELETE' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
await loadEntries();
|
||||
resultDiv.textContent = 'Eintrag gelöscht.';
|
||||
setTimeout(() => resultDiv.textContent = '', 3000);
|
||||
} else {
|
||||
resultDiv.textContent = 'Fehler beim Löschen.';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
resultDiv.textContent = 'Fehler beim Löschen.';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
resultDiv.textContent = 'Fehler beim Löschen.';
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
saveBtn.addEventListener('click', saveEntry);
|
||||
refreshBtn.addEventListener('click', loadEntries);
|
||||
cancelBtn.addEventListener('click', () => clearForm(true));
|
||||
tabInput.addEventListener('click', () => showTab('input'))
|
||||
tabList.addEventListener('click', () => showTab('list'))
|
||||
|
||||
|
||||
@@ -99,21 +99,18 @@ table {
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
#tdDate {
|
||||
width: 8em;
|
||||
}
|
||||
/* Spaltenbreiten über colgroup steuern */
|
||||
col.col-sensornumber { width: 7em; }
|
||||
col.col-espid {width: 6em}
|
||||
col.col-bezeichnung { width: 8em; }
|
||||
col.col-beschreibung{ width: 12em; }
|
||||
col.col-date { width: 10em; }
|
||||
col.col-aktionen { width: 18em; }
|
||||
|
||||
#tdBeschreibung {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
#tdAktionen {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.controls input#page,
|
||||
.controls input#limit {
|
||||
@@ -163,8 +160,10 @@ button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
#saveBtn {
|
||||
margin-top: 20px;
|
||||
.twobuttons {
|
||||
display:flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
p.error {
|
||||
|
||||
Reference in New Issue
Block a user