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

This commit is contained in:
David Ralph
2021-04-30 18:19:36 +01:00
parent 4b18ea74a7
commit 1715e7d089
11 changed files with 50 additions and 9 deletions

View File

@@ -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'/>

View File

@@ -3,8 +3,8 @@ import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import WeatherIcon from './WeatherIcon';
//import WindDirectionIcon from './WindDirectionIcon';
import { WiHumidity, WiWindy, WiBarometer } from 'weather-icons-react';
import WindDirectionIcon from './WindDirectionIcon';
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,
@@ -144,14 +152,16 @@ export default class Weather extends React.PureComponent {
return <><br/>{this.state.weather.temp_min + this.state.temp_text} {this.state.weather.temp_max + this.state.temp_text}</>;
}
};
return (
<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}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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