From 924a6a8d1ddd568c30b8172a1186b3de577628f0 Mon Sep 17 00:00:00 2001
From: l_samenv <l_samenv@pc16392>
Date: Fri, 30 Aug 2024 10:49:22 +0200
Subject: [PATCH] background for datespopup + closes menu on open

---
 client/components/dates_popup/dates_popup.css     |  4 +++-
 client/components/states_indicator/dates/dates.js |  8 +-------
 client/jsFiles/SEAWebClientGraphics.js            | 12 +++++++++++-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/components/dates_popup/dates_popup.css b/client/components/dates_popup/dates_popup.css
index bfe9d8c..992fe51 100644
--- a/client/components/dates_popup/dates_popup.css
+++ b/client/components/dates_popup/dates_popup.css
@@ -1,10 +1,12 @@
 #dates-popup{
     width: 100%;
+    height: 100%;
     z-index: 52;
     position: absolute;
     top: 0;
-    left : 0;
     box-sizing: border-box;
+    margin-top: 30px;
+    background-color: rgba(0, 0, 0, 0.2);
 }
 
 #dates-popup-container{
diff --git a/client/components/states_indicator/dates/dates.js b/client/components/states_indicator/dates/dates.js
index 0d88d10..8fa2361 100644
--- a/client/components/states_indicator/dates/dates.js
+++ b/client/components/states_indicator/dates/dates.js
@@ -1,8 +1,7 @@
 class DateIndicator extends HTMLElement{
-    constructor(timestamp, goToNowCallback, jumpCallback){
+    constructor(timestamp){
         super();
         this.formattedDate = this.timestampToString(timestamp);
-        this.datePopup = new DatesPopup(goToNowCallback, jumpCallback);
     }
 
     dayNumberToName(dayNumber){
@@ -39,13 +38,9 @@ class DateIndicator extends HTMLElement{
         this.getElementsByClassName("date-indicator")[0].textContent = this.formattedDate;
     }
 
-    showPopup(){
-        this.datePopup.show();
-    }
 
     connectedCallback(){
         this.render();
-        this.getElementsByClassName("date-indicator")[0].onclick = () => {this.showPopup();};
     }
 
     render(){
@@ -55,7 +50,6 @@ class DateIndicator extends HTMLElement{
                 ${this.formattedDate}
             </div>
         `        
-        this.appendChild(this.datePopup);
     }
 }
 
diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js
index 7bcf7bb..371f438 100644
--- a/client/jsFiles/SEAWebClientGraphics.js
+++ b/client/jsFiles/SEAWebClientGraphics.js
@@ -225,6 +225,14 @@ let globalControls = (function (){
     }
 })();
 
+let datesPopup = undefined;
+
+function loadDatesPopup(){
+    let graphsContainer = document.getElementsByClassName("graphs-container")[0];
+    datesPopup = new DatesPopup(graphs.gotoNow, graphs.jumpToDate);
+    graphsContainer.appendChild(datesPopup);
+}
+
 // Defining keys for global indicators
 
 let datesKey = "dates-indicator";
@@ -240,7 +248,8 @@ let globalIndicators = (function (){
         let leftDate = Date.now() - 30*60*1000;
         let datesIndicator = new DateIndicator(leftDate, graphs.gotoNow, graphs.jumpToDate);
         datesIndicator.addEventListener("click", function () {
-            menuGraphicsPopup.hide()
+            menuGraphicsPopup.hide();
+            datesPopup.show();
         })
         
         panel.appendChild(datesIndicator);
@@ -923,6 +932,7 @@ let graphs = (function (){
         });
 
         loadExportPopup();
+        loadDatesPopup();
         globalIndicators.loadIndicators(graphicsPanel);
         globalControls.loadControls(graphicsPanel);
         loadGraphicsMenu(graphicsPanel);