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:
+1
-1
@@ -135,7 +135,7 @@ Die Werkzeugleiste oben in der Liste enthält in einer Zeile:
|
||||
|
||||
### Tabelleninhalt
|
||||
|
||||
Die Tabelle zeigt pro Eintrag: Datum, Uhrzeit (Beginn–Ende), 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 (Beginn–Ende), 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
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ interface Props {
|
||||
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 WOCHENTAGE = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'];
|
||||
|
||||
function currentMonth() {
|
||||
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()}`;
|
||||
}
|
||||
|
||||
/** 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 {
|
||||
if (!dt) return '';
|
||||
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' }}>
|
||||
<thead>
|
||||
<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 ? (
|
||||
<>
|
||||
<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}>Art</th>
|
||||
<th className={`${head} ${compact ? 'whitespace-nowrap' : ''}`}>Art</th>
|
||||
<th className={`${head} text-center w-10`}>Bes.</th>
|
||||
<th className={head}>BEOs</th>
|
||||
<th className={head}>Objekte</th>
|
||||
{/* Im Kompaktmodus nehmen diese beiden den Restplatz auf. Sonst verteilt das
|
||||
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}>Wetter</th>}
|
||||
<th className={`${head} text-center print:hidden`}>Aktionen</th>
|
||||
@@ -240,7 +257,19 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, currentUserKue
|
||||
</tr>
|
||||
) : displayEntries.map((e) => (
|
||||
<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 ? (
|
||||
<>
|
||||
<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>
|
||||
</td>
|
||||
)}
|
||||
<td className={cell}>
|
||||
<td className={`${cell} ${compact ? 'whitespace-nowrap' : ''}`}>
|
||||
<div>{e.ArtFuehrung}</div>
|
||||
{e.SonderName && <div className="text-xs text-gray-500">{e.SonderName}</div>}
|
||||
{e.Spende && (
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "logbuch",
|
||||
"version": "1.16.1",
|
||||
"version": "1.17.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
Reference in New Issue
Block a user