[FEATURE] web/dashboard - Dashboard gemäß neuem Corporate Design überarbeiten #23

New Issue

2026-08-31T18:55:32+02:00

samuelbias commented

2026-08-31 18:55:32 +02:00

web/dashboard - Dashboard gemäß neuem Corporate Design überarbeiten

User Story

Als Gemeindemitglied vor dem Dashboard
möchte ich die für den aktuellen Tag relevanten Informationen wie Termine, Aushänge, Ansagen, Temperaturen und das aktuelle Bibelwort in einer ruhigen, gut lesbaren und dem neuen Corporate Design entsprechenden Darstellung sehen,
damit ich die wichtigsten Informationen auch aus größerer Entfernung schnell erfassen kann, ohne dass Inhalte durch zu kleine Darstellung, Überfrachtung oder technische Ausfälle einzelner Datenquellen unlesbar werden.

Zielbeschreibung

Das bestehende Dashboard soll vollständig neu aufgebaut und gestaltet werden.

Grund für den Rework ist das neue [Corporate Design Manual NAK 2026](Corporate Design Manual NAK 2026.pdf). Die darauf aufbauende design-guidelines.md ist bei der Umsetzung verbindlich zu berücksichtigen. Vorhandene Dashboard-Strukturen und Styles müssen nicht beibehalten werden. Vorhandene Datenquellen und Schnittstellen sollen dagegen nach Möglichkeit weiterverwendet werden.

Ziel ist ein ruhiges, übersichtliches und insbesondere aus der vorgesehenen Betrachtungsentfernung gut lesbares Dashboard im aktuellen Corporate Design.

Darzustellende Inhalte

Das neue Dashboard muss folgende Informationen darstellen:

Aktuelles Datum und aktuelle Uhrzeit

Zeitzone Europe/Berlin
Uhrzeit aktualisiert sich automatisch ohne vollständigen Reload der Seite.

Monats-Terminübersicht

Darstellung der vorhandenen zweitseitigen Monatsübersicht.
Beide PNG-Seiten terminuebersicht-1.png und terminuebersicht-2.png müssen berücksichtigt werden.
Das Seitenverhältnis der PNGs darf nicht verändert werden. Es sollte nach Höhe oder Breite skaliert werden.

Aktuelle Aushänge

Verwendung der über das Contentpanel bereitgestellten PNG-Dateien.
Mehrseitige Aushänge müssen vollständig berücksichtigt werden.
Abgelaufene Aushänge dürfen nicht mehr dargestellt werden. (Löschlogik siehe contentpanel Projekt)
Bei mehreren Aushängen ist eine lesbare Rotation/Paginierung einer starken Verkleinerung vorzuziehen.

Heutige Ansagen

Es sollen ausschließlich Ansagen dargestellt werden, die am aktuellen Tag gültig sind.
Eine Ansage gilt heute, wenn:
ihr Startdatum heute ist, oder
heute innerhalb des angegebenen Start-/Endzeitraums liegt.
Ansonsten morgen oder Tageskürzel und Datum angeben.
Titel, Untertitel sowie vorhandene Zeit-/Ortsinformationen sollen berücksichtigt werden.
Vorhandene Daten aus bestehendem Projekt (contentpanel, DB) ableiten

Innen- und Außentemperatur

Für die Innentemperatur kann die bereits vorhandene Home-Assistant-Schnittstelle weiterverwendet werden.
Für die Außentemperatur kann die bereits vorhandene OpenWeather-Schnittstelle weiterverwendet werden.
Ein Austausch der bestehenden Temperatur-Datenquellen ist nicht Bestandteil dieses Reworks.
Fehler oder temporär nicht verfügbare APIs dürfen das restliche Dashboard nicht beeinträchtigen.

Aktuelles Bibelwort mit Bibelstelle

Bibelstelle und Bibelwort/Bibelvers sind aus dem für den aktuellen Tag vorhandenen Gottesdienst-Datensatz zu beziehen.
Datenquelle ist die DB (eingespeist durch bestehenden Leitgedanken-Import im Contentpanel).
Es soll hierfür keine zusätzliche externe Bibel-API eingeführt werden.
Die bestehende Zuordnung der importierten Daten (bibelwort / bibelvers) ist zu berücksichtigen.

