<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>