feat: Wochentag in der Liste — Version 1.17.0

Unter dem Datum steht der Wochentag des Beginns, in der Hauptliste
ausgeschrieben, in der Kompaktliste als Kürzel rechtsbündig neben dem Datum.

Damit die Kompaktliste dabei ihre bisherigen Spaltenbreiten behält, nehmen
BEOs und Objekte den freien Platz auf (w-1/2); die Datumsspalte bekommt eine
feste Breite, Art steht auf whitespace-nowrap, weil eine Prozentbreite alle
übrigen Spalten auf ihre Minimalbreite drückt und der Gruppenname dort sonst
Wort für Wort umbricht.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-15 16:28:46 +02:00
parent aed69a1d59
commit 17edb0e4f8
3 changed files with 37 additions and 8 deletions
+1 -1
View File
@@ -135,7 +135,7 @@ Die Werkzeugleiste oben in der Liste enthält in einer Zeile:
### Tabelleninhalt ### Tabelleninhalt
Die Tabelle zeigt pro Eintrag: Datum, Uhrzeit (BeginnEnde), Art der Führung, Besucher, beteiligte BEOs, beobachtete Objekte, Bemerkungen und Wetterdaten. Der Ersteller des Eintrags ist in der BEO-Spalte **fettgedruckt** und steht an erster Stelle. Wetterdaten werden nur angezeigt, wenn mindestens ein Wert ungleich null ist. Die Tabelle zeigt pro Eintrag: Datum, Uhrzeit (BeginnEnde), Art der Führung, Besucher, beteiligte BEOs, beobachtete Objekte, Bemerkungen und Wetterdaten. Unter dem Datum steht der **Wochentag** des Beginns. Der Ersteller des Eintrags ist in der BEO-Spalte **fettgedruckt** und steht an erster Stelle. Wetterdaten werden nur angezeigt, wenn mindestens ein Wert ungleich null ist.
### Eintrag bearbeiten ### Eintrag bearbeiten
+35 -6
View File
@@ -17,6 +17,7 @@ interface Props {
const pad = (n: number) => String(n).padStart(2, '0'); const pad = (n: number) => String(n).padStart(2, '0');
const MONATE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; const MONATE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
const WOCHENTAGE = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
function currentMonth() { function currentMonth() {
const d = new Date(); const d = new Date();
@@ -46,6 +47,15 @@ function formatDate(dt: string, short = false): string {
return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`; return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
} }
/** Wochentag zum Datum — in der Kompaktliste auf zwei Buchstaben gekürzt. */
function formatWeekday(dt: string, short = false): string {
if (!dt) return '';
const d = new Date(dt);
if (isNaN(d.getTime())) return '';
const name = WOCHENTAGE[d.getDay()];
return short ? name.slice(0, 2) : name;
}
function formatTime(dt: string): string { function formatTime(dt: string): string {
if (!dt) return ''; if (!dt) return '';
const d = new Date(dt); const d = new Date(dt);
@@ -213,7 +223,9 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, currentUserKue
<table className="w-full border-collapse" style={{ fontSize: compact ? '0.75rem' : '0.875rem' }}> <table className="w-full border-collapse" style={{ fontSize: compact ? '0.75rem' : '0.875rem' }}>
<thead> <thead>
<tr className="bg-gray-100 text-left"> <tr className="bg-gray-100 text-left">
<th className={`${head} whitespace-nowrap`}>Datum</th> {/* Im Kompaktmodus schmal halten — sonst zieht w-full die Spalte auf und der
rechtsbündige Wochentag rutscht weit vom Datum weg. */}
<th className={`${head} whitespace-nowrap ${compact ? 'w-20' : ''}`}>Datum</th>
{compact ? ( {compact ? (
<> <>
<th className={`${head} whitespace-nowrap`}>Start</th> <th className={`${head} whitespace-nowrap`}>Start</th>
@@ -222,10 +234,15 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, currentUserKue
) : ( ) : (
<th className={`${head} whitespace-nowrap text-center`}>Zeit</th> <th className={`${head} whitespace-nowrap text-center`}>Zeit</th>
)} )}
<th className={head}>Art</th> <th className={`${head} ${compact ? 'whitespace-nowrap' : ''}`}>Art</th>
<th className={`${head} text-center w-10`}>Bes.</th> <th className={`${head} text-center w-10`}>Bes.</th>
<th className={head}>BEOs</th> {/* Im Kompaktmodus nehmen diese beiden den Restplatz auf. Sonst verteilt das
<th className={head}>Objekte</th> Auto-Layout ihn bei dünn gefüllten Zeilen über alle Spalten, und Art und
Zeiten werden unnötig breit. Die Prozentangabe drückt die übrigen Spalten
auf ihre Minimalbreite — deshalb steht Art dort auf whitespace-nowrap,
sonst bricht der Gruppenname dort Wort für Wort um. */}
<th className={`${head} ${compact ? 'w-1/2' : ''}`}>BEOs</th>
<th className={`${head} ${compact ? 'w-1/2' : ''}`}>Objekte</th>
{!compact && <th className={head}>Bemerkungen</th>} {!compact && <th className={head}>Bemerkungen</th>}
{!compact && <th className={head}>Wetter</th>} {!compact && <th className={head}>Wetter</th>}
<th className={`${head} text-center print:hidden`}>Aktionen</th> <th className={`${head} text-center print:hidden`}>Aktionen</th>
@@ -240,7 +257,19 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, currentUserKue
</tr> </tr>
) : displayEntries.map((e) => ( ) : displayEntries.map((e) => (
<tr key={e.ID} className="hover:bg-gray-50"> <tr key={e.ID} className="hover:bg-gray-50">
<td className={`${cell} whitespace-nowrap`}>{formatDate(e.Beginn, compact)}</td> <td className={`${cell} whitespace-nowrap`}>
{compact ? (
<div className="flex items-baseline justify-between gap-2">
<span>{formatDate(e.Beginn, true)}</span>
<span className="text-gray-500">{formatWeekday(e.Beginn, true)}</span>
</div>
) : (
<>
<div>{formatDate(e.Beginn)}</div>
<div className="text-xs text-gray-500">{formatWeekday(e.Beginn)}</div>
</>
)}
</td>
{compact ? ( {compact ? (
<> <>
<td className={`${cell} whitespace-nowrap`}>{formatTime(e.Beginn)}</td> <td className={`${cell} whitespace-nowrap`}>{formatTime(e.Beginn)}</td>
@@ -253,7 +282,7 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, currentUserKue
<div>{formatTime(e.Ende)}</div> <div>{formatTime(e.Ende)}</div>
</td> </td>
)} )}
<td className={cell}> <td className={`${cell} ${compact ? 'whitespace-nowrap' : ''}`}>
<div>{e.ArtFuehrung}</div> <div>{e.ArtFuehrung}</div>
{e.SonderName && <div className="text-xs text-gray-500">{e.SonderName}</div>} {e.SonderName && <div className="text-xs text-gray-500">{e.SonderName}</div>}
{e.Spende && ( {e.Spende && (
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "logbuch", "name": "logbuch",
"version": "1.16.1", "version": "1.17.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",