From 873faa6c97ebb7d6c39484db94e348dbf9f1a758 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 15 May 2021 18:05:53 +0200 Subject: [PATCH] Dynamic WeatherIcon with weatherStatusCode mapping --- client/src/components/Home/Home.tsx | 8 +- client/src/components/Settings/Settings.tsx | 3 +- .../UI/Icons/WeatherIcon/IconMapping.ts | 369 ++++++++++++++++++ .../UI/Icons/WeatherIcon/WeatherIcon.tsx | 12 +- 4 files changed, 381 insertions(+), 11 deletions(-) create mode 100644 client/src/components/UI/Icons/WeatherIcon/IconMapping.ts diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 26e0c40..6a928b7 100644 --- a/client/src/components/Home/Home.tsx +++ b/client/src/components/Home/Home.tsx @@ -48,10 +48,10 @@ const Home = (props: ComponentProps): JSX.Element => { const now = new Date().getHours(); let msg: string; - if (now > 18) msg = 'Good evening!'; - else if (now > 12) msg = 'Good afternoon!'; - else if (now > 6) msg = 'Good morning!'; - else if (now > 0) msg = 'Good night!'; + if (now >= 18) msg = 'Good evening!'; + else if (now >= 12) msg = 'Good afternoon!'; + else if (now >= 6) msg = 'Good morning!'; + else if (now >= 0) msg = 'Good night!'; else msg = 'Hello!'; return msg; diff --git a/client/src/components/Settings/Settings.tsx b/client/src/components/Settings/Settings.tsx index 6f1f376..d6406a2 100644 --- a/client/src/components/Settings/Settings.tsx +++ b/client/src/components/Settings/Settings.tsx @@ -31,11 +31,10 @@ const Settings = (props: ComponentProps): JSX.Element => { activeClassName={classes.SettingsNavLinkActive} exact to='/settings/nothig'> - Nothing + Weather
- {/* */} diff --git a/client/src/components/UI/Icons/WeatherIcon/IconMapping.ts b/client/src/components/UI/Icons/WeatherIcon/IconMapping.ts new file mode 100644 index 0000000..c0b6257 --- /dev/null +++ b/client/src/components/UI/Icons/WeatherIcon/IconMapping.ts @@ -0,0 +1,369 @@ +import { IconKey } from 'skycons-ts'; + +export interface WeatherCondition { + code: number; + icon: { + day: IconKey; + night: IconKey; + } +} + +export enum TimeOfDay { + day, + night +} + +export class IconMapping { + private conditions: WeatherCondition[] = [ + { + code: 1000, + icon: { + day: 'clear-day', + night: 'clear-night' + } + }, + { + code: 1003, + icon: { + day: 'partly-cloudy-day', + night: 'partly-cloudy-night' + } + }, + { + code: 1006, + icon: { + day: 'cloudy', + night: 'cloudy' + } + }, + { + code: 1009, + icon: { + day: 'cloudy', + night: 'cloudy' + } + }, + { + code: 1030, + icon: { + day: 'fog', + night: 'fog' + } + }, + { + code: 1063, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1066, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1069, + icon: { + day: 'rain-snow-day', + night: 'rain-snow-night' + } + }, + { + code: 1072, + icon: { + day: 'sleet', + night: 'sleet' + } + }, + { + code: 1087, + icon: { + day: 'thunder-day', + night: 'thunder-night' + } + }, + { + code: 1114, + icon: { + day: 'snow', + night: 'snow' + } + }, + { + code: 1117, + icon: { + day: 'snow', + night: 'snow' + } + }, + { + code: 1135, + icon: { + day: 'fog', + night: 'fog' + } + }, + { + code: 1147, + icon: { + day: 'fog', + night: 'fog' + } + }, + { + code: 1150, + icon: { + day: 'rain', + night: 'rain' + } + }, + { + code: 1153, + icon: { + day: 'rain', + night: 'rain' + } + }, + { + code: 1168, + icon: { + day: 'sleet', + night: 'sleet' + } + }, + { + code: 1171, + icon: { + day: 'sleet', + night: 'sleet' + } + }, + { + code: 1180, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1183, + icon: { + day: 'rain', + night: 'rain' + } + }, + { + code: 1186, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1189, + icon: { + day: 'rain', + night: 'rain' + } + }, + { + code: 1192, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1195, + icon: { + day: 'rain', + night: 'rain' + } + }, + { + code: 1198, + icon: { + day: 'sleet', + night: 'sleet' + } + }, + { + code: 1201, + icon: { + day: 'sleet', + night: 'sleet' + } + }, + { + code: 1204, + icon: { + day: 'rain-snow', + night: 'rain-snow' + } + }, + { + code: 1207, + icon: { + day: 'rain-snow', + night: 'rain-snow' + } + }, + { + code: 1210, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1213, + icon: { + day: 'snow', + night: 'snow' + } + }, + { + code: 1216, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1219, + icon: { + day: 'snow', + night: 'snow' + } + }, + { + code: 1222, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1225, + icon: { + day: 'snow', + night: 'snow' + } + }, + { + code: 1237, + icon: { + day: 'hail', + night: 'hail' + } + }, + { + code: 1240, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1243, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1246, + icon: { + day: 'rain-day', + night: 'rain-night' + } + }, + { + code: 1249, + icon: { + day: 'rain-snow-day', + night: 'rain-snow-night' + } + }, + { + code: 1252, + icon: { + day: 'rain-snow-day', + night: 'rain-snow-night' + } + }, + { + code: 1255, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1258, + icon: { + day: 'snow-day', + night: 'snow-night' + } + }, + { + code: 1261, + icon: { + day: 'hail', + night: 'hail' + } + }, + { + code: 1264, + icon: { + day: 'hail', + night: 'hail' + } + }, + { + code: 1273, + icon: { + day: 'thunder-rain-day', + night: 'thunder-rain-night' + } + }, + { + code: 1276, + icon: { + day: 'thunder-rain', + night: 'thunder-rain' + } + }, + { + code: 1279, + icon: { + day: 'thunder-day', + night: 'thunder-night' + } + }, + { + code: 1282, + icon: { + day: 'thunder', + night: 'thunder' + } + } + ]; + + mapIcon(weatherStatusCode: number, timeOfDay: TimeOfDay): IconKey { + const mapping = this.conditions.find((condition: WeatherCondition) => condition.code === weatherStatusCode); + + if (mapping) { + if (timeOfDay === TimeOfDay.day) { + return mapping.icon.day; + } else if (timeOfDay === TimeOfDay.night) { + return mapping.icon.night; + } + } + + return 'clear-day'; + } +} \ No newline at end of file diff --git a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx index 7f9d484..6e25363 100644 --- a/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx +++ b/client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx @@ -1,19 +1,21 @@ import { useEffect } from 'react'; import { connect } from 'react-redux'; -import { IconKey, Skycons } from 'skycons-ts'; +import { Skycons } from 'skycons-ts'; import { GlobalState, Theme } from '../../../../interfaces'; +import { IconMapping, TimeOfDay } from './IconMapping'; interface ComponentProps { theme: Theme; - icon: IconKey + weatherStatusCode: number; } const WeatherIcon = (props: ComponentProps): JSX.Element => { - const randomId = `icon-${Math.floor(Math.random() * 1000)}`; + const icon = (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day); + useEffect(() => { const delay = setTimeout(() => { const skycons = new Skycons({'color': props.theme.colors.accent}); - skycons.add(`weather-icon-${randomId}`, props.icon); + skycons.add(`weather-icon`, icon); skycons.play(); }, 1); @@ -22,7 +24,7 @@ const WeatherIcon = (props: ComponentProps): JSX.Element => { } }, []); - return + return } const mapStateToProps = (state: GlobalState) => {