v1.2.1: Wetter als editierbare Eingabefelder

- 3 editierbare Felder (Temp, Feuchte, Luftdruck) statt read-only Anzeige
- Vorausgefüllt mit aktuellen API-Werten
- Feuchte und Luftdruck als Ganzzahl (kein Dezimal)
- Felder gleichmäßig verteilt (links/Mitte/rechts, je 1/3 Breite)
- Wetter-Überschrift entfernt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-02 08:54:41 +02:00
parent 07d2a13014
commit 1291f0d027
+36 -12
View File
@@ -66,7 +66,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]);
const [objekte, setObjekte] = useState<SelectedObjekt[]>([]);
const [bemerkungen, setBemerkungen] = useState('');
const [wetter, setWetter] = useState<Wetter | null>(null);
const [wetter, setWetter] = useState<Wetter>({ temp: 0, feuchte: 0, druck: 0 });
const [saving, setSaving] = useState(false);
const [error, setError] = useState('');
const [success, setSuccess] = useState(false);
@@ -78,7 +78,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
useEffect(() => {
fetch('/api/wetter')
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then(setWetter)
.then((w: Wetter) => setWetter({ temp: w.temp, feuchte: Math.round(w.feuchte), druck: Math.round(w.druck) }))
.catch(() => {});
}, []);
@@ -92,8 +92,8 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
if (editEntry.WetterTemp !== null) {
setWetter({
temp: editEntry.WetterTemp ?? 0,
feuchte: editEntry.WetterFeuchte ?? 0,
druck: editEntry.WetterDruck ?? 0,
feuchte: Math.round(editEntry.WetterFeuchte ?? 0),
druck: Math.round(editEntry.WetterDruck ?? 0),
});
}
} else {
@@ -291,16 +291,40 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
</div>
{/* Wetter */}
{wetter && (
<div>
<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>
<div>
<div className="grid grid-cols-3">
<div>
<label className="block text-xs text-gray-500 mb-0.5">Temperatur (°C)</label>
<input
type="number"
value={wetter.temp}
onChange={(e) => setWetter({ ...wetter, temp: parseFloat(e.target.value) || 0 })}
step="0.1"
className="w-1/3 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="flex flex-col items-center">
<label className="block text-xs text-gray-500 mb-0.5">Feuchte (%)</label>
<input
type="number"
value={wetter.feuchte}
onChange={(e) => setWetter({ ...wetter, feuchte: parseInt(e.target.value) || 0 })}
step="1"
className="w-1/3 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="flex flex-col items-end">
<label className="block text-xs text-gray-500 mb-0.5">Luftdruck (hPa)</label>
<input
type="number"
value={wetter.druck}
onChange={(e) => setWetter({ ...wetter, druck: parseInt(e.target.value) || 0 })}
step="1"
className="w-1/3 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>
)}
</div>
{error && (
<div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">