mirror of https://github.com/mue/mue.git
176 lines
4.7 KiB
JavaScript
176 lines
4.7 KiB
JavaScript
import { PureComponent, Suspense, lazy } from 'react';
|
|
|
|
import { convertTimezone } from 'modules/helpers/date';
|
|
import EventBus from 'modules/helpers/eventbus';
|
|
|
|
import './clock.scss';
|
|
import Pomodoro from './Pomodoro';
|
|
|
|
const Analog = lazy(() => import('react-clock'));
|
|
const renderLoader = () => <></>;
|
|
|
|
export default class Clock extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
|
|
this.timer = undefined;
|
|
this.state = {
|
|
time: '',
|
|
ampm: '',
|
|
nowGlobal: new Date(),
|
|
};
|
|
}
|
|
|
|
startTime(
|
|
time = localStorage.getItem('seconds') === 'true' ||
|
|
localStorage.getItem('timeType') === 'analogue'
|
|
? 1000 - (Date.now() % 1000)
|
|
: 60000 - (Date.now() % 60000),
|
|
) {
|
|
this.timer = setTimeout(() => {
|
|
let now = new Date();
|
|
const timezone = localStorage.getItem('timezone');
|
|
if (timezone && timezone !== 'auto') {
|
|
now = convertTimezone(now, timezone);
|
|
}
|
|
|
|
switch (localStorage.getItem('timeType')) {
|
|
case 'percentageComplete':
|
|
this.setState({
|
|
time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%',
|
|
ampm: '',
|
|
});
|
|
break;
|
|
case 'analogue':
|
|
// load analog clock css
|
|
require('react-clock/dist/Clock.css');
|
|
|
|
this.setState({
|
|
time: now,
|
|
});
|
|
break;
|
|
default:
|
|
// Default clock
|
|
let time,
|
|
sec = '';
|
|
const zero = localStorage.getItem('zero');
|
|
|
|
if (localStorage.getItem('seconds') === 'true') {
|
|
sec = `:${('00' + now.getSeconds()).slice(-2)}`;
|
|
}
|
|
|
|
if (localStorage.getItem('timeformat') === 'twentyfourhour') {
|
|
if (zero === 'false') {
|
|
time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
|
} else {
|
|
time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(
|
|
-2,
|
|
)}${sec}`;
|
|
}
|
|
|
|
this.setState({
|
|
time,
|
|
ampm: '',
|
|
});
|
|
} else {
|
|
// 12 hour
|
|
let hours = now.getHours();
|
|
|
|
if (hours > 12) {
|
|
hours -= 12;
|
|
} else if (hours === 0) {
|
|
hours = 12;
|
|
}
|
|
|
|
if (zero === 'false') {
|
|
time = `${hours}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
|
} else {
|
|
time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
|
}
|
|
|
|
this.setState({
|
|
time,
|
|
ampm: now.getHours() > 11 ? 'PM' : 'AM',
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
|
|
this.startTime();
|
|
}, time);
|
|
}
|
|
|
|
componentDidMount() {
|
|
EventBus.on('refresh', (data) => {
|
|
if (data === 'clock' || data === 'timezone') {
|
|
const element = document.querySelector('.clock-container');
|
|
|
|
if (localStorage.getItem('time') === 'false') {
|
|
return (element.style.display = 'none');
|
|
}
|
|
|
|
this.timer = null;
|
|
this.startTime(0);
|
|
|
|
element.style.display = 'block';
|
|
element.style.fontSize = `${
|
|
4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
|
|
}em`;
|
|
}
|
|
});
|
|
|
|
if (localStorage.getItem('timeType') !== 'analogue') {
|
|
document.querySelector('.clock-container').style.fontSize = `${
|
|
4 * Number((localStorage.getItem('zoomClock') || 100) / 100)
|
|
}em`;
|
|
}
|
|
|
|
this.startTime(0);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
EventBus.off('refresh');
|
|
}
|
|
|
|
render() {
|
|
let clockHTML = (
|
|
<>
|
|
<span className="clock clock-container">
|
|
{this.state.time}
|
|
<span className="ampm">{this.state.ampm}</span>
|
|
</span>
|
|
{localStorage.getItem('Pomodoro') === 'true' ? (
|
|
<Pomodoro
|
|
hours={this.state.nowGlobal.getHours}
|
|
minutes={this.state.nowGlobal.getMinutes}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
const enabled = (setting) => {
|
|
return localStorage.getItem(setting) === 'true';
|
|
};
|
|
|
|
if (localStorage.getItem('timeType') === 'analogue') {
|
|
clockHTML = (
|
|
<Suspense fallback={renderLoader()}>
|
|
<div className="clockBackground">
|
|
<Analog
|
|
className="analogclock clock-container"
|
|
value={this.state.time}
|
|
renderMinuteMarks={enabled('minuteMarks')}
|
|
renderHourMarks={enabled('hourMarks')}
|
|
renderSecondHand={enabled('secondHand')}
|
|
renderMinuteHand={enabled('minuteHand')}
|
|
renderHourHand={enabled('hourHand')}
|
|
/>
|
|
</div>
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
return clockHTML;
|
|
}
|
|
}
|