linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed graphics panel (stick to right) + corrected month in date indicator

Browse Source
This commit is contained in:
l_samenv
2024-08-09 09:53:26 +02:00
parent aef9813590
commit 62d1047925
4 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/states_indicator/dates/dates.js
View File

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

5
client/cssFiles/SEAWebClientGraphics.css
View File

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

10
client/cssFiles/SEAWebClientSwiper.css
View File

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

36
client/jsFiles/SEAWebClientGraphics.js
View File

@ -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 = "×";
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 = "×";
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;
}
}