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
+35 -11
View File
@@ -66,7 +66,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]); const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]);
const [objekte, setObjekte] = useState<SelectedObjekt[]>([]); const [objekte, setObjekte] = useState<SelectedObjekt[]>([]);
const [bemerkungen, setBemerkungen] = useState(''); 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 [saving, setSaving] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
@@ -78,7 +78,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
useEffect(() => { useEffect(() => {
fetch('/api/wetter') fetch('/api/wetter')
.then((r) => { if (!r.ok) throw new Error(); return r.json(); }) .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(() => {}); .catch(() => {});
}, []); }, []);
@@ -92,8 +92,8 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
if (editEntry.WetterTemp !== null) { if (editEntry.WetterTemp !== null) {
setWetter({ setWetter({
temp: editEntry.WetterTemp ?? 0, temp: editEntry.WetterTemp ?? 0,
feuchte: editEntry.WetterFeuchte ?? 0, feuchte: Math.round(editEntry.WetterFeuchte ?? 0),
druck: editEntry.WetterDruck ?? 0, druck: Math.round(editEntry.WetterDruck ?? 0),
}); });
} }
} else { } else {
@@ -291,16 +291,40 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
</div> </div>
{/* Wetter */} {/* Wetter */}
{wetter && (
<div> <div>
<label className={labelCls}>Wetter (aktuell)</label> <div className="grid grid-cols-3">
<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"> <div>
<span>🌡 {wetter.temp} °C</span> <label className="block text-xs text-gray-500 mb-0.5">Temperatur (°C)</label>
<span>💧 {wetter.feuchte} %</span> <input
<span>🌬 {wetter.druck} hPa</span> 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>
</div> </div>
)}
{error && ( {error && (
<div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm"> <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">