aktueller stand
This commit is contained in:
@@ -18,15 +18,8 @@
|
||||
<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>
|
||||
@@ -42,22 +35,38 @@
|
||||
<h2>Automationen</h2>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<input id="tableFilterInput" class="filter-input" type="search" placeholder="Filtern nach Name/Typ…" />
|
||||
<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">
|
||||
<div class="table-wrap" id="automationTable">
|
||||
<table class="auto-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Nächster Lauf</th>
|
||||
<th>Letzter Lauf</th>
|
||||
<th>Status</th>
|
||||
<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>
|
||||
<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>
|
||||
<option value="error">Fehler</option>
|
||||
</select>
|
||||
</th>
|
||||
<th><input id="filterRuns" type="number" min="0" placeholder="≥"></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="requestTableBody"></tbody>
|
||||
<tbody id="requestTableBody" class="list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
@@ -87,6 +96,14 @@
|
||||
<button class="ghost-btn" id="modalCloseBtn" type="button">×</button>
|
||||
</div>
|
||||
<form id="automationForm" class="form-grid" novalidate>
|
||||
<div class="field">
|
||||
<label for="typeSelect">Typ</label>
|
||||
<select id="typeSelect">
|
||||
<option value="request">HTTP Request</option>
|
||||
<option value="email">E-Mail</option>
|
||||
<option value="flow">Flow (bis 3 Schritte)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nameInput">Name *</label>
|
||||
<input id="nameInput" type="text" placeholder="API Ping (stündlich)" required maxlength="160">
|
||||
@@ -95,11 +112,11 @@
|
||||
<label for="descriptionInput">Notizen</label>
|
||||
<textarea id="descriptionInput" rows="2" placeholder="Kurzbeschreibung oder Zweck"></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" data-section="http">
|
||||
<label for="urlInput">URL-Template *</label>
|
||||
<input id="urlInput" type="url" placeholder="https://api.example.com/{{date}}/trigger" required>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<div class="field inline" data-section="http">
|
||||
<label for="methodSelect">Methode</label>
|
||||
<select id="methodSelect">
|
||||
<option value="GET">GET</option>
|
||||
@@ -117,14 +134,76 @@
|
||||
<span class="switch-label">Plan aktiv</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" data-section="http">
|
||||
<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">
|
||||
<div class="field" data-section="http">
|
||||
<label for="bodyInput">Body (optional, Templates möglich)</label>
|
||||
<textarea id="bodyInput" rows="5" placeholder='{"date":"{{date}}","id":"{{uuid}}"}'></textarea>
|
||||
</div>
|
||||
<div class="field full" data-section="email">
|
||||
<label for="emailToInput">E-Mail Empfänger *</label>
|
||||
<input id="emailToInput" type="text" placeholder="max@example.com, lisa@example.com">
|
||||
</div>
|
||||
<div class="field full" data-section="email">
|
||||
<label for="emailSubjectInput">Betreff *</label>
|
||||
<input id="emailSubjectInput" type="text" placeholder="Status Update {{date}}">
|
||||
</div>
|
||||
<div class="field full" data-section="email">
|
||||
<label for="emailBodyInput">Body *</label>
|
||||
<textarea id="emailBodyInput" rows="6" placeholder="Hallo,\nheutiger Status: {{uuid}}"></textarea>
|
||||
</div>
|
||||
<div class="field full" data-section="flow">
|
||||
<div class="template-hint">
|
||||
<p class="template-title">Flow Schritte</p>
|
||||
<p class="template-copy">Max. 3 Schritte, Kontext steht als {{step1_json}}, {{step1_text}}, {{step1_status_code}} usw. im nächsten Schritt zur Verfügung.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" data-section="flow">
|
||||
<label for="flowStep1Url">Step 1 URL *</label>
|
||||
<input id="flowStep1Url" type="url" placeholder="https://api.example.com/first">
|
||||
</div>
|
||||
<div class="field inline" data-section="flow">
|
||||
<label for="flowStep1Method">Step 1 Methode</label>
|
||||
<select id="flowStep1Method">
|
||||
<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" data-section="flow">
|
||||
<label for="flowStep1Headers">Step 1 Headers</label>
|
||||
<textarea id="flowStep1Headers" rows="2" placeholder="Authorization: Bearer {{token}}"></textarea>
|
||||
</div>
|
||||
<div class="field" data-section="flow">
|
||||
<label for="flowStep1Body">Step 1 Body</label>
|
||||
<textarea id="flowStep1Body" rows="3" placeholder='{"id":"{{uuid}}"}'></textarea>
|
||||
</div>
|
||||
<div class="field" data-section="flow">
|
||||
<label for="flowStep2Url">Step 2 URL (optional)</label>
|
||||
<input id="flowStep2Url" type="url" placeholder="https://api.example.com/second">
|
||||
</div>
|
||||
<div class="field inline" data-section="flow">
|
||||
<label for="flowStep2Method">Step 2 Methode</label>
|
||||
<select id="flowStep2Method">
|
||||
<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" data-section="flow">
|
||||
<label for="flowStep2Headers">Step 2 Headers</label>
|
||||
<textarea id="flowStep2Headers" rows="2" placeholder="Authorization: Bearer {{token}}"></textarea>
|
||||
</div>
|
||||
<div class="field" data-section="flow">
|
||||
<label for="flowStep2Body">Step 2 Body</label>
|
||||
<textarea id="flowStep2Body" rows="3" placeholder='{"fromStep1":"{{step1_json.id}}"}'></textarea>
|
||||
</div>
|
||||
<div class="field inline">
|
||||
<label for="intervalPreset">Intervall</label>
|
||||
<select id="intervalPreset">
|
||||
@@ -153,7 +232,10 @@
|
||||
<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>
|
||||
<table class="placeholder-table">
|
||||
<tbody id="placeholderTableBody"></tbody>
|
||||
</table>
|
||||
<p class="placeholder-hint">Beispiele beziehen sich auf den aktuellen Zeitpunkt.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field full">
|
||||
@@ -212,6 +294,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="vendor/list.min.js"></script>
|
||||
<script src="automation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user