From 62d1047925cb89175d836aa1e05b09a80dfde404 Mon Sep 17 00:00:00 2001
From: l_samenv <l_samenv@pc16392>
Date: Fri, 9 Aug 2024 09:53:26 +0200
Subject: [PATCH] Changed graphics panel (stick to right) + corrected month in
 date indicator

---
 .../states_indicator/dates/dates.js           |  2 +-
 client/cssFiles/SEAWebClientGraphics.css      |  5 ---
 client/cssFiles/SEAWebClientSwiper.css        | 10 ++++--
 client/jsFiles/SEAWebClientGraphics.js        | 36 ++++++++++---------
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/client/components/states_indicator/dates/dates.js b/client/components/states_indicator/dates/dates.js
index 63ccd24..7b30ab9 100644
--- a/client/components/states_indicator/dates/dates.js
+++ b/client/components/states_indicator/dates/dates.js
@@ -27,7 +27,7 @@ class DatesIndicator extends HTMLElement{
         let date = new Date(timestamp);
         let dayName = this.dayNumberToName(date.getDay());
         let day = date.getDate();
-        let month = date.getMonth();
+        let month = date.getMonth() + 1; //getMonth returns number between 0 and 1
         let year = date.getFullYear();
 
         return dayName + ", " + day.toString().padStart(2, "0") + "/" + month.toString().padStart(2, "0") + "/"  + year ;
diff --git a/client/cssFiles/SEAWebClientGraphics.css b/client/cssFiles/SEAWebClientGraphics.css
index 84cad61..9f89a91 100644
--- a/client/cssFiles/SEAWebClientGraphics.css
+++ b/client/cssFiles/SEAWebClientGraphics.css
@@ -2,10 +2,6 @@
     pointer-events: none;
 }
 
-.panel.graphics{
-    display: flex;
-    justify-content: flex-end;
-}
 
 .panel.graphics span:first-child{
     display: none;
@@ -29,7 +25,6 @@
     padding-right: 12px;
     display: flex;
     column-gap: 5px;
-    margin-left: 120px;
     margin-top: 2px;
 }
 
diff --git a/client/cssFiles/SEAWebClientSwiper.css b/client/cssFiles/SEAWebClientSwiper.css
index ee3a515..edc27f4 100644
--- a/client/cssFiles/SEAWebClientSwiper.css
+++ b/client/cssFiles/SEAWebClientSwiper.css
@@ -21,19 +21,23 @@
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* PANEL */
 .panel {
-	text-align: center;
 	background-color: #303030;
 	color: white;
-	/* padding: 6px 6px 6px 6px; */
 	position: absolute;
 	z-index: 20;
 	width: 100%;
 	height: 30px;
 }
-.panel:not(.graphics){
+.panel:not(.graphics) {
+	text-align: center;
 	padding: 6px 6px 6px 6px;
 }
 
+.panel.graphics{
+    display: flex;
+    justify-content: flex-end;
+}
+
 .slide-close-icon {
 	transition: 0.4s;
 	cursor: pointer;
diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js
index 1d6dc66..a92b1f3 100644
--- a/client/jsFiles/SEAWebClientGraphics.js
+++ b/client/jsFiles/SEAWebClientGraphics.js
@@ -961,12 +961,26 @@ let graphs = (function (){
 
         let graphicsPanel = container.parentNode.querySelector('.panel')
         graphicsPanel.classList.add('graphics');
-        if(!created){
-            globalControls.loadControls(graphicsPanel);
-            globalIndicators.loadIndicators(graphicsPanel);
-        }
-        
 
+        // The cross to display "main" panel at the location of the graphs
+        let gotoMainElm = document.createElement('div');
+        gotoMainElm.innerHTML = "&#215;";
+        gotoMainElm.addEventListener('click', function () {
+            currentSwiper.enableSwiping(true);
+            console.log("MAIN")
+            currentSwiper.slideNext();
+        });
+
+        if(!created){            
+            globalIndicators.loadIndicators(graphicsPanel);
+            globalControls.loadControls(graphicsPanel);
+            graphicsPanel.appendChild(gotoMainElm);
+            gotoMainElm.style.marginTop = "auto";
+            gotoMainElm.style.marginBottom = "auto";
+            gotoMainElm.style.marginRight = "6px";
+            gotoMainElm.style.marginLeft = "6px";
+            created = true;
+        }
 
         // gotoNowElm.addEventListener('click', gotoNow);
         //gotoNowElm.innerHTML = "go to now";
@@ -1013,9 +1027,6 @@ let graphs = (function (){
             // container.parentNode.querySelector('.panel span').appendChild(zoomMode);
         }
 
-        // The cross to display "main" panel at the location of the graphs
-        let gotoMainElm = document.createElement('div');
-        gotoMainElm.innerHTML = "&#215;";
         let currentSwiper = swiper[f];
 
         function setSlidingMode(mode) {
@@ -1027,16 +1038,7 @@ let graphs = (function (){
             currentSwiper.enableSwiping(false);
          })
 
-        gotoMainElm.addEventListener('click', function () {
-            currentSwiper.enableSwiping(true);
-            console.log("MAIN")
-            currentSwiper.slideNext();
-        });
         // container.parentNode.querySelector('.panel span').appendChild(gotoMainElm);
-        if(!created){
-            graphicsPanel.appendChild(gotoMainElm);
-            created = true;
-        }
     }