src/components/services/Lidarr.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 Lidarr 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: "Lidarr",
  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/v1/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/v1/queue/status?apikey=${this.item.apikey}`)
  68         .then((queue) => {
  69           this.activity = queue.totalCount;
  70         })
  71         .catch((e) => {
  72           console.error(e);
  73           this.serverError = true;
  74         });
  75     },
  76   },
  77 };
  78 </script>
  79
  80 <style scoped lang="scss">
  81 .notifs {
  82   position: absolute;
  83   color: white;
  84   font-family: sans-serif;
  85   top: 0.3em;
  86   right: 0.5em;
  87   .notif {
  88     display: inline-block;
  89     padding-right: 0.35em;
  90     padding-left: 0.35em;
  91     padding-top: 0.2em;
  92     padding-bottom: 0.2em;
  93     border-radius: 0.25em;
  94     position: relative;
  95     margin-left: 0.3em;
  96     font-size: 0.8em;
  97     &.activity {
  98       background-color: #4fb5d6;
  99     }
 100
 101     &.warnings {
 102       background-color: #d08d2e;
 103     }
 104
 105     &.errors {
 106       background-color: #e51111;
 107     }
 108   }
 109 }
 110 </style>