1 files changed, 34 insertions, 72 deletions
diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
index 790a9b1..b5b2255 100644
--- a/src/components/services/Mealie.vue
+++ b/src/components/services/Mealie.vue
@@ -1,47 +1,33 @@
 <template>
-  <div>
+  <Generic :item="item">
-    <div class="card" :class="item.class">
+    <template #content>
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <p class="title is-4">{{ item.name }}</p>
-        <div class="card-content">
+      <p class="subtitle is-6">
-          <div class="media">
+        <template v-if="item.subtitle">
-            <div v-if="item.logo" class="media-left">
+          {{ item.subtitle }}
-              <figure class="image is-48x48">
+        </template>
-                <img :src="item.logo" :alt="`${item.name} logo`" />
+        <template v-else-if="meal"> Today: {{ meal.name }} </template>
-              </figure>
+        <template v-else-if="stats">
-            </div>
+          happily keeping {{ stats.totalRecipes }} recipes organized
-            <div v-if="item.icon" class="media-left">
+        </template>
-              <figure class="image is-48x48">
+      </p>
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+    </template>
-              </figure>
+  </Generic>
-            </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>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
 export default {
  name: "Mealie",
+  mixins: [service],
  props: {
    item: Object,
  },
+  components: {
+    Generic,
+  },
  data: () => ({
    stats: null,
    meal: null,
@@ -51,44 +37,20 @@ export default {
  },
  methods: {
    fetchStatus: async function () {
-      if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
+      const headers = {
-      this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
+        Authorization: "Bearer " + this.item.apikey,
-        headers: {
+        Accept: "application/json",
-          Authorization: "Bearer " + this.item.apikey,
+      };
-          Accept: "application/json",
-        },
+      if (this.item.subtitle != null) return;
-      })
-        .then(function (response) {
+      this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
-          if (!response.ok) {
+        (e) => console.log(e)
-            throw new Error("Not 2xx response");
+      );
-          } else {
+      this.stats = await this.fetch("/api/debug/statistics/", {
-            if (response != null) {
+        headers,
-              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));
    },
  },
 };
 </script>
-<style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
-</style>

diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue index 790a9b1..b5b2255 100644 --- a/src/components/services/Mealie.vue +++ b/src/components/services/Mealie.vue
@@ -1,47 +1,33 @@
1	<template>	1	<template>
2	<div>	2	<Generic :item="item">
3	<div class="card" :class="item.class">	3	<template #content>
4	<a :href="item.url" :target="item.target" rel="noreferrer">	4	<p class="title is-4">{{ item.name }}</p>
5	<div class="card-content">	5	<p class="subtitle is-6">
6	<div class="media">	6	<template v-if="item.subtitle">
7	<div v-if="item.logo" class="media-left">	7	{{ item.subtitle }}
8	<figure class="image is-48x48">	8	</template>
9	<img :src="item.logo" :alt="`${item.name} logo`" />	9	<template v-else-if="meal"> Today: {{ meal.name }} </template>
10	</figure>	10	<template v-else-if="stats">
11	</div>	11	happily keeping {{ stats.totalRecipes }} recipes organized
12	<div v-if="item.icon" class="media-left">	12	</template>
13	<figure class="image is-48x48">	13	</p>
14	<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>	14	</template>
15	</figure>	15	</Generic>
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"> Today: {{ meal.name }} </template>
24	<template v-else-if="stats">
25	happily keeping {{ stats.totalRecipes }} recipes organized
26	</template>
27	</p>
28	</div>
29	</div>
30	<div class="tag" :class="item.tagstyle" v-if="item.tag">
31	<strong class="tag-text">#{{ item.tag }}</strong>
32	</div>
33	</div>
34	</a>
35	</div>
36	</div>
37	</template>	16	</template>
38		17
39	<script>	18	<script>
		19	import service from "@/mixins/service.js";
		20	import Generic from "./Generic.vue";
		21
40	export default {	22	export default {
41	name: "Mealie",	23	name: "Mealie",
		24	mixins: [service],
42	props: {	25	props: {
43	item: Object,	26	item: Object,
44	},	27	},
		28	components: {
		29	Generic,
		30	},
45	data: () => ({	31	data: () => ({
46	stats: null,	32	stats: null,
47	meal: null,	33	meal: null,
@@ -51,44 +37,20 @@ export default {
51	},	37	},
52	methods: {	38	methods: {
53	fetchStatus: async function () {	39	fetchStatus: async function () {
54	if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing	40	const headers = {
55	this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {	41	Authorization: "Bearer " + this.item.apikey,
56	headers: {	42	Accept: "application/json",
57	Authorization: "Bearer " + this.item.apikey,	43	};
58	Accept: "application/json",	44
59	},	45	if (this.item.subtitle != null) return;
60	})	46
61	.then(function (response) {	47	this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
62	if (!response.ok) {	48	(e) => console.log(e)
63	throw new Error("Not 2xx response");	49	);
64	} else {	50	this.stats = await this.fetch("/api/debug/statistics/", {
65	if (response != null) {	51	headers,
66	return response.json();	52	}).catch((e) => console.log(e));
67	}
68	}
69	})
70	.catch((e) => console.log(e));
71	this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
72	headers: {
73	Authorization: "Bearer " + this.item.apikey,
74	Accept: "application/json",
75	},
76	})
77	.then(function (response) {
78	if (!response.ok) {
79	throw new Error("Not 2xx response");
80	} else {
81	return response.json();
82	}
83	})
84	.catch((e) => console.log(e));
85	},	53	},
86	},	54	},
87	};	55	};
88	</script>	56	</script>
89
90	<style scoped lang="scss">
91	.media-left img {
92	max-height: 100%;
93	}
94	</style>