Add total Download/Upload in title

src/www/index.html

@@ -154,7 +154,7 @@
                     </span>
 
                     <!-- Transfer TX -->
-                    <span v-if="client.transferTx" title="Download">
+                    <span v-if="client.transferTx":title="'Total Download: ' + bytes(client.transferTx)">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">
@@ -166,7 +166,7 @@
                     </span>
 
                     <!-- Transfer RX -->
-                    <span v-if="client.transferRx" title="Upload">
+                    <span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)">
                       ·
                       <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                         fill="currentColor">

src/www/js/app.js

@@ -227,26 +227,10 @@ new Vue({
     },
   },
   filters: {
+    bytes,
     timeago: value => {
       return timeago().format(value);
     },
-    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]}`;
-    },
   },
   mounted() {
     this.api = new API();
@@ -292,3 +276,21 @@ new Vue({
     }).catch(console.error);
   },
 });
+
+function 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]}`;
+}