aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAndreas Waschinski <25221082+waschinski@users.noreply.github.com>2021-07-13 19:16:15 +0200
committerAndreas Waschinski <25221082+waschinski@users.noreply.github.com>2021-07-13 19:16:15 +0200
commitc3878bca0bbaa2dd076ef83bf46a051139d67426 (patch)
tree82706e4e0cefaf912d15cbd75d4d0e11d0c04ac6
parent996011956b97566849167ccd6ec470ab38b0ec60 (diff)
downloadhomer-c3878bca0bbaa2dd076ef83bf46a051139d67426.tar.gz
homer-c3878bca0bbaa2dd076ef83bf46a051139d67426.tar.zst
homer-c3878bca0bbaa2dd076ef83bf46a051139d67426.zip
Adding Mealie service
-rw-r--r--docs/configuration.md17
-rw-r--r--src/components/services/Mealie.vue96
2 files changed, 113 insertions, 0 deletions
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
167```bash 167```bash
168npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder} 168npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
169``` 169```
170
171### Supported services
172
173Currently 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.
174
175- PiHole
176- AdGuardHome
177- PaperlessNG
178- Mealie
179
180### Additional configuration
181
182#### Paperless
183For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
184
185#### Mealie
186First 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 @@
1<template>
2 <div>
3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
6 <div class="media">
7 <div v-if="item.logo" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="item.logo" :alt="`${item.name} logo`" />
10 </figure>
11 </div>
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.name }}</p>
19 <p class="subtitle is-6">
20 <template v-if="item.subtitle">
21 {{ item.subtitle }}
22 </template>
23 <template v-else-if="meal">
24 Today: {{ meal.name }}
25 </template>
26 <template v-else-if="stats">
27 happily keeping {{ stats.totalRecipes }} recipes organized
28 </template>
29 </p>
30 </div>
31 </div>
32 <div class="tag" :class="item.tagstyle" v-if="item.tag">
33 <strong class="tag-text">#{{ item.tag }}</strong>
34 </div>
35 </div>
36 </a>
37 </div>
38 </div>
39</template>
40
41<script>
42export default {
43 name: "Mealie",
44 props: {
45 item: Object,
46 },
47 data: () => ({
48 stats: null,
49 meal: null,
50 }),
51 created() {
52 this.fetchStatus();
53 },
54 methods: {
55 fetchStatus: async function () {
56 if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
57 var apikey = this.item.apikey;
58 if (apikey) {
59 const url = `${this.item.url}/api/meal-plans/today/`;
60 this.meal = await fetch(url, {
61 headers: {
62 "Authorization": "Bearer " + this.item.apikey,
63 "Accept": "application/json"
64 }
65 })
66 .then(function(response) {
67 if (!response.ok) {
68 throw new Error("Not 2xx response")
69 } else {
70 if (response != null) {
71 return response.json();
72 }
73 }
74 })
75 .catch((e) => console.log(e));
76 }
77 const url = `${this.item.url}/api/debug/statistics/`;
78 this.stats = await fetch(url)
79 .then(function(response) {
80 if (!response.ok) {
81 throw new Error("Not 2xx response")
82 } else {
83 return response.json();
84 }
85 })
86 .catch((e) => console.log(e));
87 },
88 },
89};
90</script>
91
92<style scoped lang="scss">
93.media-left img {
94 max-height: 100%;
95}
96</style>