Removed live indicator + began to write graphics menu
This commit is contained in:
@ -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>
|
||||
|
12
client/components/divider/horizontal_divider.css
Normal file
12
client/components/divider/horizontal_divider.css
Normal 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;
|
||||
}
|
20
client/components/divider/horizontal_divider.js
Normal file
20
client/components/divider/horizontal_divider.js
Normal 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)
|
21
client/components/help_entry/help_entry.css
Normal file
21
client/components/help_entry/help_entry.css
Normal 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;
|
||||
}
|
44
client/components/help_entry/help_entry.js
Normal file
44
client/components/help_entry/help_entry.js
Normal 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);
|
20
client/components/help_popup/help_popup.css
Normal file
20
client/components/help_popup/help_popup.css
Normal 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;
|
||||
}
|
22
client/components/help_popup/help_popup.js
Normal file
22
client/components/help_popup/help_popup.js
Normal 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);
|
33
client/components/menu_popup/menu_popup.css
Normal file
33
client/components/menu_popup/menu_popup.css
Normal 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;
|
||||
}
|
42
client/components/menu_popup/menu_popup.js
Normal file
42
client/components/menu_popup/menu_popup.js
Normal 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);
|
@ -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
BIN
client/res/arrow.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 21 KiB |
BIN
client/res/close.png
Normal file
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
BIN
client/res/menu_white.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
@ -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>')
|
||||
|
Reference in New Issue
Block a user