beenull/flame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Dynamic WeatherIcon with weatherStatusCode mapping

Browse source
This commit is contained in:
unknown 2021-05-15 18:05:53 +02:00
parent e293325da7
commit 873faa6c97
4 changed files with 381 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Home/Home.tsx
View file

@ -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;

3
client/src/components/Settings/Settings.tsx
View file

@ -31,11 +31,10 @@ const Settings = (props: ComponentProps): JSX.Element => {
activeClassName={classes.SettingsNavLinkActive}
exact
to='/settings/nothig'>
Nothing
Weather
</NavLink>
</nav>
<section className={classes.SettingsContent}>
{/* <Themer /> */}
<Switch>
<Route exact path='/settings' component={Themer} />
</Switch>

369
client/src/components/UI/Icons/WeatherIcon/IconMapping.ts Normal file
View file

@ -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';
}
}

12
client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx
View file

@ -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 <canvas id={`weather-icon-${randomId}`} width='50' height='50'></canvas>
return <canvas id={`weather-icon`} width='50' height='50'></canvas>
}
const mapStateToProps = (state: GlobalState) => {