feat: Auto location for weather, option to show text for weather, wind direction option etc

src/components/modals/main/settings/sections/Weather.jsx

@@ -26,6 +26,18 @@ export default class TimeSettings extends React.PureComponent {
     localStorage.setItem('showReminder', true);
   }
 
+  getAuto() {
+    navigator.geolocation.getCurrentPosition(async (position) => {
+      const data = await (await fetch(`${window.constants.WEATHER_URL}/location?getAuto=true&lat=${position.coords.latitude}&lon=${position.coords.longitude}`)).json();
+      this.setState({
+        location: data[0].name
+      });
+    });
+
+    document.querySelector('.reminder-info').style.display = 'block';
+    localStorage.setItem('showReminder', true);
+  }
+
   render() {
     const language = window.language.modals.main.settings.sections.weather;
 
@@ -49,15 +61,17 @@ export default class TimeSettings extends React.PureComponent {
         <h2>{language.title}</h2>
         <Switch name='weatherEnabled' text={this.language.enabled} category='widgets'/>
         <ul>
-          <p>{language.location}</p>
+          <p>{language.location} <span className='modalLink' onClick={() => this.getAuto()}>{language.auto}</span></p>
           <input type='text' value={this.state.location} onChange={(e) => this.changeLocation(e)}></input>
         </ul>
         <br/>
         <Radio name='tempformat' title={language.temp_format.title} options={tempFormat} category='weather'/>
         <h3>{language.extra_info.title}</h3>
         <Checkbox name='showlocation' text={language.extra_info.show_location} category='weather'/>
+        <Checkbox name='showtext' text={language.extra_info.show_text} category='weather'/>
         <Checkbox name='humidity' text={language.extra_info.humidity} category='weather'/>
         <Checkbox name='windspeed' text={language.extra_info.wind_speed} category='weather'/>
+        <Checkbox name='windDirection' text={language.extra_info.wind_direction} category='weather'/>
         <Checkbox name='mintemp' text={language.extra_info.min_temp} category='weather'/>
         <Checkbox name='maxtemp' text={language.extra_info.max_temp} category='weather'/>
         <Checkbox name='atmosphericpressure' text={language.extra_info.atmospheric_pressure} category='weather'/>

src/components/widgets/weather/Weather.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import WeatherIcon from './WeatherIcon';
-//import WindDirectionIcon from './WindDirectionIcon';
+import WindDirectionIcon from './WindDirectionIcon';
-import { WiHumidity, WiWindy, WiBarometer } from 'weather-icons-react';
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 
 import './weather.scss';
 
@@ -17,11 +17,13 @@ export default class Weather extends React.PureComponent {
       temp_text: '',
       weather: {
         temp: '',
+        description: '',
         temp_min: '',
         temp_max: '',
         humidity: '',
         wind_speed: '',
         wind_degrees: '',
+        cloudiness: '',
         pressure: ''
       }
     };
@@ -35,19 +37,23 @@ export default class Weather extends React.PureComponent {
     let data = {
       weather: [
         {
+          description: this.state.weather.description,
           icon: this.state.icon
         }
       ],
-      wind: {
-        speed: this.state.weather.wind_speed,
-        deg: this.state.weather.wind_degrees
-      },
       main: {
         temp: this.state.weather.original_temp,
         temp_min: this.state.weather.original_temp_min,
         temp_max: this.state.weather.original_temp_max,
         humidity: this.state.weather.humidity,
         pressure: this.state.weather.pressure
+      },
+      wind: {
+        speed: this.state.weather.wind_speed,
+        deg: this.state.weather.wind_degrees
+      },
+      clouds: {
+        all: this.state.weather.cloudiness
       }
     };
 
@@ -88,11 +94,13 @@ export default class Weather extends React.PureComponent {
       temp_text: temp_text,
       weather: {
         temp: Math.round(temp),
+        description: data.weather[0].description,
         temp_min: Math.round(temp_min),
         temp_max: Math.round(temp_max),
         humidity: data.main.humidity,
         wind_speed: data.wind.speed,
         wind_degrees: data.wind.deg,
+        cloudiness: data.clouds.all,
         pressure: data.main.pressure,
         original_temp: data.main.temp,
         original_temp_min: data.main.temp_min,
@@ -149,9 +157,11 @@ export default class Weather extends React.PureComponent {
       <div className='weather'>
         <WeatherIcon name={this.state.icon}/>
         <span>{this.state.weather.temp + this.state.temp_text}</span>
+        <span className='loc' style={{ 'textTransform': 'capitalize' }}><br/>{this.state.weather.description}</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.wind_speed}<span className='minmax'> m/s</span>{/*<WindDirectionIcon degrees={this.state.weather.wind_degrees}/>*/}</span> : null}
+        {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}
+        {enabled('cloudiness') ? <span className='loc'><br/><WiCloud/>{this.state.weather.cloudiness}%</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}

src/translations/de_DE.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Zusätzliche Informationen",
               "show_location": "Standort anzeigen",
+              "show_text": "Show Text",
               "humidity": "Luftfeuchtigkeit",
               "wind_speed": "Windgeschwindigkeit",
+              "wind_direction": "Wind direction",
               "min_temp": "Mindesttemperatur",
               "max_temp": "Höchsttemperatur",
               "atmospheric_pressure": "Atmosphärischer Druck"

src/translations/en_GB.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Extra information",
               "show_location": "Show Location",
+              "show_text": "Show Text",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"

src/translations/en_US.json

@@ -181,6 +181,7 @@
               "show_location": "Show Location",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"

src/translations/es.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Información extra",
               "show_location": "Mostrar ubicación",
+              "show_text": "Show Text",
               "humidity": "Humedad",
               "wind_speed": "Velocidad del viento",
+              "wind_direction": "Wind direction",
               "min_temp": "Temperatura mínima",
               "max_temp": "Temperatura máxima",
               "atmospheric_pressure": "Presión atmosférica"

src/translations/fr.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Informations supplémentaires",
               "show_location": "Afficher l'emplacement",
+              "show_text": "Show Text",
               "humidity": "Humidité",
               "wind_speed": "Vitesse du vent",
+              "wind_direction": "Wind direction",
               "min_temp": "Température minimale",
               "max_temp": "Température maximale",
               "atmospheric_pressure": "Pression atmosphérique"

src/translations/nl.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Extra information",
               "show_location": "Show Location",
+              "show_text": "Show Text",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"

src/translations/no.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Extra information",
               "show_location": "Show Location",
+              "show_text": "Show Text",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"

src/translations/ru.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Extra information",
               "show_location": "Show Location",
+              "show_text": "Show Text",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"

src/translations/zh_CN.json

@@ -179,8 +179,10 @@
             "extra_info": {
               "title": "Extra information",
               "show_location": "Show Location",
+              "show_text": "Show Text",
               "humidity": "Humidity",
               "wind_speed": "Wind speed",
+              "wind_direction": "Wind direction",
               "min_temp": "Minimum temperature",
               "max_temp": "Maximum temperature",
               "atmospheric_pressure": "Atmospheric pressure"