src/components/services/AdGuardHome.vue

   1 <template>
   2   <div>
   3     <div class="card" :class="item.class">
   4       <a :href="item.url" :target="item.target" rel="noreferrer">
   5         <div class="card-content">
   6           <div class="media">
   7             <div v-if="item.logo" class="media-left">
   8               <figure class="image is-48x48">
   9                 <img :src="item.logo" :alt="`${item.name} logo`" />
  10               </figure>
  11             </div>
  12             <div v-if="item.icon" class="media-left">
  13               <figure class="image is-48x48">
  14                 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
  15               </figure>
  16             </div>
  17             <div class="media-content">
  18               <p class="title is-4">{{ item.name }}</p>
  19               <p class="subtitle is-6">{{ item.subtitle }}</p>
  20             </div>
  21             <div
  22               v-if="status"
  23               class="status"
  24               v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
  25             >
  26               {{ status.protection_enabled }}
  27             </div>
  28           </div>
  29           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  30             <strong class="tag-text">#{{ item.tag }}</strong>
  31           </div>
  32         </div>
  33       </a>
  34     </div>
  35   </div>
  36 </template>
  37
  38 <script>
  39 export default {
  40   name: "AdGuardHome",
  41   props: {
  42     item: Object,
  43   },
  44   data: () => {
  45     return {
  46       status: null,
  47     };
  48   },
  49   created: function () {
  50     this.fetchStatus();
  51   },
  52   methods: {
  53     fetchStatus: async function () {
  54       this.status = await fetch(`${this.item.url}/control/status`{
  55         credentials: 'include',
  56       }).then(
  57         (response) => response.json()
  58       );
  59     },
  60   },
  61 };
  62 </script>
  63
  64 <style scoped lang="scss">
  65 .media-left img {
  66   max-height: 100%;
  67 }
  68 .status {
  69   font-size: 0.8rem;
  70   color: var(--text-title);
  71
  72   &.enabled:before {
  73     background-color: #94e185;
  74     border-color: #78d965;
  75     box-shadow: 0px 0px 4px 1px #94e185;
  76   }
  77
  78   &.disabled:before {
  79     background-color: #c9404d;
  80     border-color: #c42c3b;
  81     box-shadow: 0px 0px 4px 1px #c9404d;
  82   }
  83
  84   &:before {
  85     content: " ";
  86     display: inline-block;
  87     width: 7px;
  88     height: 7px;
  89     margin-right: 10px;
  90     border: 1px solid #000;
  91     border-radius: 7px;
  92   }
  93 }
  94 </style>