46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<template>
|
|
<Loading class="container" :loading="loading">
|
|
<Message v-if="error" type="danger">{{ error }}</Message>
|
|
<ul v-if="!loading && !error">
|
|
<li v-for="container in containers" :key="container.id">
|
|
<router-link :to="`/container/${container.name}`">
|
|
{{ container.name }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</Loading>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import axios, { AxiosError } from 'axios'
|
|
import Loading from '@/components/Loading.vue'
|
|
import Message from '@/components/Message.vue'
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
Loading,
|
|
Message,
|
|
},
|
|
data() {
|
|
return {
|
|
containers: [] as string[],
|
|
error: '',
|
|
loading: true,
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const response = await axios.get('/api/containers')
|
|
this.containers = response.data
|
|
} catch (error) {
|
|
console.error(error)
|
|
this.error =
|
|
error instanceof AxiosError ? error.message : 'Error loading containers'
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
}
|
|
</script>
|