mue/src/components/modals/main/settings/sections/Time.jsx

199 lines
6.6 KiB
React
Raw Normal View History

import variables from 'modules/variables';
2021-08-14 19:10:48 +00:00
import { PureComponent } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Radio from '../Radio';
import SettingsItem from '../SettingsItem';
2021-08-14 19:10:48 +00:00
export default class TimeSettings extends PureComponent {
2021-03-23 13:10:34 +00:00
constructor() {
super();
this.state = {
timeType: localStorage.getItem('timeType') || 'digital',
2022-08-19 11:50:14 +00:00
hourColour: localStorage.getItem('hourColour') || '#ffffff',
minuteColour: localStorage.getItem('minuteColour') || '#ffffff',
};
}
2022-08-21 11:41:05 +00:00
updateColour(type, event) {
const colour = event.target.value;
this.setState({ [type]: colour });
localStorage.setItem(type, colour);
}
render() {
2022-04-08 13:43:25 +00:00
let timeSettings = null;
2021-03-19 15:56:48 +00:00
const digitalSettings = (
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.time.digital.title')}
subtitle={variables.getMessage('modals.main.settings.sections.time.digital.subtitle')}
2022-06-05 14:56:29 +00:00
final={true}
>
<Radio
name="timeformat"
options={[
{
name: variables.getMessage(
'modals.main.settings.sections.time.digital.twentyfourhour',
),
value: 'twentyfourhour',
},
{
name: variables.getMessage('modals.main.settings.sections.time.digital.twelvehour'),
value: 'twelvehour',
},
]}
smallTitle={true}
category="clock"
/>
<Checkbox
name="seconds"
text={variables.getMessage('modals.main.settings.sections.time.digital.seconds')}
category="clock"
/>
<Checkbox
name="zero"
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
category="clock"
/>
</SettingsItem>
2021-03-17 18:26:09 +00:00
);
2021-03-19 15:56:48 +00:00
const analogSettings = (
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.time.analogue.title')}
subtitle={variables.getMessage('modals.main.settings.sections.time.analogue.subtitle')}
2022-06-05 14:56:29 +00:00
final={true}
>
<Checkbox
name="secondHand"
text={variables.getMessage('modals.main.settings.sections.time.analogue.second_hand')}
category="clock"
/>
<Checkbox
name="minuteHand"
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_hand')}
category="clock"
/>
<Checkbox
name="hourHand"
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_hand')}
category="clock"
/>
<Checkbox
name="hourMarks"
text={variables.getMessage('modals.main.settings.sections.time.analogue.hour_marks')}
category="clock"
/>
<Checkbox
name="minuteMarks"
text={variables.getMessage('modals.main.settings.sections.time.analogue.minute_marks')}
category="clock"
/>
2023-01-21 12:10:40 +00:00
<Checkbox
name="roundClock"
text={variables.getMessage('modals.main.settings.sections.time.analogue.round_clock')}
category="clock"
/>
</SettingsItem>
2021-03-17 18:26:09 +00:00
);
2022-08-08 12:43:47 +00:00
const verticalClock = (
2022-08-08 11:47:29 +00:00
<>
2022-08-21 11:41:05 +00:00
<SettingsItem
title={variables.getMessage(
'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
)}
2022-08-21 11:41:05 +00:00
>
<div className="colourInput">
<input
type="color"
2022-08-21 11:41:05 +00:00
name="hourColour"
className="minuteColour"
onChange={(event) => this.updateColour('hourColour', event)}
value={this.state.hourColour}
></input>
<label htmlFor={'hourColour'} className="customBackgroundHex">
{this.state.hourColour}
</label>
</div>
2022-08-21 11:41:05 +00:00
<span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</SettingsItem>
2022-08-21 11:41:05 +00:00
<SettingsItem
title={variables.getMessage(
2022-08-21 11:41:05 +00:00
'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
)}
>
<div className="colourInput">
<input
type="color"
name="minuteColour"
className="minuteColour"
onChange={(event) => this.updateColour('minuteColour', event)}
value={this.state.minuteColour}
></input>
<label htmlFor={'minuteColour'} className="customBackgroundHex">
{this.state.minuteColour}
</label>
</div>
2022-08-21 11:41:05 +00:00
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</SettingsItem>
{digitalSettings}
2022-08-08 11:47:29 +00:00
</>
);
2022-04-08 13:43:25 +00:00
if (this.state.timeType === 'digital') {
timeSettings = digitalSettings;
} else if (this.state.timeType === 'analogue') {
timeSettings = analogSettings;
2022-08-08 12:43:47 +00:00
} else if (this.state.timeType === 'verticalClock') {
timeSettings = verticalClock;
}
return (
<>
<Header
title={variables.getMessage('modals.main.settings.sections.time.title')}
setting="time"
category="clock"
element=".clock-container"
zoomSetting="zoomClock"
switch={true}
/>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.time.type')}
subtitle={variables.getMessage('modals.main.settings.sections.time.type_subtitle')}
2022-06-05 14:56:29 +00:00
final={this.state.timeType === 'percentageComplete'}
>
<Dropdown
name="timeType"
onChange={(value) => this.setState({ timeType: value })}
category="clock"
>
<option value="digital">
{variables.getMessage('modals.main.settings.sections.time.digital.title')}
</option>
<option value="analogue">
{variables.getMessage('modals.main.settings.sections.time.analogue.title')}
</option>
<option value="percentageComplete">
{variables.getMessage('modals.main.settings.sections.time.percentage_complete')}
</option>
2022-08-21 11:41:05 +00:00
<option value="verticalClock">
{variables.getMessage('modals.main.settings.sections.time.vertical_clock.title')}
2022-08-21 11:41:05 +00:00
</option>
</Dropdown>
</SettingsItem>
2021-03-19 15:56:48 +00:00
{timeSettings}
</>
);
}
}