mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-13 04:02:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: wind direction display on weather

Browse Source
This commit is contained in:
David Ralph
2021-04-26 19:10:00 +01:00
parent 57cc5de60a
commit 38546ef074
3 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/widgets/weather/Weather.jsx
View File

@@ -3,7 +3,8 @@ import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import WeatherIcon from './WeatherIcon';
import { WiHumidity, WiWindy } from 'weather-icons-react';
import WindDirectionIcon from './WindDirectionIcon';
import { WiHumidity, WiWindy, WiBarometer } from 'weather-icons-react';
import './weather.scss';
@@ -19,7 +20,8 @@ export default class Weather extends React.PureComponent {
temp_min: '',
temp_max: '',
humidity: '',
windspeed: '',
wind_speed: '',
wind_degrees: '',
pressure: ''
}
};
@@ -37,7 +39,8 @@ export default class Weather extends React.PureComponent {
}
],
wind: {
speed: this.state.weather.windspeed
speed: this.state.weather.wind_speed,
deg: this.state.weather.wind_degrees
},
main: {
temp: this.state.weather.original_temp,
@@ -88,7 +91,8 @@ export default class Weather extends React.PureComponent {
temp_min: Math.round(temp_min),
temp_max: Math.round(temp_max),
humidity: data.main.humidity,
windspeed: data.wind.speed,
wind_speed: data.wind.speed,
wind_degrees: data.wind.deg,
pressure: data.main.pressure,
original_temp: data.main.temp,
original_temp_min: data.main.temp_min,
@@ -147,8 +151,8 @@ export default class Weather extends React.PureComponent {
<span>{this.state.weather.temp + this.state.temp_text}</span>
<span className='minmax'>{minmax()}</span>
{enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
{enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span> : null}
{enabled('atmosphericpressure') ? <span className='loc'><br/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
{enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span><WindDirectionIcon degrees={this.state.weather.wind_degrees}/></span> : null}
{enabled('atmosphericpressure') ? <span className='loc'><br/><WiBarometer/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
<br/>
{enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}
</div>

2
src/components/widgets/weather/WeatherIcon.jsx
View File

@@ -1,8 +1,6 @@
import React from 'react';
import { WiDaySunny, WiNightClear, WiDayCloudy, WiNightCloudy, WiCloud, WiCloudy, WiDayShowers, WiNightShowers, WiRain, WiThunderstorm, WiSnow, WiFog } from 'weather-icons-react';
import './weather.scss';
export default function WeatherIcon(props) {
let icon;

27
src/components/widgets/weather/WindDirectionIcon.jsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirectionLeft, WiDirectionRight, WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp } from 'weather-icons-react';
import './weather.scss';
export default function WeatherIcon(props) {
let icon;
const getDirection = (angle) => {
const directions = ['North', 'North-West', 'West', 'South-West', 'South', 'South-East', 'East', 'North-East'];
return directions[Math.round(((angle %= 360) < 0 ? angle + 360 : angle) / 45) % 8];
}
switch (getDirection(props.degrees)) {
case 'North': icon = <WiDirectionUp/>; break;
case 'North-West': icon = <WiDirectionUpLeft/>; break;
case 'West': icon = <WiDirectionLeft/>; break;
case 'South-West': icon = <WiDirectionDownLeft/>; break;
case 'South': icon = <WiDirectionDown/>; break;
case 'South-East': icon = <WiDirectionDownRight/>; break;
case 'East': icon = <WiDirectionRight/>; break;
case 'North-East': icon = <WiDirectionUpRight/>; break;
default: icon = null; break;
}
return icon;
}