144 lines
4.8 KiB
PHP
144 lines
4.8 KiB
PHP
<div class="arbeitsberichte-wrapper">
|
|
<div class="vergabe-form">
|
|
<h3>Neues Ticket anlegen</h3>
|
|
<form id="addTicketForm" class="vergabe-grid">
|
|
|
|
<div class="form-group">
|
|
<label>Titel</label>
|
|
<input type="text" name="titel" id="in-titel" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Beschreibung</label>
|
|
<input type="text" name="beschreibung" id="in-beschreibung" required>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-submit-vergabe">💾 Speichern</button>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<div class="table-container" style="margin-top: 30px;">
|
|
<h3>Tickets</h3>
|
|
<div id="tableWrapper">
|
|
<p>Lade Daten...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/AjaxMethods.js"></script>
|
|
<script src="/js/ajaxApi/TicketBoardAjaxMethods.js"></script>
|
|
<script src="/js/AjaxRenderTables.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tableWrapper = document.getElementById('tableWrapper');
|
|
const POLL_INTERVAL_MS = 5000;
|
|
let lastStatusById = {};
|
|
|
|
// -----------------------------------------------------------
|
|
// Tabelle rendern (eigene Render-Funktion wg. Status-Highlight)
|
|
// -----------------------------------------------------------
|
|
function renderTicketsTabelle(entries) {
|
|
if (!entries || entries.length === 0) {
|
|
tableWrapper.innerHTML = '<p>Keine Tickets vorhanden.</p>';
|
|
lastStatusById = {};
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<table class="db-table mobile-responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Titel</th><th>Beschreibung</th><th>Status</th>
|
|
<th style="width: 100px;">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
for (const e of entries) {
|
|
const changed = lastStatusById[e.ID] !== undefined &&
|
|
lastStatusById[e.ID] !== e.STATUS;
|
|
|
|
html += `
|
|
<tr data-id="${escapeHtml(e.ID)}" class="${changed ? 'status-row-changed' : ''}">
|
|
<td data-label="Titel">${escapeHtml(e.TITEL)}</td>
|
|
<td data-label="Beschreibung">${escapeHtml(e.BESCHREIBUNG)}</td>
|
|
<td data-label="Status"><span class="status-badge">${escapeHtml(e.STATUS)}</span></td>
|
|
<td data-label="Aktion">
|
|
<button type="button" class="btn-delete" data-id="${escapeHtml(e.ID)}">Löschen</button>
|
|
</td>
|
|
</tr>`;
|
|
}
|
|
html += `</tbody></table>`;
|
|
tableWrapper.innerHTML = html;
|
|
|
|
const neueStatus = {};
|
|
entries.forEach(e => {
|
|
neueStatus[e.ID] = e.STATUS;
|
|
});
|
|
lastStatusById = neueStatus;
|
|
|
|
tableWrapper.querySelectorAll('.btn-delete').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
if (!confirm('Möchtest du dieses Ticket wirklich löschen?')) return;
|
|
try {
|
|
await deleteTicketEntry(btn.dataset.id);
|
|
await ladeListe();
|
|
} catch (err) {
|
|
alert('Fehler beim Löschen: ' + err.message);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function ladeListe() {
|
|
try {
|
|
const data = await getTicketEntries();
|
|
renderTicketsTabelle(data.entries);
|
|
} catch (err) {
|
|
tableWrapper.innerHTML = `<p>❌ ${escapeHtml(err.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------
|
|
// Ticket anlegen
|
|
// -----------------------------------------------------------
|
|
document.getElementById('addTicketForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const titel = document.getElementById('in-titel').value.trim();
|
|
const beschreibung = document.getElementById('in-beschreibung').value.trim();
|
|
|
|
if (!titel || !beschreibung) return;
|
|
|
|
try {
|
|
await addTicketEntry(titel, beschreibung);
|
|
e.target.reset();
|
|
await ladeListe();
|
|
} catch (err) {
|
|
alert('Fehler beim Speichern: ' + err.message);
|
|
}
|
|
});
|
|
|
|
// -----------------------------------------------------------
|
|
// Initialisierung + zyklische Aktualisierung
|
|
// -----------------------------------------------------------
|
|
ladeListe();
|
|
setInterval(ladeListe, POLL_INTERVAL_MS);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes statusChanged {
|
|
0% {
|
|
background-color: #fff3cd;
|
|
}
|
|
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.status-row-changed {
|
|
animation: statusChanged 2.5s ease-out;
|
|
}
|
|
</style> |