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 export default {
  30   name: "Radarr",
  31   mixins: [service],
  32   props: {
  33     item: Object,
  34   },
  35   components: {
  36     Generic,
  37   },
  38   data: () => {
  39     return {
  40       activity: null,
  41       warnings: null,
  42       errors: null,
  43       serverError: false,
  44     };
  45   },
  46   created: function () {
  47     this.fetchConfig();
  48   },
  49   methods: {
  50     fetchConfig: function () {
  51       this.fetch(`/api/health?apikey=${this.item.apikey}`)
  52         .then((health) => {
  53           this.warnings = 0;
  54           this.errors = 0;
  55           for (var i = 0; i < health.length; i++) {
  56             if (health[i].type == "warning") {
  57               this.warnings++;
  58             } else if (health[i].type == "error") {
  59               this.errors++;
  60             }
  61           }
  62         })
  63         .catch((e) => {
  64           console.error(e);
  65           this.serverError = true;
  66         });
  67       this.fetch(`/api/queue?apikey=${this.item.apikey}`)
  68         .then((queue) => {
  69           this.activity = 0;
  70           for (var i = 0; i < queue.length; i++) {
  71             if (queue[i].movie) {
  72               this.activity++;
  73             }
  74           }
  75         })
  76         .catch((e) => {
  77           console.error(e);
  78           this.serverError = true;
  79         });
  80     },
  81   },
  82 };
  83 </script>
  84
  85 <style scoped lang="scss">
  86 .notifs {
  87   position: absolute;
  88   color: white;
  89   font-family: sans-serif;
  90   top: 0.3em;
  91   right: 0.5em;
  92   .notif {
  93     display: inline-block;
  94     padding: 0.2em 0.35em;
  95     border-radius: 0.25em;
  96     position: relative;
  97     margin-left: 0.3em;
  98     font-size: 0.8em;
  99     &.activity {
 100       background-color: #4fb5d6;
 101     }
 102
 103     &.warnings {
 104       background-color: #d08d2e;
 105     }
 106
 107     &.errors {
 108       background-color: #e51111;
 109     }
 110   }
 111 }
 112 </style>