From 28cd7d0b99af74f266bb5b37f264e403f18a611a Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 13:38:02 +0300
Subject: [PATCH] moved helper func to a plugin

---
 web/src/components/ModelEntry.vue | 42 ++++++-------------------------
 web/src/main.js                   |  2 +-
 web/src/views/SettingsView.vue    | 41 ++++++------------------------
 3 files changed, 15 insertions(+), 70 deletions(-)

diff --git a/web/src/components/ModelEntry.vue b/web/src/components/ModelEntry.vue
index 3ce1ee29..cf519980 100644
--- a/web/src/components/ModelEntry.vue
+++ b/web/src/components/ModelEntry.vue
@@ -90,6 +90,7 @@
 </template>
 
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import { nextTick } from 'vue'
 import feather from 'feather-icons'
@@ -131,6 +132,9 @@ export default {
     })
   },
   methods: {
+    computedFileSize(size){
+            return filesize(size)
+        },
     async getFileSize(url) {
       try {
 
@@ -139,17 +143,17 @@ export default {
         if (res) {
           
           if (res.headers["content-length"]) {
-            return this.humanFileSize(res.headers["content-length"])
+            return this.computedFileSize(res.headers["content-length"])
           }
           if (this.model.filesize) {
-            return this.humanFileSize(this.model.filesize)
+            return this.computedFileSize(this.model.filesize)
           }
           return 'Could not be determined'
 
         }
         if (this.model.filesize) {
 
-          return this.humanFileSize(this.model.filesize)
+          return this.computedFileSize(this.model.filesize)
         }
         return 'Could not be determined'
 
@@ -181,38 +185,6 @@ export default {
       }
 
     },
-    /** From https://stackoverflow.com/a/14919494/14106028
-   * Format bytes as human-readable text.
-   * 
-   * @param bytes Number of bytes.
-   * @param si True to use metric (SI) units, aka powers of 1000. False to use 
-   *           binary (IEC), aka powers of 1024.
-   * @param dp Number of decimal places to display.
-   * 
-   * @return Formatted string.
-   */
-    humanFileSize(bytes, si = true, dp = 1) {
-      const thresh = si ? 1000 : 1024;
-
-      if (Math.abs(bytes) < thresh) {
-        return bytes + ' B';
-      }
-
-      const units = si
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-      let u = -1;
-      const r = 10 ** dp;
-
-      do {
-        bytes /= thresh;
-        ++u;
-      } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-
-
-      return bytes.toFixed(dp) + ' ' + units[u];
-    },
-
     getImgUrl() {
 
       if (this.icon === '/images/default_model.png') {
diff --git a/web/src/main.js b/web/src/main.js
index bde44285..46f3b884 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -8,4 +8,4 @@ const app = createApp(App)
 
 app.use(router)
 
-app.mount('#app')
+app.mount('#app')
\ No newline at end of file
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 50ae1e58..de3c5461 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -511,6 +511,7 @@
 }
 </style>
 <script>
+import filesize from '../plugins/filesize'
 import axios from "axios";
 import feather from 'feather-icons'
 import { nextTick, TransitionGroup } from 'vue'
@@ -998,36 +999,8 @@ export default {
             this.isLoading = false
 
         },
-        /** From https://stackoverflow.com/a/14919494/14106028
-        * Format bytes as human-readable text.
-        * 
-        * @param bytes Number of bytes.
-        * @param si True to use metric (SI) units, aka powers of 1000. False to use 
-        *           binary (IEC), aka powers of 1024.
-        * @param dp Number of decimal places to display.
-        * 
-        * @return Formatted string.
-        */
-        humanFileSize(bytes, si = true, dp = 1) {
-            const thresh = si ? 1000 : 1024;
-
-            if (Math.abs(bytes) < thresh) {
-                return bytes + ' B';
-            }
-
-            const units = si
-                ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-                : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-            let u = -1;
-            const r = 10 ** dp;
-
-            do {
-                bytes /= thresh;
-                ++u;
-            } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-
-
-            return bytes.toFixed(dp) + ' ' + units[u];
+        computedFileSize(size){
+            return filesize(size)
         },
 
     }, async mounted() {
@@ -1054,17 +1027,17 @@ export default {
     },
     computed: {
         available_space() {
-            return this.humanFileSize(this.diskUsage.available_space)
+            return this.computedFileSize(this.diskUsage.available_space)
         },
         binding_models_usage() {
-            return this.humanFileSize(this.diskUsage.binding_models_usage)
+            return this.computedFileSize(this.diskUsage.binding_models_usage)
         },
         percent_usage() {
             return this.diskUsage.percent_usage
-            //return this.humanFileSize(this.diskUsage.percent_usage)
+          
         },
         total_space() {
-            return this.humanFileSize(this.diskUsage.total_space)
+            return this.computedFileSize(this.diskUsage.total_space)
         },
     },
     watch: {