From 00495e7f62dc9e504e01fcb64dc5599efbc0408f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 16 Aug 2024 17:04:35 +1200
Subject: [PATCH] add ui to manually update network visualiser

---
 .../network-visualiser/NetworkVisualiser.vue  | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 3e1007a..c9b14e2 100644
--- a/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -7,13 +7,36 @@
         <!-- loading -->
         <div v-if="isLoading" class="absolute flex top-0 bottom-0 left-0 right-0 bg-gray-100">
             <div class="flex flex-col mx-auto my-auto">
-                <div class="mx-auto">
+                <div class="mx-auto mb-1">
                     <svg class="animate-spin h-6 w-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
                 </div>
-                <div>Loading {{ loadingProgress }}%</div>
+                <div class="mx-auto">Loading {{ loadingProgress }}%</div>
+                <div class="mx-auto text-sm text-gray-500">Large networks may take a while...</div>
+            </div>
+        </div>
+
+        <!-- controls -->
+        <div v-if="!isLoading" class="absolute flex bottom-0 left-0 bg-gray-100 p-2">
+            <div class="bg-white rounded shadow min-w-52">
+                <div @click="isShowingControls = !isShowingControls" class="flex text-gray-700 p-2 cursor-pointer">
+                    <div class="my-auto">Reticulum Network</div>
+                    <div class="flex ml-auto">
+                        <button @click.stop="update" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-1 py-0.5 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">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div v-if="isShowingControls" class="divide-y text-gray-900 border-t border-gray-300">
+                    <div class="p-1">
+                        <div>Interfaces</div>
+                        <div class="text-sm text-gray-700">{{ onlineInterfaces.length }} Online, {{ offlineInterfaces.length }} Offline</div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -40,6 +63,7 @@ export default {
             isLoading: false,
             loadingProgress: 0,
             reloadInterval: null,
+            isShowingControls: true,
             interfaces: [],
             pathTable: [],
             announces: {},
@@ -169,11 +193,6 @@ export default {
             // stabilise the network a bit after first load
             this.network.stabilize();
 
-            // auto update network
-            this.reloadInterval = setInterval(() => {
-                this.update();
-            }, 10000);
-
         },
         async update() {
 
@@ -400,5 +419,17 @@ export default {
             return Utils.formatBitsPerSecond(bits);
         },
     },
+    computed: {
+        onlineInterfaces() {
+            return this.interfaces.filter((iface) => {
+                return iface.status;
+            });
+        },
+        offlineInterfaces() {
+            return this.interfaces.filter((iface) => {
+                return !iface.status;
+            });
+        },
+    },
 }
 </script>