From 38546ef07440bae99821238479717fdbc4e82de1 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Mon, 26 Apr 2021 19:10:00 +0100
Subject: [PATCH] feat: wind direction display on weather

---
 src/components/widgets/weather/Weather.jsx    | 16 ++++++-----
 .../widgets/weather/WeatherIcon.jsx           |  2 --
 .../widgets/weather/WindDirectionIcon.jsx     | 27 +++++++++++++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 src/components/widgets/weather/WindDirectionIcon.jsx

diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index eba5f385..aabba022 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -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>
diff --git a/src/components/widgets/weather/WeatherIcon.jsx b/src/components/widgets/weather/WeatherIcon.jsx
index fe9bb837..96711f9a 100644
--- a/src/components/widgets/weather/WeatherIcon.jsx
+++ b/src/components/widgets/weather/WeatherIcon.jsx
@@ -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;
 
diff --git a/src/components/widgets/weather/WindDirectionIcon.jsx b/src/components/widgets/weather/WindDirectionIcon.jsx
new file mode 100644
index 00000000..855b3bf4
--- /dev/null
+++ b/src/components/widgets/weather/WindDirectionIcon.jsx
@@ -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;
+}
\ No newline at end of file