Removed live indicator + began to write graphics menu

client/SEAWebClient.html

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

client/components/divider/horizontal_divider.css

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

client/components/divider/horizontal_divider.js

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

client/components/help_entry/help_entry.css

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

client/components/help_entry/help_entry.js

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

client/components/help_popup/help_popup.css

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

client/components/help_popup/help_popup.js

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

client/components/menu_popup/menu_popup.css

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

client/components/menu_popup/menu_popup.js

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

client/jsFiles/SEAWebClientGraphics.js

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

seaweb.py

@@ -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>')