Apply Anpassung_1: art-specific object logic, responsive design, remove Kuppel field
- Sonnenführung: fixes Sonne as sole object, no selector shown - BEO-Sitzung / Technischer Dienst: object field hidden, DB stays empty - Kuppel field removed from form (determined by active tab) - Responsive layout: single-column on mobile, side-by-side on sm+ - Touch-friendly input sizes (py-3, text-base) - Compact header and tab labels on small screens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -43,17 +43,22 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
}
|
||||
|
||||
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]">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold">Logbuch — Sternwarte Welzheim</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">
|
||||
<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]">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start sm:items-center mb-4 gap-2">
|
||||
<h1 className="text-xl sm:text-3xl font-bold leading-tight">
|
||||
Logbuch<span className="hidden sm:inline"> — Sternwarte Welzheim</span>
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-xs sm:text-sm text-gray-600 hidden sm:inline">
|
||||
{kuerzel} — {beoName}
|
||||
</span>
|
||||
<span className="text-xs text-gray-600 sm:hidden">{kuerzel}</span>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
|
||||
className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
@@ -61,24 +66,25 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Kuppel-Tabs */}
|
||||
<div className="flex gap-1 mb-4 border-b-2 border-gray-300">
|
||||
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
|
||||
{KUPPELN.map((k) => (
|
||||
<button
|
||||
key={k}
|
||||
onClick={() => { setActiveKuppel(k); setEditEntry(null); }}
|
||||
className={`px-5 py-2 text-sm font-medium rounded-t-lg transition-colors ${
|
||||
className={`px-3 sm:px-5 py-2 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${
|
||||
activeKuppel === k
|
||||
? 'bg-[#85B7D7] text-black border-2 border-b-0 border-gray-300'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
Kuppel {k}
|
||||
<span className="sm:hidden">{k}</span>
|
||||
<span className="hidden sm:inline">Kuppel {k}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Eingabe/Liste-Tabs */}
|
||||
<div className="flex gap-1 mb-6 border-b border-gray-200">
|
||||
<div className="flex gap-1 mb-5 border-b border-gray-200">
|
||||
{(['eingabe', 'liste'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
@@ -119,14 +125,14 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
/>
|
||||
)}
|
||||
|
||||
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
|
||||
<footer className="mt-8 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
|
||||
<div>
|
||||
<a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
|
||||
mailto:rxf@gmx.de
|
||||
rxf@gmx.de
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
Version {version} — {buildDate}
|
||||
v{version} — {buildDate}
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@@ -1,34 +1,33 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { query } from '@/lib/db';
|
||||
import { query, getPool } from '@/lib/db';
|
||||
import { getSession } from '@/lib/session';
|
||||
import type { SelectedObjekt } from '@/types/logbuch';
|
||||
|
||||
const LIST_SQL =
|
||||
'SELECT' +
|
||||
' l.ID, l.Kuppel, l.ArtFuehrung,' +
|
||||
" DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn," +
|
||||
" DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende," +
|
||||
' l.Besucher, l.Bemerkungen,' +
|
||||
' l.WetterTemp, l.WetterFeuchte, l.WetterDruck,' +
|
||||
' l.created_by, l.created_at,' +
|
||||
" GROUP_CONCAT(DISTINCT bk.kuerzel ORDER BY bk.kuerzel SEPARATOR ', ') AS BEOs," +
|
||||
" GROUP_CONCAT(DISTINCT lo.ObjektName ORDER BY lo.ObjektName SEPARATOR ', ') AS Objekte" +
|
||||
' FROM logbuch l' +
|
||||
' LEFT JOIN logbuch_beos lb ON lb.LogbuchID = l.ID' +
|
||||
' LEFT JOIN (SELECT id, `kürzel` AS kuerzel FROM beos) bk ON bk.id = lb.BeoID' +
|
||||
' LEFT JOIN logbuch_objekte lo ON lo.LogbuchID = l.ID' +
|
||||
' WHERE l.Kuppel = ?' +
|
||||
' GROUP BY l.ID' +
|
||||
' ORDER BY l.Beginn DESC';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const kuppel = searchParams.get('kuppel') || 'West';
|
||||
const limit = Math.min(parseInt(searchParams.get('limit') || '20'), 100);
|
||||
|
||||
try {
|
||||
const rows = await query(
|
||||
`SELECT
|
||||
l.ID, l.Kuppel, l.ArtFuehrung,
|
||||
DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn,
|
||||
DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende,
|
||||
l.Besucher, l.Bemerkungen,
|
||||
l.WetterTemp, l.WetterFeuchte, l.WetterDruck,
|
||||
l.created_by, l.created_at,
|
||||
GROUP_CONCAT(DISTINCT b.Kuerzel ORDER BY b.Kuerzel SEPARATOR ', ') AS BEOs,
|
||||
GROUP_CONCAT(DISTINCT lo.ObjektName ORDER BY lo.ObjektName SEPARATOR ', ') AS Objekte
|
||||
FROM logbuch l
|
||||
LEFT JOIN logbuch_beos lb ON lb.LogbuchID = l.ID
|
||||
LEFT JOIN beos b ON b.ID = lb.BeoID
|
||||
LEFT JOIN logbuch_objekte lo ON lo.LogbuchID = l.ID
|
||||
WHERE l.Kuppel = ?
|
||||
GROUP BY l.ID
|
||||
ORDER BY l.Beginn DESC
|
||||
LIMIT ?`,
|
||||
[kuppel, limit]
|
||||
);
|
||||
const rows = await query(LIST_SQL + ` LIMIT ${limit}`, [kuppel]);
|
||||
return NextResponse.json(rows);
|
||||
} catch (error) {
|
||||
console.error('GET /api/logbuch:', error);
|
||||
@@ -44,9 +43,10 @@ export async function POST(request: NextRequest) {
|
||||
const body = await request.json();
|
||||
const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
|
||||
|
||||
const [result] = await (await import('@/lib/db')).getPool().execute(
|
||||
`INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
const pool = getPool();
|
||||
const [result] = await pool.execute(
|
||||
'INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)' +
|
||||
' VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
[
|
||||
Kuppel, ArtFuehrung, Beginn, Ende,
|
||||
Besucher ?? 0,
|
||||
@@ -71,9 +71,7 @@ export async function POST(request: NextRequest) {
|
||||
if (existing[0]) {
|
||||
objektId = existing[0].ID;
|
||||
} else {
|
||||
const [ins] = await (await import('@/lib/db')).getPool().execute(
|
||||
'INSERT INTO objekte (Name) VALUES (?)', [obj.Name]
|
||||
) as [{ insertId: number }, unknown];
|
||||
const [ins] = await pool.execute('INSERT INTO objekte (Name) VALUES (?)', [obj.Name]) as [{ insertId: number }, unknown];
|
||||
objektId = ins.insertId;
|
||||
}
|
||||
}
|
||||
|
||||
10
claude/Anpassung_1.md
Normal file
10
claude/Anpassung_1.md
Normal file
@@ -0,0 +1,10 @@
|
||||
### Anpassung für die einzelnen Führungen
|
||||
Bei den unterschiedlichen Führungen solle einige Einträge wegfallen:
|
||||
* bei Sonnenführung immer die Sonne als Objekt vorgeben, keine Auswahl von anderen Objekten zulassen
|
||||
* bei BEO-Sitzung und bei Technischer Dienst kein Objekte-Feld vorsehen (in der DB bleibt das Feld leer)
|
||||
|
||||
### Responsives Design
|
||||
Passe das Design des Eingabefensters so an, dass es auf eimem Smartphone-Bildschirm gut zu bedienen ist
|
||||
|
||||
### Kuppel
|
||||
Kein Feld für die Kuppel in der Eingabe
|
||||
@@ -24,6 +24,9 @@ function nowLocalDatetime(): string {
|
||||
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
|
||||
}
|
||||
|
||||
const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEO-Sitzung', 'Technischer Dienst'];
|
||||
const SONNE_ART: ArtFuehrung = 'Sonnenführung';
|
||||
|
||||
export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved }: Props) {
|
||||
const [artFuehrung, setArtFuehrung] = useState<ArtFuehrung>('Reguläre Führung');
|
||||
const [beginn, setBeginn] = useState(nowLocalDatetime());
|
||||
@@ -37,6 +40,9 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const showObjekte = !NO_OBJEKTE_ARTEN.includes(artFuehrung);
|
||||
const isSonne = artFuehrung === SONNE_ART;
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/wetter')
|
||||
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
|
||||
@@ -94,6 +100,15 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
}
|
||||
}, [editEntry]);
|
||||
|
||||
// Objekte-Vorauswahl je nach Art der Führung
|
||||
useEffect(() => {
|
||||
if (artFuehrung === SONNE_ART) {
|
||||
setObjekte([{ ID: null, Name: 'Sonne' }]);
|
||||
} else if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
|
||||
setObjekte([]);
|
||||
}
|
||||
}, [artFuehrung]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
@@ -107,7 +122,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
Ende: ende,
|
||||
Besucher: besucher,
|
||||
beoIds: beos.map((b) => b.ID),
|
||||
objekte,
|
||||
objekte: showObjekte ? objekte : [],
|
||||
Bemerkungen: bemerkungen,
|
||||
Wetter: wetter,
|
||||
};
|
||||
@@ -139,15 +154,19 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
}
|
||||
}
|
||||
|
||||
const inputCls = 'w-full px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none';
|
||||
const labelCls = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 max-w-2xl">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-5 max-w-2xl">
|
||||
|
||||
{/* Art der Führung — volle Breite */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Art der Führung</label>
|
||||
<label className={labelCls}>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"
|
||||
className={inputCls}
|
||||
>
|
||||
{ARTEN.map((a) => (
|
||||
<option key={a} value={a}>{a}</option>
|
||||
@@ -155,64 +174,69 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Beginn / Ende — nebeneinander auf Desktop, untereinander auf Mobile */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<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>
|
||||
<label className={labelCls}>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"
|
||||
className={inputCls}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Ende</label>
|
||||
<label className={labelCls}>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"
|
||||
className={inputCls}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Besucher */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Anzahl Besucher</label>
|
||||
<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-sm focus:border-blue-500 focus:outline-none"
|
||||
className="w-32 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* BEOs */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">BEOs</label>
|
||||
<label className={labelCls}>BEOs</label>
|
||||
<BeoSelector selected={beos} onChange={setBeos} />
|
||||
</div>
|
||||
|
||||
{/* Objekte — abhängig von der Art der Führung */}
|
||||
{showObjekte && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Beobachtete Objekte</label>
|
||||
<ObjektSelector selected={objekte} onChange={setObjekte} />
|
||||
<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} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bemerkungen */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label className={labelCls}>
|
||||
Bemerkungen
|
||||
<span className="ml-2 text-gray-400 font-normal text-xs">({bemerkungen.length}/500)</span>
|
||||
</label>
|
||||
@@ -220,15 +244,16 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
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"
|
||||
className="w-full px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none resize-y"
|
||||
placeholder="Freier Text (max. 500 Zeichen)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Wetter */}
|
||||
{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">
|
||||
<label className={labelCls}>Wetter (aktuell)</label>
|
||||
<div className="flex flex-wrap 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>
|
||||
@@ -247,11 +272,12 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{/* Buttons — volle Breite auf Mobile */}
|
||||
<div className="flex flex-col sm:flex-row 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"
|
||||
className="w-full sm:w-auto px-6 py-3 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-base"
|
||||
>
|
||||
{saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'}
|
||||
</button>
|
||||
@@ -259,7 +285,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
<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"
|
||||
className="w-full sm:w-auto px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-base"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user