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)