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({"headers":{"content-Type":"application/json"},"data":{"collection":"StatisticsJSONDB","mode":"getById","docID":"statistics","obj":{}},"timeout":1000}),
  78         };
  79         const response = await this.fetch(
  80           `/api/v2/cruddb`,
  81           options
  82         );
  83         this.error = false;
  84         this.stats = response;
  85       } catch (e) {
  86         this.error = true;
  87         console.error(e);
  88       }
  89     },
  90   },
  91 };
  92 </script>
  93
  94 <style scoped lang="scss">
  95 .notifs {
  96   position: absolute;
  97   color: white;
  98   font-family: sans-serif;
  99   top: 0.3em;
 100   right: 0.5em;
 101
 102   .notif {
 103     display: inline-block;
 104     padding: 0.2em 0.35em;
 105     border-radius: 0.25em;
 106     position: relative;
 107     margin-left: 0.3em;
 108     font-size: 0.8em;
 109
 110     &.queue {
 111       background-color: #28a9a3;
 112     }
 113
 114     &.errored {
 115       background-color: #e51111;
 116     }
 117
 118     &.error {
 119       border-radius: 50%;
 120       aspect-ratio: 1;
 121       background-color: #e51111;
 122     }
 123   }
 124 }
 125 </style>