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: [PATCH 1/3] Adding Mealie service

---
 docs/configuration.md              | 17 ++++++
 src/components/services/Mealie.vue | 96 ++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 src/components/services/Mealie.vue

diff --git a/docs/configuration.md b/docs/configuration.md
index a472b41..dfe3761 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -167,3 +167,20 @@ In order to easily generate all required icon preset for the PWA to work, a tool
 ```bash
 npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
 ```
+
+### Supported services
+
+Currently the following services are supported for showing quick infos on the card. They can be used by setting the type to one of the following values at the item.
+
+- PiHole
+- AdGuardHome
+- PaperlessNG
+- Mealie
+
+### Additional configuration
+
+#### Paperless
+For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
+
+#### Mealie
+First off make sure to remove an existing `subtitle` as it will take precedence if set. Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized. If you want the planned meal for today to be shown instead (and _only_ if one is planned of course) you will also have to set an API key in the field `apikey`. You can create such a key in your Mealie installation.
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>

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: [PATCH 2/3] Statistics now also need the token for authentication

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

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));
     },
   },
 };

From 4386cd094b4e7869a7fa5aad3a9df9cd1d282021 Mon Sep 17 00:00:00 2001
From: Andreas Waschinski <25221082+waschinski@users.noreply.github.com>
Date: Wed, 28 Jul 2021 16:12:19 +0200
Subject: [PATCH 3/3] Updating configuration

---
 docs/configuration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index dfe3761..f160ae0 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -183,4 +183,4 @@ Currently the following services are supported for showing quick infos on the ca
 For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
 
 #### Mealie
-First off make sure to remove an existing `subtitle` as it will take precedence if set. Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized. If you want the planned meal for today to be shown instead (and _only_ if one is planned of course) you will also have to set an API key in the field `apikey`. You can create such a key in your Mealie installation.
+First off make sure to remove an existing `subtitle` as it will take precedence if set. Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.