From fcb07bcdae0b67eb8d559b9ef0216348a8585a66 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 2 Aug 2024 18:56:35 +1200
Subject: [PATCH] move about page to own vue component

---
 src/frontend/components/App.vue             |  85 +-------------
 src/frontend/components/about/AboutPage.vue | 123 ++++++++++++++++++++
 src/frontend/js/Utils.js                    |  21 ++++
 3 files changed, 148 insertions(+), 81 deletions(-)
 create mode 100644 src/frontend/components/about/AboutPage.vue
 create mode 100644 src/frontend/js/Utils.js

diff --git a/src/frontend/components/App.vue b/src/frontend/components/App.vue
index a9cc21e..0eaab5f 100644
--- a/src/frontend/components/App.vue
+++ b/src/frontend/components/App.vue
@@ -119,7 +119,7 @@
 
                             <!-- info -->
                             <li>
-                                <button @click="showAboutTab" type="button" :class="[ tab === 'about' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
+                                <button @click="tab = 'about'" type="button" :class="[ tab === 'about' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
                                 <span class="my-auto">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                         <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
@@ -1217,72 +1217,7 @@
                 <SettingsPage v-if="tab === 'settings'"/>
 
                 <!-- about tab -->
-                <div v-if="tab === 'about'" class="overflow-y-auto space-y-2 p-2">
-
-                    <!-- app info -->
-                    <div v-if="appInfo" class="bg-white rounded shadow">
-                        <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">App Info</div>
-                        <div class="divide-y text-gray-900">
-                            <div class="flex p-1">
-                                <div class="mr-auto">
-                                    <div>Version</div>
-                                    <div class="text-sm text-gray-700">v{{ appInfo.version }}</div>
-                                </div>
-                                <div class="mx-2 my-auto">
-                                    <a target="_blank" href="https://github.com/liamcottle/reticulum-meshchat/releases" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                        Check for Updates
-                                    </a>
-                                </div>
-                            </div>
-                            <div class="flex p-1">
-                                <div class="mr-auto">
-                                    <div>Reticulum Config Path</div>
-                                    <div class="text-sm text-gray-700">{{ appInfo.reticulum_config_path }}</div>
-                                </div>
-                                <div v-if="isElectron" class="mx-2 my-auto">
-                                    <button @click="showReticulumConfigFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                        Show in Folder
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="flex p-1">
-                                <div class="mr-auto">
-                                    <div>Database Path</div>
-                                    <div class="text-sm text-gray-700">{{ appInfo.database_path }}</div>
-                                </div>
-                                <div v-if="isElectron" class="mx-2 my-auto">
-                                    <button @click="showDatabaseFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                        Show in Folder
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="p-1">
-                                <div>Database File Size</div>
-                                <div class="text-sm text-gray-700">{{ formatBytes(appInfo.database_file_size) }}</div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- my addresses -->
-                    <div v-if="config" class="bg-white rounded shadow">
-                        <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">My Addresses</div>
-                        <div class="divide-y text-gray-900">
-                            <div class="p-1">
-                                <div>Identity Hash</div>
-                                <div class="text-sm text-gray-700">{{ config.identity_hash }}</div>
-                            </div>
-                            <div class="p-1">
-                                <div>LXMF Address</div>
-                                <div class="text-sm text-gray-700">{{ config.lxmf_address_hash }}</div>
-                            </div>
-                            <div class="p-1">
-                                <div>Audio Call Address</div>
-                                <div class="text-sm text-gray-700">{{ config.audio_call_address_hash }}</div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
+                <AboutPage v-if="tab === 'about'"/>
 
             </div>
 
@@ -1297,10 +1232,12 @@
 
 <script>
 import SettingsPage from "./settings/SettingsPage.vue";
