]>
Commit | Line | Data |
---|---|---|
c3878bca AW |
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> | |
1d3287dc | 23 | <template v-else-if="meal"> Today: {{ meal.name }} </template> |
c3878bca AW |
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> | |
38 | ||
39 | <script> | |
40 | export default { | |
41 | name: "Mealie", | |
42 | props: { | |
43 | item: Object, | |
44 | }, | |
45 | data: () => ({ | |
46 | stats: null, | |
47 | meal: null, | |
48 | }), | |
49 | created() { | |
50 | this.fetchStatus(); | |
51 | }, | |
52 | methods: { | |
53 | fetchStatus: async function () { | |
54 | if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing | |
64ac4c48 AW |
55 | this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, { |
56 | headers: { | |
1d3287dc BW |
57 | Authorization: "Bearer " + this.item.apikey, |
58 | Accept: "application/json", | |
59 | }, | |
64ac4c48 | 60 | }) |
1d3287dc BW |
61 | .then(function (response) { |
62 | if (!response.ok) { | |
63 | throw new Error("Not 2xx response"); | |
64 | } else { | |
65 | if (response != null) { | |
66 | return response.json(); | |
67 | } | |
c3878bca | 68 | } |
1d3287dc BW |
69 | }) |
70 | .catch((e) => console.log(e)); | |
64ac4c48 AW |
71 | this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, { |
72 | headers: { | |
1d3287dc BW |
73 | Authorization: "Bearer " + this.item.apikey, |
74 | Accept: "application/json", | |
75 | }, | |
64ac4c48 | 76 | }) |
1d3287dc BW |
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)); | |
c3878bca AW |
85 | }, |
86 | }, | |
87 | }; | |
88 | </script> | |
89 | ||
90 | <style scoped lang="scss"> | |
91 | .media-left img { | |
92 | max-height: 100%; | |
93 | } | |
94 | </style> |