aktueller stand
This commit is contained in:
217
web/automation.html
Normal file
217
web/automation.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Automationen – Post Tracker</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="automation.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="auto-shell">
|
||||
<header class="auto-hero">
|
||||
<div class="hero-head">
|
||||
<div class="hero-text">
|
||||
<a class="back-link" href="index.html">← Zurück zur App</a>
|
||||
<p class="eyebrow">Automatisierte Requests</p>
|
||||
<h1>Request Automationen</h1>
|
||||
<p class="subline">Plane HTTP-Requests mit Zeitplan, Varianz und Variablen-Templates.</p>
|
||||
<div class="hero-pills">
|
||||
<span class="pill">Jitter & Intervalle</span>
|
||||
<span class="pill">Import aus cURL / fetch</span>
|
||||
<span class="pill">Platzhalter {{date}} {{uuid}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<button class="ghost-btn" id="runSelectedBtn" type="button">▶ Ausgewählte jetzt ausführen</button>
|
||||
<button class="ghost-btn" id="openImportBtn" type="button">📥 Vorlage importieren</button>
|
||||
<button class="primary-btn" id="newAutomationBtn" type="button">+ Neue Automation</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-stats" id="heroStats"></div>
|
||||
</header>
|
||||
|
||||
<main class="auto-grid">
|
||||
<section class="panel list-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="panel-eyebrow">Geplante Requests</p>
|
||||
<h2>Automationen</h2>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<button class="ghost-btn" id="refreshBtn" type="button">Aktualisieren</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="listStatus" class="list-status" aria-live="polite"></div>
|
||||
<div class="table-wrap">
|
||||
<table class="auto-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Nächster Lauf</th>
|
||||
<th>Letzter Lauf</th>
|
||||
<th>Status</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="requestTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section class="panel runs-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<p class="panel-eyebrow">Verlauf</p>
|
||||
<h2>Run-Historie</h2>
|
||||
</div>
|
||||
<p class="runs-hint">Letzte Läufe der ausgewählten Automation.</p>
|
||||
</div>
|
||||
<div id="runsStatus" class="runs-status" aria-live="polite"></div>
|
||||
<ul id="runsList" class="runs-list"></ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="formModal" class="modal" hidden>
|
||||
<div class="modal__backdrop" id="formModalBackdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
||||
<div class="modal__header">
|
||||
<div>
|
||||
<p class="panel-eyebrow" id="formModeLabel">Neue Automation</p>
|
||||
<h2 id="modalTitle">Request & Zeitplan</h2>
|
||||
</div>
|
||||
<button class="ghost-btn" id="modalCloseBtn" type="button">×</button>
|
||||
</div>
|
||||
<form id="automationForm" class="form-grid" novalidate>
|
||||
<div class="field">
|
||||
<label for="nameInput">Name *</label>
|
||||
<input id="nameInput" type="text" placeholder="API Ping (stündlich)" required maxlength="160">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="descriptionInput">Notizen</label>
|
||||
<textarea id="descriptionInput" rows="2" placeholder="Kurzbeschreibung oder Zweck"></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="urlInput">URL-Template *</label>
|
||||
<input id="urlInput" type="url" placeholder="https://api.example.com/{{date}}/trigger" required>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="methodSelect">Methode</label>
|
||||
<select id="methodSelect">
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="activeToggle">Aktiv</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="activeToggle" checked>
|
||||
<span class="switch-slider"></span>
|
||||
<span class="switch-label">Plan aktiv</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="headersInput">Headers (Key: Value pro Zeile oder JSON)</label>
|
||||
<textarea id="headersInput" rows="3" placeholder="Authorization: Bearer {{token}}\nContent-Type: application/json"></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="bodyInput">Body (optional, Templates möglich)</label>
|
||||
<textarea id="bodyInput" rows="5" placeholder='{"date":"{{date}}","id":"{{uuid}}"}'></textarea>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="intervalPreset">Intervall</label>
|
||||
<select id="intervalPreset">
|
||||
<option value="hourly">Jede Stunde</option>
|
||||
<option value="daily">Jeden Tag</option>
|
||||
<option value="custom">Eigene Minuten</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="intervalMinutesInput">Intervall (Minuten)</label>
|
||||
<input id="intervalMinutesInput" type="number" min="5" max="20160" step="5" value="60">
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="jitterInput">Varianz (Minuten)</label>
|
||||
<input id="jitterInput" type="number" min="0" max="120" step="5" value="10">
|
||||
<small>Auslösung erfolgt zufällig +0…Varianz Min nach dem Intervall.</small>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="startAtInput">Start ab</label>
|
||||
<input id="startAtInput" type="datetime-local">
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="runUntilInput">Läuft bis</label>
|
||||
<input id="runUntilInput" type="datetime-local">
|
||||
</div>
|
||||
<div class="field full">
|
||||
<div class="template-hint">
|
||||
<p class="template-title">Platzhalter</p>
|
||||
<p class="template-copy">{{date}}, {{datetime}}, {{uuid}}, {{timestamp}}, {{weekday}}, {{day}}, {{month}}, {{year}}, {{date+1}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field full">
|
||||
<div class="preview-panel">
|
||||
<div class="preview-header">
|
||||
<div>
|
||||
<p class="panel-eyebrow">Vorschau</p>
|
||||
<h3>Aufgelöste Werte</h3>
|
||||
</div>
|
||||
<button class="secondary-btn" type="button" id="refreshPreviewBtn">Aktualisieren</button>
|
||||
</div>
|
||||
<div class="preview-grid">
|
||||
<div class="preview-block">
|
||||
<p class="preview-label">URL</p>
|
||||
<pre id="previewUrl" class="preview-value">—</pre>
|
||||
</div>
|
||||
<div class="preview-block">
|
||||
<p class="preview-label">Headers</p>
|
||||
<pre id="previewHeaders" class="preview-value">—</pre>
|
||||
</div>
|
||||
<div class="preview-block">
|
||||
<p class="preview-label">Body</p>
|
||||
<pre id="previewBody" class="preview-value">—</pre>
|
||||
</div>
|
||||
</div>
|
||||
<p class="preview-hint">Die Vorschau nutzt die aktuellen Formularwerte und füllt Platzhalter ({{date}}, {{uuid}}, …) mit Beispielwerten.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field full modal-actions">
|
||||
<div id="formStatus" class="form-status" aria-live="polite"></div>
|
||||
<div class="panel-actions">
|
||||
<button class="ghost-btn" id="resetFormBtn" type="button">Zurücksetzen</button>
|
||||
<button class="primary-btn" id="saveBtn" type="submit">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="importModal" class="modal" hidden>
|
||||
<div class="modal__backdrop" id="importModalBackdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="importTitle">
|
||||
<div class="modal__header">
|
||||
<div>
|
||||
<p class="panel-eyebrow">Import</p>
|
||||
<h2 id="importTitle">Vorlage einfügen</h2>
|
||||
</div>
|
||||
<button class="ghost-btn" id="importCloseBtn" type="button">×</button>
|
||||
</div>
|
||||
<p class="import-hint">Füge hier "Copy as cURL", "Copy as fetch" oder Powershell ein. Header, Methode, Body und URL werden übernommen.</p>
|
||||
<textarea id="importInput" rows="7" placeholder="curl https://api.example.com -X POST -H 'Authorization: Bearer token' --data '{\"hello\":\"world\"}'"></textarea>
|
||||
<div class="modal-actions">
|
||||
<div id="importStatus" class="import-status" aria-live="polite"></div>
|
||||
<button class="secondary-btn" id="applyImportBtn" type="button">Vorlage übernehmen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="automation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user