Removed live indicator + began to write graphics menu

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