src/components/services/Sonarr.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong v-if="activity > 0" class="notif activity" title="Activity">
   6           {{ activity }}
   7         </strong>
   8         <strong v-if="warnings > 0" class="notif warnings" title="Warning">
   9           {{ warnings }}
  10         </strong>
  11         <strong v-if="errors > 0" class="notif errors" title="Error">
  12           {{ errors }}
  13         </strong>
  14         <strong
  15           v-if="serverError"
  16           class="notif errors"
  17           title="Connection error to Sonarr API, check url and apikey in config.yml"
  18         >
  19           ?
  20         </strong>
  21       </div>
  22     </template>
  23   </Generic>
  24 </template>
  25
  26 <script>
  27 import service from "@/mixins/service.js";
  28 import Generic from "./Generic.vue";
  29
  30 const V3_API = "/api/v3";
  31 const LEGACY_API = "/api";
  32
  33 export default {
  34   name: "Sonarr",
  35   mixins: [service],
  36   props: {
  37     item: Object,
  38   },
  39   components: {
  40     Generic,
  41   },
  42   computed: {
  43     apiPath() {
  44       return this.item.legacyApi ? LEGACY_API : V3_API;
  45     },
  46   },
  47   data: () => {
  48     return {
  49       activity: null,
  50       warnings: null,
  51       errors: null,
  52       serverError: false,
  53     };
  54   },
  55   created: function () {
  56     this.fetchConfig();
  57   },
  58   methods: {
  59     fetchConfig: function () {
  60       this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
  61         .then((health) => {
  62           this.warnings = 0;
  63           this.errors = 0;
  64           for (var i = 0; i < health.length; i++) {
  65             if (health[i].type == "warning") {
  66               this.warnings++;
  67             } else if (health[i].type == "error") {
  68               this.errors++;
  69             }
  70           }
  71         })
  72         .catch((e) => {
  73           console.error(e);
  74           this.serverError = true;
  75         });
  76       this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
  77         .then((queue) => {
  78           this.activity = 0;
  79           if (this.item.legacyApi) {
  80             for (var i = 0; i < queue.length; i++) {
  81               if (queue[i].series) {
  82                 this.activity++;
  83               }
  84             }
  85           } else {
  86             this.activity = queue.totalRecords;
  87           }
  88         })
  89         .catch((e) => {
  90           console.error(e);
  91           this.serverError = true;
  92         });
  93     },
  94   },
  95 };
  96 </script>
  97
  98 <style scoped lang="scss">
  99 .notifs {
 100   position: absolute;
 101   color: white;
 102   font-family: sans-serif;
 103   top: 0.3em;
 104   right: 0.5em;
 105
 106   .notif {
 107     display: inline-block;
 108     padding: 0.2em 0.35em;
 109     border-radius: 0.25em;
 110     position: relative;
 111     margin-left: 0.3em;
 112     font-size: 0.8em;
 113
 114     &.activity {
 115       background-color: #4fb5d6;
 116     }
 117
 118     &.warnings {
 119       background-color: #d08d2e;
 120     }
 121
 122     &.errors {
 123       background-color: #e51111;
 124     }
 125   }
 126 }
 127 </style>