Initial implementation: Logbuch Sternwarte Welzheim

Vollständige Next.js 16 Webanwendung als Logbuch für die Sternwarte Welzheim.
4 Kuppeln (West/Ost/Süd/Pluto), BEO-basierte Authentifizierung mit erzwungenem
Passwort-Wechsel beim Erstlogin, MySQL-Backend, Docker-Deployment.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/BeoSelector.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { BeoOption } from '@/types/logbuch';
+
+interface Props {
+  selected: BeoOption[];
+  onChange: (beos: BeoOption[]) => void;
+}
+
+export default function BeoSelector({ selected, onChange }: Props) {
+  const [all, setAll] = useState<BeoOption[]>([]);
+
+  useEffect(() => {
+    fetch('/api/beos')
+      .then((r) => { if (!r.ok) throw new Error('Fehler'); return r.json(); })
+      .then(setAll)
+      .catch(() => {});
+  }, []);
+
+  const selectedIds = new Set(selected.map((b) => b.ID));
+  const available = all.filter((b) => !selectedIds.has(b.ID));
+
+  function add(id: string) {
+    if (!id) return;
+    const beo = all.find((b) => b.ID === parseInt(id));
+    if (beo) onChange([...selected, beo]);
+  }
+
+  function remove(id: number) {
+    onChange(selected.filter((b) => b.ID !== id));
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-2">
+        {selected.map((b) => (
+          <span
+            key={b.ID}
+            className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded-full"
+          >
+            {b.Kuerzel} — {b.Name}
+            <button
+              type="button"
+              onClick={() => remove(b.ID)}
+              className="ml-1 text-blue-600 hover:text-red-600 font-bold leading-none"
+              aria-label={`${b.Kuerzel} entfernen`}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+      </div>
+      {available.length > 0 && (
+        <select
+          className="px-3 py-1.5 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+          value=""
+          onChange={(e) => add(e.target.value)}
+        >
+          <option value="">+ BEO hinzufügen</option>
+          {available.map((b) => (
+            <option key={b.ID} value={b.ID}>
+              {b.Kuerzel} — {b.Name}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}

components/LogbuchForm.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Kuppel, ArtFuehrung, BeoOption, SelectedObjekt, Wetter, LogbuchEintrag } from '@/types/logbuch';
+import { ARTEN } from '@/types/logbuch';
+import BeoSelector from './BeoSelector';
+import ObjektSelector from './ObjektSelector';
+
+interface Props {
+  kuppel: Kuppel;
+  currentUserBeo: BeoOption;
+  editEntry?: LogbuchEintrag | null;
+  onSaved: () => void;
+}
+
+function toLocalDatetimeValue(isoOrDatetime: string): string {
+  if (!isoOrDatetime) return '';
+  return isoOrDatetime.slice(0, 16);
+}
+
+function nowLocalDatetime(): string {
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
+}
+
+export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved }: Props) {
+  const [artFuehrung, setArtFuehrung] = useState<ArtFuehrung>('Reguläre Führung');
+  const [beginn, setBeginn] = useState(nowLocalDatetime());
+  const [ende, setEnde] = useState(nowLocalDatetime());
+  const [besucher, setBesucher] = useState(0);
+  const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]);
+  const [objekte, setObjekte] = useState<SelectedObjekt[]>([]);
+  const [bemerkungen, setBemerkungen] = useState('');
+  const [wetter, setWetter] = useState<Wetter | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/wetter')
+      .then((r) => { if (!r.ok) throw new Error(); return r.json(); })
+      .then(setWetter)
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (editEntry) {
+      setArtFuehrung(editEntry.ArtFuehrung);
+      setBeginn(toLocalDatetimeValue(editEntry.Beginn));
+      setEnde(toLocalDatetimeValue(editEntry.Ende));
+      setBesucher(editEntry.Besucher);
+      setBemerkungen(editEntry.Bemerkungen ?? '');
+      if (editEntry.WetterTemp !== null) {
+        setWetter({
+          temp: editEntry.WetterTemp ?? 0,
+          feuchte: editEntry.WetterFeuchte ?? 0,
+          druck: editEntry.WetterDruck ?? 0,
+        });
+      }
+    } else {
+      setArtFuehrung('Reguläre Führung');
+      setBeginn(nowLocalDatetime());
+      setEnde(nowLocalDatetime());
+      setBesucher(0);
+      setBeos([currentUserBeo]);
+      setObjekte([]);
+      setBemerkungen('');
+    }
+  }, [editEntry, currentUserBeo]);
+
+  useEffect(() => {
+    if (editEntry && editEntry.BEOs) {
+      fetch('/api/beos')
+        .then((r) => r.json())
+        .then((all: BeoOption[]) => {
+          const kuerzel = editEntry.BEOs.split(', ').map((k) => k.trim());
+          setBeos(all.filter((b) => kuerzel.includes(b.Kuerzel)));
+        })
+        .catch(() => {});
+    }
+    if (editEntry && editEntry.Objekte) {
+      const names = editEntry.Objekte.split(', ').map((n) => n.trim());
+      fetch('/api/objekte')
+        .then((r) => r.json())
+        .then((all: { ID: number; Name: string }[]) => {
+          const result: SelectedObjekt[] = names.map((name) => {
+            const found = all.find((o) => o.Name === name);
+            return { ID: found?.ID ?? null, Name: name };
+          });
+          setObjekte(result);
+        })
+        .catch(() => {});
+    }
+  }, [editEntry]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    setSuccess(false);
+
+    const body = {
+      Kuppel: kuppel,
+      ArtFuehrung: artFuehrung,
+      Beginn: beginn,
+      Ende: ende,
+      Besucher: besucher,
+      beoIds: beos.map((b) => b.ID),
+      objekte,
+      Bemerkungen: bemerkungen,
+      Wetter: wetter,
+    };
+
+    const url = editEntry ? `/api/logbuch/${editEntry.ID}` : '/api/logbuch';
+    const method = editEntry ? 'PUT' : 'POST';
+
+    try {
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setSuccess(true);
+      if (!editEntry) {
+        setBeginn(nowLocalDatetime());
+        setEnde(nowLocalDatetime());
+        setBesucher(0);
+        setBeos([currentUserBeo]);
+        setObjekte([]);
+        setBemerkungen('');
+      }
+      onSaved();
+    } catch {
+      setError('Fehler beim Speichern. Bitte erneut versuchen.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 max-w-2xl">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Art der Führung</label>
+          <select
+            value={artFuehrung}
+            onChange={(e) => setArtFuehrung(e.target.value as ArtFuehrung)}
+            className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+          >
+            {ARTEN.map((a) => (
+              <option key={a} value={a}>{a}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Kuppel</label>
+          <input
+            type="text"
+            value={kuppel}
+            readOnly
+            className="w-full px-3 py-2 border-2 border-gray-300 rounded-lg bg-gray-100 text-sm text-gray-600"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Beginn</label>
+          <input
+            type="datetime-local"
+            value={beginn}
+            onChange={(e) => setBeginn(e.target.value)}
+            required
+            className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Ende</label>
+          <input
+            type="datetime-local"
+            value={ende}
+            onChange={(e) => setEnde(e.target.value)}
+            required
+            className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">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-sm focus:border-blue-500 focus:outline-none"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">BEOs</label>
+        <BeoSelector selected={beos} onChange={setBeos} />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Beobachtete Objekte</label>
+        <ObjektSelector selected={objekte} onChange={setObjekte} />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Bemerkungen
+          <span className="ml-2 text-gray-400 font-normal text-xs">({bemerkungen.length}/500)</span>
+        </label>
+        <textarea
+          value={bemerkungen}
+          onChange={(e) => setBemerkungen(e.target.value.slice(0, 500))}
+          rows={3}
+          className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none resize-y"
+          placeholder="Freier Text (max. 500 Zeichen)"
+        />
+      </div>
+
+      {wetter && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Wetter (aktuell)</label>
+          <div className="flex gap-4 text-sm text-gray-600 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
+            <span>🌡 {wetter.temp} °C</span>
+            <span>💧 {wetter.feuchte} %</span>
+            <span>🌬 {wetter.druck} hPa</span>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
+          {error}
+        </div>
+      )}
+      {success && !editEntry && (
+        <div className="bg-green-50 border border-green-300 text-green-700 px-3 py-2 rounded-lg text-sm">
+          Eintrag gespeichert.
+        </div>
+      )}
+
+      <div className="flex gap-3">
+        <button
+          type="submit"
+          disabled={saving}
+          className="px-6 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-sm"
+        >
+          {saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'}
+        </button>
+        {editEntry && (
+          <button
+            type="button"
+            onClick={onSaved}
+            className="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-sm"
+          >
+            Abbrechen
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

components/LogbuchList.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Kuppel, LogbuchEintrag } from '@/types/logbuch';
+
+interface Props {
+  kuppel: Kuppel;
+  refreshKey: number;
+  onEdit: (entry: LogbuchEintrag) => void;
+}
+
+function formatDateTime(dt: string): string {
+  if (!dt) return '';
+  const d = new Date(dt);
+  if (isNaN(d.getTime())) return dt;
+  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) {
+  const [entries, setEntries] = useState<LogbuchEintrag[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`/api/logbuch?kuppel=${encodeURIComponent(kuppel)}&limit=20`)
+      .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]);
+
+  async function confirmDelete(id: number) {
+    try {
+      const res = await fetch(`/api/logbuch/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error();
+      setEntries((prev) => prev.filter((e) => e.ID !== id));
+    } catch {
+      setError('Fehler beim Löschen.');
+    } finally {
+      setDeleteId(null);
+    }
+  }
+
+  if (loading) return <div className="text-gray-500 text-sm py-4">Lade Einträge...</div>;
+  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>;
+
+  return (
+    <div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm border-collapse">
+          <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>
+              <th className="px-3 py-2 border border-gray-300">Objekte</th>
+              <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>
+          <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>
+                <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>
+                <td className="px-3 py-2 border border-gray-200 text-center whitespace-nowrap">
+                  <button
+                    onClick={() => onEdit(e)}
+                    className="text-blue-600 hover:text-blue-800 mr-3 text-xs font-medium"
+                  >
+                    Bearbeiten
+                  </button>
+                  <button
+                    onClick={() => setDeleteId(e.ID)}
+                    className="text-red-600 hover:text-red-800 text-xs font-medium"
+                  >
+                    Löschen
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {deleteId !== null && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl p-6 max-w-sm w-full mx-4">
+            <h3 className="text-lg font-semibold mb-3">Eintrag löschen?</h3>
+            <p className="text-sm text-gray-600 mb-5">Dieser Eintrag wird unwiderruflich gelöscht.</p>
+            <div className="flex gap-3 justify-end">
+              <button
+                onClick={() => setDeleteId(null)}
+                className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm"
+              >
+                Abbrechen
+              </button>
+              <button
+                onClick={() => confirmDelete(deleteId)}
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm"
+              >
+                Löschen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/ObjektSelector.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ObjektOption, SelectedObjekt } from '@/types/logbuch';
+
+interface Props {
+  selected: SelectedObjekt[];
+  onChange: (objekte: SelectedObjekt[]) => void;
+}
+
+export default function ObjektSelector({ selected, onChange }: Props) {
+  const [all, setAll] = useState<ObjektOption[]>([]);
+  const [newName, setNewName] = useState('');
+  const [showNewInput, setShowNewInput] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/objekte')
+      .then((r) => { if (!r.ok) throw new Error('Fehler'); return r.json(); })
+      .then(setAll)
+      .catch(() => {});
+  }, []);
+
+  const selectedNames = new Set(selected.map((o) => o.Name.toLowerCase()));
+  const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase()));
+
+  function add(value: string) {
+    if (value === 'neu') {
+      setShowNewInput(true);
+      return;
+    }
+    const obj = all.find((o) => o.ID === parseInt(value));
+    if (obj && !selectedNames.has(obj.Name.toLowerCase())) {
+      onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
+    }
+  }
+
+  function addNew() {
+    const name = newName.trim();
+    if (!name || selectedNames.has(name.toLowerCase())) return;
+    onChange([...selected, { ID: null, Name: name }]);
+    setNewName('');
+    setShowNewInput(false);
+  }
+
+  function remove(name: string) {
+    onChange(selected.filter((o) => o.Name !== name));
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-2">
+        {selected.map((o) => (
+          <span
+            key={o.Name}
+            className="inline-flex items-center gap-1 bg-green-100 text-green-800 text-sm px-2 py-1 rounded-full"
+          >
+            {o.Name}
+            <button
+              type="button"
+              onClick={() => remove(o.Name)}
+              className="ml-1 text-green-600 hover:text-red-600 font-bold leading-none"
+              aria-label={`${o.Name} entfernen`}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+      </div>
+
+      <select
+        className="px-3 py-1.5 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+        value=""
+        onChange={(e) => add(e.target.value)}
+      >
+        <option value="">+ Objekt hinzufügen</option>
+        <option value="neu">— Neues Objekt eingeben —</option>
+        {available.map((o) => (
+          <option key={o.ID} value={o.ID}>
+            {o.Name}
+          </option>
+        ))}
+      </select>
+
+      {showNewInput && (
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
+            placeholder="Objektname eingeben"
+            className="flex-1 px-3 py-1.5 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+          />
+          <button
+            type="button"
+            onClick={addNew}
+            className="px-3 py-1.5 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"
+          >
+            OK
+          </button>
+          <button
+            type="button"
+            onClick={() => { setShowNewInput(false); setNewName(''); }}
+            className="px-3 py-1.5 bg-gray-200 text-gray-700 text-sm rounded-lg hover:bg-gray-300"
+          >
+            Abbrechen
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}