admin/logbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact preview list below form on desktop; Beginn/Ende/Besucher in one row

Browse Source 
- Eingabe tab shows last 5 entries below form on lg+ screens (compact mode
  hides Objekte and Bemerkungen columns); Liste tab shows full 20 entries
- Beginn, Ende, Besucher fields moved into a single flex row
- LogbuchList accepts limit and compact props

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-04-28 07:55:46 +02:00
parent aea5cc08d6
commit 34a2c6b90d
3 changed files with 61 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/LogbuchForm.tsx
View File

@@ -172,43 +172,43 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
/>
</div>
{/* Beginn / Ende — nebeneinander auf Desktop, untereinander auf Mobile */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
{/* Beginn / Ende / Besucher — eine Zeile */}
<div className="flex flex-wrap gap-3 items-end">
<div className="flex-1 min-w-0">
<label className={labelCls}>Beginn</label>
<input
type="datetime-local"
value={beginn}
onChange={(e) => setBeginn(e.target.value)}
required
className={inputCls}
className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
/>
</div>
<div>
<div className="flex-1 min-w-0">
<label className={labelCls}>Ende</label>
<input
type="datetime-local"
value={ende}
onChange={(e) => setEnde(e.target.value)}
required
className={inputCls}
className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
/>
</div>
{showBesucher && (
<div className="shrink-0">
<label className={labelCls}>Besucher</label>
<input
type="number"
value={besucher}
onChange={(e) => setBesucher(parseInt(e.target.value) || 0)}
min={0}
max={9999}
className="w-20 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
/>
</div>
)}
</div>
{/* Besucher */}
{showBesucher && <div>
<label className={labelCls}>Anzahl Besucher</label>
<input
type="number"
value={besucher}
onChange={(e) => setBesucher(parseInt(e.target.value) || 0)}
min={0}
max={9999}
className="w-32 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
/>
</div>}
{/* BEOs */}
<div>
<label className={labelCls}>BEOs</label>

20
components/LogbuchList.tsx
View File

@@ -7,6 +7,8 @@ interface Props {
kuppel: Kuppel;
refreshKey: number;
onEdit: (entry: LogbuchEintrag) => void;
limit?: number;
compact?: boolean;
}
function formatDateTime(dt: string): string {
@@ -16,7 +18,7 @@ function formatDateTime(dt: string): string {
return d.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}
export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, compact = false }: Props) {
const [entries, setEntries] = useState<LogbuchEintrag[]>([]);
const [loading, setLoading] = useState(true);
const [deleteId, setDeleteId] = useState<number | null>(null);
@@ -24,7 +26,7 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
useEffect(() => {
setLoading(true);
fetch(`/api/logbuch?kuppel=${encodeURIComponent(kuppel)}&limit=20`)
fetch(`/api/logbuch?kuppel=${encodeURIComponent(kuppel)}&limit=${limit}`)
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then((data) => { setEntries(data); setLoading(false); })
.catch(() => { setError('Fehler beim Laden.'); setLoading(false); });
@@ -57,8 +59,8 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
<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>
<th className="px-3 py-2 border border-gray-300">Objekte</th>
<th className="px-3 py-2 border border-gray-300">Bemerkungen</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>
</tr>
</thead>
@@ -70,10 +72,12 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit }: Props) {
<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>
<td className="px-3 py-2 border border-gray-200">{e.Objekte || '—'}</td>
<td className="px-3 py-2 border border-gray-200 max-w-xs">
<span className="line-clamp-2">{e.Bemerkungen || ''}</span>
</td>
{!compact && <td className="px-3 py-2 border border-gray-200">{e.Objekte || '—'}</td>}
{!compact && (
<td className="px-3 py-2 border border-gray-200 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">
<button
onClick={() => onEdit(e)}