feat: hot reload for clock and greeting

This commit is contained in:
David Ralph
2021-04-28 15:06:15 +01:00
parent b26265eceb
commit b795ceb33d
4 changed files with 21 additions and 18 deletions

View File

@@ -22,9 +22,6 @@ export default class GreetingSettings extends React.PureComponent {
this.setState({
birthday: data
});
document.querySelector('.reminder-info').style.display = 'block';
localStorage.setItem('showReminder', true);
}
render() {
@@ -34,13 +31,13 @@ export default class GreetingSettings extends React.PureComponent {
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting' element='.other'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.other'/>
<Text title={greeting.name} name='greetingName' category='greeting' element='.other'/>
<Checkbox name='events' text={greeting.events} category='greeting' element='.greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting' element='.greeting'/>
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.other'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.other'/>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.greeting'/>
<p>{greeting.birthday_date}</p>
<DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
</>

View File

@@ -34,21 +34,21 @@ export default class TimeSettings extends React.PureComponent {
const digitalSettings = (
<>
<h3>{time.digital.title}</h3>
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.other' />
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.clock-container' />
<br/>
<Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.other' />
<Checkbox name='zero' text={time.digital.zero} category='clock' element='.other' />
<Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.clock-container' />
<Checkbox name='zero' text={time.digital.zero} category='clock' element='.clock-container' />
</>
);
const analogSettings = (
<>
<h3>{time.analogue.title}</h3>
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' element='.clock-container' />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' element='.clock-container' />
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' element='.clock-container' />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' element='.clock-container' />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' element='.clock-container' />
</>
);
@@ -94,8 +94,8 @@ export default class TimeSettings extends React.PureComponent {
return (
<>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} category='clock' element='.clock' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.other'>
<Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.clock-container'>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>

View File

@@ -110,6 +110,9 @@ export default class Greeting extends React.PureComponent {
return element.style.display = 'none';
}
this.timer = null;
this.getGreeting(0);
element.style.display = 'block';
}
});

View File

@@ -96,6 +96,9 @@ export default class Clock extends React.PureComponent {
return element.style.display = 'none';
}
this.timer = null;
this.startTime(0);
element.style.display = 'block';
}
});