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 v-if="status" class="status" v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'">
  22               {{ status.protection_enabled }}
  23             </div>
  24           </div>
  25           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  26             <strong class="tag-text">#{{ item.tag }}</strong>
  27           </div>
  28         </div>
  29       </a>
  30     </div>
  31   </div>
  32 </template>
  33
  34 <script>
  35 export default {
  36   name: "AdGuardHome",
  37   props: {
  38     item: Object,
  39   },
  40   data: () => {
  41     return {
  42       status: null,
  43     };
  44   },
  45   created: function () {
  46     this.fetchStatus();
  47   },
  48   methods: {
  49     fetchStatus: async function () {
  50       this.status = await fetch(`${this.item.url}/control/status`).then((response) =>
  51         response.json()
  52       );
  53     },
  54   },
  55 };
  56 </script>
  57
  58 <style scoped lang="scss">
  59 .media-left img {
  60   max-height: 100%;
  61 }
  62 .status {
  63   font-size: 0.8rem;
  64   color: var(--text-title);
  65
  66   &.enabled:before {
  67     background-color: #94e185;
  68     border-color: #78d965;
  69     box-shadow: 0px 0px 4px 1px #94e185;
  70   }
  71
  72   &.disabled:before {
  73     background-color: #c9404d;
  74     border-color: #c42c3b;
  75     box-shadow: 0px 0px 4px 1px #c9404d;
  76   }
  77
  78   &:before {
  79     content: " ";
  80     display: inline-block;
  81     width: 7px;
  82     height: 7px;
  83     margin-right: 10px;
  84     border: 1px solid #000;
  85     border-radius: 7px;
  86   }
  87 }
  88 </style>