Began to add global toolbar

client/components/control/control.css

@@ -0,0 +1,53 @@
+.control-global{
+    width: 30px;
+    height: 30px;
+    border: 1px solid dimgray;
+    box-sizing: border-box;
+    transition: border 0.25s;
+    background-color: white;
+}
+
+.animated:hover{
+    border: 3px solid dimgray;
+    cursor: pointer;
+}
+
+.control-global:hover~.tooltiptext{
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 2s;
+}
+
+.control-global-active{
+    display: block;
+}
+
+.control-global-inactive{
+    display: none;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltiptext {
+    visibility:hidden;
+    opacity: 0;
+    background-color:gray;
+    color: #fff;
+    text-align: center;
+    padding: 2px 0;
+    border-radius: 6px;
+   
+    /* Position the tooltip text - see examples below! */
+    width: 130px;
+    height: 20px;
+    left: 100%;
+    top:3px;
+
+    position: absolute;
+    z-index: 1;
+
+    transition: opacity 0.25s;
+}

client/components/control/control.js

@@ -0,0 +1,62 @@
+class Control extends HTMLElement{
+
+    constructor(imgSrcMain, imgSrcAlt, tooltipDescription, callbackMain, callbackAlt = undefined){
+        super();
+        this.imgSrcMain = imgSrcMain;
+        this.imgSrcAlt = imgSrcAlt;
+        this.tooltipDescription = tooltipDescription;
+        this.callbackMain = callbackMain;
+        this.callbackAlt = callbackAlt;
+    }
+
+    changeToMain(){
+        this.permute("control-global-alt", "control-global-main");
+    }
+
+    changeToAlt(){
+        this.permute("control-global-main", "control-global-alt");
+    }
+
+    permute(from, to){
+        let fromElm = this.getElementsByClassName(from)[0];
+        let toElm = this.getElementsByClassName(to)[0];
+
+        fromElm.classList.remove("control-global-active");
+        toElm.classList.remove("control-global-inactive");
+        
+        fromElm.classList.add("control-global-inactive");    
+        toElm.classList.add("control-global-active");
+
+        this.getAnimations()
+    }
+
+    connectedCallback(){
+        this.render();
+        this.getElementsByClassName("control-global-active")[0].onclick = this.callbackMain;
+        if (this.callbackAlt !== undefined){
+            let altElm = this.getElementsByClassName("control-global-inactive")[0];
+            altElm.onclick = this.callbackAlt;
+            altElm.classList.add("animated");
+        }
+    }
+
+    render(){
+        this.innerHTML = `
+        <link rel="stylesheet" href="components/control/control.css">
+        <div class="tooltip">
+            <img class="control-global control-global-main control-global-active animated" src="${this.imgSrcMain}"/>
+            <img class="control-global control-global-alt control-global-inactive" src="${this.imgSrcAlt}"/>
+            <span class="tooltiptext">${this.tooltipDescription}</span>
+        </div>
+        `;
+
+    }
+}
+
+customElements.define("sea-control", Control)
+
+/*
+connectedCallback : called when first added
+disconnectedCallback : called when removed
+attributeChangedCallback : called when attribute changes. attribute to be added in observedAttributes
+*/

client/components/divider/divider.css

@@ -0,0 +1,13 @@
+.divider-container{
+    width: 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.divider{
+    width: 2px;
+    height: 80%;
+    background-color:white;
+}

client/components/divider/divider.js

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

client/components/states_indicator/dates/dates.css

@@ -0,0 +1,12 @@
+.dates{
+    height: 30px;
+
+    /* For text alignement */
+    text-align: center;
+    vertical-align: middle;
+    line-height: 30px;
+
+    cursor: default;
+    color: white;
+
+}

client/components/states_indicator/dates/dates.js

@@ -0,0 +1,35 @@
+class DatesIndicator extends HTMLElement{
+    constructor(oldestTimestamp, newestTimestamp){
+        super();
+        this.oldestDate = this.timestampToString(oldestTimestamp);
+        this.newestDate = this.timestampToString(newestTimestamp);
+    }
+
+    timestampToString(timestamp){
+        let date = new Date(timestamp);
+        return date.toUTCString();
+    }
+
+    update(oldestTimestamp, newestTimestamp){
+        this.oldestDate = this.timestampToString(oldestTimestamp);
+        this.newestDate = this.timestampToString(newestTimestamp);
+        this.render()
+    }
+
+    connectedCallback(){
+        this.render();
+    }
+
+    render(){
+        this.innerHTML = `
+            <link rel="stylesheet" href="components/states_indicator/dates/dates.css">
+            <div class="dates">
+                ${this.oldestDate}
+                ->
+                ${this.newestDate}
+            </div>
+        `
+    }
+}
+
+customElements.define("sea-dates-indicator", DatesIndicator)

client/components/states_indicator/live/live.css

@@ -0,0 +1,20 @@
+.live{
+    width: 40px;
+    height: 30px;
+    /* For text alignement */
+    text-align: center;
+    vertical-align: middle;
+    line-height: 30px;
+
+    cursor: default;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.enabled{
+    color: lime;
+}
+
+.disabled{
+    color: red;
+}

client/components/states_indicator/live/live.js

@@ -0,0 +1,32 @@
+class LiveStateIndicator extends HTMLElement{
+    constructor(){
+        super();
+    }
+
+    changeToDisable(){
+        let liveElm = this.getElementsByClassName("live")[0];
+        liveElm.classList.remove("enabled");
+        liveElm.classList.add("disabled");
+    }
+
+    changeToEnable(){
+        let liveElm = this.getElementsByClassName("live")[0];
+        liveElm.classList.remove("disabled");
+        liveElm.classList.add("enabled");
+    }
+
+    connectedCallback(){
+        this.render();
+    }
+
+    render(){
+        this.innerHTML = `
+            <link rel="stylesheet" href="components/states_indicator/live/live.css">
+            <div class="live">
+                LIVE
+            </div>
+        `
+    }
+}
+
+customElements.define("sea-live-state-indicator", LiveStateIndicator)