Radius/add network structure
This commit is contained in:
Luca Haid
@@ -1,36 +1,185 @@
|
||||
/* ===== RadiusOntParser.js ===== */
|
||||
Vue.component('radius-ont-parser', {
|
||||
/* ===== RadiusOntParser.js (Vue 3 + TT-Core) ===== */
|
||||
|
||||
const RadiusOntParser = {
|
||||
name: 'RadiusOntParser',
|
||||
template: `
|
||||
<div class="radius-scope ont-card">
|
||||
<div class="tt-scope ont-card">
|
||||
<div v-if="step===1">
|
||||
<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>
|
||||
<radius-file-drop @file-selected="readXlsx" />
|
||||
<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>
|
||||
<tt-file-dropzone accept=".xlsx,.xls" @file-selected="readXlsx" />
|
||||
</div>
|
||||
<div v-if="step===2">
|
||||
<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 in requiredFields" :key="field.key"><label>{{ field.label }}</label><div class="select"><select v-model="selectedColumns[field.key]"><option v-for="h in headers" :key="h" :value="h">{{ h }}</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 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 in requiredFields" :key="field.key">
|
||||
<label>{{ field.label }}</label>
|
||||
<div class="select">
|
||||
<select v-model="selectedColumns[field.key]">
|
||||
<option v-for="h in headers" :key="h" :value="h">{{ h }}</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">
|
||||
<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" :disabled="loading"><i class="fa-duotone fa-download"></i> Neue Excel herunterladen</button><button class="ghost-btn" @click="step = 2" :disabled="loading"><i class="fa-duotone fa-arrow-left"></i> Zurück</button><button class="ghost-btn" @click="resetLocal" :disabled="loading"><i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung</button></div></div>
|
||||
<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" :disabled="loading">
|
||||
<i class="fa-duotone fa-download"></i> Neue Excel herunterladen
|
||||
</button>
|
||||
<button class="ghost-btn" @click="step = 2" :disabled="loading">
|
||||
<i class="fa-duotone fa-arrow-left"></i> Zurück
|
||||
</button>
|
||||
<button class="ghost-btn" @click="resetLocal" :disabled="loading">
|
||||
<i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="results-container mt-between">
|
||||
<radius-processing-indicator v-if="loading" :progress="progress" :current-row="currentRow" :total-rows="totalRows">
|
||||
<template #description><p class="muted small">Aktueller Kunde: {{ currentCustomerNumber || '—' }}</p></template>
|
||||
</radius-processing-indicator>
|
||||
<radius-table-view v-else :items="processedData" :has-searched="true" no-results-placeholder-text="Keine Daten verarbeitet.">
|
||||
<template #head><thead><tr><th v-for="h in requiredFields" :key="h.key">{{ h.label }}</th><th>ONT SN</th></tr></thead></template>
|
||||
<template #row="{ item }"><td>{{ item[selectedColumns.kundennummer] }}</td><td>{{ item[selectedColumns.anschlussstrasse] }}</td><td>{{ item[selectedColumns.anschlussplz] }}</td><td>{{ item[selectedColumns.anschlusscity] }}</td><td class="mono">{{ item.ont_sn }}</td></template>
|
||||
</radius-table-view>
|
||||
<div v-if="!loading && processedData.length" class="results-summary">{{ processedData.length }} Zeilen verarbeitet</div>
|
||||
<tt-loading-indicator
|
||||
v-if="loading"
|
||||
:text="'Aktueller Kunde: ' + (currentCustomerNumber || '—')"
|
||||
:progress="progress"
|
||||
style="min-height: 200px;"
|
||||
/>
|
||||
<tt-data-table
|
||||
v-else
|
||||
:items="processedData"
|
||||
:has-searched="true"
|
||||
no-results-placeholder-text="Keine Daten verarbeitet."
|
||||
>
|
||||
<template #head>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="h in requiredFields" :key="h.key">{{ h.label }}</th>
|
||||
<th>ONT SN</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</template>
|
||||
<template #row="{ item }">
|
||||
<td>{{ item[selectedColumns.kundennummer] }}</td>
|
||||
<td>{{ item[selectedColumns.anschlussstrasse] }}</td>
|
||||
<td>{{ item[selectedColumns.anschlussplz] }}</td>
|
||||
<td>{{ item[selectedColumns.anschlusscity] }}</td>
|
||||
<td class="mono">{{ item.ont_sn }}</td>
|
||||
</template>
|
||||
</tt-data-table>
|
||||
<div v-if="!loading && processedData.length" class="results-summary">
|
||||
{{ processedData.length }} Zeilen verarbeitet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: () => ({ 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, currentCustomerNumber: '' }),
|
||||
data: () => ({
|
||||
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,
|
||||
currentCustomerNumber: ''
|
||||
}),
|
||||
methods: {
|
||||
async readXlsx(file){ await window.RadiusUtils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js'); const fr = new FileReader(); fr.onload = (e)=>{ const wb = XLSX.read(new Uint8Array(e.target.result), { type: 'array' }); this.parsedData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); this.headers = Object.keys(this.parsedData[0] || {}); this.step = 2; }; fr.readAsArrayBuffer(file); },
|
||||
async startProcessing(){ this.step = 3; this.loading = true; this.totalRows = this.parsedData.length; this.processedData = []; this.currentRow = 0; const p = []; const b = window.TT_CONFIG.BASE_PATH; loop: for (let i=0; i<this.parsedData.length; i++){ this.currentRow = i; this.progress = ((i + 1) / this.totalRows) * 100; const row = { ...this.parsedData[i] }; this.currentCustomerNumber = row[this.selectedColumns.kundennummer] || ''; try{ const res = await fetch(`${b}/Radius/proxyUnsecureHTTPRequestToRadius?custnume=${encodeURIComponent(row[this.selectedColumns.kundennummer])}`); const users = await res.json(); if (users.length === 0) { row.ont_sn = 'N/A - Kein Benutzer'; } else if (users.length === 1) { const r = await fetch(`${b}/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=${encodeURIComponent(users[0].username)}`); const d = await r.json(); row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN'; } else { const [s,pl,c] = [row[this.selectedColumns.anschlussstrasse], row[this.selectedColumns.anschlussplz], row[this.selectedColumns.anschlusscity]]; for (let u of users) { if (window.RadiusUtils.validateData(s, pl, c, u.info || users[0].info || '')) { const r = await fetch(`${b}/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'; p.push(row); continue loop; } } row.ont_sn = 'N/A - Anschluss nicht zugeordnet'; } } catch { row.ont_sn = 'N/A - Fehler'; } p.push(row); if ((i + 1) % 20 === 0) await new Promise(r=>setTimeout(r,20)); } this.loading=false; this.processedData = p; },
|
||||
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)); }
|
||||
async readXlsx(file) {
|
||||
await window.TT_CORE.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
|
||||
const fr = new FileReader();
|
||||
fr.onload = (e) => {
|
||||
const wb = XLSX.read(new Uint8Array(e.target.result), { type: 'array' });
|
||||
this.parsedData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
||||
this.headers = Object.keys(this.parsedData[0] || {});
|
||||
this.step = 2;
|
||||
};
|
||||
fr.readAsArrayBuffer(file);
|
||||
},
|
||||
async startProcessing() {
|
||||
this.step = 3;
|
||||
this.loading = true;
|
||||
this.totalRows = this.parsedData.length;
|
||||
this.processedData = [];
|
||||
this.currentRow = 0;
|
||||
const p = [];
|
||||
const b = window.TT_CONFIG.BASE_PATH;
|
||||
loop: for (let i = 0; i < this.parsedData.length; i++) {
|
||||
this.currentRow = i;
|
||||
this.progress = ((i + 1) / this.totalRows) * 100;
|
||||
const row = { ...this.parsedData[i] };
|
||||
this.currentCustomerNumber = row[this.selectedColumns.kundennummer] || '';
|
||||
try {
|
||||
const { data: users } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
|
||||
params: { custnume: row[this.selectedColumns.kundennummer] }
|
||||
});
|
||||
if (users.length === 0) {
|
||||
row.ont_sn = 'N/A - Kein Benutzer';
|
||||
} else if (users.length === 1) {
|
||||
const { data: d } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
|
||||
params: { skipAdditional: 'true', action2: 'fetchRadacct', username: users[0].username }
|
||||
});
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN';
|
||||
} else {
|
||||
const [s, pl, c] = [row[this.selectedColumns.anschlussstrasse], row[this.selectedColumns.anschlussplz], row[this.selectedColumns.anschlusscity]];
|
||||
for (let u of users) {
|
||||
if (window.TT_CORE.validateData(s, pl, c, u.info || users[0].info || '')) {
|
||||
const { data: d } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
|
||||
params: { skipAdditional: 'true', action2: 'fetchRadacct', username: u.username }
|
||||
});
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN';
|
||||
p.push(row);
|
||||
continue loop;
|
||||
}
|
||||
}
|
||||
row.ont_sn = 'N/A - Anschluss nicht zugeordnet';
|
||||
}
|
||||
} catch {
|
||||
row.ont_sn = 'N/A - Fehler';
|
||||
}
|
||||
p.push(row);
|
||||
if ((i + 1) % 20 === 0) await new Promise(r => setTimeout(r, 20));
|
||||
}
|
||||
this.loading = false;
|
||||
this.processedData = p;
|
||||
},
|
||||
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));
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Register component with Vue 3 app
|
||||
if (window.VueApp) {
|
||||
window.VueApp.component('radius-ont-parser', RadiusOntParser);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user