Add script

pull/941/head
M 2025-05-26 14:16:29 +02:00
parent c230392da8
commit 3467e23376
1 changed files with 96 additions and 0 deletions

View File

@ -0,0 +1,96 @@
<template>
<Generic :item="item">
<template #indicator>
<div class="notifs">
<div v-if="up > 0" class="notif up" title="Up">
{{ up }}
</div>
<div v-if="down > 0" class="notif down" title="Down">
{{ down }}
</div>
</div>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
export default {
name: "Gatus",
mixins: [service],
props: {
item: Object,
},
data: () => ({
api: null,
}),
computed: {
up: function() {
return this.countUp();
},
down: function() {
return this.countDown();
},
},
created() {
this.fetchStatus();
},
methods: {
fetchStatus: async function () {
this.api = await this.fetch("/api/v1/endpoints/statuses", { method: "GET", cache: "no-cache" }).catch((e) => {
console.error(e);
});
},
countUp: function() {
if (!this.api) {
return -1;
}
var count = 0;
this.api.forEach((job) => {
if (job.results[job.results.length - 1].success === true) {
count++;
};
}
);
return count;
},
countDown: function() {
if (!this.api) {
return -1;
}
return this.api.length - this.countUp();
},
},
};
</script>
<style scoped lang="scss">
.notifs {
position: absolute;
color: white;
font-family: sans-serif;
top: 0.3em;
right: 0.5em;
.notif {
display: inline-block;
padding: 0.2em 0.35em;
border-radius: 0.25em;
position: relative;
margin-left: 0.3em;
font-size: 0.8em;
&.up {
background-color: #4fd671;
}
&.down {
background-color: #e51111;
}
}
}
</style>