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">
  20                 <template v-if="item.subtitle">
  21                   {{ item.subtitle }}
  22                 </template>
  23                 <template v-else-if="stats">
  24                   {{ percentage }}&percnt; blocked
  25                 </template>
  26               </p>
  27             </div>
  28             <div v-if="!item.subtitle" class="status" :class="protection">
  29               {{ protection }}
  30             </div>
  31           </div>
  32           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  33             <strong class="tag-text">#{{ item.tag }}</strong>
  34           </div>
  35         </div>
  36       </a>
  37     </div>
  38   </div>
  39 </template>
  40
  41 <script>
  42 export default {
  43   name: "AdGuardHome",
  44   props: {
  45     item: Object,
  46   },
  47   data: () => {
  48     return {
  49       status: null,
  50       stats: null,
  51     };
  52   },
  53   computed: {
  54     percentage: function () {
  55       if (this.stats) {
  56         return (
  57           (this.stats.num_blocked_filtering * 100) /
  58           this.stats.num_dns_queries
  59         ).toFixed(2);
  60       }
  61       return "";
  62     },
  63     protection: function () {
  64       if (this.status) {
  65         return this.status.protection_enabled ? "enabled" : "disabled";
  66       } else return "unknown";
  67     },
  68   },
  69   created: function () {
  70     this.fetchStatus();
  71     if (!this.item.subtitle) {
  72       this.fetchStats();
  73     }
  74   },
  75   methods: {
  76     fetchStatus: async function () {
  77       this.status = await fetch(`${this.item.url}/control/status`, {
  78         credentials: "include",
  79       })
  80         .then((response) => response.json())
  81         .catch((e) => console.log(e));
  82     },
  83     fetchStats: async function () {
  84       this.stats = await fetch(`${this.item.url}/control/stats`, {
  85         credentials: "include",
  86       })
  87         .then((response) => response.json())
  88         .catch((e) => console.log(e));
  89     },
  90   },
  91 };
  92 </script>
  93
  94 <style scoped lang="scss">
  95 .media-left img {
  96   max-height: 100%;
  97 }
  98 .status {
  99   font-size: 0.8rem;
 100   color: var(--text-title);
 101
 102   &.enabled:before {
 103     background-color: #94e185;
 104     border-color: #78d965;
 105     box-shadow: 0px 0px 4px 1px #94e185;
 106   }
 107
 108   &.disabled:before {
 109     background-color: #c9404d;
 110     border-color: #c42c3b;
 111     box-shadow: 0px 0px 4px 1px #c9404d;
 112   }
 113
 114   &.unknown:before {
 115     background-color: #c9c740;
 116     border-color: #ccc935;
 117     box-shadow: 0px 0px 4px 1px #c9c740;
 118   }
 119
 120   &:before {
 121     content: " ";
 122     display: inline-block;
 123     width: 7px;
 124     height: 7px;
 125     margin-right: 10px;
 126     border: 1px solid #000;
 127     border-radius: 7px;
 128   }
 129 }
 130 </style>