+import AboutPage from "./about/AboutPage.vue";
 
 export default {
     name: 'App',
     components: {
+        AboutPage,
         SettingsPage,
     },
     data() {
@@ -2839,10 +2776,6 @@ export default {
             await this.getConversations();
 
         },
-        showAboutTab() {
-            this.tab = "about";
-            this.getAppInfo();
-        },
         async enableInterface(interfaceName) {
 
             // enable interface
@@ -3086,16 +3019,6 @@ export default {
                 window.electron.relaunch();
             }
         },
-        showReticulumConfigFile() {
-            if(window.electron && this.appInfo.reticulum_config_path){
-                window.electron.showPathInFolder(this.appInfo.reticulum_config_path);
-            }
-        },
-        showDatabaseFile() {
-            if(window.electron && this.appInfo.database_path){
-                window.electron.showPathInFolder(this.appInfo.database_path);
-            }
-        },
         isInterfaceEnabled: function(iface) {
             const rawValue = iface.enabled ?? iface.interface_enabled;
             const value = rawValue?.toLowerCase();
diff --git a/src/frontend/components/about/AboutPage.vue b/src/frontend/components/about/AboutPage.vue
new file mode 100644
index 0000000..32c5751
--- /dev/null
+++ b/src/frontend/components/about/AboutPage.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="overflow-y-auto space-y-2 p-2">
+
+        <!-- app info -->
+        <div v-if="appInfo" class="bg-white rounded shadow">
+            <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">App Info</div>
+            <div class="divide-y text-gray-900">
+                <div class="flex p-1">
+                    <div class="mr-auto">
+                        <div>Version</div>
+                        <div class="text-sm text-gray-700">v{{ appInfo.version }}</div>
+                    </div>
+                    <div class="mx-2 my-auto">
+                        <a target="_blank" href="https://github.com/liamcottle/reticulum-meshchat/releases" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            Check for Updates
+                        </a>
+                    </div>
+                </div>
+                <div class="flex p-1">
+                    <div class="mr-auto">
+                        <div>Reticulum Config Path</div>
+                        <div class="text-sm text-gray-700">{{ appInfo.reticulum_config_path }}</div>
+                    </div>
+                    <div v-if="isElectron" class="mx-2 my-auto">
+                        <button @click="showReticulumConfigFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            Show in Folder
+                        </button>
+                    </div>
+                </div>
+                <div class="flex p-1">
+                    <div class="mr-auto">
+                        <div>Database Path</div>
+                        <div class="text-sm text-gray-700">{{ appInfo.database_path }}</div>
+                    </div>
+                    <div v-if="isElectron" class="mx-2 my-auto">
+                        <button @click="showDatabaseFile" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                            Show in Folder
+                        </button>
+                    </div>
+                </div>
+                <div class="p-1">
+                    <div>Database File Size</div>
+                    <div class="text-sm text-gray-700">{{ formatBytes(appInfo.database_file_size) }}</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- my addresses -->
+        <div v-if="config" class="bg-white rounded shadow">
+            <div class="flex border-b border-gray-300 text-gray-700 p-2 font-semibold">My Addresses</div>
+            <div class="divide-y text-gray-900">
+                <div class="p-1">
+                    <div>Identity Hash</div>
+                    <div class="text-sm text-gray-700">{{ config.identity_hash }}</div>
+                </div>
+                <div class="p-1">
+                    <div>LXMF Address</div>
+                    <div class="text-sm text-gray-700">{{ config.lxmf_address_hash }}</div>
+                </div>
+                <div class="p-1">
+                    <div>Audio Call Address</div>
+                    <div class="text-sm text-gray-700">{{ config.audio_call_address_hash }}</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import Utils from "../../js/Utils";
+export default {
+    name: 'AboutPage',
+    data() {
+        return {
+            appInfo: null,
+            config: null,
+        };
+    },
+    mounted() {
+        this.getAppInfo();
+        this.getConfig();
+    },
+    methods: {
+        async getAppInfo() {
+            try {
+                const response = await window.axios.get("/api/v1/app/info");
+                this.appInfo = response.data.app_info;
+            } catch(e) {
+                // do nothing if failed to load app info
+                console.log(e);
+            }
+        },
+        async getConfig() {
+            try {
+                const response = await window.axios.get("/api/v1/config");
+                this.config = response.data.config;
+            } catch(e) {
+                // do nothing if failed to load config
+                console.log(e);
+            }
+        },
+        showReticulumConfigFile() {
+            if(window.electron && this.appInfo.reticulum_config_path){
+                window.electron.showPathInFolder(this.appInfo.reticulum_config_path);
+            }
+        },
+        showDatabaseFile() {
+            if(window.electron && this.appInfo.database_path){
+                window.electron.showPathInFolder(this.appInfo.database_path);
+            }
+        },
+        formatBytes: function(bytes) {
+            return Utils.formatBytes(bytes);
+        },
+    },
+    computed: {
+        isElectron() {
+            return window.electron != null;
+        },
+    },
+}
+</script>
diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
new file mode 100644
index 0000000..2940c78
--- /dev/null
+++ b/src/frontend/js/Utils.js
@@ -0,0 +1,21 @@
+class Utils {
+
+    static formatBytes(bytes) {
+
+        if(bytes === 0){
+            return '0 Bytes';
+        }
+
+        const k = 1024;
+        const decimals = 0;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+
+    }
+
+}
+
+export default Utils;