Mirror/liamcottle___reticulum-meshchat
1
0
Fork 0
mirror of https://github.com/liamcottle/reticulum-meshchat.git synced 2026-04-28 09:43:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

add ui to manually update network visualiser

Browse source
This commit is contained in:
liamcottle 2024-08-16 17:04:35 +12:00
commit 00495e7f62
1 changed files with 38 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/components/network-visualiser/NetworkVisualiser.vue
View file

@ -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>