mirror of https://github.com/mue/mue.git
188 lines
6.0 KiB
JavaScript
188 lines
6.0 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() {
|
|
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="Type" name="weatherType" category="weather">
|
|
<option value="1">{variables.getMessage('widgets.weather.options.basic')}</option>
|
|
<option value="2">{variables.getMessage('widgets.weather.options.standard')}</option>
|
|
<option value="3">{variables.getMessage('widgets.weather.options.expanded')}</option>
|
|
<option value="4">{variables.getMessage('widgets.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')}
|
|
>
|
|
<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>
|
|
{localStorage.getItem('weatherType') === 4 && (
|
|
<SettingsItem title="Custom Settings">
|
|
<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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
}
|