2019-10-20 12:39:01 +00:00
|
|
|
import React from 'react';
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2020-08-10 18:49:46 +00:00
|
|
|
import Analog from 'react-clock';
|
2019-10-20 12:39:01 +00:00
|
|
|
|
2020-11-29 14:32:08 +00:00
|
|
|
import './clock.scss';
|
|
|
|
|
2020-08-10 18:49:46 +00:00
|
|
|
export default class Clock extends React.PureComponent {
|
2019-10-20 12:39:01 +00:00
|
|
|
constructor(...args) {
|
|
|
|
super(...args);
|
2020-07-17 12:37:33 +00:00
|
|
|
|
|
|
|
this.timer = undefined;
|
2019-10-20 12:39:01 +00:00
|
|
|
this.state = {
|
2020-08-10 18:49:46 +00:00
|
|
|
time: '',
|
2020-07-17 12:37:33 +00:00
|
|
|
ampm: ''
|
2019-10-20 12:39:01 +00:00
|
|
|
};
|
|
|
|
}
|
2020-07-20 21:39:31 +00:00
|
|
|
|
2021-03-17 17:55:58 +00:00
|
|
|
startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('timeType') === 'analogue' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
|
2020-07-16 16:40:24 +00:00
|
|
|
this.timer = setTimeout(() => {
|
2020-07-16 19:02:26 +00:00
|
|
|
const now = new Date();
|
2020-07-20 21:39:31 +00:00
|
|
|
|
2021-03-17 17:55:58 +00:00
|
|
|
const timeType = localStorage.getItem('timeType');
|
|
|
|
|
2020-11-28 13:24:40 +00:00
|
|
|
// Percentage
|
2021-03-17 17:55:58 +00:00
|
|
|
if (timeType === 'percentageComplete') {
|
2021-03-17 13:01:53 +00:00
|
|
|
return this.setState({
|
2021-01-17 16:25:21 +00:00
|
|
|
time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
|
|
|
|
});
|
2021-01-16 22:43:46 +00:00
|
|
|
}
|
2020-11-28 13:24:40 +00:00
|
|
|
|
2020-08-10 18:49:46 +00:00
|
|
|
// Analog clock
|
2021-03-17 17:55:58 +00:00
|
|
|
if (timeType === 'analogue') {
|
2021-03-17 14:41:50 +00:00
|
|
|
// load analog clock css
|
|
|
|
require('react-clock/dist/Clock.css');
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
this.setState({
|
|
|
|
time: now
|
2021-01-16 22:43:46 +00:00
|
|
|
});
|
2021-01-16 18:39:03 +00:00
|
|
|
} else {
|
2021-01-16 22:43:46 +00:00
|
|
|
// Default clock
|
2020-11-29 14:32:08 +00:00
|
|
|
let time, sec = '';
|
2020-08-10 18:49:46 +00:00
|
|
|
const zero = localStorage.getItem('zero');
|
|
|
|
|
|
|
|
if (localStorage.getItem('seconds') === 'true') {
|
2021-01-16 22:43:46 +00:00
|
|
|
if (zero === 'false') {
|
|
|
|
sec = ':' + now.getSeconds();
|
|
|
|
} else {
|
|
|
|
sec = `:${('00' + now.getSeconds()).slice(-2)}`;
|
|
|
|
}
|
2020-08-10 18:49:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (localStorage.getItem('24hour') === 'true') {
|
2021-01-16 22:43:46 +00:00
|
|
|
if (zero === 'false') {
|
|
|
|
time = `${now.getHours()}:${now.getMinutes()}${sec}`;
|
|
|
|
} else {
|
|
|
|
time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
|
|
|
}
|
2020-10-11 15:54:07 +00:00
|
|
|
|
2021-03-17 13:01:53 +00:00
|
|
|
this.setState({
|
|
|
|
time: time
|
2021-01-17 16:25:21 +00:00
|
|
|
});
|
2020-08-10 18:49:46 +00:00
|
|
|
} else {
|
|
|
|
// 12 hour support
|
|
|
|
let hours = now.getHours();
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2021-01-16 22:43:46 +00:00
|
|
|
if (hours > 12) {
|
|
|
|
hours -= 12;
|
|
|
|
}
|
2020-08-10 18:49:46 +00:00
|
|
|
|
|
|
|
// Toggle AM/PM
|
|
|
|
let ampm = now.getHours() > 11 ? 'PM' : 'AM';
|
2021-01-16 22:43:46 +00:00
|
|
|
if (localStorage.getItem('ampm') === 'false') {
|
|
|
|
ampm = '';
|
|
|
|
}
|
2020-08-10 18:49:46 +00:00
|
|
|
|
2021-01-16 22:43:46 +00:00
|
|
|
if (zero === 'false') {
|
|
|
|
time = `${hours}:${now.getMinutes()}${sec}`;
|
|
|
|
} else {
|
|
|
|
time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|
2020-09-21 21:23:04 +00:00
|
|
|
|
2020-08-10 18:49:46 +00:00
|
|
|
this.setState({
|
|
|
|
time: time,
|
|
|
|
ampm: ampm
|
|
|
|
});
|
|
|
|
}
|
2020-07-16 19:02:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.startTime();
|
|
|
|
}, time);
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2020-07-16 16:40:24 +00:00
|
|
|
this.startTime(0);
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-01-16 22:43:46 +00:00
|
|
|
let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2021-03-17 17:55:58 +00:00
|
|
|
if (localStorage.getItem('timeType') === 'analogue') {
|
2021-01-16 22:43:46 +00:00
|
|
|
clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
|
|
|
|
}
|
2020-10-16 12:15:10 +00:00
|
|
|
|
2020-08-10 18:49:46 +00:00
|
|
|
return clockHTML;
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
|
|
|
}
|