src/components/services/Medusa.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">{{ item.subtitle }}</p>
  20             </div>
  21             <div class="notifs">
  22               <strong
  23                 v-if="config !== null && config.system.news.unread > 0"
  24                 class="notif news"
  25                 title="News"
  26                 >{{ config.system.news.unread }}</strong
  27               >
  28               <strong
  29                 v-if="config !== null && config.main.logs.numWarnings > 0"
  30                 class="notif warnings"
  31                 title="Warning"
  32                 >{{ config.main.logs.numWarnings }}</strong
  33               >
  34               <strong
  35                 v-if="config !== null && config.main.logs.numErrors > 0"
  36                 class="notif errors"
  37                 title="Error"
  38                 >{{ config.main.logs.numErrors }}</strong
  39               >
  40               <strong
  41                 v-if="serverError"
  42                 class="notif errors"
  43                 title="Connection error to Medusa API, check url and apikey in config.yml"
  44                 >?</strong
  45               >
  46             </div>
  47           </div>
  48           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  49             <strong class="tag-text">#{{ item.tag }}</strong>
  50           </div>
  51         </div>
  52       </a>
  53     </div>
  54   </div>
  55 </template>
  56
  57 <script>
  58 export default {
  59   name: "Medusa",
  60   props: {
  61     item: Object,
  62   },
  63   data: () => {
  64     return {
  65       config: null,
  66       serverError: false,
  67     };
  68   },
  69   created: function () {
  70     this.fetchConfig();
  71   },
  72   methods: {
  73     fetchConfig: function () {
  74       fetch(`${this.item.url}/api/v2/config`, {
  75         credentials: "include",
  76         headers: { "X-Api-Key": `${this.item.apikey}` },
  77       })
  78         .then((response) => {
  79           if (response.status != 200) {
  80             throw new Error(response.statusText);
  81           }
  82           return response.json();
  83         })
  84         .then((conf) => {
  85           this.config = conf;
  86         })
  87         .catch((e) => {
  88           console.log(e);
  89           this.serverError = true;
  90         });
  91     },
  92   },
  93 };
  94 </script>
  95
  96 <style scoped lang="scss">
  97 .media-left img {
  98   max-height: 100%;
  99 }
 100 .notifs {
 101   position: absolute;
 102   color: white;
 103   font-family: sans-serif;
 104   top: 0.3em;
 105   right: 0.5em;
 106 }
 107 .notif {
 108   padding-right: 0.35em;
 109   padding-left: 0.35em;
 110   padding-top: 0.2em;
 111   padding-bottom: 0.2em;
 112   border-radius: 0.25em;
 113   position: relative;
 114   margin-left: 0.3em;
 115   font-size: 0.8em;
 116 }
 117 .news {
 118   background-color: #777777;
 119 }
 120
 121 .warnings {
 122   background-color: #d08d2e;
 123 }
 124
 125 .errors {
 126   background-color: #e51111;
 127 }
 128 </style>