src/components/services/PiHole.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="status">
  24                   {{ percentage }}% blocked
  25                 </template>
  26               </p>
  27             </div>
  28             <div v-if="status" class="status" :class="status.status">
  29               {{ status.status }}
  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: "PiHole",
  44   props: {
  45     item: Object,
  46   },
  47   data: () => {
  48     return {
  49       status: null,
  50     };
  51   },
  52   computed: {
  53     blocked: function () {
  54       if (this.status) {
  55         return this.status.dns_queries_today.toFixed(0);
  56       }
  57       return "";
  58     },
  59   },
  60   created: function () {
  61     this.fetchStatus();
  62   },
  63   methods: {
  64     fetchStatus: async function () {
  65       this.status = await fetch(`${this.item.url}/api.php`).then((response) =>
  66         response.json()
  67       );
  68     },
  69   },
  70 };
  71 </script>
  72
  73 <style scoped lang="scss">
  74 .media-left img {
  75   max-height: 100%;
  76 }
  77 .status {
  78   font-size: 0.8rem;
  79   color: var(--text-title);
  80
  81   &.enabled:before {
  82     background-color: #94e185;
  83     border-color: #78d965;
  84     box-shadow: 0 0 4px 1px #94e185;
  85   }
  86
  87   &.disabled:before {
  88     background-color: #c9404d;
  89     border-color: #c42c3b;
  90     box-shadow: 0 0 4px 1px #c9404d;
  91   }
  92
  93   &:before {
  94     content: " ";
  95     display: inline-block;
  96     width: 7px;
  97     height: 7px;
  98     margin-right: 10px;
  99     border: 1px solid #000;
 100     border-radius: 7px;
 101   }
 102 }
 103 </style>