Files
TK-Wiki-Newsletter/app/templates/dashboard.html
smueller df4424fdf9 Enhance newsletter HTML generation and UI components
- Introduce helper functions `_outlook_font` and `_outlook_link` for better formatting in Outlook-compatible HTML.
- Update `create_outlook_html` to utilize new font and link functions, improving the overall appearance of the newsletter.
- Modify CSS to add styles for a new copy dialog overlay and related components.
- Refactor JavaScript to improve copy functionality and add a dialog for copying HTML content.
- Update dashboard template to enhance user instructions for copying and downloading HTML content.
2026-07-03 13:17:11 +02:00

205 lines
9.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "base.html" %}
{% block content %}
<section class="card">
<h2>Newsletter erstellen</h2>
<form method="post" action="/dashboard" class="form-grid">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<label>Zeitraum (Tage)
<input type="number" name="days" min="1" max="90" value="{{ filters.days }}">
</label>
<label>Kategorie (optional)
<input type="text" name="category" value="{{ filters.category }}">
</label>
<label class="checkbox">
<input type="checkbox" name="only_edited" value="true" {% if filters.only_edited %}checked{% endif %}>
Nur bearbeitete Artikel (keine neu erstellten)
</label>
<fieldset class="display-options">
<legend>Anzeige im Output</legend>
<label class="checkbox">
<input type="checkbox" name="show_date" value="true" {% if filters.display.show_date %}checked{% endif %}>
Datum anzeigen
</label>
<label class="checkbox">
<input type="checkbox" name="show_user" value="true" {% if filters.display.show_user %}checked{% endif %}>
Benutzer anzeigen
</label>
<label class="checkbox">
<input type="checkbox" name="show_category" value="true" {% if filters.display.show_category %}checked{% endif %}>
Kategorie anzeigen
</label>
</fieldset>
{% if user.role in ["admin", "editor"] %}
<button type="submit">Newsletter generieren</button>
{% endif %}
</form>
{% if user.role == "admin" %}
<p><a href="/admin/users">Zur Benutzerverwaltung</a></p>
{% endif %}
{% if wiki_error %}
<p class="error">{{ wiki_error }}</p>
{% endif %}
</section>
{% if user.role in ["admin", "editor"] %}
<section class="card">
<h3>Optionaler SMTP-Versand</h3>
<form method="post" action="/newsletter/send-now" class="form-grid">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="days" value="{{ filters.days }}">
<input type="hidden" name="category" value="{{ filters.category }}">
<input type="hidden" name="only_edited" value="{{ 'true' if filters.only_edited else 'false' }}">
<input type="hidden" name="show_date" value="{{ 'true' if filters.display.show_date else 'false' }}">
<input type="hidden" name="show_user" value="{{ 'true' if filters.display.show_user else 'false' }}">
<input type="hidden" name="show_category" value="{{ 'true' if filters.display.show_category else 'false' }}">
<button type="submit">Newsletter jetzt senden</button>
</form>
</section>
{% endif %}
{% if user.role == "admin" %}
<section class="card">
<h3>SMTP-Konfiguration (optional)</h3>
<form method="post" action="/admin/smtp" class="form-grid">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<label class="checkbox">
<input type="checkbox" name="enabled" value="true" {% if smtp.enabled == "true" %}checked{% endif %}>
SMTP Versand aktivieren
</label>
<label>SMTP Host
<input type="text" name="host" value="{{ smtp.host }}">
</label>
<label>SMTP Port
<input type="number" name="port" value="{{ smtp.port }}">
</label>
<label>Benutzername
<input type="text" name="username" value="{{ smtp.username }}">
</label>
<label>Passwort
<input type="password" name="password" value="{{ smtp.password }}">
</label>
<label>Absender E-Mail
<input type="email" name="from_email" value="{{ smtp.from_email }}">
</label>
<label class="checkbox">
<input type="checkbox" name="use_tls" value="true" {% if smtp.use_tls == "true" %}checked{% endif %}>
STARTTLS verwenden
</label>
<label>Verteilerliste (Komma-separiert)
<textarea rows="3" name="recipients">{{ smtp.recipients }}</textarea>
</label>
<label>Geplanter täglicher Versand (HH:MM)
<input type="time" name="schedule_time" value="{{ smtp.schedule_time }}">
</label>
<button type="submit">SMTP Einstellungen speichern</button>
</form>
</section>
{% endif %}
<section class="card">
<h3>Newsletter-Vorschau (mit Hyperlinks)</h3>
<p class="hint"><strong>Empfohlen für Outlook:</strong> „Im Browser öffnen“ → dort <strong>Strg+A</strong>, <strong>Strg+C</strong> → in Outlook <strong>Strg+V</strong>. Alternativ „Für Outlook kopieren“ und mit Rechtsklick → „Format beibehalten“ einfügen.</p>
<div class="copy-actions">
<button type="button" id="open-outlook-btn" class="btn-secondary">Im Browser öffnen</button>
<button type="button" id="copy-outlook-btn" class="btn-secondary">Für Outlook kopieren</button>
<button type="button" id="copy-html-source-btn" class="btn-secondary">HTML-Quelltext kopieren</button>
<button type="button" id="download-html-btn" class="btn-secondary">HTML herunterladen</button>
<span id="copy-status" class="copy-status" aria-live="polite"></span>
</div>
<iframe id="newsletter-preview-frame" class="newsletter-preview-frame" title="Newsletter Vorschau"></iframe>
<textarea id="newsletter-html-source" class="hidden-source" hidden readonly>{{ raw_html }}</textarea>
<textarea id="newsletter-outlook-source" class="hidden-source" hidden readonly>{{ outlook_html }}</textarea>
<textarea id="newsletter-plain-source" class="hidden-source" hidden readonly>{{ plain_text }}</textarea>
</section>
<section class="card">
<h3>Output: Nur-Text (Fallback)</h3>
<p class="hint">Enthält URLs als Text. Für klickbare Links bitte die Vorschau bzw. „Für Outlook kopieren“ verwenden.</p>
<textarea rows="16" readonly>{{ plain_text }}</textarea>
</section>
<section class="card">
<h3>Output: HTML-Quelltext</h3>
<p class="hint">Öffnet ein Fenster mit markiertem Text dort <strong>Strg+C</strong> drücken. Funktioniert auch ohne HTTPS.</p>
<div class="textarea-actions">
<button type="button" id="copy-html-source-btn-2" class="btn-secondary">HTML-Quelltext kopieren</button>
<button type="button" id="download-html-source-btn" class="btn-secondary">HTML-Quelltext herunterladen</button>
</div>
<textarea id="newsletter-html-display" rows="12" readonly>{{ raw_html }}</textarea>
</section>
<section class="card">
<h3>Neue Artikel ({{ articles_new|length }})</h3>
<table>
<thead>
<tr>
<th>Titel</th>
{% if filters.display.show_date %}<th>Zeit</th>{% endif %}
{% if filters.display.show_user %}<th>Benutzer</th>{% endif %}
{% if filters.display.show_category %}<th>Kategorien</th>{% endif %}
</tr>
</thead>
<tbody>
{% for item in articles_new %}
<tr>
<td><a href="{{ wiki_article_url(item.title) }}" target="_blank" rel="noopener">{{ item.title }}</a></td>
{% if filters.display.show_date %}<td>{{ item.timestamp }}</td>{% endif %}
{% if filters.display.show_user %}<td>{{ item.user }}</td>{% endif %}
{% if filters.display.show_category %}<td>{{ item.categories|join(", ") }}</td>{% endif %}
</tr>
{% else %}
<tr><td colspan="4">Keine neuen Artikel im gewählten Zeitraum.</td></tr>
{% endfor %}
</tbody>
</table>
</section>
<section class="card">
<h3>Bearbeitete Artikel ({{ articles_edited|length }})</h3>
<table>
<thead>
<tr>
<th>Titel</th>
{% if filters.display.show_date %}<th>Zeit</th>{% endif %}
{% if filters.display.show_user %}<th>Benutzer</th>{% endif %}
{% if filters.display.show_category %}<th>Kategorien</th>{% endif %}
</tr>
</thead>
<tbody>
{% for item in articles_edited %}
<tr>
<td><a href="{{ wiki_article_url(item.title) }}" target="_blank" rel="noopener">{{ item.title }}</a></td>
{% if filters.display.show_date %}<td>{{ item.timestamp }}</td>{% endif %}
{% if filters.display.show_user %}<td>{{ item.user }}</td>{% endif %}
{% if filters.display.show_category %}<td>{{ item.categories|join(", ") }}</td>{% endif %}
</tr>
{% else %}
<tr><td colspan="4">Keine bearbeiteten Artikel im gewählten Zeitraum.</td></tr>
{% endfor %}
</tbody>
</table>
</section>
<section class="card">
<h3>Versandprotokoll (letzte 20)</h3>
<table>
<thead><tr><th>Zeit</th><th>Status</th><th>Betreff</th><th>Empfänger</th><th>Details</th></tr></thead>
<tbody>
{% for log in send_logs %}
<tr>
<td>{{ log.created_at }}</td>
<td>{{ log.status }}</td>
<td>{{ log.subject }}</td>
<td>{{ log.recipients }}</td>
<td>{{ log.detail }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/js/newsletter.js?v=5"></script>
{% endblock %}