From 7a3bc2887ead497360ad6cc994222ac495107c35 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 06:36:46 +0000 Subject: [PATCH] =?UTF-8?q?Planboard:=20Jahr=20im=20Zeitraum,=20Tagesk?= =?UTF-8?q?=C3=B6pfe=20einheitlich=20zweizeilig,=20Keine=20Termine=20lesba?= =?UTF-8?q?rer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - planboardSubtitle: das Ende des Zeitraums trägt das Jahr, der Anfang nur bei abweichendem Jahr; count ohne Wert zählt als 0 - dayLabels.full (aria-label der Spalte) mit Jahr - ab 861 px steht der Wochentag in jedem Tageskopf über dem Datum (gleich hohe Köpfe, alle Termine beginnen auf einer Höhe) - "Keine Termine" überall in --text-2, die Sonderregeln für Wochenende und Handy entfallen Co-Authored-By: Claude Sonnet 5.5 --- src/lib/planboardView.js | 14 +++++++++----- src/styles/global.css | 8 +++++--- tests/unit/planboardView.test.mjs | 16 ++++++++-------- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/lib/planboardView.js b/src/lib/planboardView.js index d8dbb60..040055f 100644 --- a/src/lib/planboardView.js +++ b/src/lib/planboardView.js @@ -5,10 +5,14 @@ import { de } from 'date-fns/locale' const NOBODY = 'niemand zugewiesen' -// "Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 13 Termine" -export function planboardSubtitle({ weekStart, count, loading = false }) { - const from = format(weekStart, 'd. MMMM', { locale: de }) - const to = format(addDays(weekStart, 6), 'd. MMMM', { locale: de }) +// "Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 13 Termine" +// weekStart muss ein Montag sein (die Woche läuft bis weekStart + 6 Tage). Das Ende trägt immer das Jahr, der Anfang nur, +// wenn sein Jahr vom Ende abweicht: "28. Dezember 2026 bis 3. Januar 2027". +export function planboardSubtitle({ weekStart, count = 0, loading = false }) { + const weekEnd = addDays(weekStart, 6) + const sameYear = weekStart.getFullYear() === weekEnd.getFullYear() + const from = format(weekStart, sameYear ? 'd. MMMM' : 'd. MMMM yyyy', { locale: de }) + const to = format(weekEnd, 'd. MMMM yyyy', { locale: de }) const rest = loading ? 'Wird geladen …' : `${count} ${count === 1 ? 'Termin' : 'Termine'}` return `Kalenderwoche ${getISOWeek(weekStart)} · ${from} bis ${to} · ${rest}` } @@ -17,7 +21,7 @@ export function dayLabels(day) { return { weekday: format(day, 'EEEE', { locale: de }), number: format(day, 'dd.MM'), - full: format(day, 'EEEE, d. MMMM', { locale: de }), + full: format(day, 'EEEE, d. MMMM yyyy', { locale: de }), } } diff --git a/src/styles/global.css b/src/styles/global.css index 806dc08..da9916d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1030,14 +1030,16 @@ button.link { font-weight: 500; } /* font: inherit setzt sonst das Gewicht von . .appt:focus-visible { outline-offset: -2px; } /* im Scroll-Container .week wuerde der Ring sonst abgeschnitten */ .day.weekend .appt:not(.akquise) { background: var(--bg); } .day.weekend .appt:not(.akquise):hover { background: var(--appt-hover); } -.day .none { font-size: 12px; color: var(--text-3); padding-left: 4px; } -.day.weekend .none { color: var(--text-2); } +.day .none { font-size: 12px; color: var(--text-2); padding-left: 4px; } +/* Ab 861 px stehen die Spalten nebeneinander: Wochentag ueber der Datumszahl, in jeder Spalte gleich hoch, alle Termine beginnen auf einer Hoehe */ +@media (min-width: 861px) { + .day-head { flex-direction: column; align-items: flex-start; gap: 0; } +} @media (max-width: 860px) { .week { grid-template-columns: 1fr; border-top: 0; min-height: 0; overflow-x: visible; } .day { border-left: 0; padding: 12px 0; border-top: 1px solid var(--line); } .day.weekend { background: none; } .day.weekend .appt:not(.akquise) { background: var(--bg-hover); } - .day.weekend .none { color: var(--text-3); } } /* ===== ENDE Planboard (P3) ===== */ diff --git a/tests/unit/planboardView.test.mjs b/tests/unit/planboardView.test.mjs index 01f81f1..589383d 100644 --- a/tests/unit/planboardView.test.mjs +++ b/tests/unit/planboardView.test.mjs @@ -7,17 +7,17 @@ const { planboardSubtitle, dayLabels, appointmentClass, appointmentTimeLabel, ap test('planboardSubtitle: Kalenderwoche, Zeitraum, Terminzahl', () => { const mo = new Date(2026, 9, 5) - assert.equal(planboardSubtitle({ weekStart: mo, count: 13 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 13 Termine') - assert.equal(planboardSubtitle({ weekStart: mo, count: 1 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 1 Termin') - assert.equal(planboardSubtitle({ weekStart: mo, count: 0 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 0 Termine') - assert.equal(planboardSubtitle({ weekStart: mo, count: 0, loading: true }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · Wird geladen …') - assert.equal(planboardSubtitle({ weekStart: new Date(2026, 11, 28), count: 2 }), 'Kalenderwoche 53 · 28. Dezember bis 3. Januar · 2 Termine') - assert.equal(planboardSubtitle({ weekStart: new Date(2027, 0, 4), count: 2 }), 'Kalenderwoche 1 · 4. Januar bis 10. Januar · 2 Termine') + assert.equal(planboardSubtitle({ weekStart: mo, count: 13 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 13 Termine') + assert.equal(planboardSubtitle({ weekStart: mo, count: 1 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 1 Termin') + assert.equal(planboardSubtitle({ weekStart: mo, count: 0 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 0 Termine') + assert.equal(planboardSubtitle({ weekStart: mo, count: 0, loading: true }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · Wird geladen …') + assert.equal(planboardSubtitle({ weekStart: new Date(2026, 11, 28), count: 2 }), 'Kalenderwoche 53 · 28. Dezember 2026 bis 3. Januar 2027 · 2 Termine') + assert.equal(planboardSubtitle({ weekStart: new Date(2027, 0, 4), count: 2 }), 'Kalenderwoche 1 · 4. Januar bis 10. Januar 2027 · 2 Termine') }) test('dayLabels: Wochentag, Datum, volles Datum', () => { - assert.deepEqual(dayLabels(new Date(2026, 9, 5)), { weekday: 'Montag', number: '05.10', full: 'Montag, 5. Oktober' }) - assert.deepEqual(dayLabels(new Date(2026, 9, 11)), { weekday: 'Sonntag', number: '11.10', full: 'Sonntag, 11. Oktober' }) + assert.deepEqual(dayLabels(new Date(2026, 9, 5)), { weekday: 'Montag', number: '05.10', full: 'Montag, 5. Oktober 2026' }) + assert.deepEqual(dayLabels(new Date(2026, 9, 11)), { weekday: 'Sonntag', number: '11.10', full: 'Sonntag, 11. Oktober 2026' }) }) test('appointmentClass und appointmentTimeLabel', () => {