fixed SPA
This commit is contained in:
523
web/index.html
523
web/index.html
@@ -10,6 +10,8 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="dashboard.css">
|
||||
<link rel="stylesheet" href="settings.css">
|
||||
<link rel="stylesheet" href="automation.css">
|
||||
<link id="dailyBookmarksCss" rel="stylesheet" href="daily-bookmarks.css" disabled>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
@@ -24,8 +26,8 @@
|
||||
<a class="site-nav__btn" data-view-target="dashboard" href="dashboard.html">📊 Dashboard</a>
|
||||
<a class="site-nav__btn" data-view-target="settings" href="settings.html">⚙️ Einstellungen</a>
|
||||
<a class="site-nav__btn" data-view-target="bookmarks" href="bookmarks.html">🔖 Bookmarks</a>
|
||||
<a class="site-nav__btn" href="automation.html">⚡️ Automationen</a>
|
||||
<a class="site-nav__btn" href="daily-bookmarks.html">✅ Daily Bookmarks</a>
|
||||
<a class="site-nav__btn" data-view-target="automation" href="index.html?view=automation">⚡️ Automationen</a>
|
||||
<a class="site-nav__btn" data-view-target="daily-bookmarks" href="index.html?view=daily-bookmarks">✅ Daily Bookmarks</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,8 +85,8 @@
|
||||
|
||||
<div class="tabs-section">
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" data-tab="pending">Offene Beiträge</button>
|
||||
<button class="tab-btn" data-tab="all">Alle Beiträge</button>
|
||||
<button class="tab-btn active" data-tab="pending">Offene Beiträge</button>
|
||||
</div>
|
||||
<div class="merge-controls" id="mergeControls" hidden>
|
||||
<div class="merge-actions">
|
||||
@@ -158,6 +160,486 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="view-automation" class="app-view automation-view" data-view="automation">
|
||||
<div class="container">
|
||||
<div class="auto-shell">
|
||||
<header class="auto-hero">
|
||||
<div class="hero-head">
|
||||
<div class="hero-text">
|
||||
<h1>Request Automationen</h1>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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" id="automationTable">
|
||||
<table class="auto-table">
|
||||
<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>
|
||||
<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" class="list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
|
||||
<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="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">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="descriptionInput">Notizen</label>
|
||||
<textarea id="descriptionInput" rows="2" placeholder="Kurzbeschreibung oder Zweck"></textarea>
|
||||
</div>
|
||||
<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" data-section="http">
|
||||
<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" 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" 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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</section>
|
||||
<section id="view-daily-bookmarks" class="app-view daily-bookmarks-view" data-view="daily-bookmarks">
|
||||
<div class="container">
|
||||
<div class="daily-shell">
|
||||
<header class="hero">
|
||||
<h1 class="hero__title">Daily Bookmarks</h1>
|
||||
<div class="hero__controls">
|
||||
<div class="day-switch">
|
||||
<button class="ghost-btn" id="dailyPrevDayBtn" aria-label="Vorheriger Tag">◀</button>
|
||||
<div class="day-switch__label">
|
||||
<div id="dailyDayLabel" class="day-switch__day">Heute</div>
|
||||
<div id="dailyDaySubLabel" class="day-switch__sub"></div>
|
||||
</div>
|
||||
<button class="ghost-btn" id="dailyNextDayBtn" aria-label="Nächster Tag">▶</button>
|
||||
<button class="ghost-btn ghost-btn--today" id="dailyTodayBtn">Heute</button>
|
||||
</div>
|
||||
<div class="hero__actions">
|
||||
<div class="bulk-actions">
|
||||
<label for="dailyBulkCountSelect">Anzahl</label>
|
||||
<select id="dailyBulkCountSelect">
|
||||
<option value="1">1</option>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
<option value="20">20</option>
|
||||
</select>
|
||||
<label class="auto-open-toggle">
|
||||
<input type="checkbox" id="dailyAutoOpenToggle">
|
||||
<span>Auto öffnen</span>
|
||||
</label>
|
||||
<button class="secondary-btn" id="dailyBulkOpenBtn" type="button">Öffnen & abhaken</button>
|
||||
</div>
|
||||
<button class="primary-btn" id="dailyOpenCreateBtn" type="button">+ Bookmark</button>
|
||||
<button class="secondary-btn" id="dailyOpenImportBtn" type="button">Liste importieren</button>
|
||||
<button class="ghost-btn" id="dailyRefreshBtn" type="button">Aktualisieren</button>
|
||||
<span id="dailyHeroStats" class="hero__stats"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="dailyAutoOpenOverlay" class="auto-open-overlay" hidden>
|
||||
<div class="auto-open-overlay__panel" id="dailyAutoOpenOverlayPanel">
|
||||
<div class="auto-open-overlay__badge">Auto-Öffnen startet gleich</div>
|
||||
<div class="auto-open-overlay__timer">
|
||||
<span id="dailyAutoOpenCountdown" class="auto-open-overlay__count">0.0</span>
|
||||
<span class="auto-open-overlay__unit">Sek.</span>
|
||||
</div>
|
||||
<p class="auto-open-overlay__text">
|
||||
Die nächste Runde deiner gefilterten Bookmarks öffnet automatisch. Abbrechen, falls du noch warten willst.
|
||||
</p>
|
||||
<p class="auto-open-overlay__hint">Klicke irgendwo in dieses Panel, um abzubrechen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="panel list-panel">
|
||||
<header class="panel__header panel__header--row">
|
||||
<div>
|
||||
<p class="panel__eyebrow">Tägliche Liste</p>
|
||||
<h2 class="panel__title">Alle Bookmarks</h2>
|
||||
</div>
|
||||
<div class="list-summary" id="dailyListSummary"></div>
|
||||
</header>
|
||||
<div id="dailyListStatus" class="list-status" role="status" aria-live="polite"></div>
|
||||
<div class="table-wrapper">
|
||||
<table class="bookmark-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-url">
|
||||
<button type="button" class="sort-btn" data-sort-key="url_template">URL (aufgelöst)</button>
|
||||
</th>
|
||||
<th class="col-marker">
|
||||
<button type="button" class="sort-btn" data-sort-key="marker">Marker</button>
|
||||
</th>
|
||||
<th class="col-created">
|
||||
<button type="button" class="sort-btn" data-sort-key="created_at">Erstelldatum</button>
|
||||
</th>
|
||||
<th class="col-last">
|
||||
<button type="button" class="sort-btn" data-sort-key="last_completed_at">Letzte Erledigung</button>
|
||||
</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
<tr class="table-filter-row">
|
||||
<th>
|
||||
<label class="visually-hidden" for="dailyUrlFilter">Nach URL filtern</label>
|
||||
<input id="dailyUrlFilter" type="search" placeholder="URL filtern">
|
||||
</th>
|
||||
<th>
|
||||
<label class="visually-hidden" for="dailyMarkerFilter">Nach Marker filtern</label>
|
||||
<select id="dailyMarkerFilter">
|
||||
<option value="">Alle Marker</option>
|
||||
<option value="__none">Ohne Marker</option>
|
||||
</select>
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th class="filter-hint">
|
||||
<button type="button" class="ghost-btn ghost-btn--tiny" id="dailyResetViewBtn" aria-label="Filter und Sortierung zurücksetzen">↺</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dailyTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dailyBookmarkModal" class="modal" hidden>
|
||||
<div class="modal__backdrop" id="dailyModalBackdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="dailyModalTitle">
|
||||
<header class="modal__header">
|
||||
<div>
|
||||
<p class="panel__eyebrow" id="dailyFormModeLabel">Neues Bookmark</p>
|
||||
<h2 id="dailyModalTitle" class="panel__title">Bookmark pflegen</h2>
|
||||
<p class="panel__subtitle">Titel optional, URL-Template erforderlich. Platzhalter werden für den gewählten Tag aufgelöst.</p>
|
||||
</div>
|
||||
<button class="ghost-btn modal__close" type="button" id="dailyModalCloseBtn" aria-label="Schließen">×</button>
|
||||
</header>
|
||||
<form id="dailyBookmarkForm" class="bookmark-form" autocomplete="off">
|
||||
<label class="field">
|
||||
<span>Titel (optional)</span>
|
||||
<input id="dailyTitleInput" type="text" name="title" maxlength="160" placeholder="z.B. Daily Gewinnspielrunde">
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>URL-Template *</span>
|
||||
<input id="dailyUrlInput" type="url" name="url_template" maxlength="800" placeholder="https://www.test.de/tag-{{day}}/" required>
|
||||
</label>
|
||||
<div id="dailyUrlSuggestionBox" class="suggestion-box" hidden></div>
|
||||
<label class="field">
|
||||
<span>Notiz (optional)</span>
|
||||
<textarea id="dailyNotesInput" name="notes" maxlength="800" rows="3" placeholder="Kurze Hinweise oder To-do für diesen Link"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Marker (optional)</span>
|
||||
<input id="dailyMarkerInput" type="text" name="marker" maxlength="120" placeholder="z.B. März-Import oder Kampagne A">
|
||||
</label>
|
||||
<div class="field field--switch">
|
||||
<span>Status</span>
|
||||
<label class="switch-control">
|
||||
<input id="dailyActiveInput" type="checkbox" name="is_active" checked>
|
||||
<span class="switch-control__label">Bookmark ist aktiv</span>
|
||||
</label>
|
||||
<p class="field__hint">Deaktivierte Bookmarks bleiben erhalten, werden aber beim Auto-Öffnen und Abhaken übersprungen.</p>
|
||||
</div>
|
||||
<div class="form-preview">
|
||||
<div>
|
||||
<p class="form-preview__label">Aufgelöste URL für den gewählten Tag:</p>
|
||||
<a id="dailyPreviewLink" class="form-preview__link" href="#" target="_blank" rel="noopener">–</a>
|
||||
</div>
|
||||
<div class="form-preview__actions">
|
||||
<button class="secondary-btn" type="button" id="dailyResetBtn">Zurücksetzen</button>
|
||||
<button class="primary-btn" type="submit" id="dailySubmitBtn">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder-help">
|
||||
<p class="placeholder-help__title">Dynamische Platzhalter</p>
|
||||
<ul class="placeholder-help__list">
|
||||
<li><code>{{day}}</code> Tag des Monats (1–31), <code>{{dd}}</code> zweistellig</li>
|
||||
<li><code>{{date}}</code> liefert <code>YYYY-MM-DD</code></li>
|
||||
<li><code>{{mm}}</code> Monat zweistellig, <code>{{yyyy}}</code> Jahr</li>
|
||||
<li><code>{{day+1}}</code> oder <code>{{date-2}}</code> verschieben um Tage</li>
|
||||
<li><code>{{counter:477}}</code> Basiswert + aktueller Tag, z.B. <code>https://www.test.de/sweepstakes/{{counter:477}}/</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="dailyFormStatus" class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dailyImportModal" class="modal" hidden>
|
||||
<div class="modal__backdrop" id="dailyImportBackdrop"></div>
|
||||
<div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="dailyImportModalTitle">
|
||||
<header class="modal__header">
|
||||
<div>
|
||||
<p class="panel__eyebrow">Masseneingabe</p>
|
||||
<h2 id="dailyImportModalTitle" class="panel__title">Viele Bookmarks importieren</h2>
|
||||
<p class="panel__subtitle">Füge hunderte Links gleichzeitig hinzu und vergebe einen gemeinsamen Marker.</p>
|
||||
</div>
|
||||
<button class="ghost-btn modal__close" type="button" id="dailyImportCloseBtn" aria-label="Schließen">×</button>
|
||||
</header>
|
||||
<form id="dailyImportForm" class="bookmark-form" autocomplete="off">
|
||||
<label class="field">
|
||||
<span>Liste der URL-Templates *</span>
|
||||
<textarea id="dailyImportInput" name="import_urls" maxlength="120000" rows="8" placeholder="Jeder Link in eine neue Zeile, z.B. https://example.com/{{date}}/"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Marker für alle Einträge (optional)</span>
|
||||
<input id="dailyImportMarkerInput" type="text" name="import_marker" maxlength="120" placeholder="z.B. Batch März 2024">
|
||||
</label>
|
||||
<p class="import-hint">Doppelte oder ungültige Zeilen werden automatisch übersprungen.</p>
|
||||
<div class="import-actions">
|
||||
<button class="ghost-btn" type="button" id="dailyImportResetBtn">Zurücksetzen</button>
|
||||
<button class="primary-btn" type="submit" id="dailyImportSubmitBtn">Importieren</button>
|
||||
</div>
|
||||
<div id="dailyImportStatus" class="import-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="view-dashboard" class="app-view" data-view="dashboard">
|
||||
<div class="container">
|
||||
<div class="page-toolbar page-toolbar--dashboard">
|
||||
@@ -183,7 +665,7 @@
|
||||
<option value="5">Profil 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" id="refreshBtn">
|
||||
<button type="button" class="btn btn-primary" id="dailyRefreshBtn">
|
||||
🔄 Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
@@ -813,6 +1295,9 @@
|
||||
<script src="app.js"></script>
|
||||
<script src="dashboard.js"></script>
|
||||
<script src="settings.js"></script>
|
||||
<script src="vendor/list.min.js"></script>
|
||||
<script src="automation.js"></script>
|
||||
<script src="daily-bookmarks.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
const buttons = Array.from(document.querySelectorAll('[data-view-target]'));
|
||||
@@ -889,5 +1374,35 @@
|
||||
window.history.replaceState({ view: defaultView }, '', initQuery ? `${window.location.pathname}?${initQuery}` : window.location.pathname);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const AUTOMATION_VIEW = 'automation';
|
||||
const DAILY_VIEW = 'daily-bookmarks';
|
||||
function handleViewChange(event) {
|
||||
const view = event?.detail?.view;
|
||||
if (view === AUTOMATION_VIEW) {
|
||||
window.AutomationPage?.activate?.();
|
||||
} else {
|
||||
window.AutomationPage?.deactivate?.();
|
||||
}
|
||||
if (view === DAILY_VIEW) {
|
||||
window.DailyBookmarksPage?.activate?.();
|
||||
} else {
|
||||
window.DailyBookmarksPage?.deactivate?.();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('app:view-change', handleViewChange);
|
||||
|
||||
const automationSection = document.querySelector('[data-view="automation"]');
|
||||
if (automationSection && automationSection.classList.contains('app-view--active')) {
|
||||
window.AutomationPage?.activate?.();
|
||||
}
|
||||
const dailySection = document.querySelector('[data-view="daily-bookmarks"]');
|
||||
if (dailySection && dailySection.classList.contains('app-view--active')) {
|
||||
window.DailyBookmarksPage?.activate?.();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user