src/components/services/Mealie.vue

   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"> 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>
  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
  55       this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
  56         headers: {
  57           Authorization: "Bearer " + this.item.apikey,
  58           Accept: "application/json",
  59         },
  60       })
  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             }
  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     },
  86   },
  87 };
  88 </script>
  89
  90 <style scoped lang="scss">
  91 .media-left img {
  92   max-height: 100%;
  93 }
  94 </style>