From 593f8afc909e166260f32a9e97f8d54d941802e6 Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Tue, 12 Jan 2021 11:35:57 +0100
Subject: Added OpenWeather service component.

---
 src/components/services/OpenWeather.vue | 99 +++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/services/OpenWeather.vue

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
new file mode 100644
index 0000000..30abb2d
--- /dev/null
+++ b/src/components/services/OpenWeather.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="card" :class="item.class">
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div class="media">
+            <div v-if="image" class="media-left">
+              <figure class="image is-48x48">
+                <img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" />
+              </figure>
+            </div>
+            <div v-if="item.icon" class="media-left">
+              <figure class="image is-48x48">
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ item.location }}</p>
+              <p class="subtitle is-6">
+                <template v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </template>
+                <template v-else-if="api">
+                  {{ temp }} 
+				  <span v-if="this.item.units == 'metric'">&deg;C</span>
+				  <span v-else-if="this.item.units == 'imperial'">&deg;F</span>				  
+				  <span v-else>K</span>
+                </template>
+              </p>
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OpenWeather",
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    api: {
+      name: "",
+	  weather: [{
+		main: "",
+		description: "",
+		icon: ""
+	  }],
+      main: {
+		temp: "",
+		humidity: ""
+	  }
+    }
+  }),
+  computed: {
+    temp: function () {
+      if (this.api) {
+		return parseInt(this.api.main.temp).toFixed(1);
+      }
+      return "";
+    },
+	image: function () {
+	  if (this.api) {
+		return this.api.weather[0].icon;
+	  }
+	  return "";
+	},
+	conditions: function () {
+	  if (this.api) {
+		return this.api.weather[0].description;
+	  }
+	  return "";
+	}
+  },
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
+      this.api = await fetch(url)
+        .then((response) => response.json())
+        .catch((e) => console.log(e));
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+</style>
\ No newline at end of file
-- 
cgit v1.2.3


From b79561bc9c59d79875a9931d235774333579a363 Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Tue, 12 Jan 2021 11:39:27 +0100
Subject: Format file.

---
 src/components/services/OpenWeather.vue | 62 ++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 28 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 30abb2d..a9310ee 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -6,7 +6,11 @@
           <div class="media">
             <div v-if="image" class="media-left">
               <figure class="image is-48x48">
-                <img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" />
+                <img
+                  :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
+                  :alt="conditions"
+                  :title="conditions"
+                />
               </figure>
             </div>
             <div v-if="item.icon" class="media-left">
@@ -21,10 +25,10 @@
                   {{ item.subtitle }}
                 </template>
                 <template v-else-if="api">
-                  {{ temp }} 
-				  <span v-if="this.item.units == 'metric'">&deg;C</span>
-				  <span v-else-if="this.item.units == 'imperial'">&deg;F</span>				  
-				  <span v-else>K</span>
+                  {{ temp }}
+                  <span v-if="this.item.units == 'metric'">&deg;C</span>
+                  <span v-else-if="this.item.units == 'imperial'">&deg;F</span>
+                  <span v-else>K</span>
                 </template>
               </p>
             </div>
