src/components/services/Sonarr.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="activity > 0"
  24                 class="notif activity"
  25                 title="Activity"
  26                 >{{ activity }}</strong
  27               >
  28               <strong
  29                 v-if="warnings > 0"
  30                 class="notif warnings"
  31                 title="Warning"
  32                 >{{ warnings }}</strong
  33               >
  34               <strong v-if="errors > 0" class="notif errors" title="Error">{{
  35                 errors
  36               }}</strong>
  37               <strong
  38                 v-if="serverError"
  39                 class="notif errors"
  40                 title="Connection error to Sonarr API, check url and apikey in config.yml"
  41                 >?</strong
  42               >
  43             </div>
  44           </div>
  45           <div class="tag" :class="item.tagstyle" v-if="item.tag">
  46             <strong class="tag-text">#{{ item.tag }}</strong>
  47           </div>
  48         </div>
  49       </a>
  50     </div>
  51   </div>
  52 </template>
  53
  54 <script>
  55 export default {
  56   name: "Sonarr",
  57   props: {
  58     item: Object,
  59   },
  60   data: () => {
  61     return {
  62       activity: null,
  63       warnings: null,
  64       errors: null,
  65       serverError: false,
  66     };
  67   },
  68   created: function () {
  69     this.fetchConfig();
  70   },
  71   methods: {
  72     fetchConfig: function () {
  73       fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
  74         credentials: "include",
  75       })
  76         .then((response) => {
  77           if (response.status != 200) {
  78             throw new Error(response.statusText);
  79           }
  80           return response.json();
  81         })
  82         .then((health) => {
  83           this.warnings = 0;
  84           this.errors = 0;
  85           for (var i = 0; i < health.length; i++) {
  86             if (health[i].type == "warning") {
  87               this.warnings++;
  88             } else if (health[i].type == "error") {
  89               this.errors++;
  90             }
  91           }
  92         })
  93         .catch((e) => {
  94           console.error(e);
  95           this.serverError = true;
  96         });
  97       fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`)
  98         .then((response) => {
  99           if (response.status != 200) {
 100             throw new Error(response.statusText);
 101           }
 102           return response.json();
 103         })
 104         .then((queue) => {
 105           this.activity = 0;
 106           for (var i = 0; i < queue.length; i++) {
 107             if (queue[i].series) {
 108               this.activity++;
 109             }
 110           }
 111         })
 112         .catch((e) => {
 113           console.error(e);
 114           this.serverError = true;
 115         });
 116     },
 117   },
 118 };
 119 </script>
 120
 121 <style scoped lang="scss">
 122 .media-left img {
 123   max-height: 100%;
 124 }
 125 .notifs {
 126   position: absolute;
 127   color: white;
 128   font-family: sans-serif;
 129   top: 0.3em;
 130   right: 0.5em;
 131 }
 132 .notif {
 133   padding-right: 0.35em;
 134   padding-left: 0.35em;
 135   padding-top: 0.2em;
 136   padding-bottom: 0.2em;
 137   border-radius: 0.25em;
 138   position: relative;
 139   margin-left: 0.3em;
 140   font-size: 0.8em;
 141 }
 142 .activity {
 143   background-color: #4fb5d6;
 144 }
 145
 146 .warnings {
 147   background-color: #d08d2e;
 148 }
 149
 150 .errors {
 151   background-color: #e51111;
 152 }
 153 </style>