72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
import { RegisterComponent, Component, SideLoad } from './components.mjs';
|
|
|
|
class NotificationBar extends Component {
|
|
static __IDENTIFY() { return 'notificationbar'; }
|
|
|
|
constructor() {
|
|
super(NotificationBar);
|
|
}
|
|
|
|
daysHoursMinutesSecondsUntil(time) {
|
|
const now = new Date();
|
|
const end = new Date(time);
|
|
const diff = end.getTime() - now.getTime();
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
return {
|
|
days,
|
|
hours,
|
|
minutes,
|
|
seconds,
|
|
};
|
|
}
|
|
|
|
async OnMount() {
|
|
const data = await fetch('/api/special').then(response => response.json());
|
|
const { days, hours, minutes, seconds } = this.daysHoursMinutesSecondsUntil(data.data.end);
|
|
|
|
this.setState({
|
|
title: data.data.title,
|
|
endTime: data.data.end,
|
|
timePretty: `${days}d ${hours}h ${minutes}m ${seconds}s`,
|
|
});
|
|
this.wasClosed = false;
|
|
}
|
|
|
|
Update() {
|
|
setInterval(() => {
|
|
const { days, hours, minutes, seconds } = this.daysHoursMinutesSecondsUntil(this.state.endTime);
|
|
this.setState({
|
|
...this.getState,
|
|
timePretty: `${days}d ${hours}h ${minutes}m ${seconds}s`,
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
Render() {
|
|
return {
|
|
template: SideLoad('/components/templates/notificationbar.html'),
|
|
style: SideLoad('/components/css/notificationbar.css'),
|
|
};
|
|
}
|
|
|
|
OnRender() {
|
|
// expect only one notification bar on the dom (otherwise this won't work)
|
|
const notificationToggler = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-toggler');
|
|
const notificationBar = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-bar');
|
|
|
|
if (this.wasClosed) {
|
|
notificationBar.classList.add('notification-toggled');
|
|
}
|
|
|
|
notificationToggler.addEventListener('click', () => {
|
|
notificationBar.classList.add('notification-toggled');
|
|
this.wasClosed = true;
|
|
});
|
|
}
|
|
}
|
|
|
|
RegisterComponent(NotificationBar);
|