From 2469715756e49f5d14ffd3742919455ca9747943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= <rexfue@gmail.com>
Date: Tue, 28 Apr 2026 13:35:21 +0200
Subject: [PATCH] Show Objekte in compact list; narrower columns and shorter
 date format

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/LogbuchList.tsx | 57 +++++++++++++++++++++++---------------
 migrate_art.sql            | 25 +++++++++--------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/components/LogbuchList.tsx b/components/LogbuchList.tsx
index 4fca3b0..680bcb7 100644
--- a/components/LogbuchList.tsx
+++ b/components/LogbuchList.tsx
@@ -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>
diff --git a/migrate_art.sql b/migrate_art.sql
index 35518ae..b465897 100644
--- a/migrate_art.sql
+++ b/migrate_art.sql
@@ -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';