mirror of https://github.com/mue/mue.git
81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
import variables from 'modules/variables';
|
|
import { PureComponent } from 'react';
|
|
import Header from '../Header';
|
|
import { MdRemoveCircleOutline } from 'react-icons/md';
|
|
import SettingsItem from '../SettingsItem';
|
|
export default class ReminderSettings extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
colour: localStorage.getItem('reminderColour') || '#ffa500',
|
|
reminder: JSON.parse(localStorage.getItem('reminder')) || [
|
|
{
|
|
value: '',
|
|
done: false,
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
updateColour(event) {
|
|
const colour = event.target.value;
|
|
this.setState({ colour });
|
|
localStorage.setItem('reminderColour', colour);
|
|
}
|
|
|
|
addReminder() {
|
|
let reminderTitle = this.state.todo;
|
|
reminderTitle.push({
|
|
value: '',
|
|
done: false,
|
|
});
|
|
this.updateReminderState(reminderTitle);
|
|
}
|
|
|
|
render() {
|
|
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
|
return (
|
|
<>
|
|
<Header
|
|
title="Reminder"
|
|
setting="reminder"
|
|
category="reminder"
|
|
element=".reminder"
|
|
zoomSetting="zoomReminder"
|
|
switch={true}
|
|
/>
|
|
<SettingsItem final={true} title="Add reminder" subtitle="Add reminder">
|
|
<button onClick={() => this.addReminder()}>Add reminder</button>
|
|
</SettingsItem>
|
|
<div className="reminderSettingsHolder">
|
|
<div className="reminderSetting">
|
|
<div>
|
|
<div className="colorPicker">
|
|
<input
|
|
type="color"
|
|
name="colour"
|
|
className="colour"
|
|
onChange={(event) => this.updateColour(event)}
|
|
value={this.state.colour}
|
|
></input>
|
|
<label htmlFor={'colour'} className="customBackgroundHex">
|
|
{this.state.colour}
|
|
</label>
|
|
</div>
|
|
<span className="link">
|
|
<MdRemoveCircleOutline /> Remove
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="title">
|
|
<input type="text" id="lname" placeholder="Name" />
|
|
</span>
|
|
<input type="date" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
}
|