feat: ✨ update working

frontend/views/Update.vue

@@ -5,24 +5,65 @@
     :message="error"
     type="danger"
   >
-    <div class="field">
+    <form @submit.prevent="submit">
-      <label class="label">Image</label>
+      <div v-if="!container_name" class="field">
-      <div class="control has-icons-left">
+        <label class="label">Name</label>
-        <input
+        <div class="control has-icons-left">
-          class="input"
+          <input
-          placeholder="ghcr.io/crazy-max/loop:latest"
+            v-model="custom_name"
-          type="text"
+            class="input"
-          value=""
+            placeholder="loop"
-        />
+            required
-        <span class="icon is-small is-left">
+            type="text"
-          <i class="fa fa-image"></i>
+          />
-        </span>
+          <span class="icon is-small is-left">
+            <i class="fa fa-tag"></i>
+          </span>
+        </div>
       </div>
-    </div>
+      <div class="field">
+        <label class="label">Image</label>
+        <div class="control has-icons-left">
+          <input
+            v-model="image"
+            class="input"
+            placeholder="ghcr.io/crazy-max/loop:latest"
+            required
+            type="text"
+          />
+          <span class="icon is-small is-left">
+            <i class="fa fa-image"></i>
+          </span>
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Environment variables</label>
+        <div class="control">
+          <textarea
+            v-model="environment"
+            class="textarea"
+            placeholder="DURATION=60s"
+            required
+          ></textarea>
+        </div>
+      </div>
+      <div class="field is-grouped">
+        <div class="control">
+          <button class="button is-link" type="submit">Submit</button>
+        </div>
+        <div class="control">
+          <button class="button is-link is-light" @click="$router.back()">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
   </Loading>
 </template>
 
 <script lang="ts">
+import axios, { AxiosError } from 'axios'
+import type { Container } from '../types'
 import Loading from '../components/Loading.vue'
 
 export default {
@@ -32,6 +73,9 @@ export default {
   },
   data() {
     return {
+      custom_name: null as string | null,
+      image: null as string | null,
+      environment: null as string | null,
       error: '',
       loading: false,
     }
@@ -41,5 +85,48 @@ export default {
       return this.$route.params.name as string
     },
   },
+  async mounted() {
+    if (!this.container_name) return
+    try {
+      this.loading = true
+      const { data } = await axios.get<Container>(
+        `/api/container/${this.container_name}`,
+      )
+      this.custom_name = data.name
+      this.image = data.image
+      this.environment = data.environment.join('\n')
+    } catch (error) {
+      console.error(error)
+      this.error =
+        error instanceof AxiosError
+          ? error.message
+          : 'Error performing operation'
+    } finally {
+      this.loading = false
+    }
+  },
+  methods: {
+    async submit() {
+      try {
+        this.loading = true
+        const { data } = await axios.post<Container>(
+          `/api/container/${this.custom_name ?? this.container_name}`,
+          {
+            image: this.image,
+            environment: this.environment?.split('\n'),
+          },
+        )
+        this.$router.push(`/show/${data.name}`)
+      } catch (error) {
+        console.error(error)
+        this.error =
+          error instanceof AxiosError
+            ? error.message
+            : 'Error performing operation'
+      } finally {
+        this.loading = false
+      }
+    },
+  },
 }
 </script>