Functionnal toolbar and indicators

client/components/control/control.css

@@ -1,6 +1,6 @@
 .control-global{
-    width: 30px;
-    height: 30px;
+    width: 28px;
+    height: 28px;
     border: 1px solid dimgray;
     box-sizing: border-box;
     transition: border 0.25s;

client/components/states_indicator/dates/dates.js

@@ -1,18 +1,40 @@
 class DatesIndicator extends HTMLElement{
-    constructor(oldestTimestamp, newestTimestamp){
+    constructor(timestamp){
         super();
-        this.oldestDate = this.timestampToString(oldestTimestamp);
-        this.newestDate = this.timestampToString(newestTimestamp);
+        this.formattedDate = this.timestampToString(timestamp);
+    }
+
+    dayNumberToName(dayNumber){
+        switch(dayNumber){
+            case 0:
+                return "Sun";
+            case 1:
+                return "Mon";
+            case 2:
+                return "Tue";
+            case 3:
+                return "Wed";
+            case 4:
+                return "Thu";
+            case 5:
+                return "Fri";
+            case 6:
+                return "Sat";
+        }
     }
 
     timestampToString(timestamp){
         let date = new Date(timestamp);
-        return date.toUTCString();
+        let dayName = this.dayNumberToName(date.getDay());
+        let day = date.getDate();
+        let month = date.getMonth();
+        let year = date.getFullYear();
+
+        return dayName + ", " + day.toString().padStart(2, "0") + "/" + month.toString().padStart(2, "0") + "/"  + year ;
     }
 
-    update(oldestTimestamp, newestTimestamp){
-        this.oldestDate = this.timestampToString(oldestTimestamp);
-        this.newestDate = this.timestampToString(newestTimestamp);
+    update(timestamp){
+        this.formattedDate = this.timestampToString(timestamp);
         this.render()
     }
 
@@ -24,9 +46,7 @@ class DatesIndicator extends HTMLElement{
         this.innerHTML = `
             <link rel="stylesheet" href="components/states_indicator/dates/dates.css">
             <div class="dates">
-                ${this.oldestDate}
-                ->
-                ${this.newestDate}
+                ${this.formattedDate}
             </div>
         `
     }