src/components/services/Prowlarr.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong v-if="warnings > 0" class="notif warnings" title="Warning">
   6           {{ warnings }}
   7         </strong>
   8         <strong v-if="errors > 0" class="notif errors" title="Error">
   9           {{ errors }}
  10         </strong>
  11         <strong
  12           v-if="serverError"
  13           class="notif errors"
  14           title="Connection error to Prowlarr API, check url and apikey in config.yml"
  15         >
  16           ?
  17         </strong>
  18       </div>
  19     </template>
  20   </Generic>
  21 </template>
  22
  23 <script>
  24 import service from "@/mixins/service.js";
  25 import Generic from "./Generic.vue";
  26
  27 export default {
  28   name: "Prowlarr",
  29   mixins: [service],
  30   props: {
  31     item: Object,
  32   },
  33   components: {
  34     Generic,
  35   },
  36   data: () => {
  37     return {
  38       warnings: null,
  39       errors: null,
  40       serverError: false,
  41     };
  42   },
  43   created: function () {
  44     this.fetchConfig();
  45   },
  46   methods: {
  47     fetchConfig: function () {
  48       this.fetch(`/api/v1/health?apikey=${this.item.apikey}`)
  49         .then((health) => {
  50           this.warnings = 0;
  51           this.errors = 0;
  52           for (var i = 0; i < health.length; i++) {
  53             if (health[i].type == "warning") {
  54               this.warnings++;
  55             } else if (health[i].type == "error") {
  56               this.errors++;
  57             }
  58           }
  59         })
  60         .catch((e) => {
  61           console.error(e);
  62           this.serverError = true;
  63         });
  64     },
  65   },
  66 };
  67 </script>
  68
  69 <style scoped lang="scss">
  70 .notifs {
  71   position: absolute;
  72   color: white;
  73   font-family: sans-serif;
  74   top: 0.3em;
  75   right: 0.5em;
  76
  77   .notif {
  78     display: inline-block;
  79     padding: 0.2em 0.35em;
  80     border-radius: 0.25em;
  81     position: relative;
  82     margin-left: 0.3em;
  83     font-size: 0.8em;
  84
  85     &.warnings {
  86       background-color: #d08d2e;
  87     }
  88
  89     &.errors {
  90       background-color: #e51111;
  91     }
  92   }
  93 }
  94 </style>