Nicht mehr benötigte Bestandteile des bisherigen Dashboards, die oben nicht genannt sind, müssen beim Rework nicht übernommen werden.

Corporate Design

Die Umsetzung muss dem neuen [Corporate Design Manual](Corporate Design Manual NAK 2026.pdf) und der darauf basierenden design-guidelines.md entsprechen.

vorhandene zentrale Design-Tokens (aus den _central Stylesheets, nicht des alten dashboard Stylesheets) nach Möglichkeit wiederverwenden,
Suisse Int'l als Hausschrift verwenden,
keine separate Google-Font für das Dashboard laden,
NAK-Farbpalette verwenden,
eckige Formsprache verwenden,
keine dekorativen border-radius außerhalb der im Corporate Design vorgesehenen Ausnahmen,
konsistente Abstände und Typografie verwenden,
ausreichenden Kontrast gewährleisten,
Animationen und Übergänge eher zurückhaltend einsetzen,
das Layout für die vorgesehene Dashboard-Auflösung optimieren und ohne abgeschnittene Inhalte darstellen.

Dashboard-spezifische Styles dürfen ergänzt werden, sollen aber auf den zentralen Corporate-Design-Tokens aufbauen.

Nicht-funktionale Anforderungen

Die Anforderungen an die Lesbarkeit von Aushängen und Ansagen sollen zentral parametrisierbar umgesetzt werden. Für nicht vorhandene bzw. temporär nicht verfügbare Daten müssen definierte Leerzustände vorhanden sein. Zu parametrisierende Werte wären beispielsweise:

Parameter = Default-Wert (Beschreibung)

DASHBOARD_REFERENCE_VIEWPORT = 1920x1080 (Referenzauflösung für die Abnahme der Lesbarkeit)
POSTER_MIN_RENDER_HEIGHT_VH = 60 (Eine dargestellte Aushangseite soll mindestens 60 % der Viewport-Höhe nutzen können. Wenn dies bei mehreren Aushängen nicht möglich ist, sind diese zu rotieren statt weiter zu verkleinern.)
POSTER_MIN_DWELL_TIME_S = 12 (Eine Aushangseite muss mindestens 12 s unbewegt vollständig sichtbar sein, bevor zur nächsten Seite gewechselt wird.)
POSTER_MAX_TRANSITION_MS = 400 (Wechsel zwischen Aushängen dürfen höchstens 400 ms dauern.)
ANNOUNCEMENT_MIN_FONT_SIZE_PX = 28 (Haupttext einer Ansage darf bei der Referenzauflösung nicht kleiner dargestellt werden.)
ANNOUNCEMENT_META_MIN_FONT_SIZE_PX = 22 (Datum, Zeit, Ort und sonstige Metainformationen dürfen nicht kleiner dargestellt werden.)
ANNOUNCEMENT_LINE_HEIGHT = 1.35 (Mindest-Zeilenhöhe für mehrzeilige Ansagen.)
ANNOUNCEMENT_MAX_LINE_LENGTH_CH = 55 (Textspalten sollen eine maximale Zeilenlänge von ungefähr 55 Zeichen nicht überschreiten.)
ANNOUNCEMENT_READ_SPEED_CPS = 12 (Berechnungswert für die notwendige Mindestanzeigezeit einer Ansage in Zeichen pro Sekunde.)
ANNOUNCEMENT_MIN_DWELL_TIME_S = 8 (Eine einzelne Ansage muss unabhängig von ihrer Länge mindestens 8 s lesbar sein.)
ANNOUNCEMENT_MAX_SCROLL_SPEED_PX_S = 5 (Falls Scrollen notwendig ist, darf die Bewegung diesen Wert nicht überschreiten.)
CONTENT_MIN_CONTRAST_RATIO = 4.5 (Mindestkontrast für textliche Inhalte.)

Akzeptanzkriterien

