src/components/services/PiHole.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="percentage">
  10           {{ percentage }}&percnt; blocked
  11         </template>
  12       </p>
  13     </template>
  14     <template #indicator>
  15       <div v-if="status" class="status" :class="status">
  16         {{ status }}
  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: "PiHole",
  28   mixins: [service],
  29   props: {
  30     item: Object,
  31   },
  32   components: {
  33     Generic,
  34   },
  35   data: () => ({
  36     status: "",
  37     ads_percentage_today: 0,
  38   }),
  39   computed: {
  40     percentage: function () {
  41       if (this.ads_percentage_today) {
  42         return this.ads_percentage_today.toFixed(1);
  43       }
  44       return "";
  45     },
  46   },
  47   created() {
  48     this.fetchStatus();
  49   },
  50   methods: {
  51     fetchStatus: async function () {
  52       const authQueryParams = this.item.apikey
  53         ? `?summaryRaw&auth=${this.item.apikey}`
  54         : "";
  55       const result = await this.fetch(`/api.php${authQueryParams}`).catch((e) =>
  56         console.log(e),
  57       );
  58
  59       this.status = result.status;
  60       this.ads_percentage_today = result.ads_percentage_today;
  61     },
  62   },
  63 };
  64 </script>
  65
  66 <style scoped lang="scss">
  67 .status {
  68   font-size: 0.8rem;
  69   color: var(--text-title);
  70
  71   &.enabled:before {
  72     background-color: #94e185;
  73     border-color: #78d965;
  74     box-shadow: 0 0 5px 1px #94e185;
  75   }
  76
  77   &.disabled:before {
  78     background-color: #c9404d;
  79     border-color: #c42c3b;
  80     box-shadow: 0 0 5px 1px #c9404d;
  81   }
  82
  83   &:before {
  84     content: " ";
  85     display: inline-block;
  86     width: 7px;
  87     height: 7px;
  88     margin-right: 10px;
  89     border: 1px solid #000;
  90     border-radius: 7px;
  91   }
  92 }
  93 </style>