Merge pull request #106 from crazy-max/website-format-result

website: format result items

website/public/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BuildKit Benchmarks</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
-  <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
+  <link rel="icon" type="image/x-icon" href="./img/favicon.ico">
   <style>
     body {
       font-family: 'Roboto', Arial, sans-serif;

website/src/components/ResultsList.vue

@@ -2,9 +2,9 @@
   <div class="results">
     <h2>Results</h2>
     <ul>
-      <li v-for="result in results" :key="result" @click="loadResult(result)"
-          :class="['result-item', { 'selected': result === selectedResult }]">
-        {{ result }}
+      <li v-for="result in results" :key="result" @click="loadResult(result)" :class="['result-item', { 'selected': result === selectedResult }]">
+        <i class="calendar-icon"></i>
+        {{ formatResult(result) }}
       </li>
     </ul>
   </div>
@@ -56,6 +56,15 @@ export default {
         this.selectedResult = this.results[0];
       }
     },
+    formatResult(result) {
+      const year = result.substring(0, 4);
+      const month = result.substring(4, 6);
+      const day = result.substring(6, 8);
+      const hour = result.substring(9, 11);
+      const minute = result.substring(11, 13);
+      const second = result.substring(13, 15);
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    }
   }
 };
 </script>
@@ -73,6 +82,8 @@ export default {
 }
 
 .results .result-item {
+  display: flex;
+  align-items: center;
   padding: 10px;
   margin-bottom: 10px;
   background-color: #ffffff;
@@ -94,4 +105,13 @@ export default {
   background-color: #d4edda;
   border-left: 5px solid #28a745;
 }
+
+.results .calendar-icon {
+  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+  background-image: url('../assets/calendar.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
 </style>

website/src/main.js

@@ -2,6 +2,4 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-const app = createApp(App);
-app.use(router);
-app.mount('#app');
+createApp(App).use(router).mount('#app');