src/components/services/Tdarr.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #indicator>
   4       <div class="notifs">
   5         <strong
   6           v-if="queue > 0"
   7           class="notif queue"
   8           :title="`${queue} items queued`"
   9         >
  10           {{ queue }}
  11         </strong>
  12         <strong
  13           v-if="errored > 0"
  14           class="notif errored"
  15           :title="`${errored} items`"
  16         >
  17           {{ errored }}
  18         </strong>
  19         <i
  20           v-if="error"
  21           class="notif error fa-solid fa-triangle-exclamation"
  22           title="Unable to fetch current status"
  23         ></i>
  24       </div>
  25     </template>
  26   </Generic>
  27 </template>
  28
  29 <script>
  30 import service from "@/mixins/service.js";
  31 import Generic from "./Generic.vue";
  32
  33 export default {
  34   name: "Tdarr",
  35   mixins: [service],
  36   props: {
  37     item: Object,
  38   },
  39   components: {
  40     Generic,
  41   },
  42   data: () => ({
  43     stats: null,
  44     error: false,
  45   }),
  46   computed: {
  47     queue: function () {
  48       if (!this.stats) {
  49         return "";
  50       }
  51       return this.stats.table1Count;
  52     },
  53     errored: function () {
  54       if (!this.stats) {
  55         return "";
  56       }
  57       return this.stats.table6Count;
  58     },
  59   },
  60   created() {
  61     const checkInterval = parseInt(this.item.checkInterval, 10) || 0;
  62     if (checkInterval > 0) {
  63       setInterval(() => this.fetchStatus(), checkInterval);
  64     }
  65
  66     this.fetchStatus();
  67   },
  68   methods: {
  69     fetchStatus: async function () {
  70       try {
  71         const options = {
  72           method: "POST",
  73           headers: {
  74             "Content-Type": "application/json",
  75             Accept: "application/json",
  76           },
  77           body: JSON.stringify({
  78             headers: { "content-Type": "application/json" },
  79             data: {
  80               collection: "StatisticsJSONDB",
  81               mode: "getById",
  82               docID: "statistics",
  83               obj: {},
  84             },
  85             timeout: 1000,
  86           }),
  87         };
  88         const response = await this.fetch(`/api/v2/cruddb`, options);
  89         this.error = false;
  90         this.stats = response;
  91       } catch (e) {
  92         this.error = true;
  93         console.error(e);
  94       }
  95     },
  96   },
  97 };
  98 </script>
  99
 100 <style scoped lang="scss">
 101 .notifs {
 102   position: absolute;
 103   color: white;
 104   font-family: sans-serif;
 105   top: 0.3em;
 106   right: 0.5em;
 107
 108   .notif {
 109     display: inline-block;
 110     padding: 0.2em 0.35em;
 111     border-radius: 0.25em;
 112     position: relative;
 113     margin-left: 0.3em;
 114     font-size: 0.8em;
 115
 116     &.queue {
 117       background-color: #28a9a3;
 118     }
 119
 120     &.errored {
 121       background-color: #e51111;
 122     }
 123
 124     &.error {
 125       border-radius: 50%;
 126       aspect-ratio: 1;
 127       background-color: #e51111;
 128     }
 129   }
 130 }
 131 </style>