Meik/PostTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

letzter stand

Browse Source
This commit is contained in:
Meik
2025-12-16 20:27:37 +01:00
parent 27a8240d3f
commit ffcfce2b31
4 changed files with 256 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/automation.css
View File

@@ -546,6 +546,54 @@
font-weight: 600;
}
.automation-view .exclusion-controls {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.automation-view .exclusion-controls input[type="time"] {
width: 140px;
}
.automation-view .exclusion-sep {
color: var(--automation-muted);
font-size: 13px;
}
.automation-view .exclusion-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.automation-view .exclusion-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--automation-border);
color: var(--automation-text);
font-size: 13px;
}
.automation-view .exclusion-chip button {
border: none;
background: transparent;
color: var(--automation-muted);
cursor: pointer;
padding: 0;
font-size: 14px;
}
.automation-view .exclusion-chip button:hover {
color: var(--automation-danger);
}
.automation-view .modal {
position: fixed;
inset: 0;

72
web/automation.js
View File

@@ -21,6 +21,7 @@
};
let editingId = null;
let exclusionWindows = [];
const form = document.getElementById('automationForm');
const nameInput = document.getElementById('nameInput');
@@ -34,6 +35,10 @@
const jitterInput = document.getElementById('jitterInput');
const startAtInput = document.getElementById('startAtInput');
const runUntilInput = document.getElementById('runUntilInput');
const excludeStartInput = document.getElementById('excludeStartInput');
const excludeEndInput = document.getElementById('excludeEndInput');
const addExclusionBtn = document.getElementById('addExclusionBtn');
const exclusionList = document.getElementById('exclusionList');
const activeToggle = document.getElementById('activeToggle');
const formStatus = document.getElementById('formStatus');
const formModeLabel = document.getElementById('formModeLabel');
@@ -60,6 +65,7 @@
const listStatus = document.getElementById('listStatus');
const filterName = document.getElementById('filterName');
const filterNext = document.getElementById('filterNext');
const filterRunUntil = document.getElementById('filterRunUntil');
const filterLast = document.getElementById('filterLast');
const filterStatus = document.getElementById('filterStatus');
const filterRuns = document.getElementById('filterRuns');
@@ -342,7 +348,8 @@
jitter_minutes: Math.max(0, parseInt(jitterInput.value, 10) || 0),
start_at: parseDateInput(startAtInput.value),
run_until: parseDateInput(runUntilInput.value),
active: activeToggle.checked
active: activeToggle.checked,
exclusion_windows: exclusionWindows.map((win) => ({ start: win.start, end: win.end }))
};
if (type === 'email') {
@@ -389,6 +396,46 @@
};
}
function renderExclusionChips() {
if (!exclusionList) return;
if (!exclusionWindows.length) {
exclusionList.innerHTML = '<span class="placeholder-hint">Keine Ausschlusszeiten gesetzt.</span>';
return;
}
exclusionList.innerHTML = exclusionWindows.map((win, idx) => `
<span class="exclusion-chip">
${win.start} – ${win.end}
<button type="button" aria-label="Entfernen" data-remove-exclusion="${idx}">×</button>
</span>
`).join('');
exclusionList.querySelectorAll('[data-remove-exclusion]').forEach((btn) => {
btn.addEventListener('click', () => {
const index = Number(btn.getAttribute('data-remove-exclusion'));
exclusionWindows.splice(index, 1);
renderExclusionChips();
});
});
}
function addExclusion() {
const start = excludeStartInput?.value || '';
const end = excludeEndInput?.value || '';
if (!start || !end) {
setStatus(formStatus, 'Bitte Start- und Endzeit angeben.', 'error');
return;
}
if (start >= end) {
setStatus(formStatus, 'Endzeit muss nach der Startzeit liegen.', 'error');
return;
}
exclusionWindows.push({ start, end });
exclusionWindows.sort((a, b) => a.start.localeCompare(b.start));
renderExclusionChips();
setStatus(formStatus, '', 'info');
if (excludeStartInput) excludeStartInput.value = '';
if (excludeEndInput) excludeEndInput.value = '';
}
function applyPresetDisabling() {
if (intervalPreset.value === 'custom') {
intervalMinutesInput.disabled = false;
@@ -523,6 +570,8 @@
if (!req) return;
const nextEl = row.querySelector('.next');
if (nextEl) nextEl.textContent = formatRelative(req.next_run_at);
const untilEl = row.querySelector('.until');
if (untilEl) untilEl.textContent = req.run_until ? formatRelative(req.run_until) : '—';
const lastEl = row.querySelector('.last');
if (lastEl) lastEl.textContent = formatRelative(req.last_run_at);
});
@@ -532,7 +581,7 @@
if (!requestTableBody) return;
requestTableBody.innerHTML = '';
if (!state.requests.length) {
requestTableBody.innerHTML = '<tr><td colspan="6">Keine Automationen vorhanden.</td></tr>';
requestTableBody.innerHTML = '<tr><td colspan="7">Keine Automationen vorhanden.</td></tr>';
listInstance = null;
return;
}
@@ -540,6 +589,7 @@
const rows = state.requests.map((req) => {
const isSelected = state.selectedId === req.id;
const nextSort = req.next_run_at ? new Date(req.next_run_at).getTime() : Number.MAX_SAFE_INTEGER;
const untilSort = req.run_until ? new Date(req.run_until).getTime() : Number.MAX_SAFE_INTEGER;
const lastSort = req.last_run_at ? new Date(req.last_run_at).getTime() : -Number.MAX_SAFE_INTEGER;
const runsCount = Array.isArray(req.runs) ? req.runs.length : (req.runs_count || req.runsCount || 0);
const statusBadge = req.last_status === 'success'
@@ -571,6 +621,10 @@
<span class="next" data-sort="${nextSort}">${formatRelative(req.next_run_at)}</span>
<br><small>${formatDateTime(req.next_run_at)}</small>
</td>
<td data-sort="${untilSort}">
<span class="until" data-sort="${untilSort}">${req.run_until ? formatRelative(req.run_until) : '—'}</span>
<br><small>${formatDateTime(req.run_until)}</small>
</td>
<td data-sort="${lastSort}">
<span class="last" data-sort="${lastSort}">${formatRelative(req.last_run_at)}</span>
<br><small>${req.last_status_code || '—'}</small>
@@ -640,6 +694,8 @@
now.setSeconds(0, 0);
startAtInput.value = toDateTimeLocal(now);
runUntilInput.value = '';
exclusionWindows = [];
renderExclusionChips();
formModeLabel.textContent = 'Neue Automation';
setStatus(formStatus, '');
if (emailToInput) emailToInput.value = '';
@@ -700,6 +756,8 @@
jitterInput.value = request.jitter_minutes || 0;
startAtInput.value = toDateTimeLocal(request.start_at);
runUntilInput.value = toDateTimeLocal(request.run_until);
exclusionWindows = Array.isArray(request.exclusion_windows) ? [...request.exclusion_windows] : [];
renderExclusionChips();
applyPresetDisabling();
refreshPreview();
}
@@ -975,6 +1033,7 @@
'url',
'steps',
{ name: 'next', attr: 'data-sort' },
{ name: 'runUntil', attr: 'data-sort' },
{ name: 'last', attr: 'data-sort' },
{ name: 'status', attr: 'data-sort' },
{ name: 'runs', attr: 'data-sort' }
@@ -990,6 +1049,7 @@
if (!listInstance) return;
const searchName = (filterName?.value || '').toLowerCase().trim();
const searchNext = (filterNext?.value || '').toLowerCase().trim();
const searchRunUntil = (filterRunUntil?.value || '').toLowerCase().trim();
const searchLast = (filterLast?.value || '').toLowerCase().trim();
const statusValue = (filterStatus?.value || '').toLowerCase().trim();
const runsMin = filterRuns?.value ? Number(filterRuns.value) : null;
@@ -1005,11 +1065,12 @@
].some((p) => String(p).toLowerCase().includes(searchName));
const matchNext = !searchNext || String(v.next || '').toLowerCase().includes(searchNext);
const matchRunUntil = !searchRunUntil || String(v.runUntil || '').toLowerCase().includes(searchRunUntil);
const matchLast = !searchLast || `${v.last || ''}`.toLowerCase().includes(searchLast);
const matchStatus = !statusValue || String(v.status || '').toLowerCase().includes(statusValue);
const matchRuns = runsMin === null || Number(v.runs || 0) >= runsMin;
return matchName && matchNext && matchLast && matchStatus && matchRuns;
return matchName && matchNext && matchRunUntil && matchLast && matchStatus && matchRuns;
});
updateSortIndicators();
}
@@ -1200,11 +1261,14 @@
el?.addEventListener('input', refreshPreview);
el?.addEventListener('change', refreshPreview);
});
if (addExclusionBtn) {
addExclusionBtn.addEventListener('click', addExclusion);
}
typeSelect?.addEventListener('change', () => {
applyTypeVisibility();
refreshPreview();
});
[filterName, filterNext, filterLast, filterStatus].forEach((el) => {
[filterName, filterNext, filterRunUntil, filterLast, filterStatus].forEach((el) => {
el?.addEventListener('input', applyFilters);
el?.addEventListener('change', applyFilters);
});

37
web/index.html
View File

@@ -193,20 +193,22 @@
<thead>
<tr>
<th data-sort-column="name">Name<span class="sort-indicator"></span></th>
<th data-sort-column="next">Nächster Lauf<span class="sort-indicator"></span></th>
<th data-sort-column="last">Letzter Lauf<span class="sort-indicator"></span></th>
<th data-sort-column="status">Status<span class="sort-indicator"></span></th>
<th data-sort-column="runs">#Läufe<span class="sort-indicator"></span></th>
<th>Aktionen</th>
</tr>
<th data-sort-column="next">Nächster Lauf<span class="sort-indicator"></span></th>
<th data-sort-column="runUntil">Läuft bis<span class="sort-indicator"></span></th>
<th data-sort-column="last">Letzter Lauf<span class="sort-indicator"></span></th>
<th data-sort-column="status">Status<span class="sort-indicator"></span></th>
<th data-sort-column="runs">#Läufe<span class="sort-indicator"></span></th>
<th>Aktionen</th>
</tr>
<tr class="table-filter-row">
<th><input id="filterName" type="search" placeholder="Name/Typ/E-Mail/URL"></th>
<th><input id="filterNext" type="search" placeholder="z.B. heute"></th>
<th><input id="filterLast" type="search" placeholder="z.B. HTTP 200"></th>
<th>
<select id="filterStatus">
<option value="">Alle</option>
<option value="success">OK</option>
<th><input id="filterNext" type="search" placeholder="z.B. heute"></th>
<th><input id="filterRunUntil" type="search" placeholder="z.B. morgen"></th>
<th><input id="filterLast" type="search" placeholder="z.B. HTTP 200"></th>
<th>
<select id="filterStatus">
<option value="">Alle</option>
<option value="success">OK</option>
<option value="error">Fehler</option>
</select>
</th>
@@ -377,6 +379,17 @@
<label for="runUntilInput">Läuft bis</label>
<input id="runUntilInput" type="datetime-local">
</div>
<div class="field full">
<label>Ausschlusszeiten (täglich, Serverzeit)</label>
<div class="exclusion-controls">
<input id="excludeStartInput" type="time" aria-label="Ausschluss von">
<span class="exclusion-sep">bis</span>
<input id="excludeEndInput" type="time" aria-label="Ausschluss bis">
<button class="secondary-btn" id="addExclusionBtn" type="button">Hinzufügen</button>
</div>
<div id="exclusionList" class="exclusion-list"></div>
<p class="placeholder-hint">Beispiel: 00:00–07:00, um nächtliche Ausführungen zu vermeiden.</p>
</div>
<div class="field full">
<div class="template-hint">
<p class="template-title">Platzhalter</p>