src/components/services/Radarr.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 Radarr API, check url and apikey in config.yml"
  18           >?</strong
  19         >
  20       </div>
  21     </template>
  22   </Generic>
  23 </template>
  24
  25 <script>
  26 import service from "@/mixins/service.js";
  27 import Generic from "./Generic.vue";
  28
  29 const V3_API = "/api/v3";
  30 const LEGACY_API = "/api";
  31
  32 export default {
  33   name: "Radarr",
  34   mixins: [service],
  35   props: {
  36     item: Object,
  37   },
  38   components: {
  39     Generic,
  40   },
  41   data: () => {
  42     return {
  43       activity: null,
  44       warnings: null,
  45       errors: null,
  46       serverError: false,
  47     };
  48   },
  49   created: function () {
  50     this.fetchConfig();
  51   },
  52   computed: {
  53     apiPath() {
  54       return this.item.legacyApi ? LEGACY_API : V3_API;
  55     },
  56   },
  57   methods: {
  58     fetchConfig: function () {
  59       this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
  60         .then((health) => {
  61           this.warnings = 0;
  62           this.errors = 0;
  63           for (var i = 0; i < health.length; i++) {
  64             if (health[i].type == "warning") {
  65               this.warnings++;
  66             } else if (health[i].type == "error") {
  67               this.errors++;
  68             }
  69           }
  70         })
  71         .catch((e) => {
  72           console.error(e);
  73           this.serverError = true;
  74         });
  75       this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
  76         .then((queue) => {
  77           this.activity = 0;
  78
  79           if (this.item.legacyApi) {
  80             for (var i = 0; i < queue.length; i++) {
  81               if (queue[i].movie) {
  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   .notif {
 106     display: inline-block;
 107     padding: 0.2em 0.35em;
 108     border-radius: 0.25em;
 109     position: relative;
 110     margin-left: 0.3em;
 111     font-size: 0.8em;
 112     &.activity {
 113       background-color: #4fb5d6;
 114     }
 115
 116     &.warnings {
 117       background-color: #d08d2e;
 118     }
 119
 120     &.errors {
 121       background-color: #e51111;
 122     }
 123   }
 124 }
 125 </style>