v1.2.0: Formular-Redesign und Listen-Verbesserungen

- Eingabe: alle 5 Felder (Führung, Datum, Start, Ende, Besucher) in einer Zeile - Eingabe: Datum einmalig, Start- und Endzeit getrennt - Führungsarten: Kürzel werden nur in DB gespeichert, Anzeige als Klartext - Liste: Datum und Zeit getrennt in eigenen Spalten - Hintergrundfarbe #EEF4FF auf Login- und Passwort-Seite übertragen - Alle Inputfelder gleich hoch (text-sm durchgehend) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
v1.1.0: Druck-Optimierung, UI-Verbesserungen
2026-05-01 11:00:19 +02:00 · 2026-05-01 10:25:11 +02:00
9 changed files with 136 additions and 109 deletions
--- a/app/MainClient.tsx
+++ b/app/MainClient.tsx
@@ -43,11 +43,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
  }

  return (
-    <div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4">
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#FFFFDD]">
+    <div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4 print:p-0">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#EEF4FF] print:max-w-none print:border-0 print:p-0 print:bg-white">

        {/* Header */}
-        <div className="flex justify-between items-start sm:items-center mb-4 gap-2">
+        <div className="flex justify-between items-start sm:items-center mb-4 gap-2 print:hidden">
          <h1 className="text-xl sm:text-2xl font-bold leading-tight">
            <span className="hidden sm:inline">Sternwarte-Welzheim &nbsp; </span>
            Logbuch für {activeKuppel}-Kuppel
@@ -63,7 +63,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
        </div>

        {/* Kuppel-Tabs */}
-        <div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
+        <div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto print:hidden">
          {KUPPELN.map((k) => (
            <button
              key={k}
@@ -81,7 +81,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
        </div>

        {/* Eingabe/Liste-Tabs */}
-        <div className="flex gap-1 mb-4 border-b border-gray-200">
+        <div className="flex gap-1 mb-4 border-b border-gray-200 print:hidden">
          {(['eingabe', 'liste'] as const).map((tab) => (
            <button
              key={tab}
@@ -115,6 +115,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {

            {/* Kompakte Liste — nur auf Desktop sichtbar */}
            <div className="hidden lg:block mt-5 border-t-2 border-gray-300 pt-4">
+              <div className="border-2 border-gray-400 rounded-xl bg-white p-3">
                <div className="flex justify-between items-center mb-2">
                  <h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
                  <button
@@ -132,20 +133,36 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
                  compact
                />
              </div>
+            </div>
          </>
        )}

        {/* Liste-Tab: vollständige Liste */}
        {activeTab === 'liste' && (
+          <div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
+            <div className="flex justify-between items-center mb-2 print:hidden">
+              <span className="text-sm font-semibold text-gray-600">Einträge {activeKuppel}-Kuppel</span>
+              <button
+                onClick={() => window.print()}
+                className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"
+              >
+                🖨 Drucken
+              </button>
+            </div>
+            <div className="hidden print:block mb-4">
+              <div className="text-lg font-bold">Sternwarte Welzheim — Logbuch {activeKuppel}-Kuppel</div>
+              <div className="text-sm text-gray-500">Ausdruck vom {new Date().toLocaleDateString('de-DE')}</div>
+            </div>
            <LogbuchList
              kuppel={activeKuppel}
              refreshKey={refreshKey}
              onEdit={handleEdit}
              limit={20}
            />
+          </div>
        )}

-        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
+        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
          <div>
            <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
              rxf@gmx.de
--- a/app/change-password/page.tsx
+++ b/app/change-password/page.tsx
@@ -10,7 +10,7 @@ export default function ChangePasswordPage() {

  return (
    <div className="min-h-screen bg-white py-4 px-4">
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#EEF4FF]">
        <h1 className="text-3xl font-bold mb-6">Logbuch — Sternwarte Welzheim</h1>

        <div className="flex justify-center py-10">
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,3 +24,13 @@ body {
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
 }
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 1.5cm;
+  }
+  body {
+    background: white;
+  }
+}
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -15,7 +15,7 @@ export default function LoginPage() {

  return (
    <div className="min-h-screen bg-white py-4 px-4">
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#EEF4FF]">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold">Logbuch — Sternwarte Welzheim</h1>
        </div>
--- a/components/CustomSelect.tsx
+++ b/components/CustomSelect.tsx
@@ -39,7 +39,7 @@ export default function CustomSelect({ options, placeholder, onChange, keepOpen
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center justify-between px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-900 focus:border-blue-500 focus:outline-none"
+        className="w-full flex items-center justify-between px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
      >
        <span>{placeholder}</span>
        <svg
--- a/components/LogbuchForm.tsx
+++ b/components/LogbuchForm.tsx
@@ -2,7 +2,7 @@

 import { useEffect, useState } from 'react';
 import type { Kuppel, ArtFuehrung, BeoOption, SelectedObjekt, Wetter, LogbuchEintrag } from '@/types/logbuch';
-import { ARTEN, ARTEN_MAP } from '@/types/logbuch';
+import { ARTEN, ARTEN_MAP, artLabel } from '@/types/logbuch';
 import BeoSelector from './BeoSelector';
 import ObjektSelector from './ObjektSelector';
 import CustomSelect from './CustomSelect';
@@ -194,21 +194,18 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
  return (
    <form onSubmit={handleSubmit} className="space-y-3 max-w-2xl mx-auto border-2 border-gray-400 rounded-xl p-4 bg-white">

-      {/* Art der Führung — volle Breite */}
-      <div>
+      {/* Art der Führung / Datum / Startzeit / Endzeit / Besucher — eine Zeile */}
+      <div className="flex flex-wrap gap-3 items-end">
+        <div className="flex-1 min-w-[160px]">
          <label className={labelCls}>Art der Führung</label>
          <CustomSelect
-          placeholder={`${artFuehrung} — ${ARTEN_MAP[artFuehrung]}`}
-          options={ARTEN.map((a) => ({ value: a, label: `${a} — ${ARTEN_MAP[a]}` }))}
+            placeholder={artLabel(artFuehrung)}
+            options={ARTEN.map((a) => ({ value: a, label: artLabel(a) }))}
            onChange={(v) => setArtFuehrung(v as ArtFuehrung)}
          />
        </div>
-
-      {/* Beginn / Ende / Besucher */}
-      <div className="flex flex-col sm:flex-row gap-3 sm:items-end">
-        <div className="w-full sm:flex-1">
-          <label className={labelCls}>Beginn</label>
-          <div className="flex gap-2">
+        <div className="shrink-0">
+          <label className={labelCls}>Datum</label>
          <input
            type="date"
            value={beginn.slice(0, 10)}
@@ -218,37 +215,30 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
              setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
            }}
            required
-              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
+            className="px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
          />
+        </div>
+        <div className="shrink-0">
+          <label className={labelCls}>Startzeit</label>
          <TimePicker5
            value={beginn.slice(11, 16)}
-              onChange={(t) => setBeginn(beginn.slice(0, 10) + 'T' + t)}
+            onChange={(t) => {
+              setBeginn(beginn.slice(0, 10) + 'T' + t);
+              setEnde(ende.slice(0, 10) + 'T' + t);
+            }}
            className="w-24"
          />
        </div>
-        </div>
-        <div className="w-full sm:flex-1">
-          <label className={labelCls}>Ende</label>
-          <div className="flex gap-2">
-            <input
-              type="date"
-              value={ende.slice(0, 10)}
-              onChange={(e) => {
-                if (!e.target.value) return;
-                setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
-              }}
-              required
-              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
-            />
+        <div className="shrink-0">
+          <label className={labelCls}>Endzeit</label>
          <TimePicker5
            value={ende.slice(11, 16)}
            onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
            className="w-24"
          />
        </div>
-        </div>
        {showBesucher && (
-          <div className="sm:shrink-0">
+          <div className="shrink-0">
            <label className={labelCls}>Besucher</label>
            <input
              type="number"
@@ -256,7 +246,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
              onChange={(e) => setBesucher(e.target.value === '' ? '' : 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"
+              className="w-20 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
            />
          </div>
        )}
--- a/components/LogbuchList.tsx
+++ b/components/LogbuchList.tsx
@@ -11,15 +11,21 @@ interface Props {
  compact?: boolean;
 }

-function formatDateTime(dt: string, short = false): string {
+const pad = (n: number) => String(n).padStart(2, '0');
+
+function formatDate(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' });
+  if (short) return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.`;
+  return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
+}
+
+function formatTime(dt: string): string {
+  if (!dt) return '';
+  const d = new Date(dt);
+  if (isNaN(d.getTime())) return dt;
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }

 export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, compact = false }: Props) {
@@ -65,31 +71,31 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
        <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`}>Beginn</th>
+              <th className={`${head} whitespace-nowrap`}>Datum</th>
+              <th className={`${head} whitespace-nowrap`}>Start</th>
              <th className={`${head} whitespace-nowrap`}>Ende</th>
              <th className={head}>Art</th>
-              <th className={`${head} text-center`}>Besucher</th>
+              <th className={`${head} text-center w-10`}>Bes.</th>
              <th className={head}>BEOs</th>
              <th className={head}>Objekte</th>
              {!compact && <th className={head}>Bemerkungen</th>}
-              <th className={`${head} text-center`}>Aktionen</th>
+              <th className={`${head} text-center print:hidden`}>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {entries.map((e) => (
              <tr key={e.ID} className="hover:bg-gray-50">
-                <td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Beginn, compact)}</td>
-                <td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Ende, compact)}</td>
+                <td className={`${cell} whitespace-nowrap`}>{formatDate(e.Beginn, compact)}</td>
+                <td className={`${cell} whitespace-nowrap`}>{formatTime(e.Beginn)}</td>
+                <td className={`${cell} whitespace-nowrap`}>{formatTime(e.Ende)}</td>
                <td className={cell}>{e.ArtFuehrung}</td>
-                <td className={`${cell} text-center`}>{e.Besucher}</td>
+                <td className={`${cell} text-center`}>{e.Besucher || ''}</td>
                <td className={cell}>{e.BEOs || '—'}</td>
                <td className={cell}>{e.Objekte || '—'}</td>
                {!compact && (
-                  <td className={`${cell} max-w-xs`}>
-                    <span className="line-clamp-2">{e.Bemerkungen || ''}</span>
-                  </td>
+                  <td className={cell}>{e.Bemerkungen || ''}</td>
                )}
-                <td className={`${cell} text-center whitespace-nowrap`}>
+                <td className={`${cell} text-center whitespace-nowrap print:hidden`}>
                  <button
                    onClick={() => onEdit(e)}
                    className="text-blue-600 hover:text-blue-800 mr-2 font-medium"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "logbuch",
-  "version": "1.0.0",
+  "version": "1.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/types/logbuch.ts
+++ b/types/logbuch.ts
@@ -4,19 +4,23 @@ export type ArtFuehrung = 'RF' | 'SF' | 'PrF' | 'BEOS' | 'SonF' | 'TD' | 'Beob'
 export const KUPPELN: Kuppel[] = ['West', 'Ost', 'Süd', 'Pluto'];

 export const ARTEN_MAP: Record<ArtFuehrung, string> = {
-  RF:   'Reguläre Führung',
-  SF:   'Sonderführung',
-  PrF:  'Private Führung',
-  BEOS: 'BEO-Sitzung',
-  SonF: 'Sonnenführung',
-  TD:   'Technischer Dienst',
+  RF:   'regulär',
+  SF:   'sonder',
+  PrF:  'privat',
+  BEOS: '',
+  SonF: 'sonnen',
+  TD:   '',
  Beob: 'Beobachtung',
-  ToT:  'Tag der offenen Tür',
-  Sonst:'Sonstiges',
+  ToT:  '',
+  Sonst: 'Sonstiges',
 };

 export const ARTEN = Object.keys(ARTEN_MAP) as ArtFuehrung[];

+export function artLabel(a: ArtFuehrung): string {
+  return ARTEN_MAP[a] || a;
+}
+
 export interface BeoOption {
  ID: number;
  Kuerzel: string;