Files
new-landing-page-homenas/README_Countdown.md
T
2026-07-27 09:38:38 +02:00

4.8 KiB

Header-Countdown (Pensionsantritt)

Zeigt im Header der Landingpage zwei Live-Werte bis zu einem Zieldatum:

  • verbleibende Kalendertage
  • verbleibende Arbeitstage (Mo-Fr, ohne die im Burgenland geltenden Feiertage)

Beschriftung: "X Tage bis zum Pensionsantritt" / "Y Arbeitstage bis zum Pensionsantritt". Kein Backend noetig - die Feiertage kommen CORS-freundlich von der kostenlosen Nager.Date API. Das Feature folgt demselben Muster wie die bestehenden Komponenten pihole-control / tasmota-control.


Funktionsumfang

  • Kalendertage: volle Tage zwischen heute und Zieldatum.
  • Arbeitstage: Mo-Fr zwischen heute und Zieldatum, abzueglich der fuer das gewaehlte Bundesland geltenden Feiertage.
  • Live-Aktualisierung: einmal pro Minute neu berechnet (Tageswechsel).
  • Fehler-Fallback: bei nicht erreichbarer API werden Arbeitstage OHNE Feiertagsabzug gezaehlt (Badge zeigt "*" + Tooltip); waehrend des Ladens erscheint "Tage werden berechnet ...".
  • Caching: Feiertagsliste pro Jahr im localStorage mit Tagesgueltigkeit (Key nager_holidays_<Jahr>).
  • Zieldatum erreicht/ueberschritten: zeigt "Pensionsantritt () erreicht".

Dateien

src/app/countdown/countdown.component.ts    Logik: Berechnung, API, Cache, Filter
src/app/countdown/countdown.component.html   zwei Badges + Fallback-Zustaende
src/app/countdown/countdown.component.css     Badge-Styles (an Header anpassbar)

Integration

1. Komponente registrieren (app.module.ts)

import { CountdownComponent } from './countdown/countdown.component';

@NgModule({
  declarations: [
    // ... bestehende ...
    CountdownComponent
  ]
})
export class AppModule {}

2. Im Header einbinden (app.component.html)

<app-countdown></app-countdown>

Konfiguration (oben in countdown.component.ts)

Zieldatum

// 31.12.2026 -> new Date(2026, 11, 31)  (Monat 0-basiert: 11 = Dezember!)
const TARGET_DATE = new Date(2026, 11, 31);

Der Monat in JavaScript ist 0-basiert: Januar = 0, Maerz = 2, Dezember = 11. Das genaue Zieldatum erscheint zusaetzlich im Tooltip der Badges.

Beschriftung

const TARGET_LABEL_SUFFIX = 'bis zum Pensionsantritt';

Bundesland-Filter

const COUNTY: string | null = 'AT-1';  // Burgenland
// AT-2 Kaernten, AT-3 Niederoesterreich, AT-4 Oberoesterreich,
// AT-5 Salzburg, AT-6 Steiermark, AT-7 Tirol, AT-8 Vorarlberg, AT-9 Wien.
// null = nur bundesweite Feiertage abziehen.

Feiertagslogik

Nager.Date liefert je Feiertag global (bundesweit) und counties (regionale Gueltigkeit, z.B. ["AT-1"]). Abgezogen werden:

  • alle bundesweiten Feiertage (global: true), UND
  • regionale Feiertage, deren counties das gewaehlte Bundesland enthalten.

Bei Zeitraeumen ueber einen Jahreswechsel wird die API fuer jedes betroffene Jahr separat abgefragt und die Ergebnisse werden kombiniert.

Datenquelle: Nager.Date https://date.nager.at/api/v3/PublicHolidays/{Jahr}/AT (Doku: https://date.nager.at/de/api)


Verifizierte Berechnung (echte Feiertage, Burgenland-Filter)

Stand heute 27.07.2026 bis Pensionsantritt 31.12.2026:

Wert Ergebnis
Kalendertage 157
Arbeitstage (AT-1) 109

Abgezogene Feiertage (Mo-Fr):

Datum Wochentag Feiertag Grund
26.10.2026 Mo Nationalfeiertag bundesweit
11.11.2026 Mi Martinstag Landesfeiertag Burgenland (AT-1)
08.12.2026 Di Mariae Empfaengnis bundesweit
25.12.2026 Fr Weihnachten bundesweit

Nicht abgezogen: Rupertitag (24.09., nur Salzburg AT-5); Maria Himmelfahrt (15.08.) und Stefanitag (26.12.) fallen 2026 auf einen Samstag.

Hinweis: Nager.Date klassifiziert regionale Tage (inkl. Martinstag) intern als Typ School. Ob der Martinstag im konkreten Betrieb ein freier Arbeitstag ist, haengt von der jeweiligen Dienst-/Betriebsregelung ab. Bei Abweichung kann der Filter angepasst werden.


Fehlerbehandlung & Edge-Cases

Situation Verhalten
API nicht erreichbar Arbeitstage ohne Feiertagsabzug, Badge zeigt "*" + Tooltip
Ladephase "Tage werden berechnet ..."
Zieldatum in Vergangenheit/heute "Pensionsantritt () erreicht", beide Werte 0
Zeitraum ueber Jahreswechsel Feiertage aller betroffenen Jahre kombiniert
localStorage deaktiviert/voll Cache-Schreiben wird ignoriert, API wird direkt genutzt

Styling

Die Badges nutzen neutrale Styles (.countdown-badge) mit color: inherit, damit sie die Header-Textfarbe uebernehmen. Passe Farben bei Bedarf an die bestehenden Header-Variablen an, z.B.:

.countdown-badge { background: var(--header-accent, rgba(255,255,255,.12)); }

Das Arbeitstage-Badge (.countdown-badge--work) hat einen dezenten Gruenton

  • analog zum Pi-hole-"kein Blocking"-Gruen.