added avm scanner module to radius

public/js/pages/Radius/Radius.js

@@ -44,6 +44,9 @@ const Radius = {
           <section v-show="view === 'ontReverse'" class="card-in">
             <radius-ont-finder />
           </section>
+          <section v-show="view === 'avmscanner'" class="card-in">
+            <radius-avm-scanner ref="avmScannerView" />
+          </section>
         </section>
       </div>
     `,
@@ -59,7 +62,8 @@ const Radius = {
             const options = [
                 { id: 'users', name: 'Benutzer', icon: 'fa-duotone fa-users' },
                 { id: 'free', name: 'Freie Benutzer', icon: 'fa-duotone fa-user-plus' },
-                { id: 'unused', name: 'Ungenutzte Benutzer', icon: 'fa-duotone fa-user-clock' }
+                { id: 'unused', name: 'Ungenutzte Benutzer', icon: 'fa-duotone fa-user-clock' },
+                { id: 'avmscanner', name: 'AVM Scanner', icon: 'fa-duotone fa-router' }
             ];
 
             if (window.TT_CONFIG.CAN_BILLING === '1') {
@@ -84,6 +88,7 @@ const Radius = {
             let refName = '';
             if (v === 'free') refName = 'freeView';
             else if (v === 'unused') refName = 'unusedView';
+            else if (v === 'avmscanner') refName = 'avmScannerView';
 
             if (refName) {
                 this.$nextTick(() => {

public/js/pages/Radius/RadiusAVMScanner.js

@@ -0,0 +1,268 @@
+const RadiusAVMScanner = {
+    name: 'RadiusAVMScanner',
+    template: `
+      <div class="tt-scope">
+        <div class="filters-layout" style="margin-bottom: 16px;">
+          <div class="field">
+            <div class="input-wrap">
+              <i class="fa-duotone fa-router input-icon"></i>
+              <select class="ri" v-model="deviceTypeFilter" style="padding-left: 36px;">
+                <option value="">Alle Gerätetypen</option>
+                <option v-for="dt in deviceTypes" :key="dt" :value="dt">{{ dt }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="field">
+            <label class="switch-field">
+              <span class="mini muted">Erledigte anzeigen</span>
+              <span class="switch">
+                <input type="checkbox" v-model="showErledigt">
+                <span class="switch-track">
+                  <i class="fa-duotone fa-eye on"></i>
+                  <i class="fa-duotone fa-eye-slash off"></i>
+                </span>
+              </span>
+            </label>
+          </div>
+          <div class="cluster" style="gap: 8px;">
+            <button
+              class="primary-btn"
+              @click="startScan"
+              :disabled="state?.scanning"
+              v-if="!state?.scanning"
+            >
+              <i class="fa-duotone fa-play"></i> Scan starten
+            </button>
+            <button
+              class="danger-btn"
+              @click="stopScan"
+              v-if="state?.scanning"
+            >
+              <i class="fa-duotone fa-stop"></i> Scan stoppen
+            </button>
+            <button class="ghost-btn" @click="refreshState" :disabled="isLoading" data-tooltip="Aktualisieren">
+              <i class="fa-duotone fa-refresh" :class="{ 'fa-spin': isLoading }"></i>
+            </button>
+          </div>
+        </div>
+
+        <div v-if="state?.scanning" class="progress-container" style="margin-bottom: 16px;">
+          <div class="card" style="padding: 16px;">
+            <div class="cluster" style="justify-content: space-between; margin-bottom: 8px;">
+              <span class="fw-500">Scan läuft...</span>
+              <span class="mono">{{ state.progress?.current || 0 }} / {{ state.progress?.total || 0 }}</span>
+            </div>
+            <div class="progress-bar" style="height: 8px; background: var(--tt-bg-muted); border-radius: 4px; overflow: hidden;">
+              <div
+                class="progress-fill"
+                :style="{ width: progressPercent + '%', background: 'var(--tt-primary)', height: '100%', transition: 'width 0.3s' }"
+              ></div>
+            </div>
+            <div v-if="state.currentDevice" class="mt-between" style="font-size: 13px; color: var(--tt-text-muted);">
+              Aktuell: <span class="mono">{{ state.currentDevice.mac }}</span>
+              <span v-if="state.currentDevice.ip"> ({{ state.currentDevice.ip }})</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="results-container">
+          <tt-data-table
+            :items="filteredDevices"
+            :is-loading="isLoading && !state"
+            :has-searched="true"
+            :skeleton-row-count="6"
+            initial-placeholder-text="Keine Geräte gescannt. Klicken Sie auf 'Scan starten'."
+          >
+            <template #head>
+              <thead>
+              <tr>
+                <th style="width: 170px;">MAC-Adresse</th>
+                <th style="width: 140px;">IP-Adresse</th>
+                <th style="width: 150px;">Kunde</th>
+                <th>Gerätetyp</th>
+                <th style="width: 80px; text-align: center;">Port</th>
+                <th style="width: 80px; text-align: center;">Erledigt</th>
+                <th style="width: 120px;">Gescannt</th>
+              </tr>
+              </thead>
+            </template>
+            <template #skeleton-row>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+            </template>
+            <template #row="{ item }">
+              <td class="mono nowrap">
+                <tt-copy-button :text="item.mac" tooltip-align="right" />
+                {{ item.mac }}
+              </td>
+              <td class="mono">
+                <template v-if="item.ip">
+                  <tt-copy-button :text="item.ip" tooltip-align="right" />
+                  {{ item.ip }}
+                </template>
+                <span v-else class="muted">—</span>
+              </td>
+              <td>
+                <a
+                  v-if="item.customerId"
+                  class="link"
+                  target="_blank"
+                  :href="window.TT_CONFIG.BASE_PATH + '/Address?filter%5Bcustomer_number%5D=' + item.customerId"
+                >
+                  {{ item.customerId }}
+                </a>
+                <div v-if="item.customerName" class="mini muted clamp-1">{{ item.customerName }}</div>
+              </td>
+              <td>
+                <span v-if="item.deviceType" class="fw-500">{{ item.deviceType }}</span>
+                <span v-else-if="item.error" class="text-danger mini">{{ item.error }}</span>
+                <span v-else class="muted">—</span>
+                <div v-if="item.isRepeater" class="mini muted">Repeater</div>
+                <div v-if="item.isGateway" class="mini muted">Gateway</div>
+              </td>
+              <td class="mono" style="text-align: center;">
+                <span v-if="item.port">{{ item.port }}</span>
+                <span v-else class="muted">—</span>
+              </td>
+              <td style="text-align: center;">
+                <label class="switch">
+                  <input type="checkbox" :checked="item.erledigt" @change="toggleErledigt(item.mac)">
+                  <span class="switch-track">
+                    <i class="fa-duotone fa-check on"></i>
+                    <i class="fa-duotone fa-xmark off"></i>
+                  </span>
+                </label>
+              </td>
+              <td class="mini muted nowrap">
+                {{ formatDate(item.scannedAt) }}
+              </td>
+            </template>
+          </tt-data-table>
+
+          <div class="results-summary" style="margin-top: 12px;">
+            <span v-if="state?.devices?.length">
+              {{ filteredDevices.length }} von {{ state.devices.length }} Geräten
+              <template v-if="state.scanning"> (Scan läuft...)</template>
+            </span>
+            <span v-else class="muted">Keine Geräte</span>
+          </div>
+        </div>
+      </div>
+    `,
+    data: () => ({
+        window: window,
+        state: null,
+        isLoading: false,
+        polling: null,
+        deviceTypeFilter: '',
+        showErledigt: true
+    }),
+    computed: {
+        progressPercent() {
+            if (!this.state?.progress?.total) return 0;
+            return Math.round((this.state.progress.current / this.state.progress.total) * 100);
+        },
+        deviceTypes() {
+            if (!this.state?.devices) return [];
+            const types = new Set();
+            this.state.devices.forEach(d => {
+                if (d.deviceType) types.add(d.deviceType);
+            });
+            return Array.from(types).sort();
+        },
+        filteredDevices() {
+            if (!this.state?.devices) return [];
+            return this.state.devices.filter(d => {
+                if (this.deviceTypeFilter && d.deviceType !== this.deviceTypeFilter) return false;
+                if (!this.showErledigt && d.erledigt) return false;
+                return true;
+            });
+        }
+    },
+    methods: {
+        initIfNeeded() {
+            this.refreshState();
+        },
+        startPolling() {
+            if (this.polling) return;
+            this.polling = setInterval(() => {
+                this.refreshState(true);
+            }, 3000); // Poll every 3 seconds
+        },
+        stopPolling() {
+            if (this.polling) {
+                clearInterval(this.polling);
+                this.polling = null;
+            }
+        },
+        async refreshState(silent = false) {
+            if (!silent) this.isLoading = true;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/avmScannerGetState`);
+                this.state = data;
+
+                // Start/stop polling based on scanning state
+                if (data.scanning && !this.polling) {
+                    this.startPolling();
+                } else if (!data.scanning && this.polling) {
+                    this.stopPolling();
+                }
+            } catch (e) {
+                console.error('Failed to fetch AVM scanner state:', e);
+            }
+            if (!silent) this.isLoading = false;
+        },
+        async startScan() {
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/avmScannerStart`);
+                if (data.success) {
+                    window.notify('success', `Scan gestartet für ${data.total} Geräte`);
+                    this.startPolling(); // Start polling immediately
+                } else {
+                    window.notify('warning', data.message || 'Scan konnte nicht gestartet werden');
+                }
+                this.refreshState();
+            } catch (e) {
+                console.error('Failed to start scan:', e);
+                window.notify('error', 'Fehler beim Starten des Scans');
+            }
+        },
+        async stopScan() {
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/avmScannerStop`);
+                if (data.success) {
+                    window.notify('info', 'Scan wird gestoppt...');
+                }
+            } catch (e) {
+                console.error('Failed to stop scan:', e);
+                window.notify('error', 'Fehler beim Stoppen des Scans');
+            }
+        },
+        async toggleErledigt(mac) {
+            try {
+                await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/avmScannerToggleErledigt`, { mac });
+                this.refreshState(true);
+            } catch (e) {
+                console.error('Failed to toggle erledigt:', e);
+                window.notify('error', 'Fehler beim Aktualisieren');
+            }
+        },
+        formatDate(dateStr) {
+            if (!dateStr) return '—';
+            const d = new Date(dateStr);
+            return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
+        }
+    },
+    beforeUnmount() {
+        this.stopPolling();
+    }
+};
+
+if (window.VueApp) {
+    window.VueApp.component('radius-avm-scanner', RadiusAVMScanner);
+}