Added date selector popup (only go to now working)

client/components/dates_popup/dates_popup.css

@@ -0,0 +1,62 @@
+#dates-popup{
+    width: 100%;
+    z-index: 52;
+    position: absolute;
+    top: 0;
+    left : 0;
+    box-sizing: border-box;
+}
+
+#dates-popup-container{
+    width: 250px;
+    height: fit-content;
+    border: 2px solid black;
+    margin: auto;
+    background-color: white;
+}
+
+#dates-popup-header{
+    height: 40px;
+    display: flex;
+    border-bottom: 2px solid black;
+    box-sizing: border-box;
+}
+
+#dates-popup-header span{
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 10px;
+}
+
+#dates-popup-header img{
+    width: 15px;
+    height: 15px;
+    margin-left: auto;
+    margin-right: 10px;
+    margin-top: auto;
+    margin-bottom: auto;
+    cursor: pointer;
+}
+
+#dates-popup-content{
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 10px;
+}
+
+.jump-container{
+    padding: 10px;
+    border-radius: 10px;
+    border: 2px solid gray;
+    box-sizing: border-box;
+    row-gap: 5px;
+    margin-top: 10px;
+}
+
+.jump-container div:not(:first-child){
+    margin-top: 10px;
+}
+
+.jump-button-all, .jump-button-end{
+    width: 200px;
+}

client/components/dates_popup/dates_popup.js

@@ -0,0 +1,108 @@
+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);