Files
alhp-web/frontend/src/components/BuildStats.vue

53 lines
1.6 KiB
Vue

<template>
<v-sheet class="d-flex" color="transparent" style="gap: 50px">
<v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
<v-list-subheader>Stats:</v-list-subheader>
<v-list-item style="color: #069b35" title="latest">{{ stats.latest }}</v-list-item>
<v-list-item style="color: #b97808" title="queued">{{ stats.queued }}</v-list-item>
<v-list-item style="color: #878787" title="skipped">{{ stats.skipped }}</v-list-item>
<v-list-item style="color: #b30303" title="failed">{{ stats.failed }}</v-list-item>
</v-list>
<v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
<v-list-subheader>LTO:</v-list-subheader>
<v-list-item style="color: #069b35" title="enabled">{{ stats.lto.enabled }}</v-list-item>
<v-list-item style="color: #b30303" title="disabled">{{ stats.lto.disabled }}</v-list-item>
<v-list-item style="color: #878787" title="unknown">{{ stats.lto.unknown }}</v-list-item>
</v-list>
</v-sheet>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
const stats = ref({
latest: 0,
queued: 0,
skipped: 0,
failed: 0,
lto: {
enabled: 0,
disabled: 0,
unknown: 0
}
})
const getStats = () => {
fetch('https://api.alhp.dev/stats')
.then((response) => {
if (!response.ok) throw new Error(response.statusText)
return response.json()
})
.then((statistics) => {
stats.value = statistics
})
.catch((error) => {
console.error(error)
})
.finally(() => {})
}
onMounted(() => {
getStats()
})
</script>