From 7e3469a5dae59edb6e3bf394c5b306b0aa35dd99 Mon Sep 17 00:00:00 2001 From: sepehr Date: Sun, 29 Mar 2026 23:31:19 +0300 Subject: [PATCH] add reset map buttons for neetwork map (pro) --- src/app/providers/mikrowizard/data.ts | 4 ++ src/app/views/maps/maps.component.html | 41 ++++++++++++++-- src/app/views/maps/maps.component.scss | 57 +++++++++++++++++++++- src/app/views/maps/maps.component.ts | 66 +++++++++++++++++++++++--- 4 files changed, 155 insertions(+), 13 deletions(-) diff --git a/src/app/providers/mikrowizard/data.ts b/src/app/providers/mikrowizard/data.ts index e7b5d20..6aa84be 100644 --- a/src/app/providers/mikrowizard/data.ts +++ b/src/app/providers/mikrowizard/data.ts @@ -667,6 +667,10 @@ export class dataProvider { return this.MikroWizardRPC.sendJsonRequest("/api/networkmap/get", {}); } + resetNetworkMap() { + return this.MikroWizardRPC.sendJsonRequest("/api/networkmap/reset", {}); + } + bulk_add_devices(devices: any[]) { var data = { 'devices': devices diff --git a/src/app/views/maps/maps.component.html b/src/app/views/maps/maps.component.html index 3319749..6aa8268 100644 --- a/src/app/views/maps/maps.component.html +++ b/src/app/views/maps/maps.component.html @@ -1,10 +1,27 @@ - -
+
+ + + +
+
+
+
+
+ +

Generating Map...

+

Please wait while we discover your network topology. This might take a few minutes. (Polling every 30s)

+
+
+
@@ -80,3 +97,19 @@ + + + + +
Confirm Map Reset
+ + + +

Are you sure you want to reset all network discovery data?

+

This will delete all current neighbors' data and trigger a fresh scan. Node positions will also be reset.

+ + + + + + diff --git a/src/app/views/maps/maps.component.scss b/src/app/views/maps/maps.component.scss index 26682f1..606a739 100644 --- a/src/app/views/maps/maps.component.scss +++ b/src/app/views/maps/maps.component.scss @@ -18,13 +18,24 @@ position: relative; } - .refresh-btn { + .map-actions { position: absolute; top: 10px; - right: 10px; + right: 15px; z-index: 1000; + display: flex; + gap: 8px; + align-items: center; + } + + .refresh-btn { padding: 6px 12px; font-size: 12px; + display: flex; + align-items: center; + gap: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + white-space: nowrap; } .network-canvas { @@ -34,7 +45,49 @@ border-radius: 8px; border: 1px solid #dee2e6; box-shadow: 0 2px 8px rgba(0,0,0,0.1); + position: relative; + overflow: hidden; + + .full-size { + width: 100%; + height: 100%; + } + .map-loading-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(4px); + z-index: 1001; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + .loader-content { + i { + font-size: 4rem; + color: #3498db; + margin-bottom: 20px; + } + + h3 { + color: #2c3e50; + font-weight: 600; + margin-bottom: 10px; + } + + p { + color: #7f8c8d; + max-width: 400px; + margin: 0 auto; + } + } + } + ::ng-deep .vis-network { cursor: default; diff --git a/src/app/views/maps/maps.component.ts b/src/app/views/maps/maps.component.ts index d545e8a..dd8d2f7 100644 --- a/src/app/views/maps/maps.component.ts +++ b/src/app/views/maps/maps.component.ts @@ -10,7 +10,7 @@ import { DataSet } from 'vis-data'; templateUrl: "maps.component.html", styleUrls: ["maps.component.scss"], }) -export class MapsComponent implements OnInit { +export class MapsComponent implements OnInit, OnDestroy { public uid: number; public uname: string; public ispro: boolean = false; @@ -19,8 +19,11 @@ export class MapsComponent implements OnInit { public savedPositionsKey = "network-layout"; public selectedDevice: any = null; public showWebAccessModal: boolean = false; - public showMoreInfoModal: boolean = false; public currentDeviceInfo: any = null; + public showResetModal: boolean = false; + public loadingMap: boolean = false; + private pollingTimer: any; + constructor( private data_provider: dataProvider, private router: Router, @@ -54,13 +57,35 @@ export class MapsComponent implements OnInit { this.loadNetworkData(); } + ngOnDestroy(): void { + if (this.pollingTimer) { + clearTimeout(this.pollingTimer); + } + } + loadNetworkData(): void { + clearTimeout(this.pollingTimer); + this.loadingMap = true; this.data_provider.getNetworkMap().then((res) => { - this.mikrotikData = res; - console.dir(res); - setTimeout(() => { - this.createNetworkMap(); - }, 100); + // Normalize response - handle array or object with 'result' property + const data = (res && res.result) ? res.result : res; + + if (Array.isArray(data) && data.length > 0) { + this.loadingMap = false; + this.mikrotikData = data; + setTimeout(() => { + this.createNetworkMap(); + }, 100); + } else { + console.log("Map data is empty, likely generating. Retrying in 30s..."); + this.mikrotikData = []; + this.pollingTimer = setTimeout(() => { + this.loadNetworkData(); + }, 30000); + } + }).catch(err => { + console.error("Error loading network map:", err); + this.loadingMap = false; }); } @@ -476,4 +501,31 @@ Object.entries(connectionMap).forEach(([connectionKey, interfacePairs]) => { // Implement configuration interface } + resetLocations() { + localStorage.removeItem(this.savedPositionsKey); + this.savedPositions = {}; + this.refreshData(); + } + + confirmResetMap() { + this.showResetModal = false; + this.loadingMap = true; + this.mikrotikData = []; + this.selectedDevice = null; + + this.data_provider.resetNetworkMap().then((res) => { + if (res.status === 'success') { + localStorage.removeItem(this.savedPositionsKey); + this.savedPositions = {}; + this.loadNetworkData(); + } else { + this.loadingMap = false; + alert("Error: " + (res.error || "Failed to reset map")); + } + }).catch(err => { + this.loadingMap = false; + alert("Error resetting map: " + err); + }); + } + } \ No newline at end of file