extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(settings): Split weather into sections for increased readability

This commit is contained in:
alexsparkes 2024-02-07 12:13:07 +00:00
parent 5ebfc6c379
commit fba4012875
3 changed files with 122 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/modals/main/settings/sections/Time.jsx
View File

@ -149,12 +149,18 @@ export default class TimeSettings extends PureComponent {
</>
);
if (this.state.timeType === 'digital') {
switch (this.state.timeType) {
case 'digital':
timeSettings = digitalSettings;
} else if (this.state.timeType === 'analogue') {
break;
case 'analogue':
timeSettings = analogSettings;
} else if (this.state.timeType === 'verticalClock') {
break;
case 'verticalClock':
timeSettings = verticalClock;
break;
default:
timeSettings = null;
}
return (

149
src/components/modals/main/settings/sections/Weather.jsx
View File

@ -36,7 +36,31 @@ export default class TimeSettings extends PureComponent {
this.showReminder();
}
getAuto() {
render() {
const weatherType = localStorage.getItem('weatherType');
const WEATHER_SECTION = 'modals.main.settings.sections.weather';
const WidgetType = () => {
return (
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.time.type')}
name="weatherType"
category="weather"
onChange={() => this.forceUpdate()}
>
<option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
<option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option>
<option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option>
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
</Dropdown>
</SettingsItem>
);
};
const LocationSetting = () => {
const getAuto = () => {
navigator.geolocation.getCurrentPosition(
async (position) => {
const data = await (
@ -58,66 +82,8 @@ export default class TimeSettings extends PureComponent {
enableHighAccuracy: true,
},
);
}
render() {
const weatherType = localStorage.getItem('weatherType');
const WEATHER_SECTION = 'modals.main.settings.sections.weather';
const weatherOptions = [
{
name: 'weatherdescription',
textKey: `${WEATHER_SECTION}.extra_info.show_description`,
},
{
name: 'cloudiness',
textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
},
{ name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
{
name: 'visibility',
textKey: `${WEATHER_SECTION}.extra_info.visibility`,
},
{
name: 'windspeed',
textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
onChange: () => this.setState({ windSpeed: localStorage.getItem('windspeed') !== 'true' }),
},
{
name: 'windDirection',
textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
disabled: this.state.windSpeed,
},
{
name: 'atmosphericpressure',
textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
},
];
};
return (
<>
<Header
title={variables.getMessage(`${WEATHER_SECTION}.title`)}
setting="weatherEnabled"
category="widgets"
zoomSetting="zoomWeather"
zoomCategory="weather"
switch={true}
/>
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.time.type')}
name="weatherType"
category="weather"
onChange={() => this.forceUpdate()}
>
<option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
<option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option>
<option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option>
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
<TextField
label={variables.getMessage(`${WEATHER_SECTION}.location`)}
@ -127,11 +93,16 @@ export default class TimeSettings extends PureComponent {
varient="outlined"
InputLabelProps={{ shrink: true }}
/>
<span className="link" onClick={() => this.getAuto()}>
<span className="link" onClick={getAuto}>
<MdAutoAwesome />
{variables.getMessage(`${WEATHER_SECTION}.auto`)}
</span>
</SettingsItem>
);
};
const TemperatureFormat = () => {
return (
<SettingsItem
title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
final={weatherType !== '4'}
@ -155,7 +126,42 @@ export default class TimeSettings extends PureComponent {
category="weather"
/>
</SettingsItem>
{weatherType === '4' && (
);
};
const CustomOptions = () => {
const weatherOptions = [
{
name: 'weatherdescription',
textKey: `${WEATHER_SECTION}.extra_info.show_description`,
},
{
name: 'cloudiness',
textKey: `${WEATHER_SECTION}.extra_info.cloudiness`,
},
{ name: 'humidity', textKey: `${WEATHER_SECTION}.extra_info.humidity` },
{
name: 'visibility',
textKey: `${WEATHER_SECTION}.extra_info.visibility`,
},
{
name: 'windspeed',
textKey: `${WEATHER_SECTION}.extra_info.wind_speed`,
onChange: () =>
this.setState({ windSpeed: localStorage.getItem('windspeed') !== 'true' }),
},
{
name: 'windDirection',
textKey: `${WEATHER_SECTION}.extra_info.wind_direction`,
disabled: this.state.windSpeed,
},
{
name: 'atmosphericpressure',
textKey: `${WEATHER_SECTION}.extra_info.atmospheric_pressure`,
},
];
return (
<SettingsItem
title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
final={true}
@ -171,7 +177,24 @@ export default class TimeSettings extends PureComponent {
/>
))}
</SettingsItem>
)}
);
};
return (
<>
<Header
title={variables.getMessage(`${WEATHER_SECTION}.title`)}
setting="weatherEnabled"
category="widgets"
zoomSetting="zoomWeather"
zoomCategory="weather"
switch={true}
/>
<WidgetType />
{/* https://stackoverflow.com/a/65328486 when using inputs it may defocus so we do the {} instead of <> */}
{LocationSetting()}
<TemperatureFormat />
{weatherType === '4' && <CustomOptions />}
</>
);
}

5
src/scss/index.scss
View File

@ -130,3 +130,8 @@ body {
padding-right: 20px;
}
}
.inactiveSetting {
opacity: 0.5;
pointer-events: none;
}