486 lines
21 KiB
JavaScript
486 lines
21 KiB
JavaScript
const RadiusRouterManager = {
|
|
name: 'RadiusRouterManager',
|
|
props: {
|
|
show: Boolean,
|
|
userItem: Object
|
|
},
|
|
template: `
|
|
<div>
|
|
<!-- Main Router Management Modal -->
|
|
<tt-dialog
|
|
:show="show"
|
|
:title="'Router Management - ' + (userItem.username || '')"
|
|
@close="$emit('close')"
|
|
size="wide"
|
|
>
|
|
<div class="modal-body-scrollable">
|
|
<div v-if="!routerDevice && !routerLoading" class="table-placeholder" style="min-height: 300px;">
|
|
<i class="fa-duotone fa-router-slash" style="font-size: 48px; opacity: 0.3;"></i>
|
|
<div style="margin-top: 16px;">Kein Router mit dieser IP gefunden</div>
|
|
</div>
|
|
<div v-else>
|
|
<!-- Router Info Header -->
|
|
<div class="router-info-header">
|
|
<i class="fa-duotone fa-router"></i>
|
|
<div class="router-header-text">
|
|
<div class="router-title">
|
|
<tt-skeleton v-if="routerLoading" width="200px" height="22px" />
|
|
<span v-else>{{ routerDevice.deviceInfo.hardwareVersion || 'Router' }}</span>
|
|
</div>
|
|
<div class="router-subtitle" :style="routerLoading ? 'margin-top: 2px' : ''">
|
|
<tt-skeleton v-if="routerLoading" width="140px" height="15px" />
|
|
<span v-else>{{ routerDevice.username || userItem.username }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Router Information Grid -->
|
|
<div class="router-info-grid">
|
|
<tt-info-card icon="fa-microchip" label="Hardware Modell" :value="routerDevice?.deviceInfo?.hardwareVersion" :loading="routerLoading" />
|
|
<tt-info-card icon="fa-code-branch" label="Software Version" :value="routerDevice?.deviceInfo?.softwareVersion" :loading="routerLoading" />
|
|
<tt-info-card icon="fa-barcode" label="CWMP Account" :value="routerDevice?.deviceInfo?.serialNumber" :loading="routerLoading" />
|
|
<tt-info-card icon="fa-fingerprint" label="ACS ID" :value="routerDevice?.deviceId" :loading="routerLoading" />
|
|
<tt-info-card icon="fa-globe" label="Externe IP" :value="routerDevice?.ip" :loading="routerLoading" />
|
|
<tt-info-card icon="fa-network-wired" label="Management IP" :value="routerDevice?.managementIp" :loading="routerLoading" />
|
|
</div>
|
|
|
|
<!-- Router Actions Section -->
|
|
<div class="router-actions-section">
|
|
<h4 class="router-actions-header">
|
|
<i class="fa-duotone fa-bolt"></i>
|
|
Router Aktionen
|
|
</h4>
|
|
<div class="router-actions-grid">
|
|
<button class="ghost-btn action-btn" @click="runRemoteAccess" :disabled="routerLoading || routerActionLoading || speedtestLoading">
|
|
<i class="fa-duotone fa-key"></i>
|
|
<span>Remote-Zugriff</span>
|
|
</button>
|
|
<button class="ghost-btn action-btn" @click="rebootRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
|
|
<i class="fa-duotone fa-power-off"></i>
|
|
<span>Neustart</span>
|
|
</button>
|
|
<button class="ghost-btn action-btn" @click="pingRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
|
|
<i class="fa-duotone fa-signal-bars"></i>
|
|
<span>Ping</span>
|
|
</button>
|
|
<button class="ghost-btn action-btn" @click="runSpeedtest" :disabled="routerLoading || routerActionLoading || speedtestLoading">
|
|
<i class="fa-duotone fa-gauge-high"></i>
|
|
<span>Speedtest</span>
|
|
</button>
|
|
<button class="ghost-btn action-btn" @click="openNetworkStructure" :disabled="routerLoading || routerActionLoading || speedtestLoading">
|
|
<i class="fa-duotone fa-sitemap"></i>
|
|
<span>Netzwerkstruktur</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tt-dialog>
|
|
|
|
<!-- SUB MODALS (Managed by this component) -->
|
|
|
|
<!-- Ping Modal -->
|
|
<tt-dialog :show="showPingModal" title="Ping Ergebnis" @close="showPingModal = false">
|
|
<tt-loading-indicator v-if="routerActionLoading && !pingResult" text="Ping läuft..." style="height: 150px;" />
|
|
<div v-else-if="pingResult">
|
|
<div class="kv-redesign">
|
|
<div class="kv-row"><span class="kv-label">Gesendet</span><code class="kv-value">{{ pingResult.packetsTransmitted }}</code></div>
|
|
<div class="kv-row"><span class="kv-label">Empfangen</span><code class="kv-value">{{ pingResult.packetsReceived }}</code></div>
|
|
<div class="kv-row"><span class="kv-label">Verlust</span><code class="kv-value">{{ pingResult.packetLoss }}%</code></div>
|
|
<div class="kv-row"><span class="kv-label">Min / Avg / Max</span><code class="kv-value">{{ pingResult.min }} / {{ pingResult.avg }} / {{ pingResult.max }} ms</code></div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="table-placeholder" style="height: 150px;">Kein Ergebnis.</div>
|
|
</tt-dialog>
|
|
|
|
<!-- Speedtest Modal -->
|
|
<tt-dialog :show="showSpeedtestModal" title="Speedtest Ergebnis" @close="showSpeedtestModal = false" size="wide">
|
|
<tt-loading-indicator v-if="speedtestLoading && speedtestHistory.length === 0" text="Speedtest wird initialisiert..." style="height: 200px;" />
|
|
<div v-else>
|
|
<div class="table-wrap" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="tt-table compact">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;">#</th>
|
|
<th style="text-align: right">Bandbreite</th>
|
|
<th style="text-align: right">Übertragen</th>
|
|
<th style="text-align: right">Pakete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row, idx) in speedtestHistory" :key="idx">
|
|
<td class="mono small">{{ idx + 1 }}</td>
|
|
<td class="mono small" style="text-align: right">{{ row.bpsFormatted }}</td>
|
|
<td class="mono small" style="text-align: right">{{ row.bytesFormatted }}</td>
|
|
<td class="mono small" style="text-align: right">{{ row.packets }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div ref="speedtestBottom"></div>
|
|
</div>
|
|
<div v-if="speedtestLoading" class="center mt-3 muted small">
|
|
<i class="fa-duotone fa-spinner fa-spin"></i> Aktualisiere...
|
|
</div>
|
|
<div v-else class="center mt-3" style="color: var(--ok);">
|
|
<i class="fa-duotone fa-check-circle"></i> Abgeschlossen
|
|
</div>
|
|
</div>
|
|
</tt-dialog>
|
|
|
|
<!-- Remote Access Modal -->
|
|
<tt-dialog :show="showRemoteAccessModal" title="Remote Zugriff Konfiguration" @close="showRemoteAccessModal = false">
|
|
<tt-loading-indicator v-if="remoteAccessLoading" :text="remoteAccessStep" style="height: 200px;" />
|
|
<div v-else-if="remoteAccessResult">
|
|
<div class="alert ok mb-4" style="background-color: #eaf7ef; border: 1px solid #c9e6d8; color: #206a42; padding: 12px; border-radius: 8px;">
|
|
<i class="fa-duotone fa-check-circle"></i> Konfiguration erfolgreich abgeschlossen.
|
|
</div>
|
|
<div class="kv-redesign">
|
|
<div class="kv-row">
|
|
<span class="kv-label">Remote Link</span>
|
|
<div class="kv-value inline-copy">
|
|
<a :href="remoteAccessResult.link" target="_blank" class="link">{{ remoteAccessResult.link }}</a>
|
|
<tt-copy-button :text="remoteAccessResult.link" />
|
|
</div>
|
|
</div>
|
|
<div class="kv-row">
|
|
<span class="kv-label">Username</span>
|
|
<div class="kv-value inline-copy">
|
|
<code class="mono">{{ remoteAccessResult.username }}</code>
|
|
<tt-copy-button :text="remoteAccessResult.username" />
|
|
</div>
|
|
</div>
|
|
<div class="kv-row">
|
|
<span class="kv-label">Password</span>
|
|
<div class="kv-value inline-copy">
|
|
<code class="mono">{{ remoteAccessResult.password }}</code>
|
|
<tt-copy-button :text="remoteAccessResult.password" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="table-placeholder" style="height: 200px;">Ein Fehler ist aufgetreten.</div>
|
|
</tt-dialog>
|
|
|
|
<!-- Network Structure Modal -->
|
|
<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 class="network-tree-container">
|
|
<!-- Uses the recursive component -->
|
|
<radius-network-node :device="rootDevice" />
|
|
</div>
|
|
</div>
|
|
<div v-else class="table-placeholder" style="min-height: 300px;">Keine Daten verfügbar.</div>
|
|
</tt-dialog>
|
|
|
|
</div>
|
|
`,
|
|
data: () => ({
|
|
routerLoading: false,
|
|
routerActionLoading: false,
|
|
routerDevice: null,
|
|
|
|
// Sub-Modal States
|
|
showPingModal: false,
|
|
pingResult: null,
|
|
|
|
showSpeedtestModal: false,
|
|
speedtestLoading: false,
|
|
speedtestResult: null,
|
|
speedtestHistory: [],
|
|
speedtestHasStarted: false,
|
|
|
|
showRemoteAccessModal: false,
|
|
remoteAccessLoading: false,
|
|
remoteAccessResult: null,
|
|
remoteAccessStep: '',
|
|
|
|
showNetworkStructureModal: false,
|
|
networkStructureLoading: false,
|
|
rootDevice: null
|
|
}),
|
|
watch: {
|
|
show: {
|
|
handler(val) {
|
|
if (val && this.userItem) {
|
|
this.loadRouterData();
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
userItem(val) {
|
|
if (val && this.show) {
|
|
this.loadRouterData();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async loadRouterData() {
|
|
this.routerLoading = true;
|
|
this.routerDevice = null;
|
|
this.pingResult = null;
|
|
this.speedtestResult = null;
|
|
this.speedtestLoading = false;
|
|
|
|
try {
|
|
const { data: radacct } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
|
|
params: { action2: 'fetchRadacct', username: this.userItem.username }
|
|
});
|
|
|
|
if (radacct?.ip) {
|
|
const { data: deviceData } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceByIp`, {
|
|
params: { ip: radacct.ip }
|
|
});
|
|
|
|
if (deviceData?.success) {
|
|
this.routerDevice = deviceData;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching router:', error);
|
|
window.notify('error', 'Fehler beim Laden des Routers');
|
|
}
|
|
this.routerLoading = false;
|
|
},
|
|
async rebootRouter() {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId) return;
|
|
if (!confirm('Möchten Sie den Router wirklich neu starten?')) return;
|
|
|
|
this.routerActionLoading = true;
|
|
try {
|
|
const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRebootDevice`, {
|
|
deviceId: this.routerDevice.deviceId
|
|
});
|
|
|
|
if (data.success) {
|
|
window.notify('success', 'Router-Neustart gestartet');
|
|
} else {
|
|
window.notify('error', data.message || 'Fehler beim Neustart');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error rebooting router:', error);
|
|
window.notify('error', 'Fehler beim Neustarten des Routers');
|
|
}
|
|
this.routerActionLoading = false;
|
|
},
|
|
async pingRouter() {
|
|
if (!this.routerDevice) return;
|
|
const pingIp = this.routerDevice.managementIp || this.routerDevice.ip;
|
|
if (!pingIp) return;
|
|
|
|
this.showPingModal = true;
|
|
this.routerActionLoading = true;
|
|
this.pingResult = null;
|
|
try {
|
|
const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsPing`, {
|
|
params: { ip: pingIp }
|
|
});
|
|
|
|
if (data.success && data.result) {
|
|
this.pingResult = data.result;
|
|
window.notify('success', 'Ping erfolgreich');
|
|
} else {
|
|
window.notify('error', 'Ping fehlgeschlagen');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error pinging router:', error);
|
|
window.notify('error', 'Fehler beim Pingen des Routers');
|
|
}
|
|
this.routerActionLoading = false;
|
|
},
|
|
async setParameterValues(parameters) {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId || !parameters) return false;
|
|
try {
|
|
const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsSetParameters`, {
|
|
deviceId: this.routerDevice.deviceId,
|
|
parameters: parameters
|
|
});
|
|
return data.success;
|
|
} catch (error) {
|
|
console.error('Error setting parameters:', error);
|
|
return false;
|
|
}
|
|
},
|
|
async runSpeedtest() {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId) return;
|
|
this.showSpeedtestModal = true;
|
|
this.speedtestLoading = true;
|
|
this.speedtestResult = null;
|
|
this.speedtestHistory = [];
|
|
this.speedtestHasStarted = false;
|
|
|
|
try {
|
|
const params = {
|
|
'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Start': 1,
|
|
'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.StartBidirect': 1,
|
|
'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.WANAccess': true
|
|
};
|
|
|
|
if (!await this.setParameterValues(params)) {
|
|
throw new Error("Konnte Speedtest-Parameter nicht setzen");
|
|
}
|
|
|
|
const ip = this.routerDevice.ip;
|
|
if (!ip) throw new Error("Keine IP-Adresse gefunden");
|
|
|
|
await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRunSpeedtest`, { ip });
|
|
|
|
this.pollSpeedtestResult();
|
|
|
|
} catch (e) {
|
|
window.notify('error', e.message);
|
|
this.speedtestLoading = false;
|
|
}
|
|
},
|
|
async pollSpeedtestResult() {
|
|
let attempts = 0;
|
|
const maxAttempts = 240;
|
|
const resultParam = 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Result';
|
|
|
|
const poll = async () => {
|
|
if (!this.showSpeedtestModal) return;
|
|
if (attempts >= maxAttempts) {
|
|
this.speedtestLoading = false;
|
|
window.notify('error', 'Speedtest Zeitüberschreitung');
|
|
return;
|
|
}
|
|
attempts++;
|
|
|
|
try {
|
|
await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetParameters`, {
|
|
deviceId: this.routerDevice.deviceId,
|
|
parameters: [resultParam]
|
|
});
|
|
|
|
setTimeout(async () => {
|
|
try {
|
|
const val = await this.fetchDeviceParameterValue(resultParam);
|
|
if (val && typeof val === 'string' && val.includes("BPS")) {
|
|
const parsed = this.parseSpeedtestResult(val);
|
|
if (parsed) {
|
|
this.speedtestHistory.push(parsed);
|
|
this.$nextTick(() => {
|
|
if (this.$refs.speedtestBottom) {
|
|
this.$refs.speedtestBottom.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
|
|
if (parsed.bps > 0) this.speedtestHasStarted = true;
|
|
|
|
if (this.speedtestHasStarted && parsed.bps === 0) {
|
|
this.speedtestLoading = false;
|
|
window.notify('success', 'Speedtest abgeschlossen');
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} catch(e) { console.error(e); }
|
|
|
|
if (this.speedtestLoading) setTimeout(poll, 500);
|
|
}, 500);
|
|
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (this.speedtestLoading) setTimeout(poll, 500);
|
|
}
|
|
};
|
|
poll();
|
|
},
|
|
async fetchDeviceParameterValue(paramName) {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId) return null;
|
|
try {
|
|
const { data: deviceInfo } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceInfo`, {
|
|
params: { deviceId: this.routerDevice.deviceId }
|
|
});
|
|
|
|
if (deviceInfo?.success && deviceInfo?.fullData) {
|
|
const paramData = deviceInfo.fullData[paramName];
|
|
if (paramData?.value?.[0]) {
|
|
return paramData.value[0];
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching parameter value:', error);
|
|
}
|
|
return null;
|
|
},
|
|
formatBits(bps) {
|
|
if (!bps) return '0 Mbit/s';
|
|
const mbits = bps / 1000000;
|
|
return mbits.toFixed(2) + ' Mbit/s';
|
|
},
|
|
parseSpeedtestResult(raw) {
|
|
try {
|
|
const bpsMatch = raw.match(/BPS\s+(\d+)/);
|
|
const bytesMatch = raw.match(/Bytes\s+(\d+)/);
|
|
const packetsMatch = raw.match(/Packets\s+(\d+)/);
|
|
|
|
if (bpsMatch) {
|
|
const bps = parseInt(bpsMatch[1]);
|
|
const bytes = bytesMatch ? parseInt(bytesMatch[1]) : 0;
|
|
const packets = packetsMatch ? parseInt(packetsMatch[1]) : 0;
|
|
|
|
return {
|
|
raw: raw,
|
|
bps: bps,
|
|
bpsFormatted: this.formatBits(bps),
|
|
bytes: bytes,
|
|
bytesFormatted: window.TT_CORE.formatBytes(bytes),
|
|
packets: packets
|
|
};
|
|
}
|
|
} catch (e) {
|
|
console.error("Error parsing speedtest result", e);
|
|
}
|
|
return null;
|
|
},
|
|
async runRemoteAccess() {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId) return;
|
|
this.showRemoteAccessModal = true;
|
|
this.remoteAccessLoading = true;
|
|
this.remoteAccessStep = 'Konfiguriere Zugriff...';
|
|
this.remoteAccessResult = null;
|
|
|
|
try {
|
|
const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRemoteAccess`, {
|
|
deviceId: this.routerDevice.deviceId
|
|
});
|
|
|
|
if (data.success) {
|
|
this.remoteAccessResult = data;
|
|
} else {
|
|
throw new Error(data.message || "Unbekannter Fehler");
|
|
}
|
|
} catch (error) {
|
|
window.notify('error', error.response?.data?.message || error.message || 'Fehler bei Remote Access');
|
|
} finally {
|
|
this.remoteAccessLoading = false;
|
|
}
|
|
},
|
|
async openNetworkStructure() {
|
|
if (!this.routerDevice || !this.routerDevice.deviceId) return;
|
|
this.showNetworkStructureModal = true;
|
|
this.networkStructureLoading = true;
|
|
this.rootDevice = null;
|
|
|
|
try {
|
|
const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsNetworkStructure`, {
|
|
deviceId: this.routerDevice.deviceId
|
|
});
|
|
|
|
if (data.root) {
|
|
this.rootDevice = data.root;
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
window.notify('error', 'Fehler beim Laden der Netzwerkstruktur');
|
|
} finally {
|
|
this.networkStructureLoading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if (window.VueApp) {
|
|
window.VueApp.component('radius-router-manager', RadiusRouterManager);
|
|
} |