Removed live indicator + began to write graphics menu

This commit is contained in:
l_samenv
2024-08-08 16:19:21 +02:00
parent 13a105183b
commit aef9813590
14 changed files with 222 additions and 8 deletions

View File

@ -12,6 +12,10 @@
<title>SEAWebClient</title>
<!-- Components -->
<script src="components/divider/horizontal_divider.js"></script>
<script src="components/help_entry/help_entry.js"></script>
<script src="components/help_popup/help_popup.js"></script>
<script src="components/menu_popup/menu_popup.js"></script>
<script src="components/control/control.js"></script>
<script src="components/divider/divider.js"></script>

View File

@ -0,0 +1,12 @@
.horizontal-divider-container{
width: 100%;
height: 10px;
display: flex;
}
.horizontal-divider{
height: 2px;
width: 80%;
background-color:black;
margin: auto;
}

View File

@ -0,0 +1,20 @@
class HorizontalDivider extends HTMLElement{
constructor(){
super();
}
connectedCallback(){
this.render()
}
render(){
this.innerHTML = `
<link rel="stylesheet" href="./components/divider/horizontal_divider.css">
<div class="horizontal-divider-container">
<div class="horizontal-divider"/>
</div>
`
}
}
customElements.define("sea-horizontal-divider", HorizontalDivider)

View File

@ -0,0 +1,21 @@
.help-entry{
height: 28px;
display: flex;
margin-left: 10px;
margin-right: 10px;
}
.help-entry-title{
text-align: center;
vertical-align: middle;
line-height: 28px;
}
.help-entry-arrow{
width: 15px;
height: 15px;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
cursor: pointer;
}

View File

@ -0,0 +1,44 @@
class HelpEntry extends HTMLElement{
constructor(title, description){
super();
this.title = title;
this.description = description;
}
displayPopup(){
this.getElementsByTagName("sea-help-popup")[0].style.visibility = "visible";
}
hidePopup(){
this.getElementsByTagName("sea-help-popup")[0].style.visibility = "hidden";
}
toggleVisibility(){
if (this.getElementsByTagName("sea-help-popup")[0].style.visibility == "visible")
this.hidePopup();
else
this.displayPopup();
}
connectedCallback(){
this.render();
this.getElementsByTagName("img")[0].onmouseenter = () => {this.displayPopup();};
this.getElementsByTagName("img")[0].onmouseleave = () => {this.hidePopup();};
// For mobile phones
this.getElementsByTagName("img")[0].onclick = () => {this.toggleVisibility();};
}
render(){
this.innerHTML = `
<link rel="stylesheet" href="./components/help_entry/help_entry.css">
<script src="./components/help_popup/help_popup.js"></script>
<div class="help-entry">
<span class="help-entry-title">${this.title}</span>
<img src="res/arrow.png" class="help-entry-arrow">
</div>
<sea-help-popup style="visibility:hidden;" helptitle="${this.title}" helpdescription="${this.description}"></sea-help-popup>
`;
}
}
customElements.define("sea-help-entry", HelpEntry);

View File

@ -0,0 +1,20 @@
.help-popup{
width: 300px;
height: 200px;
border: 2px solid black;
background-color: white;
border-radius: 10px;
z-index: 2;
position: absolute;
box-sizing: border-box;
}
.help-popup-description-container{
margin-left: 10px;
margin-right: 10px;
padding-top: 10px;
}
.help-popup-description{
overflow-wrap: break-word;
}

View File

@ -0,0 +1,22 @@
class HelpPopup extends HTMLElement{
constructor(){
super();
}
connectedCallback(){
this.render();
}
render(){
this.innerHTML = `
<link rel="stylesheet" href="./components/help_popup/help_popup.css">
<div class="help-popup">
<div class="help-popup-description-container">
<span class="help-popup-description">${this.getAttribute("helpdescription")}</span>
</div>
</div>
`
}
}
customElements.define("sea-help-popup", HelpPopup);

View File

@ -0,0 +1,33 @@
#menu{
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 28px;
right: 50%;
z-index: 1;
border: 2px solid black;
}
#menu_title_container{
display: flex;
width: 100%;
height: 20px;
}
#menu_title_container span{
margin-top: auto;
margin-bottom: auto;
margin-left: 5px;
}
#menu-popup-close{
margin-left: auto;
margin-right: 2px;
margin-top: auto;
margin-bottom: auto;
height: 15px;
width: 15px;
cursor: pointer;
}

View File

@ -0,0 +1,42 @@
class MenuPopup extends HTMLElement{
constructor(){
super();
}
hide(){
this.style.visibility = "hidden";
}
show(){
this.style.visibility = "visible";
}
connectedCallback(){
this.render();
this.hide();
document.getElementById("menu-popup-close").onclick = () => {this.hide()};
}
render(){
this.innerHTML = `
<div id="menu">
<div id="menu_title_container">
<span>Menu</span>
<img src="res/close.png" id="menu-popup-close">
</div>
</div>
`;
let cursorDescription = `
To remove the cursor, you can double click on any graph.
`
let menuContainer = document.getElementById("menu");
menuContainer.appendChild(new HorizontalDivider());
let cursorHelp = new HelpEntry("How to remove the cursor", cursorDescription);
menuContainer.appendChild(cursorHelp);
}
}
customElements.define("sea-menu", MenuPopup);

View File

@ -270,7 +270,6 @@ let globalControls = (function (){
})();
let datesKey = "dates-indicator";
let liveKey = "live-indicator";
let globalIndicators = (function (){
@ -279,16 +278,12 @@ let globalIndicators = (function (){
function loadIndicators(panel){
let leftDate = Date.now() - 30*60*1000;
let datesIndicator = new DatesIndicator(leftDate);
let liveIndicator = new LiveStateIndicator();
panel.appendChild(datesIndicator);
panel.appendChild(liveIndicator);
liveIndicator.changeToDisable();
liveIndicator.style.marginLeft = "auto"; //sticks element to the right
datesIndicator.style.marginLeft = "auto";
datesIndicator.style.marginRight = "auto";
indicatorsMap[datesKey] = datesIndicator;
indicatorsMap[liveKey] = liveIndicator;
}
function getIndicatorsMap(){
@ -424,8 +419,6 @@ let graphs = (function (){
function setLiveMode(mode=null) {
if (mode !== null){
liveMode = mode;
if(mode) globalIndicators.getIndicatorsMap()[liveKey].changeToEnable();
else globalIndicators.getIndicatorsMap()[liveKey].changeToDisable();
}
if (liveMode && cursorLinePos === null)
// gotoNowElm.innerHTML = '';

BIN
client/res/arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
client/res/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
client/res/menu_white.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -149,6 +149,9 @@ def subdir_test_file(file):
resp = flask.send_file("client/test/"+file, mimetype=guess_mimetype(file))
return resp
@app.route('/components/menu_popup/<file>')
@app.route('/components/help_popup/<file>')
@app.route('/components/help_entry/<file>')
@app.route('/components/control/<file>')
@app.route('/components/divider/<file>')
@app.route('/components/states_indicator/dates/<file>')