mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add weather display checkboxes to left sidebar quick-settings

Browse Source 
When weather is enabled and a location is configured, the sidebar now
shows per-item checkboxes (Symbol, Temperatur, Gefühlt, Wind, Böen,
Regenw., Niederschlag, Luftfeuchte, UV) below the weather toggle.
Checkboxes are hidden when weather is toggled off. All changes go
through saveViewSetting("weatherDisplay", ..., true) — same path as
the settings modal — so they stay view-specific and persist correctly.

v1.83.2
This commit is contained in:
mARTin 2026-04-05 12:28:48 +02:00
parent 55c21ff6a6
commit 1a44f769a7
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.83.1",
"version": "1.83.2",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

35
src/components/WeeklyView.tsx
View File

@ -5569,14 +5569,47 @@ export default function WeeklyView() {
{effectiveShowProjectIcons ? <Eye size={16} /> : <EyeOff size={16} />}
</button>
</div>
{(profile.weatherLat || profile.weatherLon) && (
{(profile.weatherLat || profile.weatherLon) && (<>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{profile.language === "de" ? "Wetter" : "Weather"}</span>
<button onClick={() => saveViewSetting("weatherEnabled", !effectiveWeatherEnabled, true)} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
{effectiveWeatherEnabled ? <Eye size={16} /> : <EyeOff size={16} />}
</button>
</div>
{effectiveWeatherEnabled && (
<div style={{ display: "flex", flexDirection: "column", gap: "2px", paddingLeft: "4px" }}>
{([
{ key: "icon" as WeatherDisplayKey, label: profile.language === "de" ? "Symbol" : "Icon" },
{ key: "temp" as WeatherDisplayKey, label: profile.language === "de" ? "Temperatur" : "Temperature" },
{ key: "feelsLike" as WeatherDisplayKey, label: profile.language === "de" ? "Gefühlt" : "Feels like" },
{ key: "wind" as WeatherDisplayKey, label: profile.language === "de" ? "Wind" : "Wind" },
{ key: "gusts" as WeatherDisplayKey, label: profile.language === "de" ? "Böen" : "Gusts" },
{ key: "precipProb" as WeatherDisplayKey, label: profile.language === "de" ? "Regenw." : "Rain prob." },
{ key: "precip" as WeatherDisplayKey, label: profile.language === "de" ? "Niederschlag" : "Precip. (mm)" },
{ key: "humidity" as WeatherDisplayKey, label: profile.language === "de" ? "Luftfeuchte" : "Humidity" },
{ key: "uv" as WeatherDisplayKey, label: "UV" },
] as { key: WeatherDisplayKey; label: string }[]).map(({ key, label }) => {
const checked = effectiveWeatherDisplay.includes(key);
return (
<label key={key} style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "0.72rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>
<input
type="checkbox"
checked={checked}
onChange={() => {
const updated = checked
? effectiveWeatherDisplay.filter(k => k !== key)
: [...effectiveWeatherDisplay, key];
saveViewSetting("weatherDisplay", updated.length > 0 ? updated : ["icon"], true);
}}
style={{ width: "12px", height: "12px", accentColor: darkMode ? "#6366f1" : "#2563eb" }}
/>
{label}
</label>
);
})}
</div>
)}
</>)}
{/* Start on */}
<div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>