pilotwings/frontend/views/Update.vue

<template>
  <Loading
    class="box content"
    :loading="loading"
    :message="error"
    type="danger"
  >
    <form @submit.prevent="submit">
      <div v-if="!container_name" class="field">
        <label class="label">Name</label>
        <div class="control has-icons-left">
          <input
            v-model="custom_name"
            class="input"
            placeholder="loop"
            required
            type="text"
          />
          <span class="icon is-small is-left">
            <i class="fa fa-tag"></i>
          </span>
        </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"
          ></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 {
  name: 'Update',
  components: {
    Loading,
  },
  data() {
    return {
      custom_name: null as string | null,
      image: null as string | null,
      environment: '',
      error: '',
      loading: false,
    }
  },
  computed: {
    container_name(): string {
      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() {
      if (!this.image || !(this.custom_name ?? this.container_name)) return
      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>