Fix pretty bytes

webui/src/App.vue

@@ -231,6 +231,7 @@ export default {
 
     const { dateTime } = useDateTime();
     const { timeago } = useTimeAgo();
+    const { bytes } = useBytes();
 
     return {
       authenticated,
@@ -258,6 +259,7 @@ export default {
 
       dateTime,
       timeago,
+      bytes,
 
       api,
     };
@@ -596,21 +598,19 @@ export default {
                       />
 
                       <!-- Transfer TX -->
-                      <!-- FIXME: add "bytes" -->
                       <ClientTransfer
                         :transferData="client.transferTx"
                         :transferDataCurrent="client.transferTxCurrent"
-                        title="'Total Download: ' + client.transferTx"
+                        :title="'Total Download: ' + bytes(client.transferTx)"
                       >
                         <IconDownArrow />
                       </ClientTransfer>
 
                       <!-- Transfer RX -->
-                      <!-- FIXME: add "bytes" -->
                       <ClientTransfer
                         :transferData="client.transferRx"
                         :transferDataCurrent="client.transferRxCurrent"
-                        title="'Total Upload: ' + client.transferRx"
+                        :title="'Total Upload: ' + bytes(client.transferRx)"
                       >
                         <IconUpArrow />
                       </ClientTransfer>

webui/src/components/ClientTransfer.vue

@@ -1,13 +1,18 @@
+<script>
+import { useBytes } from '../composables/useBytes';
+export default {
+  setup() {
+    const { bytes } = useBytes();
+    return { bytes };
+  },
+  props: ['transferData', 'transferDataCurrent', 'title'],
+};
+</script>
+
 <template>
   <span v-if="transferData" :title="title">
     ·
     <slot></slot>
-    {{ transferDataCurrent }}/s
+    {{ bytes(transferDataCurrent) }}/s
   </span>
 </template>
-
-<script>
-export default {
-  props: ['transferData', 'transferDataCurrent', 'title'],
-};
-</script>

webui/src/composables/useBytes.js

@@ -0,0 +1,25 @@
+export function useBytes() {
+  const bytes = (bytes, decimals, kib, maxunit) => {
+    kib = kib || false;
+    if (bytes === 0) return '0 B';
+    if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes))
+      return 'NaN';
+    const k = kib ? 1024 : 1000;
+    const dm =
+      decimals != null && !Number.isNaN(decimals) && decimals >= 0
+        ? decimals
+        : 2;
+    const sizes = kib
+      ? ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
+      : ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
+    let i = Math.floor(Math.log(bytes) / Math.log(k));
+    if (maxunit !== undefined) {
+      const index = sizes.indexOf(maxunit);
+      if (index !== -1) i = index;
+    }
+    // eslint-disable-next-line no-restricted-properties
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+  };
+
+  return { bytes };
+}