Began to add global toolbar

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)