lazyflat/web/templates/_settings_notifications.html
EiSiMo b759cbb505 feat(settings): hide push-channel fields when "Nur Dashboard" is picked
Channel-dependent fields (Telegram bot token, chat id, event checkboxes,
"Test senden" button) now hide when the user switches the Kanal select
to "Nur Dashboard". Implemented as data-channel-only="telegram" markers
that a tiny syncChannelOnlyFields() in app.js toggles via inline
display:none. Initial state is set in Jinja so there's no flash on
load.

Hidden inputs stay in the form, so the values survive the round-trip:
switch to Dashboard → save → switch back to Telegram and the bot
token / chat id are still there.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 13:50:15 +02:00

69 lines
3.7 KiB
HTML

<h2 class="font-semibold mb-2">Benachrichtigungen</h2>
<p class="text-sm text-slate-600 mb-4">
Wähle einen Kanal und entscheide, welche Events dich erreichen sollen.
</p>
{% if notif_flash %}
<div class="chip mb-4
{% if notif_flash == 'test_ok' %}chip-ok
{% else %}chip-bad
{% endif %}">
{% if notif_flash == 'test_ok' %}Testnachricht gesendet.
{% elif notif_flash == 'test_missing' %}Bot-Token und Chat-ID eintragen, um zu testen.
{% elif notif_flash == 'test_fail' %}Test fehlgeschlagen{% if notif_flash_detail %}: {{ notif_flash_detail }}{% endif %}.
{% endif %}
</div>
{% endif %}
<form method="post" action="/actions/notifications" class="space-y-4 max-w-xl"
autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore data-form-type="other">
<input type="hidden" name="csrf" value="{{ csrf }}">
{# Channel-dependent fields are wrapped in data-channel-only="telegram" so a
small JS handler in app.js can hide them when "Nur Dashboard" is picked.
Inputs stay in the form (display:none doesn't strip them), so values are
preserved when you switch back to Telegram. #}
{% set hide_telegram = notifications.channel != 'telegram' %}
<div>
<label class="block text-xs uppercase text-slate-500 mb-1">Kanal</label>
<select class="input" name="channel">
<option value="ui" {% if notifications.channel == 'ui' %}selected{% endif %}>Nur im Dashboard (kein Push)</option>
<option value="telegram" {% if notifications.channel == 'telegram' %}selected{% endif %}>Telegram</option>
</select>
</div>
<div data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
<label class="block text-xs uppercase text-slate-500 mb-1">Telegram Bot-Token</label>
<input class="input" name="telegram_bot_token" value="{{ notifications.telegram_bot_token }}"
placeholder="123456:ABC..." autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore>
<p class="text-xs text-slate-500 mt-1">Bot bei @BotFather anlegen, Token hier eintragen.</p>
</div>
<div data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
<label class="block text-xs uppercase text-slate-500 mb-1">Telegram Chat-ID</label>
<input class="input" name="telegram_chat_id" value="{{ notifications.telegram_chat_id }}"
placeholder="987654321" autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore>
</div>
<div class="border-t border-soft pt-4 space-y-2"
data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>
<label class="flex items-center gap-2">
<input type="checkbox" name="notify_on_match" {% if notifications.notify_on_match %}checked{% endif %}>
<span>Bei passender Wohnung</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" name="notify_on_apply_success" {% if notifications.notify_on_apply_success %}checked{% endif %}>
<span>Bei erfolgreicher Bewerbung</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" name="notify_on_apply_fail" {% if notifications.notify_on_apply_fail %}checked{% endif %}>
<span>Bei fehlgeschlagener Bewerbung</span>
</label>
</div>
<div class="flex gap-2">
<button class="btn btn-primary" type="submit">Speichern</button>
<button class="btn btn-ghost" type="submit"
formaction="/actions/notifications/test" formnovalidate
data-channel-only="telegram"{% if hide_telegram %} style="display:none"{% endif %}>Test senden</button>
</div>
</form>