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           for (var i = 0; i < queue.length; i++) {
  79             if (queue[i].movie) {
  80               this.activity++;
  81             }
  82           }
  83         })
  84         .catch((e) => {
  85           console.error(e);
  86           this.serverError = true;
  87         });
  88     },
  89   },
  90 };
  91 </script>
  92
  93 <style scoped lang="scss">
  94 .notifs {
  95   position: absolute;
  96   color: white;
  97   font-family: sans-serif;
  98   top: 0.3em;
  99   right: 0.5em;
 100   .notif {
 101     display: inline-block;
 102     padding: 0.2em 0.35em;
 103     border-radius: 0.25em;
 104     position: relative;
 105     margin-left: 0.3em;
 106     font-size: 0.8em;
 107     &.activity {
 108       background-color: #4fb5d6;
 109     }
 110
 111     &.warnings {
 112       background-color: #d08d2e;
 113     }
 114
 115     &.errors {
 116       background-color: #e51111;
 117     }
 118   }
 119 }
 120 </style>