Adding customization options to PiHole custom service

docs/customservices.md

@@ -63,9 +63,18 @@ The following configuration is available for the PiHole service.
   # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
   url: "http://192.168.0.151/admin"
   apikey: "<---insert-api-key-here--->" # optional, needed if web interface is password protected
+  items: ["ads_percentage_today"] # optional, which items to show (and in which order) in the subtitle. Possible values are all fields of the status api (see below)
+  format: "{0} % blocked" # the format of the subtitle, required only if items are given
   type: "PiHole"
 ```
 
+**Items:**
+The fields of the status api are outlined [here](https://docs.pi-hole.net/ftldns/telnet-api/?h=api#stats). Another example of `items` and `format`:
+```yaml
+items: ["queries_forwarded", "dns_queries_today"]
+format: "{0} of {1} queries forwarded"
+```
+
 **Remarks:**
 If PiHole web interface is password protected, obtain the `apikey` from Settings > API/Web interface > Show API token.
 

src/components/services/PiHole.vue

@@ -6,14 +6,14 @@
         <template v-if="item.subtitle">
           {{ item.subtitle }}
         </template>
-        <template v-else-if="percentage">
-          {{ percentage }}&percnt; blocked
+        <template v-else>
+          {{ details }}
         </template>
       </p>
     </template>
     <template #indicator>
       <div v-if="status" class="status" :class="status">
-        {{ status }}
+        {{ status_msg }}
       </div>
     </template>
   </Generic>
@@ -34,30 +34,53 @@ export default {
   },
   data: () => ({
     status: "",
-    ads_percentage_today: 0,
+    status_msg: "",
+    items: ["ads_percentage_today"],
+    results: [],
+    format: "{0}% blocked",
   }),
   computed: {
-    percentage: function () {
-      if (this.ads_percentage_today) {
-        return this.ads_percentage_today.toFixed(1);
+    details: function () {
+      if (this.results) {
+        return this.format.replace(
+          /{(\d+)}/g,
+          (match, index) => this.results[index],
+        );
       }
       return "";
     },
   },
   created() {
+    if (this.item.items) this.items = this.item.items;
+    if (this.item.format) this.format = this.item.format;
+
     this.fetchStatus();
   },
   methods: {
     fetchStatus: async function () {
       const authQueryParams = this.item.apikey
         ? `?summaryRaw&auth=${this.item.apikey}`
         : "";
-      const result = await this.fetch(`/api.php${authQueryParams}`).catch((e) =>
-        console.log(e),
-      );
+      return this.fetch(`/api.php${authQueryParams}`)
+        .then((response) => {
+          if (response) {
+            this.status = response.status;
+
+            if (response.status == "enabled") {
+              this.status_msg = "enabled";
+            } else {
+              this.status_msg = "dns only";
+            }
 
-      this.status = result.status;
-      this.ads_percentage_today = result.ads_percentage_today;
+            for (const i in this.items)
+              this.results[i] = response[this.items[i]];
+          } else throw new Error();
+          1;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.status = "dead";
+        });
     },
   },
 };
@@ -75,9 +98,9 @@ export default {
   }
 
   &.disabled:before {
-    background-color: #c9404d;
-    border-color: #c42c3b;
-    box-shadow: 0 0 5px 1px #c9404d;
+    background-color: #e8bb7d;
+    border-color: #e8bb7d;
+    box-shadow: 0 0 5px 1px #e8bb7d;
   }
 
   &:before {