Das bisherige Dashboard wurde strukturell und visuell neu aufgebaut.
Die Umsetzung entspricht dem neuen [Corporate Design Manual](Corporate Design Manual NAK 2026.pdf) und der design-guidelines.md.
Suisse Int'l und die zentralen Corporate-Design-Tokens werden verwendet.
Datum und Uhrzeit werden aktuell angezeigt.
Beide Seiten der Monats-Terminübersicht werden dargestellt.
Aktuelle Aushänge aus dem Contentpanel werden inklusive aller PNG-Seiten berücksichtigt.
Abgelaufene Aushänge werden nicht angezeigt.
Unter „Heutige Ansagen“ werden ausschließlich heute gültige Ansagen angezeigt.
Innen- und Außentemperatur werden über die vorhandenen Schnittstellen geladen.
Bibelstelle und Bibelwort werden aus den über den Leitgedanken-Import bereitgestellten Daten geladen.
Die definierten Lesbarkeitsparameter sind zentral konfigurierbar.
Bei zu vielen Aushängen/Ansagen wird rotiert bzw. paginiert, statt Inhalte unter die definierten Mindestgrößen zu verkleinern.
Aushänge werden ohne Verzerrung oder Informationsverlust dargestellt.
Ausfälle einzelner Datenquellen beeinträchtigen die restliche Anzeige nicht.
Das Dashboard wurde auf der definierten Referenzauflösung hinsichtlich Lesbarkeit geprüft.

Nicht Bestandteil

Rework des Contentpanels
Austausch der bestehenden Temperatur-Schnittstellen
Einführung einer externen Bibel-API
Änderung des Leitgedanken-Imports, sofern für die Dashboard-Anbindung nicht technisch erforderlich

