Enhance newsletter functionality and UI improvements
- Introduce `create_outlook_html` function for generating Outlook-compatible newsletter HTML. - Update dashboard to include `outlook_html` in the response. - Modify newsletter generation logic to support separate handling of Outlook HTML. - Improve CSS styles for newsletter preview and layout adjustments. - Add new button for downloading HTML directly from the dashboard.
This commit is contained in:
smueller
@@ -22,6 +22,7 @@ from app.services.newsletter import (
|
||||
DEFAULT_DISPLAY,
|
||||
article_url,
|
||||
create_html,
|
||||
create_outlook_html,
|
||||
create_plain_text,
|
||||
create_subject,
|
||||
filter_articles,
|
||||
@@ -189,6 +190,7 @@ async def dashboard(request: Request, db: Session = Depends(get_db), current_use
|
||||
"articles_new": [],
|
||||
"articles_edited": [],
|
||||
"raw_html": "",
|
||||
"outlook_html": "",
|
||||
"plain_text": "",
|
||||
"filters": {
|
||||
"days": 30,
|
||||
@@ -226,6 +228,7 @@ async def dashboard_generate(
|
||||
articles_edited: list = []
|
||||
plain_text = ""
|
||||
raw_html = ""
|
||||
outlook_html = ""
|
||||
try:
|
||||
articles = await wiki_service.get_recent_changes(days=days, only_edited=only_edited_flag)
|
||||
filtered = filter_articles(articles, category_filter=category or None)
|
||||
@@ -233,6 +236,7 @@ async def dashboard_generate(
|
||||
title = create_subject(days, category)
|
||||
plain_text = create_plain_text(filtered, days, display, category)
|
||||
raw_html = create_html(filtered, days, display, category)
|
||||
outlook_html = create_outlook_html(filtered, days, display, category)
|
||||
run_scheduled_send_if_due(db, title, raw_html, plain_text)
|
||||
except WikiFetchError as exc:
|
||||
wiki_error = exc.message
|
||||
@@ -243,6 +247,7 @@ async def dashboard_generate(
|
||||
"articles_new": articles_new,
|
||||
"articles_edited": articles_edited,
|
||||
"raw_html": raw_html,
|
||||
"outlook_html": outlook_html,
|
||||
"plain_text": plain_text,
|
||||
"filters": {
|
||||
"days": days,
|
||||
|
||||
@@ -9,6 +9,19 @@ ORG_NAME = "Thomas-Krenn.AG"
|
||||
LINE = "=" * 78
|
||||
SUBLINE = "-" * 78
|
||||
|
||||
FONT = "Arial, Helvetica, sans-serif"
|
||||
COLOR_TEXT = "#1A1A1A"
|
||||
COLOR_MUTED = "#5C6670"
|
||||
COLOR_HEADING = "#003366"
|
||||
COLOR_LINK = "#0055A4"
|
||||
COLOR_BORDER = "#D7DEE8"
|
||||
COLOR_BG = "#EEF2F7"
|
||||
COLOR_WHITE = "#FFFFFF"
|
||||
COLOR_ACCENT_NEW = "#1F7A4D"
|
||||
COLOR_ACCENT_NEW_BG = "#E8F6EE"
|
||||
COLOR_ACCENT_EDIT = "#0055A4"
|
||||
COLOR_ACCENT_EDIT_BG = "#E8F1FA"
|
||||
|
||||
|
||||
class DisplayOptions(TypedDict):
|
||||
show_date: bool
|
||||
@@ -35,10 +48,14 @@ def parse_display_options(
|
||||
}
|
||||
|
||||
|
||||
IGNORED_ARTICLE_TITLES = frozenset({"Hauptseite"})
|
||||
|
||||
|
||||
def filter_articles(
|
||||
articles: list[dict[str, Any]],
|
||||
category_filter: str | None = None,
|
||||
) -> list[dict[str, Any]]:
|
||||
articles = [a for a in articles if a.get("title") not in IGNORED_ARTICLE_TITLES]
|
||||
if not category_filter:
|
||||
return articles
|
||||
wanted = category_filter.strip().lower()
|
||||
@@ -106,8 +123,7 @@ def create_plain_text(
|
||||
"",
|
||||
"Liebe Kolleginnen und Kollegen,",
|
||||
"",
|
||||
"im Thomas-Krenn-Wiki wurden im ausgewählten Zeitraum folgende Artikel",
|
||||
"neu veröffentlicht bzw. aktualisiert:",
|
||||
_intro_sentence(period_start, period_end),
|
||||
"",
|
||||
]
|
||||
)
|
||||
@@ -152,52 +168,261 @@ def create_html(
|
||||
created_at = datetime.now().strftime("%d.%m.%Y %H:%M")
|
||||
subject = escape(create_subject(days, category))
|
||||
|
||||
category_row = ""
|
||||
if category.strip():
|
||||
category_row = f'<p style="margin:4px 0;color:#334155;"><strong>Kategorie:</strong> {escape(category.strip())}</p>'
|
||||
|
||||
if not new_articles and not edited_articles:
|
||||
body = '<p style="margin:16px 0;">Im gewählten Zeitraum wurden keine passenden Wiki-Änderungen gefunden.</p>'
|
||||
body = f'<p style="margin:0;font-family:{FONT};font-size:15px;line-height:24px;color:{COLOR_MUTED};">Im gewählten Zeitraum wurden keine passenden Wiki-Änderungen gefunden.</p>'
|
||||
else:
|
||||
body = "\n".join(
|
||||
[
|
||||
_html_section("Neue Artikel", new_articles, display, "Keine neuen Artikel im Zeitraum."),
|
||||
_html_section("Bearbeitete Artikel", edited_articles, display, "Keine bearbeiteten Artikel im Zeitraum."),
|
||||
_html_section("Neue Artikel", new_articles, display, "Keine neuen Artikel im Zeitraum.", kind="new"),
|
||||
_html_section("Bearbeitete Artikel", edited_articles, display, "Keine bearbeiteten Artikel im Zeitraum.", kind="edited"),
|
||||
]
|
||||
)
|
||||
|
||||
summary = _html_summary(new_articles, edited_articles)
|
||||
intro = escape(_intro_sentence(period_start, period_end))
|
||||
category_hint = (
|
||||
f'<tr><td style="padding:0 32px 0;font-family:{FONT};"><p style="margin:0 0 16px;font-family:{FONT};font-size:13px;line-height:20px;color:{COLOR_MUTED};"><strong style="color:{COLOR_HEADING};">Filter:</strong> Kategorie {escape(category.strip())}</p></td></tr>'
|
||||
if category.strip()
|
||||
else ""
|
||||
)
|
||||
|
||||
return f"""<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head><meta charset="utf-8"><title>{subject}</title></head>
|
||||
<body style="margin:0;padding:0;background:#f4f6fa;font-family:Arial,Helvetica,sans-serif;color:#1f2430;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f4f6fa;padding:24px 0;">
|
||||
<tr><td align="center">
|
||||
<table role="presentation" width="640" cellpadding="0" cellspacing="0" style="background:#ffffff;border:1px solid #dde3ef;border-radius:8px;overflow:hidden;">
|
||||
<tr><td style="background:#0c2c5a;color:#ffffff;padding:20px 24px;">
|
||||
<h1 style="margin:0;font-size:20px;">Interner Wiki-Newsletter</h1>
|
||||
<p style="margin:8px 0 0;font-size:14px;">{escape(ORG_NAME)}</p>
|
||||
</td></tr>
|
||||
<tr><td style="padding:24px;">
|
||||
<p style="margin:0 0 8px;color:#334155;"><strong>Zeitraum:</strong> {period_start} bis {period_end} ({days} Tage)</p>
|
||||
<p style="margin:0 0 8px;color:#334155;"><strong>Erstellt am:</strong> {created_at}</p>
|
||||
{category_row}
|
||||
<p style="margin:20px 0 8px;line-height:1.5;">Liebe Kolleginnen und Kollegen,</p>
|
||||
<p style="margin:0 0 20px;line-height:1.5;">im Thomas-Krenn-Wiki wurden im ausgewählten Zeitraum folgende Artikel neu veröffentlicht bzw. aktualisiert:</p>
|
||||
{body}
|
||||
{summary}
|
||||
<p style="margin:24px 0 0;"><a href="{WIKI_HOME_URL}" style="color:#1b5dbf;">Zum Thomas-Krenn-Wiki</a></p>
|
||||
</td></tr>
|
||||
<tr><td style="background:#f8fafc;padding:16px 24px;border-top:1px solid #e6ebf4;font-size:12px;color:#64748b;line-height:1.5;">
|
||||
Dieser Newsletter wurde automatisch erstellt und ist nur für den internen Gebrauch bei {escape(ORG_NAME)} bestimmt.
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{subject}</title>
|
||||
<!--[if mso]>
|
||||
<style type="text/css">
|
||||
body, table, td, p, a, li, h1, h2, h3, span, strong {{ font-family: Arial, sans-serif !important; }}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:{COLOR_BG};font-family:{FONT};color:{COLOR_TEXT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{COLOR_BG};font-family:{FONT};">
|
||||
<tr>
|
||||
<td align="center" style="padding:28px 16px;font-family:{FONT};">
|
||||
<table role="presentation" width="680" cellpadding="0" cellspacing="0" border="0" style="width:680px;max-width:680px;background:{COLOR_WHITE};border:1px solid {COLOR_BORDER};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="height:5px;background:{COLOR_LINK};font-size:0;line-height:0;"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background:{COLOR_HEADING};padding:30px 36px 28px;font-family:{FONT};">
|
||||
<p style="margin:0;font-family:{FONT};font-size:11px;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:#A9C6E8;">Interner Newsletter</p>
|
||||
<h1 style="margin:10px 0 0;font-family:{FONT};font-size:28px;line-height:34px;font-weight:bold;color:{COLOR_WHITE};">Thomas-Krenn Wiki Update</h1>
|
||||
<p style="margin:10px 0 0;font-family:{FONT};font-size:14px;line-height:21px;color:#D9E8F8;">{escape(ORG_NAME)}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:28px 36px 0;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{COLOR_BG};border-left:4px solid {COLOR_LINK};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="padding:18px 20px;font-family:{FONT};font-size:15px;line-height:24px;color:{COLOR_TEXT};">
|
||||
<p style="margin:0 0 10px;font-family:{FONT};font-size:15px;line-height:24px;">Liebe Kolleginnen und Kollegen,</p>
|
||||
<p style="margin:0;font-family:{FONT};font-size:15px;line-height:24px;">{intro}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
{category_hint}
|
||||
<tr>
|
||||
<td style="padding:8px 36px 0;font-family:{FONT};">
|
||||
<p style="margin:0 0 18px;font-family:{FONT};font-size:12px;line-height:18px;color:{COLOR_MUTED};">Erstellt am {created_at}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:0 36px 30px;font-family:{FONT};">
|
||||
{body}
|
||||
{summary}
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:32px auto 0;font-family:{FONT};">
|
||||
<tr>
|
||||
<td align="center" style="background:{COLOR_HEADING};padding:14px 28px;font-family:{FONT};">
|
||||
<a href="{WIKI_HOME_URL}" style="font-family:{FONT};font-size:14px;line-height:20px;font-weight:bold;color:{COLOR_WHITE};text-decoration:none;">Zum Thomas-Krenn-Wiki →</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:20px 36px;background:{COLOR_BG};border-top:1px solid {COLOR_BORDER};font-family:{FONT};font-size:11px;line-height:17px;color:{COLOR_MUTED};text-align:center;">
|
||||
Automatisch erstellter interner Newsletter · Nur für den Gebrauch bei {escape(ORG_NAME)}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>"""
|
||||
|
||||
|
||||
OUTLOOK_FONT = "Arial, sans-serif"
|
||||
OUTLOOK_TEXT = "#000000"
|
||||
OUTLOOK_MUTED = "#666666"
|
||||
OUTLOOK_LINK = "#0563C1"
|
||||
OUTLOOK_HEADING = "#003366"
|
||||
OUTLOOK_BORDER = "#DDDDDD"
|
||||
|
||||
|
||||
def create_outlook_html(
|
||||
articles: list[dict[str, Any]],
|
||||
days: int,
|
||||
display: DisplayOptions | None = None,
|
||||
category: str = "",
|
||||
) -> str:
|
||||
"""Vereinfachtes HTML für Outlook/Word – nur Tabellen und Inline-Styles."""
|
||||
display = display or DEFAULT_DISPLAY
|
||||
new_articles, edited_articles = split_articles_by_type(articles)
|
||||
period_start, period_end = _period_range(days)
|
||||
created_at = datetime.now().strftime("%d.%m.%Y %H:%M")
|
||||
intro = escape(_intro_sentence(period_start, period_end))
|
||||
subject = escape(create_subject(days, category))
|
||||
|
||||
if not new_articles and not edited_articles:
|
||||
body_rows = f"""<tr>
|
||||
<td style="padding:12px 0;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_MUTED};">
|
||||
Im gewählten Zeitraum wurden keine passenden Wiki-Änderungen gefunden.
|
||||
</td>
|
||||
</tr>"""
|
||||
else:
|
||||
body_rows = "\n".join(
|
||||
[
|
||||
_outlook_section("Neue Artikel", new_articles, display, "Keine neuen Artikel im Zeitraum."),
|
||||
_outlook_section(
|
||||
"Bearbeitete Artikel",
|
||||
edited_articles,
|
||||
display,
|
||||
"Keine bearbeiteten Artikel im Zeitraum.",
|
||||
),
|
||||
]
|
||||
)
|
||||
|
||||
category_block = ""
|
||||
if category.strip():
|
||||
category_block = f"""<p style="margin:0 0 8px;font-family:{OUTLOOK_FONT};font-size:10pt;color:{OUTLOOK_MUTED};">
|
||||
<strong style="font-family:{OUTLOOK_FONT};color:{OUTLOOK_HEADING};">Filter:</strong> Kategorie {escape(category.strip())}
|
||||
</p>"""
|
||||
|
||||
total = len(new_articles) + len(edited_articles)
|
||||
summary_row = f"""<tr>
|
||||
<td style="padding:16px 0 0;font-family:{OUTLOOK_FONT};font-size:10pt;color:{OUTLOOK_MUTED};border-top:1px solid {OUTLOOK_BORDER};">
|
||||
<strong style="font-family:{OUTLOOK_FONT};color:{OUTLOOK_HEADING};">Zusammenfassung:</strong>
|
||||
{len(new_articles)} neu · {len(edited_articles)} bearbeitet · {total} gesamt
|
||||
</td>
|
||||
</tr>"""
|
||||
|
||||
return f"""<!DOCTYPE html>
|
||||
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="ProgId" content="Word.Document">
|
||||
<meta name="Generator" content="Microsoft Word 15">
|
||||
<title>{subject}</title>
|
||||
<!--[if gte mso 9]>
|
||||
<xml>
|
||||
<w:WordDocument>
|
||||
<w:View>Print</w:View>
|
||||
<w:Zoom>100</w:Zoom>
|
||||
<w:DoNotOptimizeForBrowser/>
|
||||
</w:WordDocument>
|
||||
</xml>
|
||||
<![endif]-->
|
||||
<!--[if mso]>
|
||||
<style type="text/css">
|
||||
body, table, td, p, a, span, strong {{ font-family: Arial, sans-serif !important; }}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body style="margin:0;padding:16px;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};background:#FFFFFF;">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="width:600px;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};background:#FFFFFF;">
|
||||
<tr>
|
||||
<td style="padding:16px 20px;background:{OUTLOOK_HEADING};font-family:{OUTLOOK_FONT};">
|
||||
<p style="margin:0;font-family:{OUTLOOK_FONT};font-size:9pt;color:#A9C6E8;text-transform:uppercase;letter-spacing:1px;">Interner Newsletter</p>
|
||||
<p style="margin:6px 0 0;font-family:{OUTLOOK_FONT};font-size:18pt;font-weight:bold;color:#FFFFFF;">Thomas-Krenn Wiki Update</p>
|
||||
<p style="margin:4px 0 0;font-family:{OUTLOOK_FONT};font-size:11pt;color:#D9E8F8;">{escape(ORG_NAME)}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:20px;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">
|
||||
<p style="margin:0 0 8px;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">Liebe Kolleginnen und Kollegen,</p>
|
||||
<p style="margin:0 0 12px;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">{intro}</p>
|
||||
<p style="margin:0 0 16px;font-family:{OUTLOOK_FONT};font-size:9pt;color:{OUTLOOK_MUTED};">Erstellt am: {created_at}</p>
|
||||
{category_block}
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">
|
||||
{body_rows}
|
||||
{summary_row}
|
||||
<tr>
|
||||
<td style="padding:20px 0 0;font-family:{OUTLOOK_FONT};font-size:11pt;">
|
||||
<a href="{WIKI_HOME_URL}" style="font-family:{OUTLOOK_FONT};font-size:11pt;font-weight:bold;color:{OUTLOOK_LINK};">Zum Thomas-Krenn-Wiki →</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:16px 0 0;font-family:{OUTLOOK_FONT};font-size:9pt;color:{OUTLOOK_MUTED};border-top:1px solid {OUTLOOK_BORDER};">
|
||||
Automatisch erstellter interner Newsletter · Nur für den Gebrauch bei {escape(ORG_NAME)}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>"""
|
||||
|
||||
|
||||
def _outlook_meta_line(item: dict[str, Any], display: DisplayOptions) -> str:
|
||||
parts: list[str] = []
|
||||
if display["show_date"]:
|
||||
parts.append(f"Datum: {_format_ts(item.get('timestamp'))}")
|
||||
if display["show_user"]:
|
||||
parts.append(f"Benutzer: {item.get('user', '-')}")
|
||||
if display["show_category"]:
|
||||
cat = ", ".join(item.get("categories", [])) or "Keine Kategorie"
|
||||
parts.append(f"Kategorie: {cat}")
|
||||
return " | ".join(parts)
|
||||
|
||||
|
||||
def _outlook_article_rows(items: list[dict[str, Any]], display: DisplayOptions) -> str:
|
||||
rows: list[str] = []
|
||||
for idx, item in enumerate(items, 1):
|
||||
title = escape(item.get("title", "Ohne Titel"))
|
||||
url = escape(_article_url(item.get("title", "")))
|
||||
meta = _outlook_meta_line(item, display)
|
||||
meta_html = ""
|
||||
if meta:
|
||||
meta_html = (
|
||||
f'<br><span style="font-family:{OUTLOOK_FONT};font-size:9pt;color:{OUTLOOK_MUTED};">'
|
||||
f"{escape(meta)}</span>"
|
||||
)
|
||||
rows.append(
|
||||
f"""<tr>
|
||||
<td width="28" valign="top" style="padding:6px 8px 10px 0;border-bottom:1px solid {OUTLOOK_BORDER};font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">{idx}.</td>
|
||||
<td valign="top" style="padding:6px 0 10px;border-bottom:1px solid {OUTLOOK_BORDER};font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_TEXT};">
|
||||
<a href="{url}" style="font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_LINK};">{title}</a>{meta_html}
|
||||
</td>
|
||||
</tr>"""
|
||||
)
|
||||
return "\n".join(rows)
|
||||
|
||||
|
||||
def _outlook_section(
|
||||
heading: str,
|
||||
items: list[dict[str, Any]],
|
||||
display: DisplayOptions,
|
||||
empty_text: str,
|
||||
) -> str:
|
||||
header = f"""<tr>
|
||||
<td colspan="2" style="padding:18px 0 6px;font-family:{OUTLOOK_FONT};font-size:13pt;font-weight:bold;color:{OUTLOOK_HEADING};border-bottom:2px solid {OUTLOOK_HEADING};">
|
||||
{escape(heading)} ({len(items)})
|
||||
</td>
|
||||
</tr>"""
|
||||
if not items:
|
||||
return header + f"""<tr>
|
||||
<td colspan="2" style="padding:8px 0;font-family:{OUTLOOK_FONT};font-size:11pt;color:{OUTLOOK_MUTED};font-style:italic;">{escape(empty_text)}</td>
|
||||
</tr>"""
|
||||
return header + _outlook_article_rows(items, display)
|
||||
|
||||
|
||||
def _plain_section(
|
||||
heading: str,
|
||||
items: list[dict[str, Any]],
|
||||
@@ -255,52 +480,139 @@ def _plain_footer(new_articles: list[dict[str, Any]], edited_articles: list[dict
|
||||
)
|
||||
|
||||
|
||||
def _html_section(heading: str, items: list[dict[str, Any]], display: DisplayOptions, empty_text: str) -> str:
|
||||
def _html_section(
|
||||
heading: str,
|
||||
items: list[dict[str, Any]],
|
||||
display: DisplayOptions,
|
||||
empty_text: str,
|
||||
kind: str = "edited",
|
||||
) -> str:
|
||||
accent = COLOR_ACCENT_NEW if kind == "new" else COLOR_ACCENT_EDIT
|
||||
accent_bg = COLOR_ACCENT_NEW_BG if kind == "new" else COLOR_ACCENT_EDIT_BG
|
||||
badge = "NEU" if kind == "new" else "AKTUALISIERT"
|
||||
|
||||
blocks = [
|
||||
f'<h2 style="margin:24px 0 8px;font-size:16px;color:#0c2c5a;border-bottom:2px solid #dde3ef;padding-bottom:6px;">{escape(heading)} ({len(items)})</h2>'
|
||||
f"""<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:28px;font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="padding:0;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{accent_bg};border:1px solid {COLOR_BORDER};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="width:6px;background:{accent};font-size:0;line-height:0;"> </td>
|
||||
<td style="padding:14px 16px;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="font-family:{FONT};">
|
||||
<h2 style="margin:0;font-family:{FONT};font-size:17px;line-height:22px;font-weight:bold;color:{COLOR_HEADING};">{escape(heading)}</h2>
|
||||
</td>
|
||||
<td align="right" style="font-family:{FONT};white-space:nowrap;">
|
||||
<span style="display:inline-block;padding:4px 10px;background:{accent};font-family:{FONT};font-size:11px;line-height:14px;font-weight:bold;color:{COLOR_WHITE};">{badge}</span>
|
||||
<span style="display:inline-block;margin-left:8px;padding:4px 10px;background:{COLOR_WHITE};border:1px solid {COLOR_BORDER};font-family:{FONT};font-size:11px;line-height:14px;color:{COLOR_MUTED};">{len(items)}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>"""
|
||||
]
|
||||
if not items:
|
||||
blocks.append(f'<p style="margin:8px 0 0;color:#64748b;">{escape(empty_text)}</p>')
|
||||
blocks.append(
|
||||
f'<p style="margin:14px 0 0;padding:0 4px;font-family:{FONT};font-size:14px;line-height:22px;color:{COLOR_MUTED};">{escape(empty_text)}</p>'
|
||||
)
|
||||
return "\n".join(blocks)
|
||||
|
||||
blocks.append('<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top:8px;">')
|
||||
blocks.append(
|
||||
f'<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:10px;font-family:{FONT};">'
|
||||
)
|
||||
for idx, item in enumerate(items, start=1):
|
||||
blocks.append(_html_item_row(idx, item, display))
|
||||
blocks.append(_html_item_row(idx, item, display, accent))
|
||||
blocks.append("</table>")
|
||||
return "\n".join(blocks)
|
||||
|
||||
|
||||
def _html_item_row(idx: int, item: dict[str, Any], display: DisplayOptions) -> str:
|
||||
def _html_meta_tags(item: dict[str, Any], display: DisplayOptions) -> str:
|
||||
tags: list[str] = []
|
||||
if display["show_date"]:
|
||||
tags.append(_html_meta_tag("Datum", _format_ts(item.get("timestamp"))))
|
||||
if display["show_user"]:
|
||||
tags.append(_html_meta_tag("Benutzer", str(item.get("user", "-"))))
|
||||
if display["show_category"]:
|
||||
cat = ", ".join(item.get("categories", [])) or "Keine Kategorie"
|
||||
tags.append(_html_meta_tag("Kategorie", cat))
|
||||
if not tags:
|
||||
return ""
|
||||
return f'<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:10px;font-family:{FONT};"><tr>{"".join(tags)}</tr></table>'
|
||||
|
||||
|
||||
def _html_meta_tag(label: str, value: str) -> str:
|
||||
return f"""<td style="padding:0 8px 0 0;font-family:{FONT};">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="padding:5px 10px;background:{COLOR_BG};border:1px solid {COLOR_BORDER};font-family:{FONT};font-size:11px;line-height:16px;color:{COLOR_MUTED};">
|
||||
<strong style="font-family:{FONT};color:{COLOR_TEXT};">{escape(label)}:</strong> {escape(value)}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>"""
|
||||
|
||||
|
||||
def _html_item_row(idx: int, item: dict[str, Any], display: DisplayOptions, accent: str) -> str:
|
||||
title = escape(item.get("title", "Ohne Titel"))
|
||||
url = escape(_article_url(item.get("title", "")))
|
||||
meta_parts: list[str] = []
|
||||
if display["show_date"]:
|
||||
meta_parts.append(f"<strong>Datum:</strong> {escape(_format_ts(item.get('timestamp')))}")
|
||||
if display["show_user"]:
|
||||
meta_parts.append(f"<strong>Benutzer:</strong> {escape(str(item.get('user', '-')))}")
|
||||
if display["show_category"]:
|
||||
cat = escape(", ".join(item.get("categories", [])) or "Keine Kategorie")
|
||||
meta_parts.append(f"<strong>Kategorie:</strong> {cat}")
|
||||
meta_html = f'<div style="font-size:12px;color:#64748b;margin-top:4px;">{" | ".join(meta_parts)}</div>' if meta_parts else ""
|
||||
meta_html = _html_meta_tags(item, display)
|
||||
|
||||
return f"""<tr>
|
||||
<td style="padding:10px 0;border-bottom:1px solid #e6ebf4;vertical-align:top;width:28px;color:#64748b;">{idx}.</td>
|
||||
<td style="padding:10px 0;border-bottom:1px solid #e6ebf4;vertical-align:top;">
|
||||
<a href="{url}" style="color:#1b5dbf;font-weight:bold;text-decoration:none;">{title}</a>
|
||||
{meta_html}
|
||||
<td style="padding:0 0 10px;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{COLOR_WHITE};border:1px solid {COLOR_BORDER};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="width:4px;background:{accent};font-size:0;line-height:0;"> </td>
|
||||
<td style="padding:14px 16px;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="width:26px;vertical-align:top;font-family:{FONT};font-size:13px;line-height:20px;font-weight:bold;color:{accent};">{idx}.</td>
|
||||
<td style="vertical-align:top;font-family:{FONT};">
|
||||
<a href="{url}" style="font-family:{FONT};font-size:15px;line-height:22px;font-weight:bold;color:{COLOR_LINK};text-decoration:underline;">{title}</a>
|
||||
{meta_html}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>"""
|
||||
|
||||
|
||||
def _html_summary(new_articles: list[dict[str, Any]], edited_articles: list[dict[str, Any]]) -> str:
|
||||
total = len(new_articles) + len(edited_articles)
|
||||
return f"""<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top:24px;background:#f8fafc;border:1px solid #e6ebf4;border-radius:6px;">
|
||||
<tr><td style="padding:14px 16px;font-size:14px;line-height:1.6;">
|
||||
<strong>Zusammenfassung</strong><br>
|
||||
Neue Artikel: {len(new_articles)}<br>
|
||||
Bearbeitete Artikel: {len(edited_articles)}<br>
|
||||
Gesamt: {total}
|
||||
</td></tr>
|
||||
return f"""<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:32px;font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="padding:0 0 10px;font-family:{FONT};font-size:14px;line-height:20px;font-weight:bold;color:{COLOR_HEADING};">Zusammenfassung</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-family:{FONT};">
|
||||
<tr>
|
||||
<td width="33%" style="padding:18px 12px;background:{COLOR_ACCENT_NEW_BG};border:1px solid {COLOR_BORDER};text-align:center;font-family:{FONT};">
|
||||
<div style="font-family:{FONT};font-size:28px;line-height:32px;font-weight:bold;color:{COLOR_ACCENT_NEW};">{len(new_articles)}</div>
|
||||
<div style="margin-top:4px;font-family:{FONT};font-size:12px;line-height:16px;color:{COLOR_MUTED};">Neue Artikel</div>
|
||||
</td>
|
||||
<td width="4" style="font-size:0;line-height:0;"> </td>
|
||||
<td width="33%" style="padding:18px 12px;background:{COLOR_ACCENT_EDIT_BG};border:1px solid {COLOR_BORDER};text-align:center;font-family:{FONT};">
|
||||
<div style="font-family:{FONT};font-size:28px;line-height:32px;font-weight:bold;color:{COLOR_ACCENT_EDIT};">{len(edited_articles)}</div>
|
||||
<div style="margin-top:4px;font-family:{FONT};font-size:12px;line-height:16px;color:{COLOR_MUTED};">Bearbeitet</div>
|
||||
</td>
|
||||
<td width="4" style="font-size:0;line-height:0;"> </td>
|
||||
<td width="33%" style="padding:18px 12px;background:{COLOR_BG};border:1px solid {COLOR_BORDER};text-align:center;font-family:{FONT};">
|
||||
<div style="font-family:{FONT};font-size:28px;line-height:32px;font-weight:bold;color:{COLOR_HEADING};">{total}</div>
|
||||
<div style="margin-top:4px;font-family:{FONT};font-size:12px;line-height:16px;color:{COLOR_MUTED};">Gesamt</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>"""
|
||||
|
||||
|
||||
@@ -312,6 +624,13 @@ def article_url(title: str) -> str:
|
||||
return _article_url(title)
|
||||
|
||||
|
||||
def _intro_sentence(period_start: str, period_end: str) -> str:
|
||||
return (
|
||||
f"Im Thomas-Krenn-Wiki wurden im Zeitraum vom {period_start} bis {period_end} "
|
||||
"folgende Artikel neu veröffentlicht bzw. aktualisiert:"
|
||||
)
|
||||
|
||||
|
||||
def _period_range(days: int) -> tuple[str, str]:
|
||||
end = datetime.now()
|
||||
start = end - timedelta(days=days)
|
||||
|
||||
@@ -14,7 +14,8 @@ button { width: fit-content; background: #1b5dbf; color: #fff; border: 0; border
|
||||
.copy-status { font-size: 0.92rem; color: #64748b; }
|
||||
.copy-status.success { color: #027a48; }
|
||||
.copy-status.error { color: #b42318; }
|
||||
.newsletter-preview-frame { width: 100%; min-height: 520px; border: 1px solid #dde3ef; border-radius: 6px; background: #fff; }
|
||||
.newsletter-preview-frame { width: 100%; min-height: 720px; border: 1px solid #D7DEE8; border-radius: 6px; background: #EEF2F7; box-shadow: 0 2px 8px rgba(0, 51, 102, 0.08); }
|
||||
.card h3 { color: #003366; margin-top: 0; }
|
||||
.hidden-source { display: none; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { border-bottom: 1px solid #e6ebf4; text-align: left; padding: 0.55rem; vertical-align: top; }
|
||||
|
||||
@@ -5,36 +5,134 @@ function setCopyStatus(message, isError) {
|
||||
status.className = isError ? "copy-status error" : "copy-status success";
|
||||
}
|
||||
|
||||
async function copyForOutlook() {
|
||||
function getNewsletterHtml() {
|
||||
const htmlSource = document.getElementById("newsletter-html-source");
|
||||
const htmlDisplay = document.getElementById("newsletter-html-display");
|
||||
const value = htmlSource?.value.trim() || htmlDisplay?.value.trim() || "";
|
||||
return value;
|
||||
}
|
||||
|
||||
function getNewsletterOutlookHtml() {
|
||||
const outlookSource = document.getElementById("newsletter-outlook-source");
|
||||
const outlook = outlookSource ? outlookSource.value.trim() : "";
|
||||
if (outlook) return outlook;
|
||||
return getNewsletterHtml();
|
||||
}
|
||||
|
||||
function getNewsletterPlain() {
|
||||
const plainSource = document.getElementById("newsletter-plain-source");
|
||||
if (!htmlSource || !htmlSource.value.trim()) {
|
||||
setCopyStatus("Bitte zuerst einen Newsletter generieren.", true);
|
||||
return;
|
||||
}
|
||||
return plainSource ? plainSource.value : "";
|
||||
}
|
||||
|
||||
const html = htmlSource.value;
|
||||
const plain = plainSource ? plainSource.value : "";
|
||||
function wrapCfHtml(html) {
|
||||
const fragmentStart = "<!--StartFragment-->";
|
||||
const fragmentEnd = "<!--EndFragment-->";
|
||||
const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
|
||||
const inner = bodyMatch ? bodyMatch[1].trim() : html;
|
||||
const documentHtml = `<html><body>${fragmentStart}${inner}${fragmentEnd}</body></html>`;
|
||||
|
||||
const pad = (value) => String(value).padStart(10, "0");
|
||||
const headerPlaceholder = "StartHTML:0000000000\r\nEndHTML:0000000000\r\nStartFragment:0000000000\r\nEndFragment:0000000000\r\n";
|
||||
const prefix = `Version:0.9\r\n${headerPlaceholder}`;
|
||||
const startHtml = prefix.length;
|
||||
const endHtml = startHtml + documentHtml.length;
|
||||
const startFragment = startHtml + documentHtml.indexOf(fragmentStart) + fragmentStart.length;
|
||||
const endFragment = startHtml + documentHtml.indexOf(fragmentEnd);
|
||||
|
||||
return (
|
||||
`Version:0.9\r\n` +
|
||||
`StartHTML:${pad(startHtml)}\r\n` +
|
||||
`EndHTML:${pad(endHtml)}\r\n` +
|
||||
`StartFragment:${pad(startFragment)}\r\n` +
|
||||
`EndFragment:${pad(endFragment)}\r\n` +
|
||||
documentHtml
|
||||
);
|
||||
}
|
||||
|
||||
function copyFromTextarea(textarea) {
|
||||
if (!textarea || !textarea.value) return false;
|
||||
|
||||
const previousActive = document.activeElement;
|
||||
textarea.removeAttribute("readonly");
|
||||
textarea.focus({ preventScroll: true });
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, textarea.value.length);
|
||||
|
||||
let ok = false;
|
||||
try {
|
||||
if (navigator.clipboard && window.ClipboardItem) {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
"text/html": new Blob([html], { type: "text/html" }),
|
||||
"text/plain": new Blob([plain], { type: "text/plain" }),
|
||||
}),
|
||||
]);
|
||||
setCopyStatus("Newsletter mit Hyperlinks kopiert. In Outlook mit Strg+V einfügen.");
|
||||
return;
|
||||
}
|
||||
ok = document.execCommand("copy");
|
||||
} catch (err) {
|
||||
console.warn("Clipboard API failed, using fallback.", err);
|
||||
console.warn("execCommand copy from textarea failed.", err);
|
||||
ok = false;
|
||||
} finally {
|
||||
textarea.setAttribute("readonly", "");
|
||||
if (previousActive && typeof previousActive.focus === "function") {
|
||||
previousActive.focus({ preventScroll: true });
|
||||
}
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
|
||||
function copyTextWithFallback(text) {
|
||||
if (!text) return false;
|
||||
|
||||
const pageTextareas = [
|
||||
document.getElementById("newsletter-html-display"),
|
||||
document.getElementById("newsletter-html-source"),
|
||||
document.getElementById("newsletter-outlook-source"),
|
||||
document.getElementById("newsletter-plain-source"),
|
||||
];
|
||||
|
||||
for (const textarea of pageTextareas) {
|
||||
if (textarea && textarea.value === text && copyFromTextarea(textarea)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = text;
|
||||
textarea.setAttribute("aria-hidden", "true");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.top = "0";
|
||||
textarea.style.left = "0";
|
||||
textarea.style.width = "2px";
|
||||
textarea.style.height = "2px";
|
||||
textarea.style.padding = "0";
|
||||
textarea.style.border = "none";
|
||||
textarea.style.outline = "none";
|
||||
textarea.style.boxShadow = "none";
|
||||
textarea.style.background = "transparent";
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
let ok = false;
|
||||
try {
|
||||
textarea.focus({ preventScroll: true });
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, text.length);
|
||||
ok = document.execCommand("copy");
|
||||
} catch (err) {
|
||||
console.warn("execCommand copy from temporary textarea failed.", err);
|
||||
ok = false;
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
|
||||
function copyHtmlWithFallback(html) {
|
||||
const container = document.createElement("div");
|
||||
container.innerHTML = html;
|
||||
container.contentEditable = "true";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
container.style.position = "fixed";
|
||||
container.style.left = "-9999px";
|
||||
container.style.left = "0";
|
||||
container.style.top = "0";
|
||||
container.style.width = "600px";
|
||||
container.style.height = "1px";
|
||||
container.style.overflow = "hidden";
|
||||
container.style.opacity = "0";
|
||||
container.style.pointerEvents = "none";
|
||||
container.style.background = "#FFFFFF";
|
||||
document.body.appendChild(container);
|
||||
|
||||
const range = document.createRange();
|
||||
@@ -46,38 +144,142 @@ async function copyForOutlook() {
|
||||
let ok = false;
|
||||
try {
|
||||
ok = document.execCommand("copy");
|
||||
} catch (err) {
|
||||
console.warn("execCommand HTML copy failed.", err);
|
||||
ok = false;
|
||||
} finally {
|
||||
selection.removeAllRanges();
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
|
||||
setCopyStatus(
|
||||
ok ? "Newsletter mit Hyperlinks kopiert. In Outlook mit Strg+V einfügen." : "Kopieren fehlgeschlagen.",
|
||||
!ok
|
||||
);
|
||||
if (!ok) {
|
||||
ok = copyTextWithFallback(wrapCfHtml(html));
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
|
||||
async function copyHtmlSource() {
|
||||
const htmlSource = document.getElementById("newsletter-html-source");
|
||||
if (!htmlSource || !htmlSource.value.trim()) {
|
||||
async function copyText(text) {
|
||||
if (!text) return false;
|
||||
|
||||
if (copyTextWithFallback(text)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.warn("Clipboard API text copy failed.", err);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
async function copyForOutlook() {
|
||||
const html = getNewsletterOutlookHtml();
|
||||
const plain = getNewsletterPlain();
|
||||
if (!html) {
|
||||
setCopyStatus("Bitte zuerst einen Newsletter generieren.", true);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(htmlSource.value);
|
||||
setCopyStatus("HTML-Quelltext kopiert.");
|
||||
} catch (err) {
|
||||
setCopyStatus("Kopieren fehlgeschlagen.", true);
|
||||
|
||||
if (copyHtmlWithFallback(html)) {
|
||||
setCopyStatus("Newsletter für Outlook kopiert. Mit Strg+V einfügen (ggf. „Format beibehalten“).");
|
||||
return;
|
||||
}
|
||||
|
||||
const cfHtml = wrapCfHtml(html);
|
||||
if (navigator.clipboard && window.ClipboardItem && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
"text/html": new Blob([cfHtml], { type: "text/html" }),
|
||||
"text/plain": new Blob([plain], { type: "text/plain" }),
|
||||
}),
|
||||
]);
|
||||
setCopyStatus("Newsletter für Outlook kopiert. Mit Strg+V einfügen (ggf. „Format beibehalten“).");
|
||||
return;
|
||||
} catch (err) {
|
||||
console.warn("Clipboard API HTML copy failed.", err);
|
||||
}
|
||||
}
|
||||
|
||||
setCopyStatus("Kopieren fehlgeschlagen. Bitte „HTML herunterladen“ verwenden.", true);
|
||||
}
|
||||
|
||||
async function copyHtmlSource() {
|
||||
const html = getNewsletterHtml();
|
||||
if (!html) {
|
||||
setCopyStatus("Bitte zuerst einen Newsletter generieren.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const displayArea = document.getElementById("newsletter-html-display");
|
||||
const sourceArea = document.getElementById("newsletter-html-source");
|
||||
const textarea = displayArea?.value ? displayArea : sourceArea;
|
||||
|
||||
if (textarea && copyFromTextarea(textarea)) {
|
||||
setCopyStatus("HTML-Quelltext kopiert.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (copyTextWithFallback(html)) {
|
||||
setCopyStatus("HTML-Quelltext kopiert.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(html);
|
||||
setCopyStatus("HTML-Quelltext kopiert.");
|
||||
return;
|
||||
} catch (err) {
|
||||
console.warn("Clipboard API HTML source copy failed.", err);
|
||||
}
|
||||
}
|
||||
|
||||
if (textarea) {
|
||||
textarea.focus({ preventScroll: true });
|
||||
textarea.select();
|
||||
}
|
||||
setCopyStatus(
|
||||
"Automatisches Kopieren nicht möglich. HTML-Feld unten ist markiert – bitte Strg+C drücken.",
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
function downloadHtml() {
|
||||
const html = getNewsletterOutlookHtml();
|
||||
if (!html) {
|
||||
setCopyStatus("Bitte zuerst einen Newsletter generieren.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const stamp = new Date().toISOString().slice(0, 10);
|
||||
const filename = `wiki-newsletter-${stamp}.html`;
|
||||
const blob = new Blob([html], { type: "text/html;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
setCopyStatus(`HTML gespeichert als ${filename}. Datei in Outlook öffnen oder Inhalt kopieren.`);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const outlookSource = document.getElementById("newsletter-outlook-source");
|
||||
const htmlSource = document.getElementById("newsletter-html-source");
|
||||
const frame = document.getElementById("newsletter-preview-frame");
|
||||
if (htmlSource && frame && htmlSource.value.trim()) {
|
||||
frame.srcdoc = htmlSource.value;
|
||||
const previewHtml = outlookSource?.value.trim() || htmlSource?.value.trim() || "";
|
||||
if (frame && previewHtml) {
|
||||
frame.srcdoc = previewHtml;
|
||||
}
|
||||
|
||||
document.getElementById("copy-outlook-btn")?.addEventListener("click", copyForOutlook);
|
||||
document.getElementById("copy-html-source-btn")?.addEventListener("click", copyHtmlSource);
|
||||
document.getElementById("download-html-btn")?.addEventListener("click", downloadHtml);
|
||||
});
|
||||
|
||||
@@ -98,14 +98,16 @@
|
||||
|
||||
<section class="card">
|
||||
<h3>Newsletter-Vorschau (mit Hyperlinks)</h3>
|
||||
<p class="hint">Für Outlook den Button „Für Outlook kopieren“ nutzen – dann bleiben Links als klickbare Hyperlinks erhalten.</p>
|
||||
<p class="hint">Für Outlook „Für Outlook kopieren“ nutzen und mit <strong>Strg+V</strong> einfügen (Rechtsklick → „Format beibehalten“). Falls Kopieren nicht klappt (z. B. per HTTP/IP), „HTML herunterladen“ verwenden und die Datei in Outlook öffnen.</p>
|
||||
<div class="copy-actions">
|
||||
<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>
|
||||
|
||||
@@ -117,7 +119,8 @@
|
||||
|
||||
<section class="card">
|
||||
<h3>Output: HTML-Quelltext</h3>
|
||||
<textarea rows="12" readonly>{{ raw_html }}</textarea>
|
||||
<p class="hint">Bei Problemen mit „Kopieren“: Textfeld markieren (Strg+A) und manuell kopieren (Strg+C).</p>
|
||||
<textarea id="newsletter-html-display" rows="12" readonly>{{ raw_html }}</textarea>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
|
||||
Reference in New Issue
Block a user