Merge pull request bastienwirtz#246 from waschinski/mealie-service

Adding Mealie service

Author: bastienwirtz

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.

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>