Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Refactor MAC input handling and improve extension ID modal functionality

Browse Source
This commit is contained in:
Luca Haid
2025-12-02 13:59:06 +00:00
parent 078105ff02
commit 1985865d1f
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/js/pages/Cpeprovisioning/Cpeprovisioning.js
View File

@@ -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);
}
});
});