<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">{{ item.subtitle }}</p> </div> <div v-if="status" class="status" :class="status.status"> {{ status.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: () => { return { status: null, }; }, created: function () { this.fetchStatus(); }, methods: { fetchStatus: async function () { this.status = await fetch(`${this.item.url}/api.php`).then((response) => response.json() ); }, }, }; </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: 0px 0px 4px 1px #94e185; } &.disabled:before { background-color: #c9404d; border-color: #c42c3b; box-shadow: 0px 0px 4px 1px #c9404d; } &:before { content: " "; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border: 1px solid #000; border-radius: 7px; } } </style>