Add new components for managing free users and ONT lookup, enhance UI styling,...
This commit is contained in:
Luca Haid
@@ -0,0 +1,190 @@
|
||||
/* ===== RadiusOntParser.js =====
|
||||
* Styling via gemeinsame ONT CSS; keine Funktionsänderungen, nur UI-Polish.
|
||||
*/
|
||||
|
||||
Vue.component('radius-ont-parser', {
|
||||
template: `
|
||||
<div class="radius-scope ont-card">
|
||||
<div v-if="step===1" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div>
|
||||
<div class="muted small">Laden Sie eine XLSX-Datei mit Ihren Kundendaten.</div>
|
||||
</div>
|
||||
<label class="file-drop" @dragover.prevent @drop.prevent="onDrop">
|
||||
<input type="file" accept=".xlsx" @change="handleFileUpload" hidden ref="fileInput">
|
||||
<div class="file-cta">
|
||||
<i class="fa-duotone fa-cloud-arrow-up"></i>
|
||||
<div>Hierhin ziehen oder <button type="button" class="link-btn" @click="$refs.fileInput.click()">Datei auswählen</button></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="step===2" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-sliders"></i> Schritt 2 · Spaltenzuordnung</div>
|
||||
</div>
|
||||
<div class="grid g-4 cols-2 cols-1@sm">
|
||||
<div class="field" v-for="(field, idx) in requiredFields" :key="idx">
|
||||
<label>{{ field.label }}</label>
|
||||
<div class="select">
|
||||
<select v-model="selectedColumns[field.key]">
|
||||
<option v-for="header in headers" :key="header" :value="header">{{ header }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cluster mt-3">
|
||||
<button class="primary-btn" @click="startProcessing"><i class="fa-duotone fa-play"></i> Verarbeitung starten</button>
|
||||
<button class="ghost-btn" @click="step = 1"><i class="fa-duotone fa-arrow-left"></i> Zurück</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="step===3" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-list-check"></i> Schritt 3 · Ergebnisse</div>
|
||||
<div class="cluster">
|
||||
<button class="primary-btn" @click="downloadResults"><i class="fa-duotone fa-download"></i> Neue Excel herunterladen</button>
|
||||
<button class="ghost-btn" @click="step = 2"><i class="fa-duotone fa-arrow-left"></i> Zurück</button>
|
||||
<button class="ghost-btn" @click="resetLocal"><i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="tt-table compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<template v-for="header in requiredFields">
|
||||
<th :key="header.key">{{ header.label }}</th>
|
||||
</template>
|
||||
<th>ONT SN</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in processedData" :key="i" class="row-fade-in">
|
||||
<td>{{ row[selectedColumns.kundennummer] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlussstrasse] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlussplz] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlusscity] }}</td>
|
||||
<td class="mono">{{ row.ont_sn }}</td>
|
||||
</tr>
|
||||
<tr v-if="processedData.length===0">
|
||||
<td colspan="5" class="muted center p-lg">Keine Daten</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="loading" class="overlay">
|
||||
<div class="ont-loading-card pop">
|
||||
<div class="spinner-lg"></div>
|
||||
<div class="h4 mt-2">Verarbeitung läuft...</div>
|
||||
<p class="muted">Ihre Daten werden Zeile für Zeile analysiert.</p>
|
||||
<div class="progress-bar is-yellow mt-3"><div class="bar" :style="{width: progress + '%'}"></div></div>
|
||||
<div class="muted small mt-2 mono">{{ currentRow + 1 }} / {{ totalRows }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
step: 1, headers: [], parsedData: [], processedData: [],
|
||||
selectedColumns: { kundennummer: 'crmPartner', anschlussstrasse: 'AnlStrasse', anschlussplz: 'AnlPlz', anschlusscity: 'AnlOrt' },
|
||||
requiredFields: [
|
||||
{ key: 'kundennummer', label: 'Kundennummer' },
|
||||
{ key: 'anschlussstrasse', label: 'Anschlussstraße' },
|
||||
{ key: 'anschlussplz', label: 'Anschluss PLZ' },
|
||||
{ key: 'anschlusscity', label: 'Anschluss City' }
|
||||
],
|
||||
loading: false, progress: 0, currentRow: 0, totalRows: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDrop(e){ const f = e.dataTransfer.files?.[0]; if (f) this.readXlsx(f); },
|
||||
handleFileUpload(e){ const f = e.target.files?.[0]; if (f) this.readXlsx(f); },
|
||||
async readXlsx(file){
|
||||
await this.loadXLSX();
|
||||
const fr = new FileReader();
|
||||
fr.onload = (e)=>{
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const wb = XLSX.read(data, { type: 'array' });
|
||||
const ws = wb.Sheets[wb.SheetNames[0]];
|
||||
this.parsedData = XLSX.utils.sheet_to_json(ws);
|
||||
this.headers = Object.keys(this.parsedData[0] || {});
|
||||
this.step = 2;
|
||||
};
|
||||
fr.readAsArrayBuffer(file);
|
||||
},
|
||||
async loadXLSX(){
|
||||
if (window.XLSX) return;
|
||||
await new Promise((res, rej)=>{
|
||||
const s=document.createElement('script');
|
||||
s.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js';
|
||||
s.onload=res; s.onerror=rej; document.head.appendChild(s);
|
||||
});
|
||||
},
|
||||
async startProcessing(){
|
||||
this.loading = true; this.totalRows = this.parsedData.length;
|
||||
const processed = [];
|
||||
|
||||
const dataToProcess = this.parsedData;
|
||||
|
||||
loop:
|
||||
for (let i=0; i<dataToProcess.length; i++){
|
||||
this.currentRow = i; this.progress = ((i + 1) / dataToProcess.length) * 100;
|
||||
const row = { ...dataToProcess[i] };
|
||||
try{
|
||||
const findUserResponse = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?custnume=' + encodeURIComponent(row[this.selectedColumns.kundennummer])
|
||||
);
|
||||
const users = await findUserResponse.json();
|
||||
|
||||
if (users.length === 0) {
|
||||
row.ont_sn = 'N/A - Kein Benutzer mit dieser Kundennummer gefunden';
|
||||
processed.push(row);
|
||||
} else if (users.length === 1) {
|
||||
const username = users[0].username;
|
||||
const r = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + encodeURIComponent(username)
|
||||
);
|
||||
const d = await r.json();
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN gefunden';
|
||||
processed.push(row);
|
||||
} else {
|
||||
const s = row[this.selectedColumns.anschlussstrasse];
|
||||
const p = row[this.selectedColumns.anschlussplz];
|
||||
const c = row[this.selectedColumns.anschlusscity];
|
||||
for (let u of users) {
|
||||
const info = u.info || users[0].info || '';
|
||||
if (window.RadiusUtils.validateData(s, p, c, info)) {
|
||||
const r = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + encodeURIComponent(u.username)
|
||||
);
|
||||
const d = await r.json();
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN gefunden';
|
||||
processed.push(row);
|
||||
continue loop;
|
||||
}
|
||||
}
|
||||
row.ont_sn = 'N/A - Anschluss konnte nicht zugeordnet werden';
|
||||
processed.push(row);
|
||||
}
|
||||
} catch {
|
||||
row.ont_sn = 'N/A - Fehler bei der Verarbeitung';
|
||||
processed.push(row);
|
||||
}
|
||||
if ((i + 1) % 20 === 0) await new Promise(r=>setTimeout(r,20));
|
||||
}
|
||||
this.loading=false; this.processedData = processed; this.step = 3;
|
||||
},
|
||||
downloadResults(){
|
||||
const ws = XLSX.utils.json_to_sheet(this.processedData);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Results');
|
||||
XLSX.writeFile(wb, 'results.xlsx');
|
||||
},
|
||||
resetLocal(){ Object.assign(this.$data, this.$options.data.call(this)); }
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user