background for datespopup + closes menu on open

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{

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);
     }
 }
 

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);