121 lines
4.1 KiB
JavaScript
121 lines
4.1 KiB
JavaScript
class DatesPopup extends HTMLElement{
|
|
|
|
static DAY = new Date(24*60*60*1000);
|
|
|
|
constructor(goToNowCallback, jumpCallback){
|
|
super();
|
|
this.goToNowCallback = goToNowCallback;
|
|
this.jumpCallback = jumpCallback;
|
|
}
|
|
|
|
getDateTimeInput(){
|
|
let dateInputValue = this.getElementsByClassName("input-date")[0].valueAsDate;
|
|
let today = new Date();
|
|
if(dateInputValue > today){
|
|
dateInputValue = today;
|
|
alertify.warning("Date in the future : using today");
|
|
}
|
|
dateInputValue.setHours(0,0,0,0);
|
|
let hours = this.getElementsByClassName("input-time-hour")[0].value;
|
|
if(hours < 0 || hours > 23){
|
|
alertify.error("Invalid hours");
|
|
throw RangeError;
|
|
}
|
|
let minutes = this.getElementsByClassName("input-time-minute")[0].value;
|
|
if(minutes < 0 || minutes > 59){
|
|
alertify.error("Invalid minutes");
|
|
throw RangeError;
|
|
}
|
|
let timeMs = this.convertTimeComponentsToTimestamp(hours, minutes);
|
|
return [dateInputValue.getTime(), timeMs];
|
|
}
|
|
|
|
|
|
doJumpCallback(){
|
|
try{
|
|
let dateTimeInput = this.getDateTimeInput();
|
|
this.hide();
|
|
this.jumpCallback(dateTimeInput[0], dateTimeInput[1]);
|
|
}
|
|
catch(e){}
|
|
}
|
|
|
|
convertTimeComponentsToTimestamp(hours, minutes){
|
|
return hours*60*60*1000 + minutes*60*1000;
|
|
}
|
|
|
|
doGoToNowCallback(){
|
|
this.hide();
|
|
this.goToNowCallback();
|
|
}
|
|
|
|
hide(){
|
|
this.style.visibility = "hidden";
|
|
}
|
|
|
|
show(){
|
|
this.setInitialDates();
|
|
this.style.visibility = "visible";
|
|
}
|
|
|
|
setInitialDates(){
|
|
let currentDate = new Date();
|
|
let correctedCurrentDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()));
|
|
let dateInput = this.getElementsByClassName("input-date")[0];
|
|
let dateDayBefore = new Date(correctedCurrentDate - DatesPopup.DAY);
|
|
dateInput.valueAsDate = dateDayBefore;
|
|
|
|
this.getElementsByClassName("input-date")[0].max = correctedCurrentDate.toISOString().split("T")[0]; // sets the max to today (set only at app start)
|
|
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
this.hide();
|
|
this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
|
|
this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();};
|
|
this.getElementsByClassName("jump-button")[0].onclick = () => {this.doJumpCallback();};
|
|
}
|
|
|
|
render(){
|
|
this.innerHTML = `
|
|
<link rel="stylesheet" href="components/dates_popup/dates_popup.css"/>
|
|
<div id="dates-popup">
|
|
<div id="dates-popup-container">
|
|
|
|
<div id="dates-popup-header">
|
|
<span>Select the date to jump to</span>
|
|
<img src="res/close.png"/>
|
|
</div>
|
|
|
|
<div id="dates-popup-content">
|
|
<div class="jump-container">
|
|
<button class="go-to-now-button">Go to now</button>
|
|
</div>
|
|
|
|
<div class="jump-container">
|
|
<div class="datetime-container">
|
|
<div>
|
|
Date :
|
|
<input type="date" class="input-date">
|
|
</div>
|
|
<div>
|
|
Time :
|
|
<input class="input-time-hour" type="number" min="00" max="23" value="23">
|
|
<input class="input-time-minute" type="number" min="00" max="59" value="59">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<button class="jump-button">Jump</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-dates-popup", DatesPopup); |