From 5cf7708ab816f20b91c32f8a99157b780c394e02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Thu, 18 Nov 2021 15:14:53 +0100 Subject: [PATCH] Added humidity option to weather widget --- CHANGELOG.md | 1 + .../WeatherSettings/WeatherSettings.tsx | 27 ++++++++++++++++--- .../Widgets/WeatherWidget/WeatherWidget.tsx | 26 +++++++----------- client/src/interfaces/Config.ts | 4 +++ client/src/interfaces/Forms.ts | 3 +++ client/src/interfaces/Weather.ts | 5 +++- client/src/types/WeatherData.ts | 1 + client/src/types/index.ts | 1 + .../utility/templateObjects/configTemplate.ts | 2 ++ .../templateObjects/settingsTemplate.ts | 1 + .../templateObjects/weatherTemplate.ts | 17 ++++++++++++ 11 files changed, 68 insertions(+), 20 deletions(-) create mode 100644 client/src/types/WeatherData.ts create mode 100644 client/src/utility/templateObjects/weatherTemplate.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 940e9dc..efc1635 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ### v2.0.1 (TBA) +- Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136)) - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165)) - Fixed bug with custom icons not working with apps when "pin by default" was disabled diff --git a/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx b/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx index c587517..19ba7d4 100644 --- a/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx +++ b/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx @@ -11,7 +11,7 @@ import { State } from '../../../store/reducers'; import { ApiResponse, Weather, WeatherForm } from '../../../interfaces'; // UI -import { InputGroup, Button } from '../../UI'; +import { InputGroup, Button, SettingsHeadline } from '../../UI'; // Utils import { inputHandler, weatherSettingsTemplate } from '../../../utility'; @@ -84,6 +84,8 @@ export const WeatherSettings = (): JSX.Element => { return (
formSubmitHandler(e)}> + + {/* API KEY */} { + + {/* LAT */} - + { + {/* LONG */} - + { /> + + {/* TEMPERATURE */} + {/* WEATHER DATA */} + + + + + ); diff --git a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx index 7b84da8..1664eff 100644 --- a/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx +++ b/client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx @@ -13,22 +13,14 @@ import classes from './WeatherWidget.module.css'; // UI import { WeatherIcon } from '../../UI'; import { State } from '../../../store/reducers'; +import { weatherTemplate } from '../../../utility/templateObjects/weatherTemplate'; export const WeatherWidget = (): JSX.Element => { - const { loading, config } = useSelector((state: State) => state.config); + const { loading: configLoading, config } = useSelector( + (state: State) => state.config + ); - const [weather, setWeather] = useState({ - externalLastUpdate: '', - tempC: 0, - tempF: 0, - isDay: 1, - cloud: 0, - conditionText: '', - conditionCode: 1000, - id: -1, - createdAt: new Date(), - updatedAt: new Date(), - }); + const [weather, setWeather] = useState(weatherTemplate); const [isLoading, setIsLoading] = useState(true); // Initial request to get data @@ -65,8 +57,7 @@ export const WeatherWidget = (): JSX.Element => { return (
- {isLoading || - loading || + {configLoading || (config.WEATHER_API_KEY && weather.id > 0 && (
@@ -76,12 +67,15 @@ export const WeatherWidget = (): JSX.Element => { />
+ {/* TEMPERATURE */} {config.isCelsius ? ( {weather.tempC}°C ) : ( {weather.tempF}°F )} - {weather.cloud}% + + {/* ADDITIONAL DATA */} + {weather[config.weatherData]}%
))} diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts index b0e2908..f3d9334 100644 --- a/client/src/interfaces/Config.ts +++ b/client/src/interfaces/Config.ts @@ -1,3 +1,5 @@ +import { WeatherData } from '../types'; + export interface Config { WEATHER_API_KEY: string; lat: number; @@ -26,4 +28,6 @@ export interface Config { monthSchema: string; showTime: boolean; defaultTheme: string; + isKilometer: boolean; + weatherData: WeatherData; } diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts index 03f8ae7..878013b 100644 --- a/client/src/interfaces/Forms.ts +++ b/client/src/interfaces/Forms.ts @@ -1,8 +1,11 @@ +import { WeatherData } from '../types'; + export interface WeatherForm { WEATHER_API_KEY: string; lat: number; long: number; isCelsius: boolean; + weatherData: WeatherData; } export interface SearchForm { diff --git a/client/src/interfaces/Weather.ts b/client/src/interfaces/Weather.ts index c71ac48..143ebf8 100644 --- a/client/src/interfaces/Weather.ts +++ b/client/src/interfaces/Weather.ts @@ -8,4 +8,7 @@ export interface Weather extends Model { cloud: number; conditionText: string; conditionCode: number; -} \ No newline at end of file + humidity: number; + windK: number; + windM: number; +} diff --git a/client/src/types/WeatherData.ts b/client/src/types/WeatherData.ts new file mode 100644 index 0000000..81a5863 --- /dev/null +++ b/client/src/types/WeatherData.ts @@ -0,0 +1 @@ +export type WeatherData = 'cloud' | 'humidity'; diff --git a/client/src/types/index.ts b/client/src/types/index.ts index ad5b423..6ea0efd 100644 --- a/client/src/types/index.ts +++ b/client/src/types/index.ts @@ -1 +1,2 @@ export * from './ConfigFormData'; +export * from './WeatherData'; diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts index 5cb34e9..6906973 100644 --- a/client/src/utility/templateObjects/configTemplate.ts +++ b/client/src/utility/templateObjects/configTemplate.ts @@ -29,4 +29,6 @@ export const configTemplate: Config = { 'January;February;March;April;May;June;July;August;September;October;November;December', showTime: false, defaultTheme: 'tron', + isKilometer: true, + weatherData: 'cloud', }; diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts index 06afd9e..8752859 100644 --- a/client/src/utility/templateObjects/settingsTemplate.ts +++ b/client/src/utility/templateObjects/settingsTemplate.ts @@ -29,6 +29,7 @@ export const weatherSettingsTemplate: WeatherForm = { lat: 0, long: 0, isCelsius: true, + weatherData: 'cloud', }; export const searchSettingsTemplate: SearchForm = { diff --git a/client/src/utility/templateObjects/weatherTemplate.ts b/client/src/utility/templateObjects/weatherTemplate.ts new file mode 100644 index 0000000..1f8dfd6 --- /dev/null +++ b/client/src/utility/templateObjects/weatherTemplate.ts @@ -0,0 +1,17 @@ +import { Weather } from '../../interfaces'; + +export const weatherTemplate: Weather = { + externalLastUpdate: '', + tempC: 0, + tempF: 0, + isDay: 1, + cloud: 0, + conditionText: '', + conditionCode: 1000, + id: -1, + createdAt: new Date(), + updatedAt: new Date(), + humidity: 0, + windK: 0, + windM: 0, +};