feature: add 10 latest routes

src/components/recent-route-list.vue

@@ -0,0 +1,45 @@
+<script setup>
+
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+store.dispatch('updateRecentRoutes')
+
+const getRouteTo = (id) => {
+  return '/map/' + id
+}
+
+const getRouteString = (id) => {
+  const hash = id.slice(-7)
+  return 'Route ' + hash
+}
+const getDateString = (dateString) => {
+
+  const date = new Date(dateString)
+  const day = date.getDate().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  return `${hours}:${minutes} ${day}.${month}`
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-4">
+    <h2 class="text-lg font-bold mb-4">Latest Routes</h2>
+    <hr class="mb-4">
+    <ul class="space-y-2">
+      <li v-for="route in store.state.recentRoutes" :key="route._id"
+          class="p-4 bg-gray-100 rounded-lg shadow hover:bg-gray-200 transition-colors duration-300">
+        <div class="flex justify-between items-center">
+          <router-link :to="getRouteTo(route._id)" class="text-blue-500 hover:underline">
+            {{ getRouteString(route._id) }}
+          </router-link>
+          <span class="text-gray-600">{{ getDateString(route.date) }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+

src/http/helper.js

@@ -47,7 +47,9 @@ const api = {
   optimizeRoute: async (body) =>
     await post('optimize', body),
   getOptimalRoute: async (id) =>
-    await get('route', { id })
+    await get('route', { id }),
+  getRecentRoutes: async (amount) =>
+    await get('route', { amount })
 }
 
 export default api

src/store/index.js

@@ -18,7 +18,8 @@ const store = createStore({
         colors: [],
         visibility: []
       },
-      summary: []
+      summary: [],
+      recentRoutes: []
     }
   },
   mutations: {
@@ -49,6 +50,9 @@ const store = createStore({
     },
     setRouteVisibility(state, list) {
       state.mapSettings.visibility = [...list]
+    },
+    setRecentRoutes(state, list) {
+      state.recentRoutes = [...list]
     }
   },
   actions: {
@@ -138,6 +142,12 @@ const store = createStore({
         return index === idx ? newValue : value
       })
       commit('setRouteVisibility', visibility)
+    },
+
+    async updateRecentRoutes({commit}) {
+      const response = await api.getRecentRoutes(10)
+      const list = response.data
+      commit('setRecentRoutes', list)
     }
 
   },

src/views/HomeView.vue

@@ -1,16 +1,19 @@
 <script setup>
 import ComplexButton from '@/components/complex-button.vue'
+import RecentRouteList from '@/components/recent-route-list.vue'
 
-// TODO: dont forget to add capacity constraint
 </script>
 
 <template>
-  <div class="container mx-auto p-4">
-    <h1 class="text-center text-2xl font-bold my-4">Welcome! Choose an input method:</h1>
-    <div class="flex justify-center gap-4">
-      <complex-button icon="pi pi-table" to="/import-file">Import File</complex-button>
-      <complex-button icon="pi pi-search" to="/">Input Manually</complex-button>
-      <complex-button icon="pi pi-qrcode" to="/scan-qr">Scan QR Code</complex-button>
+  <div class="container mx-auto p-4 gap-8">
+    <div>
+      <h1 class="text-center text-2xl font-bold my-4">Welcome! Choose an input method:</h1>
+      <div class="flex justify-center gap-4">
+        <complex-button icon="pi pi-table" to="/import-file">Import File</complex-button>
+        <complex-button icon="pi pi-search" to="/">Input Manually</complex-button>
+        <complex-button icon="pi pi-qrcode" to="/scan-qr">Scan QR Code</complex-button>
+      </div>
     </div>
+    <recent-route-list />
   </div>
 </template>