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.
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index b111456da..ac8404f62 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -6,14 +6,14 @@
{{ item.subtitle }}
-
- {{ percentage }}% blocked
+
+ {{ details }}
- {{ status }}
+ {{ status_msg }}
@@ -34,17 +34,26 @@ 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: {
@@ -52,12 +61,26 @@ 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;
+
+ 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 {