2022-04-11 21:57:07 +00:00
|
|
|
import variables from 'modules/variables';
|
|
|
|
import { PureComponent } from 'react';
|
2021-04-13 09:51:36 +00:00
|
|
|
|
2022-04-11 21:57:07 +00:00
|
|
|
import WeatherIcon from './WeatherIcon';
|
2022-10-30 16:43:08 +00:00
|
|
|
import Expanded from './Expanded';
|
2021-08-15 21:28:37 +00:00
|
|
|
|
2022-04-11 21:57:07 +00:00
|
|
|
import EventBus from 'modules/helpers/eventbus';
|
2021-04-09 21:28:15 +00:00
|
|
|
|
2022-04-11 21:57:07 +00:00
|
|
|
import './weather.scss';
|
2021-04-09 13:44:18 +00:00
|
|
|
|
2021-08-14 19:10:48 +00:00
|
|
|
export default class Weather extends PureComponent {
|
2021-04-09 13:44:18 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
2022-04-11 21:57:07 +00:00
|
|
|
location: localStorage.getItem('location') || 'London',
|
2022-10-30 16:43:08 +00:00
|
|
|
done: false,
|
2021-04-09 13:44:18 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
async getWeather() {
|
2022-04-11 21:57:07 +00:00
|
|
|
const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
|
|
|
|
document.querySelector('.weather').style.fontSize = zoomWeather;
|
2021-06-30 14:25:34 +00:00
|
|
|
|
2022-10-30 16:43:08 +00:00
|
|
|
if (this.state.done === true) {
|
|
|
|
return;
|
2021-04-13 09:51:36 +00:00
|
|
|
}
|
2021-04-09 21:28:15 +00:00
|
|
|
|
2022-10-30 16:43:08 +00:00
|
|
|
const data = await (
|
|
|
|
await fetch(
|
|
|
|
variables.constants.PROXY_URL +
|
|
|
|
`/weather/current?city=${this.state.location}&lang=${variables.languagecode}`,
|
|
|
|
)
|
|
|
|
).json();
|
|
|
|
|
2022-04-11 21:57:07 +00:00
|
|
|
if (data.cod === '404') {
|
2021-04-15 16:15:57 +00:00
|
|
|
return this.setState({
|
2022-08-26 10:44:24 +00:00
|
|
|
location: variables.getMessage('widgets.weather.not_found'),
|
2021-04-15 16:15:57 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-07-23 09:55:20 +00:00
|
|
|
let temp = data.main.temp;
|
2022-04-08 13:48:36 +00:00
|
|
|
let temp_min = data.main.temp_min;
|
2021-07-23 09:55:20 +00:00
|
|
|
let temp_max = data.main.temp_max;
|
2022-04-08 13:48:36 +00:00
|
|
|
let temp_feels_like = data.main.temp_feels_like;
|
2022-04-11 21:57:07 +00:00
|
|
|
let temp_text = 'K';
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2022-10-30 16:43:08 +00:00
|
|
|
if (localStorage.getItem('tempformat') === 'celsius') {
|
|
|
|
temp -= 273.15;
|
|
|
|
temp_min -= 273.15;
|
|
|
|
temp_max -= 273.15;
|
|
|
|
temp_feels_like -= 273.15;
|
|
|
|
temp_text = '°C';
|
|
|
|
} else {
|
|
|
|
temp = (temp - 273.15) * 1.8 + 32;
|
|
|
|
temp_min = (temp_min - 273.15) * 1.8 + 32;
|
|
|
|
temp_max = (temp_max - 273.15) * 1.8 + 32;
|
|
|
|
temp_feels_like = (temp_feels_like - 273.15) * 1.8 + 32;
|
|
|
|
temp_text = '°F';
|
2021-04-09 21:28:15 +00:00
|
|
|
}
|
|
|
|
|
2021-04-09 13:44:18 +00:00
|
|
|
this.setState({
|
|
|
|
icon: data.weather[0].icon,
|
2021-08-27 18:42:40 +00:00
|
|
|
temp_text,
|
2021-04-09 13:44:18 +00:00
|
|
|
weather: {
|
2021-07-23 09:55:20 +00:00
|
|
|
temp: Math.round(temp),
|
2021-04-30 17:19:36 +00:00
|
|
|
description: data.weather[0].description,
|
2021-07-23 09:55:20 +00:00
|
|
|
temp_min: Math.round(temp_min),
|
|
|
|
temp_max: Math.round(temp_max),
|
2022-04-08 13:48:36 +00:00
|
|
|
temp_feels_like: Math.round(temp_feels_like),
|
2021-04-09 21:28:15 +00:00
|
|
|
humidity: data.main.humidity,
|
2021-04-26 18:10:00 +00:00
|
|
|
wind_speed: data.wind.speed,
|
|
|
|
wind_degrees: data.wind.deg,
|
2021-04-30 17:19:36 +00:00
|
|
|
cloudiness: data.clouds.all,
|
2021-05-01 21:27:44 +00:00
|
|
|
visibility: data.visibility,
|
2022-11-06 11:59:59 +00:00
|
|
|
pressure: data.main.pressure,
|
2022-04-08 13:48:36 +00:00
|
|
|
},
|
2022-11-06 11:59:59 +00:00
|
|
|
done: true,
|
2021-04-09 13:44:18 +00:00
|
|
|
});
|
2021-05-07 12:27:28 +00:00
|
|
|
|
2022-11-03 18:10:13 +00:00
|
|
|
document.querySelector('.tweather svg').style.fontSize = zoomWeather;
|
2021-04-09 13:44:18 +00:00
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2021-04-09 13:44:18 +00:00
|
|
|
componentDidMount() {
|
2022-04-11 21:57:07 +00:00
|
|
|
EventBus.on('refresh', (data) => {
|
|
|
|
if (data === 'weather') {
|
2021-04-13 09:51:36 +00:00
|
|
|
this.getWeather();
|
|
|
|
}
|
|
|
|
});
|
2021-08-15 19:33:06 +00:00
|
|
|
|
2021-04-09 13:44:18 +00:00
|
|
|
this.getWeather();
|
|
|
|
}
|
|
|
|
|
2021-04-14 15:18:01 +00:00
|
|
|
componentWillUnmount() {
|
2022-04-11 21:57:07 +00:00
|
|
|
EventBus.off('refresh');
|
2021-04-14 15:18:01 +00:00
|
|
|
}
|
|
|
|
|
2021-04-09 13:44:18 +00:00
|
|
|
render() {
|
2022-10-30 16:43:08 +00:00
|
|
|
if (this.state.done === false) {
|
|
|
|
return <div className="weather"></div>;
|
|
|
|
}
|
|
|
|
|
2022-08-31 17:45:42 +00:00
|
|
|
const weatherType = localStorage.getItem('weatherType') || 1;
|
2021-04-10 12:05:56 +00:00
|
|
|
|
2022-08-26 09:45:32 +00:00
|
|
|
if (this.state.location === variables.getMessage('weather.not_found')) {
|
2022-04-08 13:48:36 +00:00
|
|
|
return (
|
|
|
|
<div className="weather">
|
|
|
|
<span className="loc">{this.state.location}</span>
|
|
|
|
</div>
|
|
|
|
);
|
2021-04-16 11:26:56 +00:00
|
|
|
}
|
2022-11-06 11:59:59 +00:00
|
|
|
|
2022-05-24 21:19:47 +00:00
|
|
|
return (
|
|
|
|
<div className="weather">
|
2022-08-31 12:31:49 +00:00
|
|
|
<div className="top-weather">
|
|
|
|
{weatherType >= 1 && (
|
|
|
|
<div>
|
|
|
|
<WeatherIcon name={this.state.icon} />
|
|
|
|
<span>{this.state.weather.temp + this.state.temp_text}</span>
|
2022-05-24 21:19:47 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2022-08-31 12:31:49 +00:00
|
|
|
{weatherType >= 2 && (
|
|
|
|
<span className="minmax">
|
|
|
|
<span className="subtitle">{this.state.weather.temp_min + this.state.temp_text}</span>
|
|
|
|
<span className="subtitle">{this.state.weather.temp_max + this.state.temp_text}</span>
|
|
|
|
</span>
|
|
|
|
)}
|
2022-04-08 13:48:36 +00:00
|
|
|
</div>
|
2022-08-31 12:31:49 +00:00
|
|
|
{weatherType >= 2 && (
|
|
|
|
<div className="extra-info">
|
|
|
|
<span>
|
|
|
|
{variables.getMessage('widgets.weather.feels_like', {
|
|
|
|
amount: this.state.weather.temp_feels_like + this.state.temp_text,
|
|
|
|
})}
|
|
|
|
</span>
|
|
|
|
<span className="loc">{this.state.location}</span>
|
|
|
|
</div>
|
|
|
|
)}
|
2022-11-06 11:59:59 +00:00
|
|
|
{weatherType >= 3 ? (
|
|
|
|
<Expanded weatherType={weatherType} state={this.state} variables={variables} />
|
|
|
|
) : null}
|
2021-04-09 13:44:18 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2021-07-12 10:34:05 +00:00
|
|
|
}
|