chore: feat/objekte-kategorie → main (Version 1.10.1)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat: Objekte-Kategorien (stern/sonne/beide) — Version 1.10.1
2026-06-14 16:14:55 +02:00 · 2026-06-14 16:14:52 +02:00
8 changed files with 92 additions and 42 deletions
@@ -12,7 +12,9 @@ export default function ObjekteManager({ initialObjekte }: Props) {
  const router = useRouter();
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editName, setEditName] = useState('');
+  const [editKategorie, setEditKategorie] = useState<string>('stern');
  const [newName, setNewName] = useState('');
+  const [newKategorie, setNewKategorie] = useState<string>('stern');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);

@@ -24,7 +26,7 @@ export default function ObjekteManager({ initialObjekte }: Props) {
    const res = await fetch('/api/objekte/' + id, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name: trimmed }),
+      body: JSON.stringify({ name: trimmed, kategorie: editKategorie }),
    });
    setBusy(false);
    if (!res.ok) {
@@ -59,7 +61,7 @@ export default function ObjekteManager({ initialObjekte }: Props) {
    const res = await fetch('/api/objekte', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name: trimmed }),
+      body: JSON.stringify({ name: trimmed, kategorie: newKategorie }),
    });
    setBusy(false);
    if (!res.ok) {
@@ -85,6 +87,15 @@ export default function ObjekteManager({ initialObjekte }: Props) {
          placeholder="Neues Objekt…"
          className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-500"
        />
+        <select
+          value={newKategorie}
+          onChange={(e) => setNewKategorie(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-500"
+        >
+          <option value="stern">Stern</option>
+          <option value="sonne">Sonne</option>
+          <option value="stern,sonne">Stern &amp; Sonne</option>
+        </select>
        <button
          type="submit"
          disabled={busy}
@@ -100,6 +111,7 @@ export default function ObjekteManager({ initialObjekte }: Props) {
            <tr>
              <th className="text-left px-4 py-3 font-semibold w-16">ID</th>
              <th className="text-left px-4 py-3 font-semibold">Name</th>
+              <th className="text-left px-4 py-3 font-semibold hidden sm:table-cell">Kategorie</th>
              <th className="text-left px-4 py-3 font-semibold hidden sm:table-cell">Zuletzt verwendet</th>
              <th className="px-4 py-3 w-36"></th>
            </tr>
@@ -125,6 +137,27 @@ export default function ObjekteManager({ initialObjekte }: Props) {
                    obj.Name
                  )}
                </td>
+                <td className="px-4 py-2 hidden sm:table-cell">
+                  {editingId === obj.ID ? (
+                    <select
+                      value={editKategorie}
+                      onChange={(e) => setEditKategorie(e.target.value)}
+                      className="px-2 py-1 border border-blue-400 rounded text-sm focus:outline-none"
+                    >
+                      <option value="stern">Stern</option>
+                      <option value="sonne">Sonne</option>
+                      <option value="stern,sonne">Stern &amp; Sonne</option>
+                    </select>
+                  ) : (
+                    <span className="flex gap-1">
+                      {obj.Kategorie.split(',').map((k) => (
+                        <span key={k} className={`text-xs px-2 py-0.5 rounded-full font-medium ${k === 'sonne' ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'}`}>
+                          {k}
+                        </span>
+                      ))}
+                    </span>
+                  )}
+                </td>
                <td className="px-4 py-2 text-gray-500 hidden sm:table-cell">
                  {obj.LastUsed ? new Date(obj.LastUsed).toLocaleDateString('de-DE') : '—'}
                </td>
@@ -151,7 +184,7 @@ export default function ObjekteManager({ initialObjekte }: Props) {
                    <span className="flex justify-end gap-2">
                      <button
                        type="button"
-                        onClick={() => { setEditingId(obj.ID); setEditName(obj.Name); setError(''); }}
+                        onClick={() => { setEditingId(obj.ID); setEditName(obj.Name); setEditKategorie(obj.Kategorie); setError(''); }}
                        disabled={busy}
                        className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 border border-blue-300 rounded hover:bg-blue-200 disabled:opacity-50"
                      >
@@ -172,7 +205,7 @@ export default function ObjekteManager({ initialObjekte }: Props) {
            ))}
            {initialObjekte.length === 0 && (
              <tr>
-                <td colSpan={4} className="px-4 py-6 text-center text-gray-400 text-sm">Keine Objekte vorhanden.</td>
+                <td colSpan={5} className="px-4 py-6 text-center text-gray-400 text-sm">Keine Objekte vorhanden.</td>
              </tr>
            )}
          </tbody>
@@ -10,6 +10,7 @@ export interface ObjektRow {
  ID: number;
  Name: string;
  LastUsed: string | null;
+  Kategorie: string;
 }

 export async function listObjekte(): Promise<ObjektRow[]> {
@@ -10,10 +10,12 @@ export async function PUT(req: NextRequest, { params }: { params: Promise<{ id:
    const { id } = await params;
    const numId = Number(id);
    if (isNaN(numId)) return NextResponse.json({ error: 'Ungültige ID' }, { status: 400 });
-    const { name } = await req.json();
+    const { name, kategorie } = await req.json();
    const trimmed = (name as string)?.trim();
    if (!trimmed) return NextResponse.json({ error: 'Name darf nicht leer sein' }, { status: 400 });
-    const result = await phpdb.updateObjekt(numId, trimmed);
+    const VALID = ['stern', 'sonne', 'stern,sonne'];
+    const kat: string | undefined = VALID.includes(kategorie) ? kategorie : undefined;
+    const result = await phpdb.updateObjekt(numId, trimmed, kat);
    return NextResponse.json(result);
  } catch (error) {
    console.error('PUT /api/objekte/[id]:', error);
@@ -2,11 +2,13 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getSession } from '@/lib/session';
 import * as phpdb from '@/lib/phpdb';

-export async function GET() {
+export async function GET(req: NextRequest) {
  const session = await getSession();
  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
  try {
-    const rows = await phpdb.getObjekte();
+    const raw = req.nextUrl.searchParams.get('kategorie');
+    const kategorie = raw === 'sonne' ? 'sonne' : 'stern';
+    const rows = await phpdb.getObjekte(kategorie);
    return NextResponse.json(rows);
  } catch (error) {
    console.error('GET /api/objekte:', error);
@@ -19,10 +21,12 @@ export async function POST(req: NextRequest) {
  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
  if (!session.role?.includes('admin')) return NextResponse.json({ error: 'Keine Berechtigung' }, { status: 403 });
  try {
-    const { name } = await req.json();
+    const { name, kategorie } = await req.json();
    const trimmed = (name as string)?.trim();
    if (!trimmed) return NextResponse.json({ error: 'Name darf nicht leer sein' }, { status: 400 });
-    const result = await phpdb.createObjekt(trimmed);
+    const VALID = ['stern', 'sonne', 'stern,sonne'];
+    const kat: string = VALID.includes(kategorie) ? kategorie : 'stern';
+    const result = await phpdb.createObjekt(trimmed, kat);
    return NextResponse.json(result, { status: 201 });
  } catch (error) {
    console.error('POST /api/objekte:', error);
@@ -120,8 +120,11 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
        .catch(() => {});
    }
    if (editEntry && editEntry.Objekte) {
-      const names = editEntry.Objekte.split(', ').map((n) => n.trim());
-      fetch('/api/objekte')
+      const allNames = editEntry.Objekte.split(', ').map((n) => n.trim());
+      const isSonneEntry = editEntry.ArtFuehrung === SONNE_ART;
+      const names = isSonneEntry ? allNames.filter((n) => n.toLowerCase() !== 'sonne') : allNames;
+      const kat = isSonneEntry ? 'sonne' : 'stern';
+      fetch('/api/objekte?kategorie=' + kat)
        .then((r) => r.json())
        .then((all: { ID: number; Name: string }[]) => {
          const result: SelectedObjekt[] = names.map((name) => {
@@ -134,12 +137,10 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
    }
  }, [editEntry]);

-  // Objekte-Vorauswahl je nach Art der Führung; Besucher zurücksetzen wenn nicht relevant
+  // Objekte und Besucher zurücksetzen beim Wechsel der Art der Führung
  useEffect(() => {
-    if (artFuehrung === SONNE_ART) {
-      setObjekte([{ ID: null, Name: 'Sonne' }]);
-    } else if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
    setObjekte([]);
+    if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
      setBesucher('');
    }
  }, [artFuehrung]);
@@ -172,7 +173,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
      Ende: ende,
      Besucher: besucher === '' ? 0 : besucher,
      beoIds: beos.map((b) => b.ID),
-      objekte: showObjekte ? objekte : [],
+      objekte: showObjekte ? (isSonne ? [{ ID: null, Name: 'Sonne' }, ...objekte] : objekte) : [],
      Bemerkungen: bemerkungen,
      Wetter: { ...wetter, temp: parseFloat(tempRaw) || 0 },
    };
@@ -304,16 +305,12 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
      {showObjekte && (
        <div>
          <label className={labelCls}>Beobachtete Objekte</label>
-          {isSonne ? (
-            <div className="flex items-center gap-2">
-              <span className="inline-flex items-center bg-green-100 text-green-800 text-sm px-3 py-1.5 rounded-full">
-                Sonne
-              </span>
-              <span className="text-xs text-gray-500">(bei Sonnenführung fest vorgegeben)</span>
-            </div>
-          ) : (
-            <ObjektSelector selected={objekte} onChange={setObjekte} />
-          )}
+          <ObjektSelector
+            selected={objekte}
+            onChange={setObjekte}
+            kategorie={isSonne ? 'sonne' : 'stern'}
+            fixedItems={isSonne ? [{ ID: null, Name: 'Sonne' }] : []}
+          />
        </div>
      )}

@@ -6,9 +6,11 @@ import type { ObjektOption, SelectedObjekt } from '@/types/logbuch';
 interface Props {
  selected: SelectedObjekt[];
  onChange: (objekte: SelectedObjekt[]) => void;
+  kategorie?: 'stern' | 'sonne';
+  fixedItems?: SelectedObjekt[];
 }

-export default function ObjektSelector({ selected, onChange }: Props) {
+export default function ObjektSelector({ selected, onChange, kategorie = 'stern', fixedItems = [] }: Props) {
  const [all, setAll] = useState<ObjektOption[]>([]);
  const [search, setSearch] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -16,11 +18,11 @@ export default function ObjektSelector({ selected, onChange }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
-    fetch('/api/objekte')
+    fetch('/api/objekte?kategorie=' + kategorie)
      .then((r) => { if (!r.ok) throw new Error('Fehler'); return r.json(); })
      .then(setAll)
      .catch(() => {});
-  }, []);
+  }, [kategorie]);

  useEffect(() => {
    function handleOutside(e: MouseEvent) {
@@ -32,14 +34,17 @@ export default function ObjektSelector({ selected, onChange }: Props) {
    return () => document.removeEventListener('mousedown', handleOutside);
  }, [dropdownOpen]);

+  const fixedNamesLower = new Set(fixedItems.map((o) => o.Name.toLowerCase()));
  const selectedNames = new Set(selected.map((o) => o.Name.toLowerCase()));
-  const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase()));
+  const available = all.filter(
+    (o) => !selectedNames.has(o.Name.toLowerCase()) && !fixedNamesLower.has(o.Name.toLowerCase())
+  );
  const filtered = search
    ? available.filter((o) => o.Name.toLowerCase().startsWith(search.toLowerCase()))
    : available;

  const searchTrimmed = search.trim();
-  const alreadySelected = searchTrimmed !== '' && selectedNames.has(searchTrimmed.toLowerCase());
+  const alreadySelected = searchTrimmed !== '' && (selectedNames.has(searchTrimmed.toLowerCase()) || fixedNamesLower.has(searchTrimmed.toLowerCase()));
  const exactAvailableMatch = available.find((o) => o.Name.toLowerCase() === searchTrimmed.toLowerCase());
  const showAddNew = searchTrimmed !== '' && !alreadySelected && !exactAvailableMatch;

@@ -51,7 +56,7 @@ export default function ObjektSelector({ selected, onChange }: Props) {

  function addNew(name: string) {
    const trimmed = name.trim();
-    if (!trimmed || selectedNames.has(trimmed.toLowerCase())) return;
+    if (!trimmed || selectedNames.has(trimmed.toLowerCase()) || fixedNamesLower.has(trimmed.toLowerCase())) return;
    const existing = all.find((o) => o.Name.toLowerCase() === trimmed.toLowerCase());
    if (existing) {
      onChange([...selected, { ID: existing.ID, Name: existing.Name }]);
@@ -79,6 +84,14 @@ export default function ObjektSelector({ selected, onChange }: Props) {
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-2">
+        {fixedItems.map((o) => (
+          <span
+            key={'fixed-' + o.Name}
+            className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-base px-3 py-1.5 rounded-full"
+          >
+            {o.Name}
+          </span>
+        ))}
        {selected.map((o) => (
          <span
            key={o.Name}
@@ -122,23 +122,23 @@ export async function getBeos(): Promise<BeoOption[]> {
  return call('LB_GET_BEOS');
 }

-export async function getObjekte(): Promise<ObjektOption[]> {
-  return call('LB_GET_OBJEKTE');
+export async function getObjekte(kategorie: 'stern' | 'sonne' = 'stern'): Promise<ObjektOption[]> {
+  return call('LB_GET_OBJEKTE', { kategorie });
 }

-export async function createObjekt(name: string): Promise<ObjektOption> {
-  return call('LB_CREATE_OBJEKT', { name });
+export async function createObjekt(name: string, kategorie: string = 'stern'): Promise<ObjektOption> {
+  return call('LB_CREATE_OBJEKT', { name, kategorie });
 }

-export async function updateObjekt(id: number, name: string): Promise<ObjektOption> {
-  return call('LB_UPDATE_OBJEKT', { id, name });
+export async function updateObjekt(id: number, name: string, kategorie?: string): Promise<ObjektOption> {
+  return call('LB_UPDATE_OBJEKT', { id, name, ...(kategorie ? { kategorie } : {}) });
 }

 export async function deleteObjekt(id: number): Promise<void> {
  await call('LB_DELETE_OBJEKT', { id });
 }

-export async function listObjekteAdmin(): Promise<{ ID: number; Name: string; LastUsed: string | null }[]> {
+export async function listObjekteAdmin(): Promise<{ ID: number; Name: string; LastUsed: string | null; Kategorie: string }[]> {
  return call('LB_LIST_OBJEKTE_ADMIN');
 }

@@ -1,6 +1,6 @@
 {
  "name": "logbuch",
-  "version": "1.10.0",
+  "version": "1.10.1",
  "private": true,
  "scripts": {
    "dev": "next dev",