108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
class DatesPopup extends HTMLElement{
|
|
|
|
static END = 0;
|
|
static ALL = 1;
|
|
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;
|
|
dateInputValue.setHours(0,0,0,0);
|
|
let formattedHour = this.getElementsByClassName("input-time")[0].value;
|
|
let timeMs = this.convertTimeStringToTimestamp(formattedHour);
|
|
return [dateInputValue.getTime(), timeMs];
|
|
}
|
|
|
|
doJumpAllCallback(){
|
|
let dateTimeInput = this.getDateTimeInput();
|
|
this.hide();
|
|
this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.ALL);
|
|
}
|
|
|
|
doJumpEndCallback(){
|
|
let dateTimeInput = this.getDateTimeInput();
|
|
this.hide();
|
|
this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.END);
|
|
}
|
|
|
|
convertTimeStringToTimestamp(formattedTime){
|
|
let pieces = formattedTime.split(":");
|
|
return Number(pieces[0])*60*60*1000 + Number(pieces[1])*60*1000;
|
|
}
|
|
|
|
doGoToNowCallback(){
|
|
this.hide();
|
|
console.log(this);
|
|
this.goToNowCallback();
|
|
}
|
|
|
|
hide(){
|
|
this.style.visibility = "hidden";
|
|
}
|
|
|
|
show(){
|
|
this.style.visibility = "visible";
|
|
}
|
|
|
|
setInitialDate(){
|
|
let currentDate = new Date();
|
|
let dateInput = this.getElementsByClassName("input-date")[0];
|
|
let dateDayBefore = new Date(currentDate - DatesPopup.DAY);
|
|
dateInput.valueAsDate = dateDayBefore;
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.render();
|
|
this.setInitialDate();
|
|
this.hide();
|
|
this.getElementsByTagName("img")[0].onclick = () => {this.hide();};
|
|
this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();};
|
|
this.getElementsByClassName("jump-button-end")[0].onclick = () => {this.doJumpEndCallback();};
|
|
this.getElementsByClassName("jump-button-all")[0].onclick = () => {this.doJumpAllCallback();};
|
|
}
|
|
|
|
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">
|
|
<input type="date" class="input-date">
|
|
<input type="time" class="input-time" value="00:00">
|
|
</div>
|
|
|
|
<div>
|
|
<button class="jump-button-end">Curves at the end of the day</button>
|
|
<!-- <span>Curves at the end of the day</span> -->
|
|
</div>
|
|
|
|
<div>
|
|
<button class="jump-button-all">All curves</button>
|
|
<!-- <span>All curves</span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("sea-dates-popup", DatesPopup); |