mirror of https://github.com/mue/mue.git
209 lines
6.5 KiB
JavaScript
209 lines
6.5 KiB
JavaScript
import variables from 'modules/variables';
|
|
import { PureComponent } from 'react';
|
|
|
|
import Header from '../Header';
|
|
import Radio from '../Radio';
|
|
import Dropdown from '../Dropdown';
|
|
import Checkbox from '../Checkbox';
|
|
import { TextField } from '@mui/material';
|
|
import SettingsItem from '../SettingsItem';
|
|
|
|
export default class TimeSettings extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
location: localStorage.getItem('location') || '',
|
|
windSpeed: localStorage.getItem('windspeed') !== 'true',
|
|
};
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
localStorage.setItem('location', this.state.location);
|
|
}
|
|
|
|
showReminder() {
|
|
document.querySelector('.reminder-info').style.display = 'flex';
|
|
localStorage.setItem('showReminder', true);
|
|
}
|
|
|
|
changeLocation(e) {
|
|
this.setState({
|
|
location: e.target.value,
|
|
});
|
|
|
|
this.showReminder();
|
|
}
|
|
|
|
getAuto() {
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
const data = await (
|
|
await fetch(
|
|
`${variables.constants.PROXY_URL}/weather/autolocation?lat=${position.coords.latitude}&lon=${position.coords.longitude}`,
|
|
)
|
|
).json();
|
|
this.setState({
|
|
location: data[0].name,
|
|
});
|
|
|
|
this.showReminder();
|
|
},
|
|
(error) => {
|
|
// firefox requires this 2nd function
|
|
console.log(error);
|
|
},
|
|
{
|
|
enableHighAccuracy: true,
|
|
},
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const weatherType = localStorage.getItem('weatherType');
|
|
|
|
return (
|
|
<>
|
|
<Header
|
|
title={variables.getMessage('modals.main.settings.sections.weather.title')}
|
|
setting="weatherEnabled"
|
|
category="widgets"
|
|
zoomSetting="zoomWeather"
|
|
zoomCategory="weather"
|
|
switch={true}
|
|
/>
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.weather.widget_type')}
|
|
>
|
|
<Dropdown
|
|
label={variables.getMessage('modals.main.settings.sections.time.type')}
|
|
name="weatherType"
|
|
category="weather"
|
|
onChange={() => this.forceUpdate()}
|
|
>
|
|
<option value="1">
|
|
{variables.getMessage('modals.main.settings.sections.weather.options.basic')}
|
|
</option>
|
|
<option value="2">
|
|
{variables.getMessage('modals.main.settings.sections.weather.options.standard')}
|
|
</option>
|
|
<option value="3">
|
|
{variables.getMessage('modals.main.settings.sections.weather.options.expanded')}
|
|
</option>
|
|
<option value="4">
|
|
{variables.getMessage('modals.main.settings.sections.weather.options.custom')}
|
|
</option>
|
|
</Dropdown>
|
|
</SettingsItem>
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.weather.location')}
|
|
>
|
|
<TextField
|
|
label={variables.getMessage('modals.main.settings.sections.weather.location')}
|
|
value={this.state.location}
|
|
onChange={(e) => this.changeLocation(e)}
|
|
placeholder="London"
|
|
varient="outlined"
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
<span className="link" onClick={() => this.getAuto()}>
|
|
{variables.getMessage('modals.main.settings.sections.weather.auto')}
|
|
</span>
|
|
</SettingsItem>
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.weather.temp_format.title')}
|
|
final={weatherType !== '4'}
|
|
>
|
|
<Radio
|
|
name="tempformat"
|
|
options={[
|
|
{
|
|
name:
|
|
variables.getMessage(
|
|
'modals.main.settings.sections.weather.temp_format.celsius',
|
|
) + ' (°C)',
|
|
value: 'celsius',
|
|
},
|
|
{
|
|
name:
|
|
variables.getMessage(
|
|
'modals.main.settings.sections.weather.temp_format.fahrenheit',
|
|
) + ' (°F)',
|
|
value: 'fahrenheit',
|
|
},
|
|
{
|
|
name:
|
|
variables.getMessage('modals.main.settings.sections.weather.temp_format.kelvin') +
|
|
' (K)',
|
|
value: 'kelvin',
|
|
},
|
|
]}
|
|
category="weather"
|
|
/>
|
|
</SettingsItem>
|
|
{weatherType === '4' && (
|
|
<SettingsItem
|
|
title={variables.getMessage('modals.main.settings.sections.weather.custom_settings')}
|
|
final={true}
|
|
>
|
|
<Checkbox
|
|
name="weatherdescription"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.show_description',
|
|
)}
|
|
category="weather"
|
|
/>
|
|
<Checkbox
|
|
name="cloudiness"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.cloudiness',
|
|
)}
|
|
category="weather"
|
|
/>
|
|
<Checkbox
|
|
name="humidity"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.humidity',
|
|
)}
|
|
category="weather"
|
|
/>
|
|
<Checkbox
|
|
name="visibility"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.visibility',
|
|
)}
|
|
category="weather"
|
|
/>
|
|
<Checkbox
|
|
name="windspeed"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.wind_speed',
|
|
)}
|
|
category="weather"
|
|
onChange={() =>
|
|
this.setState({
|
|
windSpeed: localStorage.getItem('windspeed') !== 'true',
|
|
})
|
|
}
|
|
/>
|
|
<Checkbox
|
|
name="windDirection"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.wind_direction',
|
|
)}
|
|
category="weather"
|
|
disabled={this.state.windSpeed}
|
|
/>
|
|
<Checkbox
|
|
name="atmosphericpressure"
|
|
text={variables.getMessage(
|
|
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
|
|
)}
|
|
category="weather"
|
|
/>
|
|
</SettingsItem>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
}
|