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