From 1985865d1fc99cb827041c76fd88da9bab3aaf15 Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Tue, 2 Dec 2025 13:59:06 +0000
Subject: [PATCH] Refactor MAC input handling and improve extension ID modal
 functionality

---
 .../pages/Cpeprovisioning/Cpeprovisioning.js  | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js
index e5341b32b..9d01244d0 100644
--- a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js
+++ b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js
@@ -72,7 +72,7 @@ Vue.component('Cpeprovisioning', {
                 <tt-input label="WLAN SSID" v-model="item.cpe_data.wifi_ssid" @input="markDirty(item)" sm no-form-group/>
                 <tt-input label="WPA Key" v-model="item.cpe_data.wifi_pass" @input="markDirty(item)" sm no-form-group/>
                 <div class="d-flex align-items-center" style="gap: 5px;">
-                  <tt-input label="Router MAC" v-model="item.cpe_data.mac" @input="handleMacInput(item)" sm no-form-group style="flex-grow: 1;"/>
+                  <tt-input label="Router MAC" v-model="item.cpe_data.mac" @input="val => handleMacInput(item, val)" sm no-form-group style="flex-grow: 1;"/>
                   <button @click="copyToClipboard(item.cpe_data.mac)" :disabled="!item.cpe_data.mac" class="btn btn-sm btn-primary" style="height: 28px; margin-top:28px; width: 38px; padding: 0;">
                     <i class="fas fa-copy"></i>
                   </button>
@@ -143,7 +143,7 @@ Vue.component('Cpeprovisioning', {
           <tt-button text="Weitere laden" @click="fetchData(false)" additional-class="btn-primary" />
         </div>
         
-        <tt-modal :show="showExtensionIdModal" title="Extension ID Konfigurieren" @close="showExtensionIdModal=false">
+        <tt-modal :show="showExtensionIdModal" title="Extension ID Konfigurieren" @close="showExtensionIdModal=false" @submit="saveExtensionId">
           <div>
             <div class="field"><label style="margin-bottom: 8px; font-size: 14px;">Chrome Extension ID</label>
               <div class="input-wrap"><i class="fa-duotone fa-puzzle-piece input-icon"></i><input class="ri" type="text"
@@ -151,9 +151,6 @@ Vue.component('Cpeprovisioning', {
                                                                                                   placeholder="z.B. jglijfiddilckddlmbnlojmmlahboffh">
               </div>
             </div>
-            <div class="cluster" style="justify-content: flex-end; margin-top: 24px; gap: 12px;">
-              <button class="primary-btn" @click="saveExtensionId">Speichern</button>
-            </div>
           </div>
         </tt-modal>
       </div>
@@ -343,10 +340,15 @@ Vue.component('Cpeprovisioning', {
 
             return formatted;
         },
-        handleMacInput(item) {
+        handleMacInput(item, val) {
+            if (val !== undefined) {
+                item.cpe_data.mac = val;
+            }
+            const currentValue = item.cpe_data.mac;
+
             console.log('[MAC Input] === START handleMacInput ===');
             console.log('[MAC Input] Item:', item);
-            console.log('[MAC Input] Current MAC value:', item.cpe_data.mac);
+            console.log('[MAC Input] Current MAC value:', currentValue);
             console.log('[MAC Input] Router type:', item.cpe_data.routertype);
 
             const itemKey = item.orderproduct_id;
@@ -365,6 +367,17 @@ Vue.component('Cpeprovisioning', {
                 clearTimeout(this.macInputTimers[itemKey]);
             }
 
+            // Check for immediate QR code match (CWMP ID format)
+            // Format: 00040E-802395709D7C (approx 19 chars)
+            if (currentValue && currentValue.includes('-') && currentValue.length >= 18) {
+                 const quickMatch = /-([0-9A-Fa-f]{12})/.test(currentValue);
+                 if (quickMatch) {
+                     console.log('[MAC Input] Quick match found, processing immediately');
+                     this.processMacAddress(item);
+                     return;
+                 }
+            }
+
             // Create new timer (debounce with 300ms delay)
             console.log('[MAC Input] Creating new debounce timer for item:', itemKey);
             this.macInputTimers[itemKey] = setTimeout(() => {
@@ -591,4 +604,4 @@ Vue.component('Cpeprovisioning', {
         this.fetchData(true);
         window.addEventListener('keydown', this.handleKeydown);
     }
-});
\ No newline at end of file
+});