Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-27 14:59:37 +02:00
Code Issues Releases Wiki Activity

Created WeatherWidget

Browse source
This commit is contained in:
unknown 2021-05-19 18:26:57 +02:00
parent 38f5d3b66a
commit e170f56a03
11 changed files with 462 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Home/Home.module.css
View file

@ -19,29 +19,6 @@
margin-bottom: 2.5rem;
}
.WeatherWidget {
display: flex;
}
.WeatherDetails {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 16px;
color: var(--color-primary);
margin-left: 10px;
font-weight: 500;
}
.WeatherDetails span:first-child {
border-bottom: 1px solid var(--color-primary);
padding-bottom: 5px;
}
.WeatherDetails span:last-child {
padding-top: 5px;
}
.SettingsButton {
width: 35px;
height: 35px;

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

@ -5,7 +5,6 @@ import { GlobalState } from '../../interfaces/GlobalState';
import { getApps } from '../../store/actions';
import Icon from '../UI/Icons/Icon/Icon';
import WeatherIcon from '../UI/Icons/WeatherIcon/WeatherIcon';
import classes from './Home.module.css';
import { Container } from '../UI/Layout/Layout';
@ -13,6 +12,7 @@ import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
import AppGrid from '../Apps/AppGrid/AppGrid';
import { App } from '../../interfaces';
import Spinner from '../UI/Spinner/Spinner';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
interface ComponentProps {
getApps: Function;
@ -63,19 +63,11 @@ const Home = (props: ComponentProps): JSX.Element => {
<p>{dateAndTime()}</p>
<span className={classes.HeaderMain}>
<h1>{greeter()}</h1>
<div className={classes.WeatherWidget}>
<div className={classes.WeatherIcon}>
<WeatherIcon icon='clear-day' />
</div>
<div className={classes.WeatherDetails}>
<span>30°C</span>
<span>15°C</span>
</div>
</div>
<WeatherWidget />
</span>
</header>
<SectionHeadline title='Apps' link='/apps' />
<SectionHeadline title='Applications' link='/applications' />
{props.loading
? <Spinner />
: <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />

340
client/src/components/UI/Icons/WeatherIcon/WeatherMapping.json Normal file
View file

@ -0,0 +1,340 @@
{
"mapping": [
{
"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"
}
}
]
}

22
client/src/components/Widgets/WeatherWidget/WeatherWidget.module.css Normal file
View file

@ -0,0 +1,22 @@
.WeatherWidget {
display: flex;
}
.WeatherDetails {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 16px;
color: var(--color-primary);
margin-left: 10px;
font-weight: 500;
}
.WeatherDetails span:first-child {
border-bottom: 1px solid var(--color-primary);
padding-bottom: 5px;
}
.WeatherDetails span:last-child {
padding-top: 5px;
}

52
client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx Normal file
View file

@ -0,0 +1,52 @@
import { useState, useEffect, Fragment } from 'react';
import { Weather, ApiResponse } from '../../../interfaces';
import axios from 'axios';
import WeatherIcon from '../../UI/Icons/WeatherIcon/WeatherIcon';
import classes from './WeatherWidget.module.css';
const WeatherWidget = (): JSX.Element => {
const [weather, setWeather] = useState<Weather>({
externalLastUpdate: '',
tempC: 0,
tempF: 0,
isDay: 1,
conditionText: '',
conditionCode: 1000,
id: 0,
createdAt: new Date(),
updatedAt: new Date()
});
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
axios.get<ApiResponse<Weather[]>>('/api/weather')
.then(data => {
setWeather(data.data.data[0]);
setIsLoading(false);
})
.catch(err => console.log(err));
}, []);
return (
<div className={classes.WeatherWidget}>
{isLoading
? 'loading'
: (
<Fragment>
<div className={classes.WeatherIcon}>
<WeatherIcon weatherStatusCode={weather.conditionCode} />
</div>
<div className={classes.WeatherDetails}>
<span>{weather.tempC}°C</span>
<span>{weather.conditionCode}</span>
</div>
</Fragment>
)
}
</div>
)
}
export default WeatherWidget;