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:
+36
-12
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user