Update time format and change the slider theme (#343)

* Format image date string.
Format image slider.

* Fix the incorrect date parse.

frontend/src/images/ui/Image.vue

@@ -5,15 +5,14 @@
         </h3>
         <p>
             <span>Step:</span>
-            <span>{{imgData.step}};</span>
-            <span>{{imgData.wall_time | formatTime}}</span>
+            <span>{{imgData.step}}</span>
+            <span class="visual-del-image-time">{{imgData.wall_time | formatTime}}</span>
         </p>
-        <v-slider label="step"
-                  :max="steps"
+        <v-slider :max="steps"
                   :min="slider.min"
                   :step="1"
                   v-model="currentIndex"
-                  dark></v-slider>
+                  ></v-slider>
 
         <img :width="imageWidth" :height="imageHeight" :src="imgData.imgSrc" />
     </v-card>
@@ -45,9 +44,13 @@ export default {
             if (!value) {
                 return;
             }
-            let time = new Date();
-            time.setTime(value.toString().split('.')[0]);
-            return time;
+            // The value was made in seconds, must convert it to milliseconds
+            let time = new Date(value * 1000);
+            var options = {
+                weekday: "short", year: "numeric", month: "short",
+                day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit"
+            };
+            return time.toLocaleDateString("en-US", options);
         }
     },
     data() {
@@ -154,5 +157,7 @@ export default {
             .sm-form-item
                 width 300px
                 display inline-block
+        .visual-del-image-time
+            float right
 </style>
 

frontend/src/texts/ui/Chart.vue

@@ -5,15 +5,14 @@
         </h3>
         <p>
             <span>Step:</span>
-            <span>{{textData.step}};</span>
-            <span>{{textData.wall_time | formatTime}}</span>
+            <span>{{textData.step}}</span>
+            <span class="visual-del-text-time">{{textData.wall_time | formatTime}}</span>
         </p>
-        <v-slider label="step"
-                  :max="steps"
+        <v-slider :max="steps"
                   :min="slider.min"
                   :step="1"
                   v-model="currentIndex"
-                  dark></v-slider>
+                  ></v-slider>
 
         <p> {{textData.message}} </p>
     </v-card>
@@ -38,9 +37,13 @@ export default {
             if (!value) {
                 return;
             }
-            let time = new Date();
-            time.setTime(value.toString().split('.')[0]);
-            return time;
+            // The value was made in seconds, must convert it to milliseconds
+            let time = new Date(value * 1000);
+            var options = {
+                weekday: "short", year: "numeric", month: "short",
+                day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit",
+            };
+            return time.toLocaleDateString("en-US", options);
         }
     },
     data() {
@@ -142,5 +145,7 @@ export default {
             .sm-form-item
                 width 300px
                 display inline-block
+        .visual-del-text-time
+            float right
 </style>