<template> <div> <div class="card" :class="item.class"> <a :href="item.url" :target="item.target" rel="noreferrer"> <div class="card-content"> <div class="media"> <div v-if="item.logo" class="media-left"> <figure class="image is-48x48"> <img :src="item.logo" :alt="`${item.name} logo`" /> </figure> </div> <div v-if="item.icon" class="media-left"> <figure class="image is-48x48"> <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> </figure> </div> <div class="media-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="api"> {{ percentage }}% blocked </template> </p> </div> <div v-if="api" class="status" :class="api.status"> {{ api.status }} </div> </div> <div class="tag" :class="item.tagstyle" v-if="item.tag"> <strong class="tag-text">#{{ item.tag }}</strong> </div> </div> </a> </div> </div> </template> <script> export default { name: "PiHole", props: { item: Object, }, data: () => ({ api: { status: "", ads_percentage_today: 0, }, }), computed: { percentage: function () { if (this.api) { return this.api.ads_percentage_today.toFixed(1); } return ""; }, }, created() { this.fetchStatus(); }, methods: { fetchStatus: async function () { const url = `${this.item.url}/api.php`; this.api = await fetch(url{ credentials: 'include' }) .then((response) => response.json()) .catch((e) => console.log(e)); }, }, }; </script> <style scoped lang="scss"> .media-left img { max-height: 100%; } .status { font-size: 0.8rem; color: var(--text-title); &.enabled:before { background-color: #94e185; border-color: #78d965; box-shadow: 0 0 5px 1px #94e185; } &.disabled: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>