133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
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"
|
|
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 {
|
|
name: 'Update',
|
|
components: {
|
|
Loading,
|
|
},
|
|
data() {
|
|
return {
|
|
custom_name: null as string | null,
|
|
image: null as string | null,
|
|
environment: null as string | null,
|
|
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() {
|
|
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>
|