src/components/services/Mealie.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #content>
   4       <p class="title is-4">{{ item.name }}</p>
   5       <p class="subtitle is-6">
   6         <template v-if="item.subtitle">
   7           {{ item.subtitle }}
   8         </template>
   9         <template v-else-if="meal"> Today: {{ meal.name }} </template>
  10         <template v-else-if="stats">
  11           happily keeping {{ stats.totalRecipes }} recipes organized
  12         </template>
  13       </p>
  14     </template>
  15   </Generic>
  16 </template>
  17
  18 <script>
  19 import service from "@/mixins/service.js";
  20 import Generic from "./Generic.vue";
  21
  22 export default {
  23   name: "Mealie",
  24   mixins: [service],
  25   props: {
  26     item: Object,
  27   },
  28   components: {
  29     Generic,
  30   },
  31   data: () => ({
  32     stats: null,
  33     meal: null,
  34   }),
  35   created() {
  36     this.fetchStatus();
  37   },
  38   methods: {
  39     fetchStatus: async function () {
  40       const headers = {
  41         Authorization: "Bearer " + this.item.apikey,
  42         Accept: "application/json",
  43       };
  44
  45       if (this.item.subtitle != null) return;
  46
  47       this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
  48         (e) => console.log(e),
  49       );
  50       this.stats = await this.fetch("/api/debug/statistics/", {
  51         headers,
  52       }).catch((e) => console.log(e));
  53     },
  54   },
  55 };
  56 </script>