Show Objekte in compact list; narrower columns and shorter date format
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,10 +11,14 @@ interface Props {
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
function formatDateTime(dt: string): string {
|
||||
function formatDateTime(dt: string, short = false): string {
|
||||
if (!dt) return '';
|
||||
const d = new Date(dt);
|
||||
if (isNaN(d.getTime())) return dt;
|
||||
if (short) {
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}. ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
return d.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
@@ -30,7 +34,7 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
|
||||
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
|
||||
.then((data) => { setEntries(data); setLoading(false); })
|
||||
.catch(() => { setError('Fehler beim Laden.'); setLoading(false); });
|
||||
}, [kuppel, refreshKey]);
|
||||
}, [kuppel, refreshKey, limit]);
|
||||
|
||||
async function confirmDelete(id: number) {
|
||||
try {
|
||||
@@ -48,48 +52,55 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
|
||||
if (error) return <div className="text-red-600 text-sm py-4">{error}</div>;
|
||||
if (entries.length === 0) return <div className="text-gray-500 text-sm py-4">Keine Einträge vorhanden.</div>;
|
||||
|
||||
const cell = compact
|
||||
? 'px-1.5 py-1 border border-gray-200 text-xs'
|
||||
: 'px-3 py-2 border border-gray-200';
|
||||
const head = compact
|
||||
? 'px-1.5 py-1 border border-gray-300 text-xs font-semibold'
|
||||
: 'px-3 py-2 border border-gray-300';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<table className="w-full border-collapse" style={{ fontSize: compact ? '0.75rem' : '0.875rem' }}>
|
||||
<thead>
|
||||
<tr className="bg-gray-100 text-left">
|
||||
<th className="px-3 py-2 border border-gray-300 whitespace-nowrap">Beginn</th>
|
||||
<th className="px-3 py-2 border border-gray-300 whitespace-nowrap">Ende</th>
|
||||
<th className="px-3 py-2 border border-gray-300">Art</th>
|
||||
<th className="px-3 py-2 border border-gray-300 text-center">Besucher</th>
|
||||
<th className="px-3 py-2 border border-gray-300">BEOs</th>
|
||||
{!compact && <th className="px-3 py-2 border border-gray-300">Objekte</th>}
|
||||
{!compact && <th className="px-3 py-2 border border-gray-300">Bemerkungen</th>}
|
||||
<th className="px-3 py-2 border border-gray-300 text-center">Aktionen</th>
|
||||
<th className={`${head} whitespace-nowrap`}>Beginn</th>
|
||||
<th className={`${head} whitespace-nowrap`}>Ende</th>
|
||||
<th className={head}>Art</th>
|
||||
{!compact && <th className={`${head} text-center`}>Besucher</th>}
|
||||
<th className={head}>BEOs</th>
|
||||
<th className={head}>Objekte</th>
|
||||
{!compact && <th className={head}>Bemerkungen</th>}
|
||||
<th className={`${head} text-center`}>Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map((e) => (
|
||||
<tr key={e.ID} className="hover:bg-gray-50">
|
||||
<td className="px-3 py-2 border border-gray-200 whitespace-nowrap">{formatDateTime(e.Beginn)}</td>
|
||||
<td className="px-3 py-2 border border-gray-200 whitespace-nowrap">{formatDateTime(e.Ende)}</td>
|
||||
<td className="px-3 py-2 border border-gray-200">{e.ArtFuehrung}</td>
|
||||
<td className="px-3 py-2 border border-gray-200 text-center">{e.Besucher}</td>
|
||||
<td className="px-3 py-2 border border-gray-200">{e.BEOs || '—'}</td>
|
||||
{!compact && <td className="px-3 py-2 border border-gray-200">{e.Objekte || '—'}</td>}
|
||||
<td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Beginn, compact)}</td>
|
||||
<td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Ende, compact)}</td>
|
||||
<td className={cell}>{e.ArtFuehrung}</td>
|
||||
{!compact && <td className={`${cell} text-center`}>{e.Besucher}</td>}
|
||||
<td className={cell}>{e.BEOs || '—'}</td>
|
||||
<td className={cell}>{e.Objekte || '—'}</td>
|
||||
{!compact && (
|
||||
<td className="px-3 py-2 border border-gray-200 max-w-xs">
|
||||
<td className={`${cell} max-w-xs`}>
|
||||
<span className="line-clamp-2">{e.Bemerkungen || ''}</span>
|
||||
</td>
|
||||
)}
|
||||
<td className="px-3 py-2 border border-gray-200 text-center whitespace-nowrap">
|
||||
<td className={`${cell} text-center whitespace-nowrap`}>
|
||||
<button
|
||||
onClick={() => onEdit(e)}
|
||||
className="text-blue-600 hover:text-blue-800 mr-3 text-xs font-medium"
|
||||
className="text-blue-600 hover:text-blue-800 mr-2 font-medium"
|
||||
>
|
||||
Bearbeiten
|
||||
✎
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteId(e.ID)}
|
||||
className="text-red-600 hover:text-red-800 text-xs font-medium"
|
||||
className="text-red-600 hover:text-red-800 font-medium"
|
||||
>
|
||||
Löschen
|
||||
✕
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
-- Migration: ArtFuehrung von Langtext auf Kürzel umstellen
|
||||
-- Erst Daten aktualisieren, dann ENUM ändern
|
||||
-- Schritt 1: ENUM zu VARCHAR öffnen (nimmt alle Werte an)
|
||||
ALTER TABLE logbuch MODIFY ArtFuehrung VARCHAR(50) NOT NULL DEFAULT 'RF';
|
||||
|
||||
UPDATE logbuch SET ArtFuehrung = 'RF' WHERE ArtFuehrung = 'Reguläre Führung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'SF' WHERE ArtFuehrung = 'Sonderführung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'BEOS' WHERE ArtFuehrung = 'BEO-Sitzung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'SonF' WHERE ArtFuehrung = 'Sonnenführung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'TD' WHERE ArtFuehrung = 'Technischer Dienst';
|
||||
UPDATE logbuch SET ArtFuehrung = 'Beob' WHERE ArtFuehrung = 'Beobachtung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'ToT' WHERE ArtFuehrung = 'Tag der offenen Tür';
|
||||
UPDATE logbuch SET ArtFuehrung = 'Sonst'WHERE ArtFuehrung = 'Sonstiges';
|
||||
-- Schritt 2: Bestehende Daten umschreiben
|
||||
UPDATE logbuch SET ArtFuehrung = 'RF' WHERE ArtFuehrung = 'Reguläre Führung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'SF' WHERE ArtFuehrung = 'Sonderführung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'BEOS' WHERE ArtFuehrung = 'BEO-Sitzung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'SonF' WHERE ArtFuehrung = 'Sonnenführung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'TD' WHERE ArtFuehrung = 'Technischer Dienst';
|
||||
UPDATE logbuch SET ArtFuehrung = 'Beob' WHERE ArtFuehrung = 'Beobachtung';
|
||||
UPDATE logbuch SET ArtFuehrung = 'ToT' WHERE ArtFuehrung = 'Tag der offenen Tür';
|
||||
UPDATE logbuch SET ArtFuehrung = 'Sonst' WHERE ArtFuehrung = 'Sonstiges';
|
||||
|
||||
ALTER TABLE logbuch
|
||||
MODIFY ArtFuehrung ENUM('RF','SF','BEOS','SonF','TD','Beob','ToT','Sonst')
|
||||
NOT NULL DEFAULT 'RF';
|
||||
-- Schritt 3: Zurück zu ENUM mit neuen Kürzeln
|
||||
ALTER TABLE logbuch MODIFY ArtFuehrung ENUM('RF','SF','BEOS','SonF','TD','Beob','ToT','Sonst') NOT NULL DEFAULT 'RF';
|
||||
|
||||
Reference in New Issue
Block a user