From df3c633fdbc6375f1027be99c638090c70977d59 Mon Sep 17 00:00:00 2001
From: Emily Wotruba <emily.wotruba@outlook.com>
Date: Wed, 22 May 2024 15:10:11 +0200
Subject: [PATCH 1/3] added option to specify which items from the api to
 display and in which format

---
 src/components/services/PiHole.vue | 38 +++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index b111456da..d8c70891d 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -6,8 +6,8 @@
         <template v-if="item.subtitle">
           {{ item.subtitle }}
         </template>
-        <template v-else-if="percentage">
-          {{ percentage }}&percnt; blocked
+        <template v-else>
+          {{ details }}
         </template>
       </p>
     </template>
@@ -34,17 +34,25 @@ export default {
   },
   data: () => ({
     status: "",
-    ads_percentage_today: 0,
+    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: {
@@ -52,12 +60,20 @@ export default {
       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;
 
-      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";
+        });
     },
   },
 };

From 449308b7e517f6cd8f849b8982cc874bc50f3f46 Mon Sep 17 00:00:00 2001
From: Emily Wotruba <emily.wotruba@outlook.com>
Date: Wed, 22 May 2024 15:11:47 +0200
Subject: [PATCH 2/3] changed misleading status ("dns only" vs "disabled")

---
 src/components/services/PiHole.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index d8c70891d..ac8404f62 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -13,7 +13,7 @@
     </template>
     <template #indicator>
       <div v-if="status" class="status" :class="status">
-        {{ status }}
+        {{ status_msg }}
       </div>
     </template>
   </Generic>
@@ -34,6 +34,7 @@ export default {
   },
   data: () => ({
     status: "",
+    status_msg: "",
     items: ["ads_percentage_today"],
     results: [],
     format: "{0}% blocked",
@@ -65,6 +66,12 @@ export default {
           if (response) {
             this.status = response.status;
 
+            if (response.status == "enabled") {
+              this.status_msg = "enabled";
+            } else {
+              this.status_msg = "dns only";
+            }
+
             for (const i in this.items)
               this.results[i] = response[this.items[i]];
           } else throw new Error();
@@ -91,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 {

From a82947c8fd2f81e3468fd7e34d90aa43c588ebb3 Mon Sep 17 00:00:00 2001
From: Emily Wotruba <emily.wotruba@outlook.com>
Date: Wed, 22 May 2024 15:12:08 +0200
Subject: [PATCH 3/3] updated documentation for pi-hole

---
 docs/customservices.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/customservices.md b/docs/customservices.md
index cc089a57b..577ef661b 100644
--- a/docs/customservices.md
+++ b/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.