mirror of https://github.com/bastienwirtz/homer
88 lines
1.7 KiB
Vue
88 lines
1.7 KiB
Vue
<template>
|
|
<Generic :item="item">
|
|
<template #content>
|
|
<p class="title is-4">{{ item.name }}</p>
|
|
<p class="subtitle is-6">
|
|
<template v-if="item.subtitle">
|
|
{{ item.subtitle }}
|
|
</template>
|
|
<template v-else-if="versionstring">
|
|
Version {{ versionstring }}
|
|
</template>
|
|
</p>
|
|
</template>
|
|
<template #indicator>
|
|
<div v-if="status" class="status" :class="status">
|
|
{{ status }}
|
|
</div>
|
|
</template>
|
|
</Generic>
|
|
</template>
|
|
|
|
<script>
|
|
import service from "@/mixins/service.js";
|
|
import Generic from "./Generic.vue";
|
|
|
|
export default {
|
|
name: "Olivetin",
|
|
components: {
|
|
Generic,
|
|
},
|
|
mixins: [service],
|
|
props: {
|
|
item: Object,
|
|
},
|
|
data: () => ({
|
|
status: null,
|
|
versionstring: null,
|
|
}),
|
|
created() {
|
|
this.fetchStatus();
|
|
},
|
|
methods: {
|
|
fetchStatus: async function () {
|
|
this.fetch("/webUiSettings.json")
|
|
.then((response) => {
|
|
this.status = "online";
|
|
this.versionstring = response.CurrentVersion;
|
|
})
|
|
.catch((e) => {
|
|
this.status = "offline";
|
|
console.log(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.status {
|
|
font-size: 0.8rem;
|
|
color: var(--text-title);
|
|
white-space: nowrap;
|
|
margin-left: 0.25rem;
|
|
|
|
&.online:before {
|
|
background-color: #94e185;
|
|
border-color: #78d965;
|
|
box-shadow: 0 0 5px 1px #94e185;
|
|
}
|
|
|
|
&.offline:before {
|
|
background-color: #c9404d;
|
|
border-color: #c42c3b;
|
|
box-shadow: 0 0 5px 1px #c9404d;
|
|
}
|
|
|
|
&:before {
|
|
content: " ";
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
margin-right: 10px;
|
|
border: 1px solid #000;
|
|
border-radius: 7px;
|
|
}
|
|
}
|
|
</style>
|