53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<template>
|
|
<Loading class="container" :loading="loading" :message="error" type="danger">
|
|
<div class="block">
|
|
<router-link class="button" to="/new">
|
|
<Icon name="plus">New container</Icon>
|
|
</router-link>
|
|
</div>
|
|
<div class="block">
|
|
<ul>
|
|
<li v-for="container in containers" :key="container.id">
|
|
<router-link :to="`/container/${container.name}`">
|
|
{{ container.name }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</Loading>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import axios, { AxiosError } from 'axios'
|
|
import type { Container } from '../types'
|
|
import Icon from '../components/Icon.vue'
|
|
import Loading from '../components/Loading.vue'
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
Icon,
|
|
Loading,
|
|
},
|
|
data() {
|
|
return {
|
|
containers: [] as Container[],
|
|
error: '',
|
|
loading: true,
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const response = await axios.get<Container[]>('/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>
|