@@ -47,36 +51,38 @@ export default {
   data: () => ({
     api: {
       name: "",
-	  weather: [{
-		main: "",
-		description: "",
-		icon: ""
-	  }],
+      weather: [
+        {
+          main: "",
+          description: "",
+          icon: "",
+        },
+      ],
       main: {
-		temp: "",
-		humidity: ""
-	  }
-    }
+        temp: "",
+        humidity: "",
+      },
+    },
   }),
   computed: {
     temp: function () {
       if (this.api) {
-		return parseInt(this.api.main.temp).toFixed(1);
+        return parseInt(this.api.main.temp).toFixed(1);
+      }
+      return "";
+    },
+    image: function () {
+      if (this.api) {
+        return this.api.weather[0].icon;
+      }
+      return "";
+    },
+    conditions: function () {
+      if (this.api) {
+        return this.api.weather[0].description;
       }
       return "";
     },
-	image: function () {
-	  if (this.api) {
-		return this.api.weather[0].icon;
-	  }
-	  return "";
-	},
-	conditions: function () {
-	  if (this.api) {
-		return this.api.weather[0].description;
-	  }
-	  return "";
-	}
   },
   created() {
     this.fetchStatus();
@@ -96,4 +102,4 @@ export default {
 .media-left img {
   max-height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
-- 
cgit v1.2.3


From fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21 Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Wed, 13 Jan 2021 21:22:35 +0100
Subject: Improvements

---
 src/components/services/OpenWeather.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index a9310ee..b1e5c57 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -4,7 +4,7 @@
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
-            <div v-if="image" class="media-left">
+            <div v-if="image" class="media-left" :class="item.background">
               <figure class="image is-48x48">
                 <img
                   :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
@@ -99,7 +99,29 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
+.media-left {
+  &.circle,
+  &.square {
+    background-color: #e4e4e4;
+  }
+
+  &.circle {
+    border-radius: 90%;
+  }
+
+  img {
+    max-height: 100%;
+  }
+}
+
+// Add a circular border around the weather image when in dark mode.
+// Otherwise the image is not distinguishable.
+.is-dark {
+  .media-left {
+    &.circle,
+    &.square {
+      background-color: #909090;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3


From 9e0ef05efe00ffd98ff6c7314a67e8a05505dcc4 Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Wed, 13 Jan 2021 21:27:19 +0100
Subject: Removed URL and made fixed.

---
 src/components/services/OpenWeather.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index b1e5c57..c535a89 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -89,7 +89,7 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
+      const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
       this.api = await fetch(url)
         .then((response) => response.json())
         .catch((e) => console.log(e));
-- 
cgit v1.2.3


From fb158d4767b85160c0c2c5fea5c6429c265576a9 Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Wed, 13 Jan 2021 22:19:17 +0100
Subject: Error handling and fixed link to city.

---
 src/components/services/OpenWeather.vue | 40 +++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index c535a89..8029716 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
             <div v-if="image" class="media-left" :class="item.background">
@@ -25,10 +25,15 @@
                   {{ item.subtitle }}
                 </template>
                 <template v-else-if="api">
-                  {{ temp }}
-                  <span v-if="this.item.units == 'metric'">&deg;C</span>
-                  <span v-else-if="this.item.units == 'imperial'">&deg;F</span>
-                  <span v-else>K</span>
+                  <template v-if="temp !== ''">
+                    {{ temp }}
+                    <span v-if="this.item.units === 'metric'">&deg;C</span>
+                    <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
+                    <span v-else>K</span>
+                  </template>
+                  <template v-else> 
+                    <span class="error">Data could not be retrieved</span>                      
+                  </template>
                 </template>
               </p>
             </div>
@@ -49,7 +54,9 @@ export default {
     item: Object,
   },
   data: () => ({
+    error: false,
     api: {
+      id: "",
       name: "",
       weather: [
         {
@@ -65,8 +72,14 @@ export default {
     },
   }),
   computed: {
-    temp: function () {
+    locationId: function () {
       if (this.api) {
+        return this.api.id;
+      }
+      return "";
+    },
+    temp: function () {
+      if (this.api && this.api.main.temp !== "") {
         return parseInt(this.api.main.temp).toFixed(1);
       }
       return "";
@@ -92,13 +105,19 @@ export default {
       const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
       this.api = await fetch(url)
         .then((response) => response.json())
-        .catch((e) => console.log(e));
+        .catch((e) => { 
+          this.error = true; 
+          console.log(e) 
+        });
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
+
+// Add a border around the weather image.
+// Otherwise the image is not always distinguishable.
 .media-left {
   &.circle,
   &.square {
@@ -114,8 +133,11 @@ export default {
   }
 }
 
-// Add a circular border around the weather image when in dark mode.
-// Otherwise the image is not distinguishable.
+.error {
+  color: #de0000;
+}
+
+// Change background color in dark mode.
 .is-dark {
   .media-left {
     &.circle,
-- 
cgit v1.2.3


From 551e32e2035c58dd1be0d5f57a648772819f66de Mon Sep 17 00:00:00 2001
From: Dick Wolff <dckwlff@gmail.com>
Date: Thu, 28 Jan 2021 12:58:29 +0100
Subject: Added location id

---
 src/components/services/OpenWeather.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 8029716..0fc1fe5 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -19,7 +19,7 @@
               </figure>
             </div>
             <div class="media-content">
-              <p class="title is-4">{{ item.location }}</p>
+              <p class="title is-4">{{ locationName }}</p>
               <p class="subtitle is-6">
                 <template v-if="item.subtitle">
                   {{ item.subtitle }}
@@ -78,6 +78,12 @@ export default {
       }
       return "";
     },
+    locationName: function () {
+      if (this.api) {
+        return this.api.name;
+      }
+      return "";
+    },
     temp: function () {
       if (this.api && this.api.main.temp !== "") {
         return parseInt(this.api.main.temp).toFixed(1);
@@ -102,7 +108,16 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
+      let locationQuery;
+
+      // If a specific location ID was specified, use it. Otherwise retrieve value from location (name).
+      if (this.item.locationId) {
+        locationQuery = `id=${this.item.locationId}`;
+      } else {
+        locationQuery = `q=${this.item.location}`;
+      }
+
+      const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
       this.api = await fetch(url)
         .then((response) => response.json())
         .catch((e) => { 
-- 
cgit v1.2.3


From 3832025b0c404498c798148f1e7c52f34dce372a Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Sat, 10 Jul 2021 02:02:57 +0200
Subject: Improving Adguard Home service

Showing "x.x% blocked" similar to how the PiHole service is doing it.
The status text will no longer be `true/false` but `enabled/disabled`.
Endpoints require to be logged in so fetch does now send cookies to prevent 403s.
---
 src/components/services/AdGuardHome.vue | 40 +++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 6ef5302..0c689b9 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -16,14 +16,21 @@
             </div>
             <div class="media-content">
               <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">{{ item.subtitle }}</p>
+              <p class="subtitle is-6">
+                <template v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </template>
+                <template v-else-if="stats">
+                  {{ percentage }}&percnt; blocked
+                </template>
+              </p>
             </div>
             <div
               v-if="status"
               class="status"
               v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
             >
-              {{ status.protection_enabled }}
+              {{ status.protection_enabled ? 'enabled' : 'disabled' }}
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -44,16 +51,41 @@ export default {
   data: () => {
     return {
       status: null,
+      stats: null,
     };
   },
+  computed: {
+    percentage: function () {
+      if (this.stats) {
+        return (this.stats.num_blocked_filtering * 100 / this.stats.num_dns_queries).toFixed(2);
+      }
+      return "";
+    },
+  },
   created: function () {
     this.fetchStatus();
+    if (!this.item.subtitle) {
+      this.fetchStats();
+    }
   },
   methods: {
     fetchStatus: async function () {
       this.status = await fetch(
-        `${this.item.url}/control/status`
-      ).then((response) => response.json());
+        `${this.item.url}/control/status`,
+        {
+          credentials: 'include'
+        }
+      ).then((response) => response.json())
+      .catch((e) => console.log(e));
+    },
+    fetchStats: async function () {
+      this.stats = await fetch(
+        `${this.item.url}/control/stats`,
+        {
+          credentials: 'include'
+        }
+      ).then((response) => response.json())
+      .catch((e) => console.log(e));
     },
   },
 };
-- 
cgit v1.2.3


From bebb6953cb1e5b61be000b3f2d76a27256bff3d9 Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Sat, 10 Jul 2021 09:58:17 +0200
Subject: Adding status "unknown"

Changing code as per linter
---
 src/components/services/AdGuardHome.vue | 48 ++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 21 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 0c689b9..9aeaf39 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -25,12 +25,8 @@
                 </template>
               </p>
             </div>
-            <div
-              v-if="status"
-              class="status"
-              v-bind:class="status.protection_enabled ? 'enabled' : 'disabled'"
-            >
-              {{ status.protection_enabled ? 'enabled' : 'disabled' }}
+            <div v-if="!item.subtitle" class="status" :class="protection">
+              {{ protection }}
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -57,10 +53,18 @@ export default {
   computed: {
     percentage: function () {
       if (this.stats) {
-        return (this.stats.num_blocked_filtering * 100 / this.stats.num_dns_queries).toFixed(2);
+        return (
+          (this.stats.num_blocked_filtering * 100) /
+          this.stats.num_dns_queries
+        ).toFixed(2);
       }
       return "";
     },
+    protection: function () {
+      if (this.status) {
+        return this.status.protection_enabled ? "enabled" : "disabled";
+      } else return "unknown";
+    },
   },
   created: function () {
     this.fetchStatus();
@@ -70,22 +74,18 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(
-        `${this.item.url}/control/status`,
-        {
-          credentials: 'include'
-        }
-      ).then((response) => response.json())
-      .catch((e) => console.log(e));
+      this.status = await fetch(`${this.item.url}/control/status`, {
+        credentials: "include",
+      })
+        .then((response) => response.json())
+        .catch((e) => console.log(e));
     },
     fetchStats: async function () {
-      this.stats = await fetch(
-        `${this.item.url}/control/stats`,
-        {
-          credentials: 'include'
-        }
-      ).then((response) => response.json())
-      .catch((e) => console.log(e));
+      this.stats = await fetch(`${this.item.url}/control/stats`, {
+        credentials: "include",
+      })
+        .then((response) => response.json())
+        .catch((e) => console.log(e));
     },
   },
 };
@@ -111,6 +111,12 @@ export default {
     box-shadow: 0px 0px 4px 1px #c9404d;
   }
 
+  &.unknown:before {
+    background-color: #c9c740;
+    border-color: #ccc935;
+    box-shadow: 0px 0px 4px 1px #c9c740;
+  }
+
   &:before {
     content: " ";
     display: inline-block;
-- 
cgit v1.2.3


From c3878bca0bbaa2dd076ef83bf46a051139d67426 Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Tue, 13 Jul 2021 19:16:15 +0200
Subject: Adding Mealie service

---
 src/components/services/Mealie.vue | 96 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/components/services/Mealie.vue

(limited to 'src/components')

diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
new file mode 100644
index 0000000..7224bf4
--- /dev/null
+++ b/src/components/services/Mealie.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="card" :class="item.class">
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div class="media">
+            <div v-if="item.logo" class="media-left">
+              <figure class="image is-48x48">
+                <img :src="item.logo" :alt="`${item.name} logo`" />
+              </figure>
+            </div>
+            <div v-if="item.icon" class="media-left">
+              <figure class="image is-48x48">
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ item.name }}</p>
+              <p class="subtitle is-6">
+                <template v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </template>
+                <template v-else-if="meal">
+                  Today: {{ meal.name }}
+                </template>
+                <template v-else-if="stats">
+                  happily keeping {{ stats.totalRecipes }} recipes organized
+                </template>
+              </p>
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Mealie",
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    stats: null,
+    meal: null,
+  }),
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
+      var apikey = this.item.apikey;
+      if (apikey) {
+        const url = `${this.item.url}/api/meal-plans/today/`;
+        this.meal = await fetch(url, {
+            headers: {
+              "Authorization": "Bearer " + this.item.apikey,
+              "Accept": "application/json"
+            }
+          })
+          .then(function(response) {
+            if (!response.ok) {
+              throw new Error("Not 2xx response")
+            } else {
+              if (response != null) {
+                return response.json();
+              }
+            }
+          })
+          .catch((e) => console.log(e));
+      }
+      const url = `${this.item.url}/api/debug/statistics/`;
+      this.stats = await fetch(url)
+        .then(function(response) {
+          if (!response.ok) {
+            throw new Error("Not 2xx response")
+          } else {
+            return response.json();
+          }
+        })
+        .catch((e) => console.log(e));
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+</style>
-- 
cgit v1.2.3


From 64ac4c48d50d8ed3eda8ae2dfc37e4453c84cd90 Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Wed, 28 Jul 2021 16:10:11 +0200
Subject: Statistics now also need the token for authentication

---
 src/components/services/Mealie.vue | 55 +++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
index 7224bf4..acff1fb 100644
--- a/src/components/services/Mealie.vue
+++ b/src/components/services/Mealie.vue
@@ -55,35 +55,36 @@ export default {
     fetchStatus: async function () {
       if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
       var apikey = this.item.apikey;
-      if (apikey) {
-        const url = `${this.item.url}/api/meal-plans/today/`;
-        this.meal = await fetch(url, {
-            headers: {
-              "Authorization": "Bearer " + this.item.apikey,
-              "Accept": "application/json"
-            }
-          })
-          .then(function(response) {
-            if (!response.ok) {
-              throw new Error("Not 2xx response")
-            } else {
-              if (response != null) {
-                return response.json();
-              }
-            }
-          })
-          .catch((e) => console.log(e));
-      }
-      const url = `${this.item.url}/api/debug/statistics/`;
-      this.stats = await fetch(url)
-        .then(function(response) {
-          if (!response.ok) {
-            throw new Error("Not 2xx response")
-          } else {
+      this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
+        headers: {
+          "Authorization": "Bearer " + this.item.apikey,
+          "Accept": "application/json"
+        }
+      })
+      .then(function(response) {
+        if (!response.ok) {
+          throw new Error("Not 2xx response")
+        } else {
+          if (response != null) {
             return response.json();
           }
-        })
-        .catch((e) => console.log(e));
+        }
+      })
+      .catch((e) => console.log(e));
+      this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
+        headers: {
+          "Authorization": "Bearer " + this.item.apikey,
+          "Accept": "application/json"
+        }
+      })
+      .then(function(response) {
+        if (!response.ok) {
+          throw new Error("Not 2xx response")
+        } else {
+          return response.json();
+        }
+      })
+      .catch((e) => console.log(e));
     },
   },
 };
-- 
cgit v1.2.3


From ecec695272f3e41d66401affea7f6fe5a93d3c28 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:25:51 -0700
Subject: include credentials while making fetch calls

---
 src/components/services/PiHole.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index 7042a7b..ce0b689 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -64,7 +64,9 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}/api.php`;
-      this.api = await fetch(url)
+      this.api = await fetch(url{
+        credentials: 'include'
+      })
         .then((response) => response.json())
         .catch((e) => console.log(e));
     },
-- 
cgit v1.2.3


From 077be43473ebdb241c6a70e4d06795ca80a591fb Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:35:41 -0700
Subject: Update AdGuardHome.vue

---
 src/components/services/AdGuardHome.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index d4a2b89..bf5caa9 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -51,7 +51,9 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(`${this.item.url}/control/status`).then(
+      this.status = await fetch(`${this.item.url}/control/status`{
+        credentials: 'include',
+      }).then(
         (response) => response.json()
       );
     },
-- 
cgit v1.2.3


From cf2fb08dc72cee1add0e6e9b3d4ba19b38da88d3 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:37:17 -0700
Subject: Update PaperlessNG.vue

---
 src/components/services/PaperlessNG.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components')

diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index 4fb31f8..63a49a9 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -59,6 +59,7 @@ export default {
       }
       const url = `${this.item.url}/api/documents/`;
       this.api = await fetch(url, {
+        credentials: 'include',
         headers: {
           Authorization: "Token " + this.item.apikey,
         },
-- 
cgit v1.2.3


From 76a46c3507b5c0daef7edcb165e949dea4968e2f Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:38:24 -0700
Subject: Update Ping.vue

---
 src/components/services/Ping.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index 8a9b7a4..e693af4 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -50,7 +50,11 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
-      fetch(url, { method: "HEAD", cache: "no-cache" })
+      fetch(url, {
+        method: "HEAD",
+        cache: "no-cache",
+        credentials: "include",
+      })
         .then((response) => {
           if (!response.ok) {
             throw Error(response.statusText);
-- 
cgit v1.2.3


From 0dc3cea15ed9d24d35e6383c89036e8a5e2eb83a Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:40:22 -0700
Subject: Update PiHole.vue

---
 src/components/services/PiHole.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index ce0b689..ca87f9d 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -65,7 +65,7 @@ export default {
     fetchStatus: async function () {
       const url = `${this.item.url}/api.php`;
       this.api = await fetch(url{
-        credentials: 'include'
+        credentials: "include",
       })
         .then((response) => response.json())
         .catch((e) => console.log(e));
-- 
cgit v1.2.3


From 2f6d9e1b0910b5fb219ebd5078dbf940ed16f619 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:41:11 -0700
Subject: Update PaperlessNG.vue

---
 src/components/services/PaperlessNG.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index 63a49a9..af13317 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -59,7 +59,7 @@ export default {
       }
       const url = `${this.item.url}/api/documents/`;
       this.api = await fetch(url, {
-        credentials: 'include',
+        credentials: "include",
         headers: {
           Authorization: "Token " + this.item.apikey,
         },
-- 
cgit v1.2.3


From 4852ae6b85d5a35dc0c94711cdae8f804d32f762 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 11 Aug 2021 15:41:33 -0700
Subject: Update AdGuardHome.vue

---
 src/components/services/AdGuardHome.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index bf5caa9..9a3350d 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -52,7 +52,7 @@ export default {
   methods: {
     fetchStatus: async function () {
       this.status = await fetch(`${this.item.url}/control/status`{
-        credentials: 'include',
+        credentials: "include",
       }).then(
         (response) => response.json()
       );
-- 
cgit v1.2.3


From 7efcd282bb82463968a03f0f5c4a756a0d95c09c Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Mon, 16 Aug 2021 14:16:29 -0700
Subject: Update AdGuardHome.vue

---
 src/components/services/AdGuardHome.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 9a3350d..9238060 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -51,7 +51,7 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(`${this.item.url}/control/status`{
+      this.status = await fetch(`${this.item.url}/control/status`, {
         credentials: "include",
       }).then(
         (response) => response.json()
-- 
cgit v1.2.3


From bbe7149d5814efc1d97613af107b12ba8f8a1c22 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Mon, 16 Aug 2021 14:17:15 -0700
Subject: Update PiHole.vue

---
 src/components/services/PiHole.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index ca87f9d..87f7090 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -64,7 +64,7 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}/api.php`;
-      this.api = await fetch(url{
+      this.api = await fetch(url, {
         credentials: "include",
       })
         .then((response) => response.json())
-- 
cgit v1.2.3


From 55c3ea4d92b0c5628ead4475ae7359bbf2cc59c4 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 13 Sep 2021 22:03:13 +0200
Subject: Deps updates & lint

---
 src/components/services/AdGuardHome.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 9238060..19a2f7d 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -53,9 +53,7 @@ export default {
     fetchStatus: async function () {
       this.status = await fetch(`${this.item.url}/control/status`, {
         credentials: "include",
-      }).then(
-        (response) => response.json()
-      );
+      }).then((response) => response.json());
     },
   },
 };
-- 
cgit v1.2.3


From f11b1c9dcff418a2995a1089fa91fd9e44d6fe8b Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 13 Sep 2021 23:13:26 +0200
Subject: Weather service refactoring

---
 src/components/services/OpenWeather.vue | 133 +++++++++++++-------------------
 1 file changed, 52 insertions(+), 81 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 0fc1fe5..09ff76a 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,41 +1,30 @@
 <template>
   <div>
     <div class="card" :class="item.class">
-      <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
+      <a
+        :href="`https://openweathermap.org/city/${id}`"
+        :target="item.target"
+        rel="noreferrer"
+      >
         <div class="card-content">
           <div class="media">
-            <div v-if="image" class="media-left" :class="item.background">
+            <div v-if="icon" class="media-left" :class="item.background">
               <figure class="image is-48x48">
                 <img
-                  :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
+                  :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
                   :alt="conditions"
                   :title="conditions"
                 />
               </figure>
             </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
             <div class="media-content">
-              <p class="title is-4">{{ locationName }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-                <template v-else-if="api">
-                  <template v-if="temp !== ''">
-                    {{ temp }}
-                    <span v-if="this.item.units === 'metric'">&deg;C</span>
-                    <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
-                    <span v-else>K</span>
-                  </template>
-                  <template v-else> 
-                    <span class="error">Data could not be retrieved</span>                      
-                  </template>
-                </template>
-              </p>
+              <p v-if="error" class="error">Data could not be retrieved</p>
+              <div v-else>
+                <p class="title is-4">{{ name }}</p>
+                <p class="subtitle is-6">
+                  {{ temp | tempSuffix(this.item.units) }}
+                </p>
+              </div>
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -54,63 +43,21 @@ export default {
     item: Object,
   },
   data: () => ({
+    id: null,
+    icon: null,
+    name: null,
+    temp: null,
+    conditions: null,
     error: false,
-    api: {
-      id: "",
-      name: "",
-      weather: [
-        {
-          main: "",
-          description: "",
-          icon: "",
-        },
-      ],
-      main: {
-        temp: "",
-        humidity: "",
-      },
-    },
   }),
-  computed: {
-    locationId: function () {
-      if (this.api) {
-        return this.api.id;
-      }
-      return "";
-    },
-    locationName: function () {
-      if (this.api) {
-        return this.api.name;
-      }
-      return "";
-    },
-    temp: function () {
-      if (this.api && this.api.main.temp !== "") {
-        return parseInt(this.api.main.temp).toFixed(1);
-      }
-      return "";
-    },
-    image: function () {
-      if (this.api) {
-        return this.api.weather[0].icon;
-      }
-      return "";
-    },
-    conditions: function () {
-      if (this.api) {
-        return this.api.weather[0].description;
-      }
-      return "";
-    },
-  },
   created() {
-    this.fetchStatus();
+    this.fetchWeather();
   },
   methods: {
-    fetchStatus: async function () {
+    fetchWeather: async function () {
       let locationQuery;
 
-      // If a specific location ID was specified, use it. Otherwise retrieve value from location (name).
+      // Use location ID if specified, otherwise retrieve value from location (name).
       if (this.item.locationId) {
         locationQuery = `id=${this.item.locationId}`;
       } else {
@@ -118,19 +65,43 @@ export default {
       }
 
       const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
-      this.api = await fetch(url)
-        .then((response) => response.json())
-        .catch((e) => { 
-          this.error = true; 
-          console.log(e) 
+      fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((weather) => {
+          this.id = weather.id;
+          this.name = weather.name;
+          this.temp = parseInt(weather.main.temp).toFixed(1);
+          this.icon = weather.weather[0].icon;
+          this.conditions = weather.weather[0].description;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.error = true;
         });
     },
   },
+  filters: {
+    tempSuffix: function (value, type) {
+      if (!value) return "";
+
+      let unit = "K";
+      if (type === "metric") {
+        unit = "°C";
+      } else if (type === "imperial") {
+        unit = "°F";
+      }
+      return `${value} ${unit}`;
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-
 // Add a border around the weather image.
 // Otherwise the image is not always distinguishable.
 .media-left {
-- 
cgit v1.2.3


From b63add2f9573ba62db76972274fbb30ef4577610 Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Tue, 14 Sep 2021 22:44:42 +0200
Subject: Status visibility no longer depending on subtitle

---
 src/components/services/AdGuardHome.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 9aeaf39..61d4bed 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -25,7 +25,7 @@
                 </template>
               </p>
             </div>
-            <div v-if="!item.subtitle" class="status" :class="protection">
+            <div class="status" :class="protection">
               {{ protection }}
             </div>
           </div>
-- 
cgit v1.2.3


From eecd0db92e84eab5299441a9eb20f1e1d16691fb Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 22 Sep 2021 10:23:24 -0700
Subject: Add credentials: "include" back to Radarr`

---
 src/components/services/Radarr.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index 9d38292..a9cdedf 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -70,7 +70,9 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`)
+      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
@@ -92,7 +94,9 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`)
+      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
-- 
cgit v1.2.3


From e32643056e89baebef82b72ba6e342653cec74f2 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 22 Sep 2021 10:37:52 -0700
Subject: Add credentials: "include" back to Sonarr

---
 src/components/services/Sonarr.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 7851b6b..4d94c08 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -70,7 +70,9 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`)
+      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
-- 
cgit v1.2.3


From d6d078132b5ef5b2d7d1d62efc35343fc37e18f1 Mon Sep 17 00:00:00 2001
From: Colin <mcclurec@gmail.com>
Date: Wed, 22 Sep 2021 10:47:10 -0700
Subject: Update Sonarr.vue

---
 src/components/services/Sonarr.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 4d94c08..0270255 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -94,7 +94,9 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`)
+      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
-- 
cgit v1.2.3


From 1d3287dcca801a000dbdb40ef20fd26a97ebb2e3 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sat, 25 Sep 2021 12:12:22 +0200
Subject: Apply linters

---
 src/components/services/Mealie.vue | 51 ++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 27 deletions(-)

(limited to 'src/components')

diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
index acff1fb..790a9b1 100644
--- a/src/components/services/Mealie.vue
+++ b/src/components/services/Mealie.vue
@@ -20,9 +20,7 @@
                 <template v-if="item.subtitle">
                   {{ item.subtitle }}
                 </template>
-                <template v-else-if="meal">
-                  Today: {{ meal.name }}
-                </template>
+                <template v-else-if="meal"> Today: {{ meal.name }} </template>
                 <template v-else-if="stats">
                   happily keeping {{ stats.totalRecipes }} recipes organized
                 </template>
@@ -54,37 +52,36 @@ export default {
   methods: {
     fetchStatus: async function () {
       if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
-      var apikey = this.item.apikey;
       this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
         headers: {
-          "Authorization": "Bearer " + this.item.apikey,
-          "Accept": "application/json"
-        }
+          Authorization: "Bearer " + this.item.apikey,
+          Accept: "application/json",
+        },
       })
-      .then(function(response) {
-        if (!response.ok) {
-          throw new Error("Not 2xx response")
-        } else {
-          if (response != null) {
-            return response.json();
+        .then(function (response) {
+          if (!response.ok) {
+            throw new Error("Not 2xx response");
+          } else {
+            if (response != null) {
+              return response.json();
+            }
           }
-        }
-      })
-      .catch((e) => console.log(e));
+        })
+        .catch((e) => console.log(e));
       this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
         headers: {
-          "Authorization": "Bearer " + this.item.apikey,
-          "Accept": "application/json"
-        }
+          Authorization: "Bearer " + this.item.apikey,
+          Accept: "application/json",
+        },
       })
-      .then(function(response) {
-        if (!response.ok) {
-          throw new Error("Not 2xx response")
-        } else {
-          return response.json();
-        }
-      })
-      .catch((e) => console.log(e));
+        .then(function (response) {
+          if (!response.ok) {
+            throw new Error("Not 2xx response");
+          } else {
+            return response.json();
+          }
+        })
+        .catch((e) => console.log(e));
     },
   },
 };
-- 
cgit v1.2.3


From 2ca4faad9cb336ac8904bbc775fdcc2a12731b90 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Wed, 6 Oct 2021 22:55:09 +0200
Subject: Extendable base service for easier development.

---
 src/components/Service.vue              |  5 +--
 src/components/services/AdGuardHome.vue | 60 +++++++++++++--------------------
 src/components/services/Generic.vue     | 33 ++++++++++--------
 src/components/services/Ping.vue        | 49 +++++++--------------------
 4 files changed, 55 insertions(+), 92 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Service.vue b/src/components/Service.vue
index 8686759..39a9ac4 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -7,16 +7,13 @@ import Generic from "./services/Generic.vue";
 
 export default {
   name: "Service",
-  components: {
-    Generic,
-  },
   props: {
     item: Object,
   },
   computed: {
     component() {
       const type = this.item.type || "Generic";
-      if (type == "Generic") {
+      if (type === "Generic") {
         return Generic;
       }
       return () => import(`./services/${type}.vue`);
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 61d4bed..16881fa 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -1,49 +1,35 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-                <template v-else-if="stats">
-                  {{ percentage }}&percnt; blocked
-                </template>
-              </p>
-            </div>
-            <div class="status" :class="protection">
-              {{ protection }}
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="stats">
+          {{ percentage }}&percnt; blocked
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div class="status" :class="protection">
+        {{ protection }}
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import Generic from "./Generic.vue";
+
 export default {
   name: "AdGuardHome",
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => {
     return {
       status: null,
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
index 08bd3f6..af65a8c 100644
--- a/src/components/services/Generic.vue
+++ b/src/components/services/Generic.vue
@@ -8,22 +8,27 @@
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div :class="mediaClass">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
+            <slot name="icon">
+              <div v-if="item.logo" class="media-left">
+                <figure class="image is-48x48">
+                  <img :src="item.logo" :alt="`${item.name} logo`" />
+                </figure>
+              </div>
+              <div v-if="item.icon" class="media-left">
+                <figure class="image is-48x48">
+                  <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+                </figure>
+              </div>
+            </slot>
             <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6" v-if="item.subtitle">
-                {{ item.subtitle }}
-              </p>
+              <slot name="content">
+                <p class="title is-4">{{ item.name }}</p>
+                <p class="subtitle is-6" v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </p>
+              </slot>
             </div>
+            <slot name="indicator" class="indicator"></slot>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
             <strong class="tag-text">#{{ item.tag }}</strong>
diff --git a/src/components/services/Ping.vue b/src/components/services/Ping.vue
index e693af4..6fd3ec5 100644
--- a/src/components/services/Ping.vue
+++ b/src/components/services/Ping.vue
@@ -1,46 +1,24 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-              </p>
-            </div>
-            <div v-if="status" class="status" :class="status">
-              {{ status }}
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import Generic from "./Generic.vue";
+
 export default {
   name: "Ping",
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => ({
     status: null,
   }),
@@ -70,9 +48,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .status {
   font-size: 0.8rem;
   color: var(--text-title);
-- 
cgit v1.2.3