63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<Loading :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 v-if="containers.length" class="box">
|
|
<ul>
|
|
<li v-for="container in containers" :key="container.id">
|
|
<router-link :to="`/show/${container.name}`">
|
|
<Icon
|
|
:class="`has-text-${status_icon(container).type} m-2`"
|
|
:name="status_icon(container).name"
|
|
>{{ container.name }}</Icon
|
|
>
|
|
</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'
|
|
import { get_status_icon } from '../utils'
|
|
|
|
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
|
|
}
|
|
},
|
|
methods: {
|
|
status_icon(container: Container): { name: string; type: string } {
|
|
return get_status_icon(container.status)
|
|
},
|
|
},
|
|
}
|
|
</script>
|