src/components/services/AdGuardHome.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #content>
   4       <p class="title is-4">{{ item.name }}</p>
   5       <p class="subtitle is-6">
   6         <template v-if="item.subtitle">
   7           {{ item.subtitle }}
   8         </template>
   9         <template v-else-if="stats">
  10           {{ percentage }}&percnt; blocked
  11         </template>
  12       </p>
  13     </template>
  14     <template #indicator>
  15       <div class="status" :class="protection">
  16         {{ protection }}
  17       </div>
  18     </template>
  19   </Generic>
  20 </template>
  21
  22 <script>
  23 import service from "@/mixins/service.js";
  24 import Generic from "./Generic.vue";
  25
  26 export default {
  27   name: "AdGuardHome",
  28   mixins: [service],
  29   props: {
  30     item: Object,
  31   },
  32   components: {
  33     Generic,
  34   },
  35   data: () => {
  36     return {
  37       status: null,
  38       stats: null,
  39     };
  40   },
  41   computed: {
  42     percentage: function () {
  43       if (this.stats) {
  44         return (
  45           (this.stats.num_blocked_filtering * 100) /
  46           this.stats.num_dns_queries
  47         ).toFixed(2);
  48       }
  49       return "";
  50     },
  51     protection: function () {
  52       if (this.status) {
  53         return this.status.protection_enabled ? "enabled" : "disabled";
  54       } else return "unknown";
  55     },
  56   },
  57   created: function () {
  58     this.fetchStatus();
  59     if (!this.item.subtitle) {
  60       this.fetchStats();
  61     }
  62   },
  63   methods: {
  64     fetchStatus: async function () {
  65       this.status = await this.fetch("/control/status").catch((e) =>
  66         console.log(e),
  67       );
  68     },
  69     fetchStats: async function () {
  70       this.stats = await this.fetch("/control/stats").catch((e) =>
  71         console.log(e),
  72       );
  73     },
  74   },
  75 };
  76 </script>
  77
  78 <style scoped lang="scss">
  79 .status {
  80   font-size: 0.8rem;
  81   color: var(--text-title);
  82
  83   &.enabled:before {
  84     background-color: #94e185;
  85     border-color: #78d965;
  86     box-shadow: 0px 0px 4px 1px #94e185;
  87   }
  88
  89   &.disabled:before {
  90     background-color: #c9404d;
  91     border-color: #c42c3b;
  92     box-shadow: 0px 0px 4px 1px #c9404d;
  93   }
  94
  95   &.unknown:before {
  96     background-color: #c9c740;
  97     border-color: #ccc935;
  98     box-shadow: 0px 0px 4px 1px #c9c740;
  99   }
 100
 101   &:before {
 102     content: " ";
 103     display: inline-block;
 104     width: 7px;
 105     height: 7px;
 106     margin-right: 10px;
 107     border: 1px solid #000;
 108     border-radius: 7px;
 109   }
 110 }
 111 </style>