Added download and upload speed to Sabnzbd

src/components/services/SABnzbd.vue

@@ -16,12 +16,45 @@
         ></i>
       </div>
     </template>
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <span v-if="error" class="error">An error has occurred.</span>
+        <template v-else>
+          <span class="down monospace">
+            <p class="fas fa-download"></p>
+            {{ downRate }}
+          </span>
+          <span class="up monospace">
+            <p class="fas fa-upload"></p>
+            {{ upRate }}
+          </span>
+        </template>
+      </p>
+    </template>
   </Generic>
 </template>
 
 <script>
 import service from "@/mixins/service.js";
 
+const units = ["B", "KB", "MB", "GB"];
+
+// Function to convert rate into a human-readable format
+const displayRate = (rate) => {
+  let i = 0;
+
+  while (rate > 1000 && i < units.length) {
+    rate /= 1000;
+    i++;
+  }
+  return (
+    Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(
+      rate || 0,
+    ) + ` ${units[i]}/s`
+  );
+};
+
 export default {
   name: "SABnzbd",
   mixins: [service],
@@ -31,14 +64,22 @@ export default {
   data: () => ({
     stats: null,
     error: false,
+    dlSpeed: null,
+    ulSpeed: null,
   }),
   computed: {
-    downloads: function () {
+    downloads() {
       if (!this.stats) {
         return "";
       }
       return this.stats.noofslots;
     },
+    downRate() {
+      return displayRate(this.dlSpeed);
+    },
+    upRate() {
+      return displayRate(this.ulSpeed);
+    },
   },
   created() {
     const downloadInterval = parseInt(this.item.downloadInterval, 10) || 0;
@@ -52,10 +93,14 @@ export default {
     fetchStatus: async function () {
       try {
         const response = await this.fetch(
-          `/api?output=json&apikey=${this.item.apikey}&mode=queue`,
+          `/api?output=json&apikey=${this.item.apikey}&mode=queue`
         );
         this.error = false;
         this.stats = response.queue;
+
+        // Assuming the response provides download/upload speeds
+        this.dlSpeed = response.queue.dl_speed; // Adjust this based on your API response
+        this.ulSpeed = response.queue.up_speed; // Adjust this based on your API response
       } catch (e) {
         this.error = true;
         console.error(e);
@@ -92,4 +137,17 @@ export default {
     }
   }
 }
+
+.error {
+  color: #e51111 !important;
+}
+
+.down {
+  margin-right: 1em;
+}
+
+.monospace {
+  font-weight: 300;
+  font-family: monospace;
+}
 </style>