fix: 🚚 move show route and begin update view

frontend/App.vue

@@ -1,7 +1,6 @@
 <template>
   <Navbar />
   <section class="section">
-    <Breadcrumb />
     <div class="container">
       <RouterView />
     </div>
@@ -9,14 +8,12 @@
 </template>
 
 <script lang="ts">
-import Breadcrumb from './components/Breadcrumb.vue'
 import Navbar from './components/Navbar.vue'
 import { RouterView } from 'vue-router'
 
 export default {
   name: 'App',
   components: {
-    Breadcrumb,
     Navbar,
     RouterView,
   },

frontend/components/Breadcrumb.vue

@@ -1,22 +0,0 @@
-<template>
-  <nav aria-label="breadcrumbs" class="breadcrumb">
-    <ul>
-      <li class="is-active">
-        <router-link to="/">
-          <span class="icon-text">
-            <span class="icon">
-              <i class="fa fa-home"></i>
-            </span>
-            <span>Home</span>
-          </span>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'Breadcrumb',
-}
-</script>

frontend/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Container from '../views/Container.vue'
 import Home from '../views/Home.vue'
-import New from '../views/New.vue'
+import Update from '../views/Update.vue'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -11,12 +11,16 @@ const router = createRouter({
       component: Home,
     },
     {
-      path: '/new',
-      component: New,
+      path: '/show/:name',
+      component: Container,
     },
     {
-      path: '/container/:name',
-      component: Container,
+      path: '/new',
+      component: Update,
+    },
+    {
+      path: '/update/:name',
+      component: Update,
     },
   ],
 })

frontend/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <Loading class="content" :loading="loading" :message="error" type="danger">
+  <Loading :loading="loading" :message="error" type="danger">
     <div class="block">
       <router-link class="button" to="/new">
         <Icon name="plus">New container</Icon>
@@ -8,8 +8,12 @@
     <div v-if="containers.length" class="box">
       <ul>
         <li v-for="container in containers" :key="container.id">
-          <router-link :to="`/container/${container.name}`">
-            {{ container.name }}
+          <router-link :to="`/show/${container.name}`">
+            <Icon
+              :class="`has-text-${status_icon(container).type} m-2`"
+              :name="status_icon(container).name"
+              >{{ container.name }}</Icon
+            >
           </router-link>
         </li>
       </ul>
@@ -48,5 +52,21 @@ export default {
       this.loading = false
     }
   },
+  methods: {
+    status_icon(container: Container): { name: string; type: string } {
+      switch (container.status) {
+        case 'running':
+          return { name: 'play', type: 'success' }
+        case 'restarting':
+          return { name: 'refresh', type: 'danger' }
+        case 'paused':
+          return { name: 'pause', type: 'warning' }
+        case 'exited':
+          return { name: 'stop', type: 'danger' }
+        default:
+          return { name: 'question-circle', type: 'warning' }
+      }
+    },
+  },
 }
 </script>

frontend/views/New.vue

@@ -1,7 +0,0 @@
-<template><oui>oui</oui></template>
-
-<script lang="ts">
-export default {
-  name: 'New',
-}
-</script>

frontend/views/Update.vue

@@ -0,0 +1,45 @@
+<template>
+  <Loading
+    class="box content"
+    :loading="loading"
+    :message="error"
+    type="danger"
+  >
+    <div class="field">
+      <label class="label">Image</label>
+      <div class="control has-icons-left">
+        <input
+          class="input"
+          placeholder="ghcr.io/crazy-max/loop:latest"
+          type="text"
+          value=""
+        />
+        <span class="icon is-small is-left">
+          <i class="fa fa-image"></i>
+        </span>
+      </div>
+    </div>
+  </Loading>
+</template>
+
+<script lang="ts">
+import Loading from '../components/Loading.vue'
+
+export default {
+  name: 'Update',
+  components: {
+    Loading,
+  },
+  data() {
+    return {
+      error: '',
+      loading: false,
+    }
+  },
+  computed: {
+    container_name(): string {
+      return this.$route.params.name as string
+    },
+  },
+}
+</script>