added network specs request

public/js/pages/Radius/RadiusRouterManager.js

@@ -78,6 +78,10 @@ const RadiusRouterManager = {
                     <i class="fa-duotone fa-list-timeline"></i>
                     <span>Ereignisprotokoll</span>
                   </button>
+                  <button class="ghost-btn action-btn" @click="openWlanKeyModal" :disabled="routerLoading || routerActionLoading || wlanKeyLoading">
+                    <i class="fa-duotone fa-sliders"></i>
+                    <span>Netzwerk-Konfig</span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -178,6 +182,13 @@ const RadiusRouterManager = {
         <tt-dialog :show="showNetworkStructureModal" title="Netzwerkstruktur" @close="showNetworkStructureModal = false" size="wide">
           <tt-loading-indicator v-if="networkStructureLoading" text="Lade Struktur..." style="min-height: 300px;" />
           <div v-else-if="rootDevice">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+              <span v-if="networkStructureCached" class="small" style="color: var(--tt-text-tertiary);">(Cache)</span>
+              <span v-else></span>
+              <button class="ghost-btn" @click="openNetworkStructure(true)" :disabled="networkStructureLoading" title="Neu laden">
+                <i class="fa-duotone fa-arrows-rotate" :class="{ 'fa-spin': networkStructureLoading }"></i>
+              </button>
+            </div>
             <div class="network-tree-container">
               <!-- Uses the recursive component -->
               <radius-network-node :device="rootDevice" />
@@ -214,6 +225,119 @@ const RadiusRouterManager = {
           <div v-else class="table-placeholder" style="min-height: 300px;">Keine Ereignisse verfügbar.</div>
         </tt-dialog>
 
+        <!-- WLAN & Network Config Modal -->
+        <tt-dialog :show="showWlanKeyModal" title="Netzwerk-Konfiguration" @close="showWlanKeyModal = false" size="wide">
+          <tt-loading-indicator v-if="wlanKeyLoading" text="Lade Konfiguration..." style="min-height: 300px;" />
+          <div v-else-if="wlanKeyData" class="network-config-modal">
+            <!-- Grid Layout -->
+            <div class="config-grid">
+              <!-- WLAN Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-wifi"></i>
+                  <span>WLAN</span>
+                  <span v-if="wlanKeyData.ap_enabled !== undefined" class="status-dot" :class="wlanKeyData.ap_enabled ? 'active' : 'inactive'"></span>
+                  <span v-if="wlanKeyDataCached" class="cache-badge"><i class="fa-duotone fa-database"></i> Cache</span>
+                  <button class="config-action-btn" @click="copyAllNetworkConfig" title="Alles kopieren">
+                    <i class="fa-duotone fa-copy"></i>
+                  </button>
+                  <button class="config-action-btn" @click="openWlanKeyModal(true)" :disabled="wlanKeyLoading" title="Neu laden">
+                    <i class="fa-duotone fa-arrows-rotate" :class="{ 'fa-spin': wlanKeyLoading }"></i>
+                  </button>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row highlight">
+                    <span class="config-label">SSID</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.ssid || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.ssid" :text="wlanKeyData.ssid" />
+                    </div>
+                  </div>
+                  <div class="config-row" v-if="wlanKeyData.ssid_secondary && wlanKeyData.ssid_secondary !== wlanKeyData.ssid">
+                    <span class="config-label">SSID 5GHz</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.ssid_secondary }}</code>
+                      <tt-copy-button :text="wlanKeyData.ssid_secondary" />
+                    </div>
+                  </div>
+                  <div class="config-row highlight">
+                    <span class="config-label">Passwort</span>
+                    <div class="config-value with-copy">
+                      <code class="password">{{ wlanKeyData.psk || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.psk" :text="wlanKeyData.psk" />
+                    </div>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">Sicherheit</span>
+                    <code class="config-value">{{ wlanKeyData.wpa_type?.toUpperCase() || 'WPA2' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- LAN Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-network-wired"></i>
+                  <span>LAN</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row highlight">
+                    <span class="config-label">Router-IP</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.lan?.ip || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.lan?.ip" :text="wlanKeyData.lan.ip" />
+                    </div>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">Subnetz</span>
+                    <code class="config-value">{{ wlanKeyData.lan?.subnet || '-' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- DHCP Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-server"></i>
+                  <span>DHCP</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row">
+                    <span class="config-label">Bereich</span>
+                    <code class="config-value" v-if="wlanKeyData.lan?.dhcp_start && wlanKeyData.lan?.dhcp_end">
+                      {{ wlanKeyData.lan.dhcp_start }} - {{ wlanKeyData.lan.dhcp_end }}
+                    </code>
+                    <code class="config-value" v-else>-</code>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">DNS</span>
+                    <code class="config-value small">{{ wlanKeyData.lan?.dns_servers || '-' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Device Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-router"></i>
+                  <span>Gerät</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row" v-if="wlanKeyData.device_name">
+                    <span class="config-label">Modell</span>
+                    <code class="config-value">{{ wlanKeyData.device_name }}</code>
+                  </div>
+                  <div class="config-row" v-if="wlanKeyData.known_devices_count !== undefined">
+                    <span class="config-label">WLAN-Geräte</span>
+                    <code class="config-value">{{ wlanKeyData.known_devices_count }}</code>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="table-placeholder" style="min-height: 300px;">Keine Daten verfügbar.</div>
+        </tt-dialog>
+
       </div>
     `,
     data: () => ({
@@ -238,12 +362,18 @@ const RadiusRouterManager = {
 
         showNetworkStructureModal: false,
         networkStructureLoading: false,
+        networkStructureCached: false,
         rootDevice: null,
 
         showEventLogModal: false,
         eventLogLoading: false,
         eventLogData: null,
-        refreshLoading: false
+        refreshLoading: false,
+
+        showWlanKeyModal: false,
+        wlanKeyLoading: false,
+        wlanKeyData: null,
+        wlanKeyDataCached: false
     }),
     watch: {
         show: {
@@ -439,19 +569,22 @@ const RadiusRouterManager = {
                 this.remoteAccessLoading = false;
             }
         },
-        async openNetworkStructure() {
+        async openNetworkStructure(forceRefresh = false) {
             if (!this.routerDevice || !this.routerDevice.deviceId) return;
             this.showNetworkStructureModal = true;
             this.networkStructureLoading = true;
             this.rootDevice = null;
+            this.networkStructureCached = false;
 
             try {
                 const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsNetworkStructure`, {
-                    deviceId: this.routerDevice.deviceId
+                    deviceId: this.routerDevice.deviceId,
+                    forceRefresh: forceRefresh
                 });
 
                 if (data.root) {
                     this.rootDevice = data.root;
+                    this.networkStructureCached = data.cached === true;
                 }
             } catch (error) {
                 console.error(error);
@@ -482,6 +615,63 @@ const RadiusRouterManager = {
             } finally {
                 this.eventLogLoading = false;
             }
+        },
+        async openWlanKeyModal(forceRefresh = false) {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            this.showWlanKeyModal = true;
+            this.wlanKeyLoading = true;
+            this.wlanKeyData = null;
+            this.wlanKeyDataCached = false;
+
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsFritzboxWlanKey`, {
+                    deviceId: this.routerDevice.deviceId,
+                    forceRefresh: forceRefresh
+                });
+
+                if (data.success && data.wlan) {
+                    this.wlanKeyData = data.wlan;
+                    this.wlanKeyDataCached = data.cached === true;
+                } else {
+                    throw new Error(data.message || "Keine WLAN-Daten gefunden");
+                }
+            } catch (error) {
+                console.error(error);
+                window.notify('error', error.response?.data?.message || 'Fehler beim Laden der WLAN-Daten');
+            } finally {
+                this.wlanKeyLoading = false;
+            }
+        },
+        copyAllNetworkConfig() {
+            if (!this.wlanKeyData) return;
+
+            const d = this.wlanKeyData;
+            const lines = [
+                '=== WLAN ===',
+                `SSID: ${d.ssid || '-'}`,
+                d.ssid_secondary && d.ssid_secondary !== d.ssid ? `SSID 5GHz: ${d.ssid_secondary}` : null,
+                `Passwort: ${d.psk || '-'}`,
+                `Sicherheit: ${d.wpa_type?.toUpperCase() || 'WPA2'}`,
+                d.ap_enabled !== undefined ? `WLAN aktiv: ${d.ap_enabled ? 'Ja' : 'Nein'}` : null,
+                '',
+                '=== LAN ===',
+                `Router-IP: ${d.lan?.ip || '-'}`,
+                `Subnetz: ${d.lan?.subnet || '-'}`,
+                '',
+                '=== DHCP ===',
+                `Bereich: ${d.lan?.dhcp_start && d.lan?.dhcp_end ? `${d.lan.dhcp_start} - ${d.lan.dhcp_end}` : '-'}`,
+                `DNS: ${d.lan?.dns_servers || '-'}`,
+                '',
+                '=== Gerät ===',
+                d.device_name ? `Modell: ${d.device_name}` : null,
+                d.known_devices_count !== undefined ? `WLAN-Geräte: ${d.known_devices_count}` : null,
+            ].filter(Boolean).join('\n');
+
+            navigator.clipboard.writeText(lines).then(() => {
+                window.notify('success', 'Netzwerk-Konfiguration kopiert');
+            }).catch(() => {
+                window.notify('error', 'Kopieren fehlgeschlagen');
+            });
         }
     }
 };