Merge pull request #243 from waschinski/patch-1

Improving Adguard Home service

diff --git a/docs/configuration.md b/docs/configuration.md
index a76ecb3b8fa28eacc89cd913f85856f2b3e11507..68711ec4325795dfffeb992a82fe28429e70ede0 100644 (file)
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -170,3 +170,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 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.

diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
new file mode 100644 (file)
index 0000000..acff1fb
--- /dev/null
+++ b/src/components/services/Mealie.vue
@@ -0,0 +1,97 @@
+<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;
+      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));
+      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));
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+</style>