# web/dashboard - Dashboard gemäß neuem Corporate Design überarbeiten ### User Story **Als Gemeindemitglied** vor dem Dashboard **möchte ich** die für den aktuellen Tag relevanten Informationen wie Termine, Aushänge, Ansagen, Temperaturen und das aktuelle Bibelwort in einer ruhigen, gut lesbaren und dem neuen Corporate Design entsprechenden Darstellung sehen, **damit** ich die wichtigsten Informationen auch aus größerer Entfernung schnell erfassen kann, ohne dass Inhalte durch zu kleine Darstellung, Überfrachtung oder technische Ausfälle einzelner Datenquellen unlesbar werden. --- ### Zielbeschreibung Das bestehende Dashboard soll vollständig neu aufgebaut und gestaltet werden. Grund für den Rework ist das neue [Corporate Design Manual NAK 2026]([Corporate Design Manual NAK 2026.pdf](/attachments/03b513e0-b30d-4f4f-9c51-013d9aa62aa6)). Die darauf aufbauende [design-guidelines.md](https://git.pelpino.de/NAK-Reinickendorf/intranet/src/branch/main/web/intranet_repo/design-guidelines.md) ist bei der Umsetzung verbindlich zu berücksichtigen. Vorhandene Dashboard-Strukturen und Styles müssen nicht beibehalten werden. Vorhandene Datenquellen und Schnittstellen sollen dagegen nach Möglichkeit weiterverwendet werden. Ziel ist ein ruhiges, übersichtliches und insbesondere aus der vorgesehenen Betrachtungsentfernung gut lesbares Dashboard im aktuellen Corporate Design. --- ### Darzustellende Inhalte Das neue Dashboard muss folgende Informationen darstellen: **Aktuelles Datum und aktuelle Uhrzeit** - Zeitzone Europe/Berlin - Uhrzeit aktualisiert sich automatisch ohne vollständigen Reload der Seite. **Monats-Terminübersicht** - Darstellung der vorhandenen zweitseitigen Monatsübersicht. - Beide PNG-Seiten terminuebersicht-1.png und terminuebersicht-2.png müssen berücksichtigt werden. - Das Seitenverhältnis der PNGs darf nicht verändert werden. Es sollte nach Höhe oder Breite skaliert werden. **Aktuelle Aushänge** - Verwendung der über das Contentpanel bereitgestellten PNG-Dateien. - Mehrseitige Aushänge müssen vollständig berücksichtigt werden. - Abgelaufene Aushänge dürfen nicht mehr dargestellt werden. (Löschlogik siehe contentpanel Projekt) - Bei mehreren Aushängen ist eine lesbare Rotation/Paginierung einer starken Verkleinerung vorzuziehen. **Heutige Ansagen** - Es sollen ausschließlich Ansagen dargestellt werden, die am aktuellen Tag gültig sind. Eine Ansage gilt heute, wenn: - ihr Startdatum heute ist, oder - heute innerhalb des angegebenen Start-/Endzeitraums liegt. Ansonsten morgen oder Tageskürzel und Datum angeben. - Titel, Untertitel sowie vorhandene Zeit-/Ortsinformationen sollen berücksichtigt werden. - Vorhandene Daten aus bestehendem Projekt (contentpanel, DB) ableiten **Innen- und Außentemperatur** - Für die Innentemperatur kann die bereits vorhandene Home-Assistant-Schnittstelle weiterverwendet werden. - Für die Außentemperatur kann die bereits vorhandene OpenWeather-Schnittstelle weiterverwendet werden. - Ein Austausch der bestehenden Temperatur-Datenquellen ist nicht Bestandteil dieses Reworks. - Fehler oder temporär nicht verfügbare APIs dürfen das restliche Dashboard nicht beeinträchtigen. **Aktuelles Bibelwort mit Bibelstelle** - Bibelstelle und Bibelwort/Bibelvers sind aus dem für den aktuellen Tag vorhandenen Gottesdienst-Datensatz zu beziehen. - Datenquelle ist die DB (eingespeist durch bestehenden Leitgedanken-Import im Contentpanel). - Es soll hierfür keine zusätzliche externe Bibel-API eingeführt werden. - Die bestehende Zuordnung der importierten Daten (bibelwort / bibelvers) ist zu berücksichtigen. Nicht mehr benötigte Bestandteile des bisherigen Dashboards, die oben nicht genannt sind, müssen beim Rework nicht übernommen werden. --- ### Corporate Design Die Umsetzung muss dem neuen [Corporate Design Manual]([Corporate Design Manual NAK 2026.pdf](/attachments/03b513e0-b30d-4f4f-9c51-013d9aa62aa6)) und der darauf basierenden design-guidelines.md entsprechen. - vorhandene zentrale Design-Tokens (aus den _central Stylesheets, nicht des alten dashboard Stylesheets) nach Möglichkeit wiederverwenden, - Suisse Int'l als Hausschrift verwenden, - keine separate Google-Font für das Dashboard laden, - NAK-Farbpalette verwenden, - eckige Formsprache verwenden, - keine dekorativen border-radius außerhalb der im Corporate Design vorgesehenen Ausnahmen, - konsistente Abstände und Typografie verwenden, - ausreichenden Kontrast gewährleisten, - Animationen und Übergänge eher zurückhaltend einsetzen, - das Layout für die vorgesehene Dashboard-Auflösung optimieren und ohne abgeschnittene Inhalte darstellen. Dashboard-spezifische Styles dürfen ergänzt werden, sollen aber auf den zentralen Corporate-Design-Tokens aufbauen. --- ### Nicht-funktionale Anforderungen Die Anforderungen an die Lesbarkeit von Aushängen und Ansagen sollen zentral parametrisierbar umgesetzt werden. Für nicht vorhandene bzw. temporär nicht verfügbare Daten müssen definierte Leerzustände vorhanden sein. Zu parametrisierende Werte wären beispielsweise: **Parameter** = Default-Wert (Beschreibung) - `DASHBOARD_REFERENCE_VIEWPORT` = 1920x1080 (Referenzauflösung für die Abnahme der Lesbarkeit) - `POSTER_MIN_RENDER_HEIGHT_VH` = 60 (Eine dargestellte Aushangseite soll mindestens 60 % der Viewport-Höhe nutzen können. Wenn dies bei mehreren Aushängen nicht möglich ist, sind diese zu rotieren statt weiter zu verkleinern.) - `POSTER_MIN_DWELL_TIME_S` = 12 (Eine Aushangseite muss mindestens 12 s unbewegt vollständig sichtbar sein, bevor zur nächsten Seite gewechselt wird.) - `POSTER_MAX_TRANSITION_MS` = 400 (Wechsel zwischen Aushängen dürfen höchstens 400 ms dauern.) - `ANNOUNCEMENT_MIN_FONT_SIZE_PX` = 28 (Haupttext einer Ansage darf bei der Referenzauflösung nicht kleiner dargestellt werden.) - `ANNOUNCEMENT_META_MIN_FONT_SIZE_PX` = 22 (Datum, Zeit, Ort und sonstige Metainformationen dürfen nicht kleiner dargestellt werden.) - `ANNOUNCEMENT_LINE_HEIGHT` = 1.35 (Mindest-Zeilenhöhe für mehrzeilige Ansagen.) - `ANNOUNCEMENT_MAX_LINE_LENGTH_CH` = 55 (Textspalten sollen eine maximale Zeilenlänge von ungefähr 55 Zeichen nicht überschreiten.) - `ANNOUNCEMENT_READ_SPEED_CPS` = 12 (Berechnungswert für die notwendige Mindestanzeigezeit einer Ansage in Zeichen pro Sekunde.) - `ANNOUNCEMENT_MIN_DWELL_TIME_S` = 8 (Eine einzelne Ansage muss unabhängig von ihrer Länge mindestens 8 s lesbar sein.) - `ANNOUNCEMENT_MAX_SCROLL_SPEED_PX_S` = 5 (Falls Scrollen notwendig ist, darf die Bewegung diesen Wert nicht überschreiten.) - `CONTENT_MIN_CONTRAST_RATIO` = 4.5 (Mindestkontrast für textliche Inhalte.) --- ### Akzeptanzkriterien - [x] Das bisherige Dashboard wurde strukturell und visuell neu aufgebaut. - [x] Die Umsetzung entspricht dem neuen [Corporate Design Manual]([Corporate Design Manual NAK 2026.pdf](/attachments/03b513e0-b30d-4f4f-9c51-013d9aa62aa6)) und der design-guidelines.md. - [x] Suisse Int'l und die zentralen Corporate-Design-Tokens werden verwendet. - [x] Datum und Uhrzeit werden aktuell angezeigt. - [x] Beide Seiten der Monats-Terminübersicht werden dargestellt. - [x] Aktuelle Aushänge aus dem Contentpanel werden inklusive aller PNG-Seiten berücksichtigt. - [x] Abgelaufene Aushänge werden nicht angezeigt. - [x] Unter „Heutige Ansagen“ werden ausschließlich heute gültige Ansagen angezeigt. - [x] Innen- und Außentemperatur werden über die vorhandenen Schnittstellen geladen. - [x] Bibelstelle und Bibelwort werden aus den über den Leitgedanken-Import bereitgestellten Daten geladen. - [x] Die definierten Lesbarkeitsparameter sind zentral konfigurierbar. - [x] Bei zu vielen Aushängen/Ansagen wird rotiert bzw. paginiert, statt Inhalte unter die definierten Mindestgrößen zu verkleinern. - [x] Aushänge werden ohne Verzerrung oder Informationsverlust dargestellt. - [x] Ausfälle einzelner Datenquellen beeinträchtigen die restliche Anzeige nicht. - [x] Das Dashboard wurde auf der definierten Referenzauflösung hinsichtlich Lesbarkeit geprüft. **Nicht Bestandteil** - Rework des Contentpanels - Austausch der bestehenden Temperatur-Schnittstellen - Einführung einer externen Bibel-API - Änderung des Leitgedanken-Imports, sofern für die Dashboard-Anbindung nicht technisch erforderlich

Corporate Design Manual NAK 2026.pdf

6.4 MiB

samuelbias added this to the Intranet NAK-Reinickendorf project 2026-08-31 18:55:32 +02:00

samuelbias added the Feature label 2026-08-31 18:55:41 +02:00

samuelbias changed title from ~~[FEATURE] web/dashboard - rework dashboard according to new corporate design~~ to [FEATURE] web/dashboard - Dashboard gemäß neuem Corporate Design überarbeiten

2026-08-31 18:56:27 +02:00

samuelbias moved this to In Review in Intranet NAK-Reinickendorf on 2026-09-04 19:17:44 +02:00

samuelbias commented

2026-09-06 05:59:31 +02:00

Done.

samuelbias closed this issue

2026-09-06 05:59:31 +02:00

samuelbias moved this to Done in Intranet NAK-Reinickendorf on 2026-09-06 05:59:58 +02:00

samuelbias self-assigned this 2026-09-06 06:00:12 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: NAK-Reinickendorf/intranet#23