src/components/services/SABnzbd.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong
   6           v-if="downloads > 0"
   7           class="notif downloading"
   8           :title="`${downloads} active download${downloads > 1 ? 's' : ''}`"
   9         >
  10           {{ downloads }}
  11         </strong>
  12         <i
  13           v-if="error"
  14           class="notif error fa-solid fa-triangle-exclamation"
  15           title="Unable to fetch current status"
  16         ></i>
  17       </div>
  18     </template>
  19   </Generic>
  20 </template>
  21
  22 <script>
  23 import service from "@/mixins/service.js";
  24 import Generic from "./Generic.vue";
  25
  26 export default {
  27   name: "SABnzbd",
  28   mixins: [service],
  29   props: {
  30     item: Object,
  31   },
  32   components: {
  33     Generic,
  34   },
  35   data: () => ({
  36     stats: null,
  37     error: false,
  38   }),
  39   computed: {
  40     downloads: function () {
  41       if (!this.stats) {
  42         return "";
  43       }
  44       return this.stats.noofslots;
  45     },
  46   },
  47   created() {
  48     const downloadInterval = parseInt(this.item.downloadInterval, 10) || 0;
  49     if (downloadInterval > 0) {
  50       setInterval(() => this.fetchStatus(), downloadInterval);
  51     }
  52
  53     this.fetchStatus();
  54   },
  55   methods: {
  56     fetchStatus: async function () {
  57       try {
  58         const response = await this.fetch(
  59           `/api?output=json&apikey=${this.item.apikey}&mode=queue`
  60         );
  61         this.error = false;
  62         this.stats = response.queue;
  63       } catch (e) {
  64         this.error = true;
  65         console.error(e);
  66       }
  67     },
  68   },
  69 };
  70 </script>
  71
  72 <style scoped lang="scss">
  73 .notifs {
  74   position: absolute;
  75   color: white;
  76   font-family: sans-serif;
  77   top: 0.3em;
  78   right: 0.5em;
  79
  80   .notif {
  81     display: inline-block;
  82     padding: 0.2em 0.35em;
  83     border-radius: 0.25em;
  84     position: relative;
  85     margin-left: 0.3em;
  86     font-size: 0.8em;
  87
  88     &.downloading {
  89       background-color: #4fb5d6;
  90     }
  91
  92     &.error {
  93       border-radius: 50%;
  94       aspect-ratio: 1;
  95       background-color: #e51111;
  96     }
  97   }
  98 }
  99 </style>