From bea94c3f7e8cf7bc3a8236a535e51e2b852b5dcc Mon Sep 17 00:00:00 2001 From: Luca Haid Date: Sat, 11 Oct 2025 11:40:17 +0000 Subject: [PATCH] Add new components for managing free users and ONT lookup, enhance UI styling,... --- public/js/pages/Radius/Radius.css | 462 +++++++--------------- public/js/pages/Radius/Radius.js | 357 +++++++++-------- public/js/pages/Radius/RadiusFreeUsers.js | 131 ++---- public/js/pages/Radius/RadiusOntFinder.js | 172 +------- public/js/pages/Radius/RadiusOntParser.js | 204 ++-------- public/js/pages/Radius/RadiusUnused.js | 47 +++ public/js/pages/Radius/RadiusUsers.js | 406 ++++++++----------- 7 files changed, 606 insertions(+), 1173 deletions(-) create mode 100644 public/js/pages/Radius/RadiusUnused.js diff --git a/public/js/pages/Radius/Radius.css b/public/js/pages/Radius/Radius.css index 285cbd69e..f5962e5e3 100644 --- a/public/js/pages/Radius/Radius.css +++ b/public/js/pages/Radius/Radius.css @@ -1,38 +1,7 @@ -/* ===== Radius.css ===== - Light theme, brand colors (blue), green online accent, compact density. - Scoped with .radius-scope to avoid page-wide resets. -*/ - -:root{ - --brand-blue: #005384; - --bg: #ffffff; - --card: #ffffff; - --card-2: #f8fafc; - --muted: #667085; - --text: #0b1320; - --accent: var(--brand-blue); - --accent-2: #1e88c9; - --ok: #0f9d58; /* ✅ green accent */ - --bad: #e03131; - --ring: rgba(0,83,132,.20); - --border: #e6e9ef; - --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --radius: 10px; - --radius-pill: 999px; - --shadow: 0 8px 24px rgba(0, 83, 132, .08); -} - -/* container & basic colors */ -.radius-scope a.link { - color: var(--accent); - text-decoration: none; - font-weight: 500; - transition: color .2s ease; -} -.radius-scope a.link:hover { - color: var(--accent-2); - text-decoration: underline; -} +/* ===== Radius.css ===== */ +:root{ --brand-blue: #005384; --bg: #ffffff; --card: #ffffff; --card-2: #f8fafc; --muted: #667085; --text: #0b1320; --accent: var(--brand-blue); --accent-2: #1e88c9; --ok: #0f9d58; --bad: #e03131; --ring: rgba(0,83,132,.20); --border: #e6e9ef; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 10px; --radius-pill: 999px; --shadow: 0 8px 24px rgba(0, 83, 132, .08); } +.radius-scope a.link { color: var(--accent); text-decoration: none; font-weight: 500; transition: color .2s ease; } +.radius-scope a.link:hover { color: var(--accent-2); text-decoration: underline; } .radius-scope .muted { color: var(--muted); } .radius-scope .small { font-size: 12px; } .radius-scope .mini { font-size: 11px; } @@ -45,296 +14,149 @@ .radius-scope .mt-between { margin-top: 12px; } .radius-scope .nowrap { white-space: nowrap; } .radius-scope .inline-copy { display:flex; align-items:center; gap:8px; justify-content: flex-end; } - -/* simple grid utilities (used by Free Users + ONT views) */ .radius-scope .grid { display:grid; } +.radius-scope .g-2 { gap: 8px; } .radius-scope .g-4 { gap: 16px; } .radius-scope .g-6 { gap: 24px; } -.radius-scope .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .radius-scope .cols-1 { grid-template-columns: 1fr; } -@media (min-width: 900px){ .radius-scope .cols-2@lg { grid-template-columns: repeat(2, minmax(0,1fr)); } } +.radius-scope .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } +.radius-scope .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } +@media (max-width: 900px){ .radius-scope .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } +@media (max-width: 600px){ .radius-scope .cols-4 { grid-template-columns: 1fr; } } +@media (min-width: 900px){ .radius-scope .cols-2@lg { grid-template-columns: repeat(2, minmax(0,1fr)); } .radius-scope .cols-4@lg { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 1200px){ .radius-scope .cols-2-xl { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 899.98px){ .radius-scope .cols-1@sm { grid-template-columns: 1fr; } } - - -/* badges / headings / clusters */ .radius-scope .badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef6fb; color:#0b3a57; font-size:12px; border:1px solid #d6e8f5; } -.radius-scope .h4 { font-size:18px; font-weight:800; letter-spacing:.2px; } -.radius-scope .h5 { font-size:16px; font-weight:800; letter-spacing:.2px; } +.radius-scope .h4 { font-size:18px; font-weight:800; letter-spacing:.2px; user-select: none; } +.radius-scope .h5 { font-size:16px; font-weight:800; letter-spacing:.2px; user-select: none; } .radius-scope .cluster { display:flex; gap:10px; flex-wrap:wrap; align-items: center; } - -/* container */ -.radius-scope.radius-container { - background: transparent; color: var(--text); - display: grid; gap: 16px; - max-width: 90vw; margin: 0 auto; - padding: 20px 0; -} - -.radius-scope .card, .radius-scope .subcard, .radius-scope .progress-card { - background: var(--card); - border: 1px solid var(--border); - border-radius: var(--radius); - box-shadow: var(--shadow); -} +.radius-scope.radius-container { background: transparent; color: var(--text); display: grid; gap: 16px; max-width: 90vw; margin: 0 auto; padding: 20px 0; } +.radius-scope .card, .radius-scope .subcard, .radius-scope .progress-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .radius-scope .card { padding: 14px; } .radius-scope .subcard { padding: 12px; } - -/* main header inside card */ -.radius-scope .pane-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; flex-wrap: wrap;} -.radius-scope .pane-header .title { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size: 18px; } -/* ✅ green dot (single branding only in the main header) */ -.radius-scope .logo-dot { - width:14px; height:14px; border-radius:50%; - background: radial-gradient(circle at 30% 30%, #37d26b, #0f9d58 70%); - box-shadow: 0 0 0 3px rgba(15,157,88,.15); - display:inline-block; -} -.radius-scope .view-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; } +.radius-scope .pane-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap;} +.radius-scope .pane-header .title { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size: 18px; user-select: none; } +.radius-scope .logo-dot { width:14px; height:14px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #37d26b, #0f9d58 70%); box-shadow: 0 0 0 3px rgba(15,157,88,.15); display:inline-block; } +.radius-scope .view-tabs { display:flex; gap:8px; flex-wrap:wrap; } .radius-scope .view-select-wrap { display: none; } - -@media (max-width: 800px) { - .radius-scope .view-tabs { display: none; } - .radius-scope .view-select-wrap { display: block; } -} - - -/* buttons */ -.radius-scope .tab-btn, .radius-scope .primary-btn, .radius-scope .ghost-btn, .radius-scope .icon-btn, .radius-scope .link-btn, .radius-scope .danger-btn { - appearance:none; outline:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; - transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; -} -.radius-scope .tab-btn { - padding: 8px 12px; border-radius: var(--radius-pill); - background: #f4f7fb; color: var(--text); - border: 1px solid var(--border); -} -.radius-scope .tab-btn.active, .radius-scope .tab-btn:hover { - background: #eef6fb; border-color: #d6e8f5; box-shadow: 0 0 0 4px var(--ring); - transform: scale(0.98); -} -.radius-scope .primary-btn { - padding: 8px 14px; border-radius: var(--radius); - color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); - box-shadow: 0 6px 18px rgba(0,83,132,.25); - height: 38px; - display: inline-flex; - align-items: center; - justify-content: center; -} +.radius-scope .content-divider { border: none; height: 1px; background-color: var(--border); margin: 16px 0; } +@media (max-width: 800px) { .radius-scope .view-tabs { display: none; } .radius-scope .view-select-wrap { display: block; } } +.radius-scope .tab-btn, .radius-scope .primary-btn, .radius-scope .ghost-btn, .radius-scope .icon-btn, .radius-scope .link-btn, .radius-scope .danger-btn { appearance:none; outline:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; user-select: none; } +.radius-scope .tab-btn { padding: 8px 12px; border-radius: var(--radius-pill); background: #f4f7fb; color: var(--text); border: 1px solid var(--border); } +.radius-scope .tab-btn.active, .radius-scope .tab-btn:hover { background: #eef6fb; border-color: #d6e8f5; box-shadow: 0 0 0 4px var(--ring); transform: scale(0.98); } +.radius-scope .tab-btn:disabled { opacity: .6; cursor: not-allowed; background: #f4f7fb; border-color: var(--border); box-shadow: none; transform: none; } +.radius-scope .primary-btn { padding: 8px 14px; border-radius: var(--radius); color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(0,83,132,.25); height: 38px; display: inline-flex; align-items: center; justify-content: center; } .radius-scope .primary-btn:disabled { opacity:.6; cursor:not-allowed; } -.radius-scope .ghost-btn { - padding: 8px 12px; border-radius: var(--radius); - color: var(--accent); background: #f8fbff; border:1px dashed #cfe4f3; -} -.radius-scope .danger-btn { - padding: 8px 12px; border-radius: var(--radius); - color: #c92a2a; background: #fff5f5; border: 1px dashed #ffc9c9; - opacity: .9; - transition: opacity .2s ease-in-out, transform .1s ease-in-out; -} +.radius-scope .ghost-btn { padding: 8px 12px; border-radius: var(--radius); color: var(--accent); background: #f8fbff; border:1px dashed #cfe4f3; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; } +.radius-scope .danger-btn { padding: 8px 12px; border-radius: var(--radius); color: #c92a2a; background: #fff5f5; border: 1px dashed #ffc9c9; opacity: .9; transition: opacity .2s ease-in-out, transform .1s ease-in-out; } .radius-scope .danger-btn:hover { opacity: 1; } .radius-scope .danger-btn:active { transform: scale(0.97); } - -.radius-scope .primary-btn:not(:disabled):hover, .radius-scope .ghost-btn:not(:disabled):hover, .radius-scope .danger-btn:not(:disabled):hover { - transform: translateY(-2px); -} -.radius-scope .primary-btn:not(:disabled):hover { - box-shadow: 0 8px 22px rgba(0,83,132,.3); -} - +.radius-scope .primary-btn:not(:disabled):hover, .radius-scope .ghost-btn:not(:disabled):hover, .radius-scope .danger-btn:not(:disabled):hover { transform: translateY(-2px); } +.radius-scope .primary-btn:not(:disabled):hover { box-shadow: 0 8px 22px rgba(0,83,132,.3); } .radius-scope .icon-btn { background: transparent; color: var(--muted); padding: 6px 8px; border-radius:8px; } .radius-scope .icon-btn.sm { padding: 4px 6px; } .radius-scope .icon-btn:hover { color: var(--text); background:#f2f6fa; } .radius-scope .link-btn { background: transparent; color: var(--accent); text-decoration: underline; } - -/* inputs */ +@keyframes copy-feedback-pop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } +.radius-scope [data-tooltip="Kopieren"], .radius-scope .ros-chip.is-clickable { user-select: none; -webkit-user-select: none; } +.radius-scope .icon-btn .check-icon { display: none; } +.radius-scope .icon-btn.is-copied, .radius-scope .icon-btn.is-copied:hover { background-color: #eaf7ef; color: var(--ok); animation: copy-feedback-pop 0.3s ease-in-out; } +.radius-scope .icon-btn.is-copied .copy-icon { display: none; } +.radius-scope .icon-btn.is-copied .check-icon { display: inline-block; } .radius-scope .input-wrap { position: relative; } -.radius-scope .ri { - box-sizing: border-box; /* Add this line */ - width: 100%; - padding: 8px 38px 8px 36px; - border-radius: var(--radius); - border: 1px solid var(--border); - background: #fff; - color: var(--text); - transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; -} +.radius-scope .ri { box-sizing: border-box; width: 100%; padding: 8px 38px 8px 36px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; color: var(--text); transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; } +.radius-scope .ac-root .ri { padding: 8px 38px 8px 75px; } .radius-scope .ri:hover:not(:focus) { border-color: #c4d1de; } .radius-scope .ri:focus { border-color: #bcd9ee; box-shadow: 0 0 0 5px var(--ring); outline: none; background: #fbfeff; } .radius-scope .ri::placeholder{ color:#9aa6b2; } .radius-scope .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color:#7997ad; font-size: 14px; pointer-events: none; } -.radius-scope .btn-clear { - position: absolute; right: 8px; top: 15%; transform: translateY(-50%); - width: 28px; height: 28px; border-radius: 8px; border: none; - background: #f3f7fa; color:#5a7891; /* Changed color from #7a8fa1 */ cursor: pointer; - transition: all .2s ease; opacity: 1; transform: scale(1); -} +.radius-scope .input-icon-logo { height: 20px; width: auto; opacity: 0.9; } +.radius-scope .btn-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color:#5a7891; cursor: pointer; transition: all .2s ease; opacity: 1; } .radius-scope .btn-clear:not(:disabled):hover { background:#e8f2f9; color:#2b5c7e; } .radius-scope .btn-clear:disabled { background: transparent; color: #c1cbd5; cursor: not-allowed; transform: scale(0.9); opacity: 0.5; } .radius-scope .btn-clear:disabled:hover { background: transparent; color: #c1cbd5; } - +.radius-scope .logo-switcher { position: absolute; left: 1px; top: 1px; height: calc(100% - 2px); display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; cursor: pointer; border-right: 1px solid var(--border); transition: background-color .2s ease; border-radius: 9px 0 0 9px; user-select: none; } +.radius-scope .logo-switcher:hover { background-color: #f8fafc; } +.radius-scope .switcher-caret { font-size: 11px; color: var(--muted); transition: transform .2s ease; } +.radius-scope .logo-switcher.is-open .switcher-caret { transform: rotate(180deg); } +.radius-scope .logo-dropdown { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 25; padding: 6px; width: 180px; } +.radius-scope .logo-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; } +.radius-scope .logo-option:hover { background-color: #f3f8fc; } +.radius-scope .logo-option img { height: 18px; width: auto; } .radius-scope .select select { width:100%; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--border); background:#fff; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right .5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } - - -/* iOS-like switch */ .radius-scope .switch-field { display:flex; flex-direction:column; gap:6px;align-items: center } .radius-scope .switch { display:inline-flex; align-items:center; cursor:pointer; user-select:none; } .radius-scope .switch input { display:none; } -.radius-scope .switch .switch-track { - position: relative; width: 58px; height: 32px; border-radius: 999px; - background: #e8edf3; border: 1px solid #d7e1ea; display:inline-flex; align-items:center; justify-content:space-between; - padding: 0 8px; color:#7b8a98; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; -} +.radius-scope .switch .switch-track { position: relative; width: 58px; height: 32px; border-radius: 999px; background: #e8edf3; border: 1px solid #d7e1ea; display:inline-flex; align-items:center; justify-content:space-between; padding: 0 8px; color:#7b8a98; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .radius-scope .switch .on { opacity: 0; transition: opacity .18s ease; } .radius-scope .switch .off { opacity: 1; transition: opacity .18s ease; } -.radius-scope .switch .switch-track::after { - content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background:#fff; border-radius: 50%; - box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; -} -.radius-scope .switch input:checked + .switch-track { - background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: #a9d0ea; color:#fff; -} -.radius-scope .switch input:focus-visible + .switch-track { - box-shadow: 0 0 0 5px var(--ring); -} +.radius-scope .switch .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background:#fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; } +.radius-scope .switch input:checked + .switch-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: #a9d0ea; color:#fff; } +.radius-scope .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 5px var(--ring); } .radius-scope .switch input:checked + .switch-track::after { transform: translateX(26px); } .radius-scope .switch input:checked + .switch-track .on { opacity: 1; } .radius-scope .switch input:checked + .switch-track .off { opacity: 0; } - -/* Autocomplete */ .radius-scope .ac-root { position: relative; } -.radius-scope .ac-panel { - position: absolute; - left: 0; - min-width: 100%; - width: auto; - margin-top: 6px; - z-index: 20; - background: #fff; - border: 1px solid var(--border); - border-radius: 12px; - box-shadow: var(--shadow); - padding: 8px; -} -.radius-scope .ac-panel.wide, -.radius-scope [data-wide="1"] .ac-panel { - left: -6px; - right: auto; /* Change this from -6px to auto */ -} +.radius-scope .ac-panel { position: absolute; left: 0; min-width: 100%; width: auto; margin-top: 6px; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; } +.radius-scope .ac-panel.wide, .radius-scope [data-wide="1"] .ac-panel { left: -6px; right: auto; } .radius-scope .ac-skel .skeleton-line { height: 12px; margin: 8px 0; } .radius-scope .ac-empty { padding: 10px; } .radius-scope .ac-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; } -.radius-scope .ac-item { - display: flex; - align-items: center; - gap: 10px; - padding: 8px 10px; - border-radius: 8px; - cursor: pointer; - transition: transform .1s ease, background-color .1s ease; - white-space: nowrap; -} +.radius-scope .ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: transform .1s ease, background-color .1s ease; white-space: nowrap; } .radius-scope .ac-item:hover, .radius-scope .ac-item.is-active { background:#f3f8fc; transform: scale(0.99); } .radius-scope .ac-pop-enter-active, .radius-scope .ac-pop-leave-active { transition: opacity .12s ease, transform .12s ease; transform-origin: top center; } .radius-scope .ac-pop-enter, .radius-scope .ac-pop-leave-to { opacity:0; transform: translateY(-4px) scale(.98); } - -/* Filters grid (labels optional, works fine without) */ -.radius-scope .filters { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:flex-end; } +.radius-scope .filters-layout { display: grid; gap: 12px; align-items: flex-end; grid-template-columns: 1.5fr 210px 190px 1fr auto; } +@media (max-width: 1200px) { .radius-scope .filters-layout { grid-template-columns: 1fr 1fr; } .radius-scope .filters-layout .field:nth-child(1), .radius-scope .filters-layout .field:nth-child(4) { grid-column: 1 / -1; } } +@media (max-width: 768px) { .radius-scope .filters-layout { grid-template-columns: 1fr; } .radius-scope .filters-layout .field:nth-child(1), .radius-scope .filters-layout .field:nth-child(4) { grid-column: auto; } } .radius-scope .field label { display:block; margin: 0 0 6px; color: var(--muted); font-size: 12px; } - -/* tables */ .radius-scope .table-wrap { overflow:auto; border-radius: 12px; border:1px solid var(--border); background: var(--card-2); max-height: 65vh; } .radius-scope .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .radius-scope .table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .radius-scope .table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f1f5f9; } .radius-scope .table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; } -.radius-scope .tt-table { - width:100%; - min-width: 1000px; /* ADDED THIS LINE */ - border-collapse: collapse; - background: #fff; - table-layout: fixed; -} +.radius-scope .tt-table { width:100%; min-width: 1000px; border-collapse: collapse; background: #fff; table-layout: fixed; margin-bottom: unset !important; } +.radius-scope .tt-table.no-min-width { min-width: auto; } .radius-scope .tt-table th, .radius-scope .tt-table td { padding: 10px 12px; border-bottom:1px solid #eef1f5; vertical-align: middle; } -.radius-scope .tt-table thead th { position:sticky; top:0; background:#f6f9fc; z-index:1; font-size:12px; color:#344054; text-transform:uppercase; letter-spacing:.04em; } +.radius-scope .tt-table thead th { position:sticky; top:0; background:#f6f9fc; font-size:12px; color:#344054; text-transform:uppercase; letter-spacing:.04em; user-select: none; z-index: 10; } .radius-scope .tt-table.compact th, .radius-scope .tt-table.compact td { padding:8px 10px; } .radius-scope .tt-table.ultra-compact th, .radius-scope .tt-table.ultra-compact td { padding:6px 8px; font-size:12px; } .radius-scope .rows-enter-active, .radius-scope .rows-leave-active { transition: opacity .12s ease, transform .12s ease; } .radius-scope .rows-enter, .radius-scope .rows-leave-to { opacity:0; transform: translateY(2px); } - .radius-scope .results-container .table-wrap { border-radius: 12px 12px 0 0; border-bottom: none; } .radius-scope .results-summary { padding: 8px 12px; border: 1px solid var(--border); border-top: none; background: #f6f9fc; font-size: 13px; color: var(--muted); border-radius: 0 0 12px 12px; min-height: 38px; display: flex; align-items: center; } - -/* table placeholder for no-input or no-results */ .radius-scope .table-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-2); text-align: center; color: var(--muted); font-size: 16px; } -.radius-scope .table-placeholder i { font-size: 32px; color: #bdc8d8; } - - -/* row entrance */ +.radius-scope .table-placeholder i { font-size: 32px; color: var(--brand-blue); } .radius-scope .row-fade-in { animation: rowIn .22s ease; } @keyframes rowIn { from { opacity:0; transform: translateY(2px);} to {opacity:1; transform: none;} } - -/* skeletons */ -.radius-scope .skeleton-line { - --h: 12px; - height: var(--h); - border-radius: 8px; - background: linear-gradient(90deg, #eaeef3, #f3f6fa, #eaeef3); - background-size: 300% 100%; - animation: shimmer 1.1s infinite linear; -} +.radius-scope .skeleton-line { --h: 12px; height: var(--h); border-radius: 8px; background: linear-gradient(90deg, #eaeef3, #f3f6fa, #eaeef3); background-size: 300% 100%; animation: shimmer 1.1s infinite linear; } @keyframes shimmer { 0%{background-position:0% 0} 100%{background-position:100% 0} } - -/* button inline loader */ .radius-scope .btn-loader { width: 18px; height: 18px; border: 2px solid #d5e7f4; border-top-color: var(--brand-blue); border-radius:50%; display:inline-block; animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg);} } - -/* modal */ -.radius-scope .modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 1000; } +/* --- MODAL FIX: REMOVED SPACE IN SELECTOR --- */ +.radius-scope.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 9999; } .radius-scope .modal-card { width:min(780px, 92vw); max-height: 88vh; overflow:auto; border-radius: 16px; border:1px solid var(--border); background: #fff; } -.radius-scope .modal-head { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background: #fff; z-index: 10; } +.radius-scope .modal-head { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background: #fff; z-index: 10; user-select: none; } .radius-scope .modal-title { font-weight:800; } .radius-scope .modal-body { padding: 14px 16px; } .radius-scope .fade-enter-active, .radius-scope .fade-leave-active { transition: opacity .14s ease; } .radius-scope .fade-enter, .radius-scope .fade-leave-to { opacity:0; } .radius-scope .pop { animation: pop .16s ease; } @keyframes pop { from { transform: scale(.98);} to { transform: none;} } - -/* key-value in modal (OLD) */ .radius-scope .kv { display:grid; grid-template-columns: 180px 1fr; gap: 10px 16px; } .radius-scope .kv > div { display: contents; } .radius-scope .kv > div > span { color: var(--muted); } - -/* Redesigned Modal Key-Value */ .radius-scope .kv-redesign { display: flex; flex-direction: column; } -.radius-scope .kv-redesign .kv-row { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding: 12px 4px; - border-bottom: 1px solid var(--border); - gap: 16px; -} +.radius-scope .kv-redesign .kv-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--border); gap: 16px; } .radius-scope .kv-redesign .kv-row:last-child { border-bottom: none; } -.radius-scope .kv-redesign .kv-label { - color: var(--muted); - flex-shrink: 0; - width: 140px; -} -.radius-scope .kv-redesign .kv-value { - flex-grow: 1; - text-align: right; - word-break: break-all; -} +.radius-scope .kv-redesign .kv-label { color: var(--muted); flex-shrink: 0; width: 140px; } +.radius-scope .kv-redesign .kv-value { flex-grow: 1; text-align: right; word-break: break-all; min-width: 0; } .radius-scope .kv-redesign .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); } .radius-scope .kv-redesign .chip.ok { background: #eaf7ef; color:#206a42; border-color: #c9e6d8; } .radius-scope .kv-redesign .chip.bad { background: #fdecec; color:#8a1d1d; border-color: #f6d2d2; } - -/* online state chip */ .radius-scope .ros-wrap { min-height: 28px; display:flex; align-items:center; justify-content:flex-start; width: 170px; } -.radius-scope .ros-chip { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius: var(--radius); font-size:12px; font-family: var(--mono); border:1px solid var(--border); background:#fff; width: 100%; } -.radius-scope .ros-chip.is-clickable { cursor: pointer; transition: background-color .15s ease; } +.radius-scope .ros-chip { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius: var(--radius); font-size:12px; font-family: var(--mono); border:1px solid var(--border); background:#fff; width: 100%; height: 28px; box-sizing: border-box; } +.radius-scope .ros-chip.is-clickable { cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .radius-scope .ros-chip.is-clickable:hover { background-color: #f3f8fc; } .radius-scope .ros-chip.on { box-shadow: 0 0 0 3px rgba(15,157,88,.08); } .radius-scope .ros-chip.off { box-shadow: 0 0 0 3px rgba(224,49,49,.08); } @@ -342,93 +164,77 @@ .radius-scope .ros-chip.on .dot { background: var(--ok); } .radius-scope .ros-chip.off .dot { background: var(--bad); } .radius-scope .ros-chip .ip { flex-grow: 1; text-align: center; } -.radius-scope .ros-chip.skeleton { background: #f8fafc; color: #d1d9e4; } - -/* ONT views shared styles */ +.radius-scope .ros-chip.skeleton { background: #f8fafc; color: #d1d9e4; align-items: center; } +.radius-scope .ros-chip.is-copied { background-color: #eaf7ef; border-color: #c9e6d8; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.25); animation: copy-feedback-pop 0.3s ease-in-out; } .radius-scope .ont-card .block { background: #fff; border:1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .radius-scope .ont-card .block + .block { margin-top: 12px; } .radius-scope .block-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; flex-wrap: wrap; } -.radius-scope .file-drop { display:block; border:1px dashed #cfe4f3; border-radius: var(--radius); padding: 30px; text-align:center; background:#f8fbff; cursor:pointer; } +.radius-scope .file-drop { display: flex; align-items: center; justify-content: center; border: 2px dashed #cfe4f3; border-radius: var(--radius); padding: 20px; text-align: center; background: #f8fbff; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease; min-height: 150px; } +.radius-scope .file-drop.is-dragover { transform: scale(1.02); border-color: var(--accent); background-color: #f0f8ff; box-shadow: 0 0 0 5px var(--ring); } .radius-scope .file-cta { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:#365972; } - -/* ONT Parser Loading Overlay */ -.radius-scope .overlay { - position:fixed; inset:0; background:rgba(255,255,255,.8); backdrop-filter: blur(4px); - display:flex; flex-direction:column; align-items:center; justify-content:center; - z-index: 50; text-align: center; -} -.radius-scope .ont-loading-card { - background: transparent; border: none; box-shadow: none; - width: min(520px, 90vw); padding: 16px; - color: var(--text); -} +.radius-scope .overlay { position:fixed; inset:0; background:rgba(255,255,255,.8); backdrop-filter: blur(4px); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index: 50; text-align: center; } +.radius-scope .ont-loading-card { background: transparent; border: none; box-shadow: none; width: min(520px, 90vw); padding: 16px; color: var(--text); } .radius-scope .spinner-lg { width: 42px; height: 42px; border: 4px solid #dbe9f5; border-top-color: var(--brand-blue); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto 10px; } +.radius-scope .animated-hourglass { animation: hourglass-turn 2s infinite linear; } +@keyframes hourglass-turn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .radius-scope .progress-bar { height: 8px; background:#eef4f8; border-radius:999px; overflow:hidden; border:1px solid #e2ebf3; } .radius-scope .progress-bar .bar { height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s ease; } -.radius-scope .progress-bar.is-yellow .bar { background: #f7c423; } - +.radius-scope .progress-bar.is-yellow .bar { background: linear-gradient(90deg, #f7b733, #fc4a1a); } .radius-scope .alert.error { padding:10px 12px; border-radius:10px; border:1px solid #ffd6d6; background:#fff3f3; color:#8a1d1d; } - -/* section entrance */ .radius-scope .card-in { animation: cardIn .18s ease; } @keyframes cardIn { from{ opacity:0; transform: translateY(4px);} to { opacity:1; transform: none;} } - -/* ===== NEW STYLES ===== */ - -/* Custom Animated Tooltip */ -[data-tooltip] { - position: relative; -} -[data-tooltip]::before, [data-tooltip]::after { - position: absolute; - left: 50%; - transform: translateX(-50%); - opacity: 0; - pointer-events: none; - transition: all .18s ease-in-out; - z-index: 10; -} -[data-tooltip]::before { - content: ''; - bottom: calc(100% + 0px); - border: 5px solid transparent; - border-top-color: #0b1320; -} -[data-tooltip]::after { - content: attr(data-tooltip); - bottom: calc(100% + 5px); - padding: 4px 8px; - border-radius: 6px; - background: #0b1320; - color: #fff; - font-size: 12px; - font-weight: 500; - white-space: nowrap; -} -[data-tooltip]:hover::before, [data-tooltip]:hover::after { - opacity: 1; - transform: translateX(-50%) translateY(-4px); -} - -/* IP Input Focus Tooltip */ -.radius-scope .ip-field-wrapper { position: relative; } -.radius-scope .ip-focus-tooltip { - position: absolute; - bottom: calc(100% + 4px); - left: 0; - background: #f8fbff; - border: 1px solid #cfe4f3; - padding: 4px 8px; - border-radius: 6px; - font-size: 11px; - color: var(--accent); - white-space: nowrap; - opacity: 0; - transform: translateY(4px); - pointer-events: none; - transition: all .18s ease-in-out; -} -.radius-scope .ip-field-wrapper:focus-within .ip-focus-tooltip { - opacity: 1; - transform: translateY(0); -} \ No newline at end of file +[data-tooltip] { position: relative; } +[data-tooltip]::before, [data-tooltip]::after { position: absolute; left: 50%; transform: translateX(-50%) translateY(0); opacity: 0; pointer-events: none; transition: all .18s ease-in-out; z-index: 10; } +[data-tooltip]::before { content: ''; bottom: 100%; border: 5px solid transparent; border-top-color: #0b1320; } +[data-tooltip]::after { content: attr(data-tooltip); bottom: calc(100% + 5px); padding: 4px 8px; border-radius: 6px; background: #0b1320; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; } +[data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(-4px); } +[data-tooltip-align="right"]::after { left: 0; transform: translateX(0); } +[data-tooltip-align="right"]::before { left: 1em; transform: translateX(-50%); } +[data-tooltip-align="right"]:hover::after, [data-tooltip-align="right"]:hover::before { transform: translateX(0) translateY(-4px); } +[data-tooltip-align="right"]:hover::before { transform: translateX(-50%) translateY(-4px); } +[data-tooltip-align="left"]::after { left: auto; right: 0; transform: translateX(0); } +[data-tooltip-align="left"]::before { left: auto; right: 1em; transform: translateX(-50%); } +[data-tooltip-align="left"]:hover::after, [data-tooltip-align="left"]:hover::before { transform: translateX(0) translateY(-4px); } +[data-tooltip-align="left"]:hover::before { transform: translateX(-50%) translateY(-4px); } +[data-tooltip-align="bottom"]::after { top: calc(100% + 5px); bottom: auto; } +[data-tooltip-align="bottom"]::before { top: 100%; bottom: auto; border-top-color: transparent; border-bottom-color: #0b1320; } +[data-tooltip-align="bottom"]:hover::before, [data-tooltip-align="bottom"]:hover::after { transform: translateX(-50%) translateY(4px); } +.radius-scope .ip-field-wrapper, .radius-scope .ac-root { position: relative; } +.radius-scope .ip-focus-tooltip, .radius-scope .ac-focus-tooltip { position: absolute; bottom: calc(100% + 4px); left: 0; background: #f8fbff; border: 1px solid #cfe4f3; padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--accent); white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: all .18s ease-in-out; z-index: 10; } +.radius-scope .ip-field-wrapper:focus-within .ip-focus-tooltip, .radius-scope .ac-root:focus-within .ac-focus-tooltip { opacity: 1; transform: translateY(0); } +.radius-scope .modal-card-wide { width: min(1100px, 92vw); } +.radius-scope .modal-body-scrollable { max-height: calc(90vh - 120px); overflow-y: auto; padding-right: 8px; } +.radius-scope .unselectable { user-select: none; } +.radius-scope .custom-dropdown { position: relative; width: 120px; } +.radius-scope .dropdown-toggle { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; cursor: pointer; font-weight: 700; transition: all .2s ease; height: 38px; box-sizing: border-box; } +.radius-scope .dropdown-toggle:hover { border-color: #c4d1de; } +.radius-scope .dropdown-toggle:focus, .radius-scope .dropdown-toggle.is-open { border-color: #bcd9ee; box-shadow: 0 0 0 5px var(--ring); outline: none; } +.radius-scope .dropdown-toggle .fa-chevron-down { font-size: 12px; transition: transform .2s ease; } +.radius-scope .dropdown-toggle.is-open .fa-chevron-down { transform: rotate(180deg); } +.radius-scope .dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 25; padding: 6px; max-height: 200px; overflow-y: auto; } +.radius-scope .dropdown-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; } +.radius-scope .dropdown-item:hover, .radius-scope .dropdown-item.is-active { background-color: #f3f8fc; } +.radius-scope .stat-card-v2 { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 16px; background-color: var(--card-2); } +.radius-scope .stat-card-v2 .stat-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } +.radius-scope .stat-card-v2 .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; } +.radius-scope .stat-card-v2 .stat-value { font-size: 18px; font-weight: 700; line-height: 1.2; font-family: var(--mono); } +.radius-scope .stat-card-v2.stat-total .stat-icon { background-color: #eef2f6; color: #334155; } +.radius-scope .stat-card-v2.stat-total .stat-value { color: var(--text); } +.radius-scope .stat-card-v2.stat-download .stat-icon { background-color: #dcfce7; color: #16a34a; } +.radius-scope .stat-card-v2.stat-download .stat-value { color: #15803d; } +.radius-scope .stat-card-v2.stat-upload .stat-icon { background-color: #e0f2fe; color: #0284c7; } +.radius-scope .stat-card-v2.stat-upload .stat-value { color: var(--accent); } +.radius-scope .stat-card-v2.stat-duration .stat-icon { background-color: #eef2f6; color: #334155; } +.radius-scope .stat-card-v2.stat-duration .stat-value { color: var(--text); } +.radius-scope .stat-card-v2-skeleton { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); } +.radius-scope .stat-card-v2-skeleton .icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } +.radius-scope .stat-card-v2-skeleton .text { flex-grow: 1; } +.radius-scope .stat-card-v2-skeleton .label { height: 12px; width: 70%; margin-bottom: 6px; } +.radius-scope .stat-card-v2-skeleton .value { height: 18px; width: 90%; } +.radius-scope .chart-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--card-2); position: relative; } +.radius-scope .chart-card canvas { max-height: calc(250px - 32px); } +.radius-scope .chart-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); } +.radius-scope .chart-placeholder i { font-size: 32px; color: #bdc8d8; } +.radius-scope .modal-skeleton .skeleton-line { margin-bottom: 12px; } +.radius-scope .table-placeholder-fixed-height { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted); text-align: center; padding: 20px; background-color: var(--card-2); user-select: none; } +.radius-scope .table-placeholder-fixed-height i { font-size: 32px; color: #bdc8d8; } \ No newline at end of file diff --git a/public/js/pages/Radius/Radius.js b/public/js/pages/Radius/Radius.js index ee5f6bb15..33dd1e10d 100644 --- a/public/js/pages/Radius/Radius.js +++ b/public/js/pages/Radius/Radius.js @@ -1,9 +1,52 @@ -/* ===== Radius.js ===== - * Main entry point for the Radius module (light theme). - * Navigation jetzt innerhalb der Hauptkarte; Free-Tab lädt erst bei erstem Klick. - */ +/* ===== Radius.js ===== */ -/* ---------- Shared utils (global) ---------- */ +/* ---------- Shared Utilities (global) ---------- */ +function loadScript(src) { + return new Promise((resolve, reject) => { + if (document.querySelector(`script[src="${src}"]`)) { + return resolve(); + } + const script = document.createElement('script'); + script.src = src; + script.onload = resolve; + script.onerror = () => reject(new Error(`Script load error for ${src}`)); + document.head.appendChild(script); + }); +} +async function copyToClipboard(text) { + try { + await navigator.clipboard.writeText(text || ''); + return true; + } catch { + const ta = document.createElement('textarea'); + ta.value = text || ''; + ta.style.position = 'fixed'; ta.style.opacity = '0'; + document.body.appendChild(ta); ta.select(); + try { document.execCommand('copy'); } catch {} + document.body.removeChild(ta); + return false; + } +} +function formatBytes(bytes, decimals = 2) { + bytes = parseInt(bytes, 10); + if (!bytes || bytes === 0) return '0 Bytes'; + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; +} +function formatDuration(seconds) { + if (!seconds || seconds < 0) return '0s'; + seconds = parseInt(seconds, 10); + const d = Math.floor(seconds / (3600*24)); + const h = Math.floor(seconds % (3600*24) / 3600); + const m = Math.floor(seconds % 3600 / 60); + if (d > 0) return `${d}t ${h}h`; + if (h > 0) return `${h}h ${m}m`; + if (m > 0) return `${m}m`; + return `< 1m`; +} function calculateSimilarity(str1, str2) { if (!str1 || !str2) return 0; str1 = ('' + str1).toLowerCase(); @@ -20,160 +63,146 @@ function validateData(strasse, plz, stadt, info) { calculateSimilarity(stadt, info) < thresholds ); } -async function copyToClipboard(text) { - try { - await navigator.clipboard.writeText(text || ''); - return true; - } catch { - const ta = document.createElement('textarea'); - ta.value = text || ''; - ta.style.position = 'fixed'; ta.style.opacity = '0'; - document.body.appendChild(ta); ta.select(); - try { document.execCommand('copy'); } catch {} - document.body.removeChild(ta); - return false; - } -} -window.RadiusUtils = { calculateSimilarity, validateData, copyToClipboard }; + +window.RadiusUtils = { calculateSimilarity, validateData, copyToClipboard, formatBytes, formatDuration, loadScript }; + +/* ---------- Reusable Component: radius-table-view ---------- */ +Vue.component('radius-table-view', { + props: { + items: Array, + isLoading: Boolean, + hasSearched: Boolean, + density: { type: String, default: 'compact' }, + tableClass: { type: String, default: '' }, + tableStyle: Object, + tableMinHeight: { type: String, default: 'auto' }, + initialPlaceholderIcon: { type: String, default: 'fa-duotone fa-keyboard' }, + initialPlaceholderText: { type: String, default: 'Beginnen Sie Ihre Suche.' }, + noResultsPlaceholderIcon: { type: String, default: 'fa-duotone fa-database' }, + noResultsPlaceholderText: { type: String, default: 'Keine Ergebnisse gefunden.' }, + skeletonRowCount: { type: Number, default: 6 } + }, + template: ` +
+
+ +
{{ initialPlaceholderText }}
+
+
+ +
+ + + +
+
+ +
+
+ +
{{ noResultsPlaceholderText }}
+
+ +
+ ` +}); + +/* ---------- Reusable Component: radius-file-drop ---------- */ +Vue.component('radius-file-drop', { + data: () => ({ dragCounter: 0 }), + computed: { isDragging() { return this.dragCounter > 0; } }, + template: ` + + `, + methods: { onDrop(e) { this.dragCounter = 0; const file = e.dataTransfer.files?.[0]; if (file) this.$emit('file-selected', file); } } +}); + +/* ---------- Reusable Component: radius-processing-indicator ---------- */ +Vue.component('radius-processing-indicator', { + props: ['progress', 'currentRow', 'totalRows', 'currentSerial'], + template: ` +
+ +
Verarbeitung läuft...
+

Aktuell: {{ currentSerial || '—' }}

 +
+
Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}
+
+ ` +}); /* ---------- Online state chip (fetches radacct when visible) ---------- */ Vue.component('radius-online-state', { - props: { username: String }, - data: () => ({ data: null, observed: false, ob: null }), + props: { username: String }, data: () => ({ data: null, observed: false, ob: null }), template: `
- - + +
`, - mounted() { - this.ob = new IntersectionObserver((en) => { - if (en[0].isIntersecting && !this.observed) { - this.observed = true; this.fetchState(); - } - }, { threshold: 0.1 }); - if (this.$refs.root) { - this.ob.observe(this.$refs.root); - } - }, + mounted() { this.ob = new IntersectionObserver((en) => { if (en[0].isIntersecting && !this.observed) { this.observed = true; this.fetchState(); } }, { threshold: 0.1 }); if (this.$refs.root) this.ob.observe(this.$refs.root); }, beforeDestroy() { this.ob?.disconnect(); }, methods: { - async fetchState() { - try { - const url = `${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${encodeURIComponent(this.username)}`; - const r = await fetch(url); - if (r.ok) this.data = await r.json(); - else this.data = { online: false, ip: null }; - } catch { this.data = { online: false, ip: null }; } - }, - async copyIp() { - if (!this.data?.ip) return; - await window.RadiusUtils.copyToClipboard(this.data.ip); - if (window.notify) { - window.notify('success', 'IP-Adresse kopiert!'); - } - } + async fetchState() { try { const r = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${encodeURIComponent(this.username)}`); this.data = r.ok ? await r.json() : { online: false, ip: null }; } catch { this.data = { online: false, ip: null }; } }, + async copyIp(event) { if (!this.data?.ip) return; const c = event.currentTarget; if (!c || c.classList.contains('is-copied')) return; await window.RadiusUtils.copyToClipboard(this.data.ip); c.classList.add('is-copied'); const o = c.dataset.tooltip; if (o) c.dataset.tooltip = 'Kopiert!'; setTimeout(() => { c.classList.remove('is-copied'); if (o) c.dataset.tooltip = o; }, 1500); } } }); - /* ---------- Autocomplete ---------- */ Vue.component('radius-autocomplete', { - props: { value: String, placeholder: String, wide: { type: Boolean, default: true } }, - data() { - return { q: this.value || '', open: false, items: {}, highlighted: -1, busy: false, selectedDisplay: '', selectedCustnum: '' }; - }, - watch: { value(v){ if(v!==this.q) this.q=v; } }, + props: { value: String, placeholder: String, wide: { type: Boolean, default: true } }, data() { return { q: this.value || '', open: false, items: {}, highlighted: -1, busy: false, mode: 'autocomplete', logoDropdownOpen: false }; }, watch: { value(v){ if(v!==this.q) this.q=v; } }, template: ` -
+
+ Klicken Sie auf das Logo, um die Kundenbasis zu wechseln
- - - +
+ +
- - -
-
-
-
- -
- +
Xinon LogoXINON (Suche)
ESTMK LogoESTMK (Eingabe)
 +
`, - computed: { highlightedId(){ const keys=Object.keys(this.items); return keys[this.highlighted] || null; } }, + computed: { highlightedId(){ const k=Object.keys(this.items); return k[this.highlighted] || null; }, placeholderText() { return this.mode === 'autocomplete' ? (this.placeholder || 'Rechnungsadresse suchen') : 'Partner-Kundennummer eingeben'; } }, created() { this.debouncedFetch = this.debounce(() => this.fetchItems(), 220); }, methods: { + toggleLogoDropdown() { this.logoDropdownOpen = !this.logoDropdownOpen; if (this.logoDropdownOpen) this.open = false; }, + selectMode(m) { if (this.mode !== m) { this.mode = m; this.$emit('mode-change', m); this.clear(); } this.logoDropdownOpen = false; this.$nextTick(() => this.$refs.mainInput.focus()); }, + onInput() { this.$emit('input', this.q); if (this.mode === 'autocomplete') this.debouncedFetch(); }, + onEnter() { if (this.mode === 'autocomplete') this.chooseHighlighted(true); else this.$emit('enter'); }, maybeOpen(){ this.open = true; if (this.q) this.debouncedFetch(); }, - deferClose(){ setTimeout(()=> this.open=false, 150); }, - clear(){ this.q=''; this.items={}; this.highlighted=-1; this.emitSelection('', ''); }, - move(dir){ const keys=Object.keys(this.items); if (!keys.length) return; this.highlighted=(this.highlighted+dir+keys.length)%keys.length; }, - chooseHighlighted(emitEnter){ const id=this.highlightedId; if (id) this.choose(id, this.items[id], emitEnter); else if (emitEnter) this.$emit('enter'); }, - choose(id, display, emitEnter){ this.q=display; this.selectedCustnum=(display.match(/\[(\d+)\]/)||[])[1] || ''; this.selectedDisplay=display; this.emitSelection(this.selectedCustnum, this.selectedDisplay); this.open=false; if (emitEnter) this.$emit('enter'); }, + deferClose(){ setTimeout(()=> { this.open = false; this.logoDropdownOpen = false; }, 150); }, + clear(){ this.q = ''; this.items={}; this.highlighted=-1; this.emitSelection('', ''); if (this.mode === 'autocomplete') { this.open = true; this.debouncedFetch(); } }, + move(d){ const k=Object.keys(this.items); if (!k.length) return; this.highlighted=(this.highlighted+d+k.length)%k.length; this.$nextTick(() => { const a = this.$refs.resultsList?.querySelector('.is-active'); if (a) a.scrollIntoView({ block: 'center', behavior: 'smooth' }); }); }, + chooseHighlighted(e){ const i=this.highlightedId; if (i) this.choose(i, this.items[i], e); else if (e) this.$emit('enter'); }, + choose(id, display, emitEnter){ const c=(display.match(/\[(\d+)\]/)||[])[1] || ''; this.emitSelection(c, display); this.open=false; if (emitEnter) this.$emit('enter'); }, emitSelection(custnum, display){ this.$emit('select', { custnum, display }); this.$emit('input', display); this.$emit('change', display); }, - async fetchItems(){ - if (!this.q || this.q.length < 2) { this.items={}; return; } - this.busy = true; - try{ - const base = window.TT_CONFIG['BASE_PATH'] || ''; - const url = `${base}/Address/Api?do=findAddress&fibu_primary_account=1&q=${encodeURIComponent(this.q)}`; - const r = await fetch(url); - if (r.ok) { - const j = await r.json(); - this.items = (j && j.result && j.result.addresses) ? j.result.addresses : {}; - this.highlighted = 0; - } else { this.items = {}; } - } catch { this.items = {}; } - this.busy = false; - }, + async fetchItems(){ if (this.mode!=='autocomplete'||!this.q||this.q.length<2){this.items={};return;} this.busy=true; try{ const b=window.TT_CONFIG.BASE_PATH||''; const r=await fetch(`${b}/Address/Api?do=findAddress&fibu_primary_account=1&q=${encodeURIComponent(this.q)}`); if(r.ok){const j=await r.json();this.items=(j?.result?.addresses)?j.result.addresses:{};this.highlighted=0;}else{this.items={};}}catch{this.items={};} this.busy=false; }, debounce(fn, ms){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); }; } } }); /* ---------- Generic Modal ---------- */ Vue.component('radius-modal', { - props: { show: Boolean, title: String }, + props: { show: Boolean, title: String, modalClass: String }, template: `
-
+
{{ title }}
@@ -182,61 +211,51 @@ Vue.component('radius-modal', {
- ` + `, + watch: { + show(isShown) { + if (isShown) { + this.$nextTick(() => { + // nodeType 1 is an Element node, this prevents errors if v-if renders a comment node. + if (this.$el && this.$el.nodeType === 1 && this.$el.parentNode !== document.body) { + document.body.appendChild(this.$el); + } + document.body.style.overflow = 'hidden'; + }); + } else { + document.body.style.overflow = ''; + } + } + }, + beforeDestroy() { + if (this.show && this.$el && this.$el.nodeType === 1 && this.$el.parentNode === document.body) { + document.body.removeChild(this.$el); + } + document.body.style.overflow = ''; + } }); + /* ---------- Root View: ---------- */ Vue.component('radius', { template: `
-
-
Radius
- -
- -
-
- - -
-
-
-
+
Radius
+
+
`, - data() { return { view: 'users', window: window, _freeInitDone: false }; }, + data() { return { view: 'users', window: window, _initFlags: {} }; }, computed: { viewOptions() { - const options = [ - { id: 'users', name: 'Benutzer', icon: 'fa-duotone fa-users' }, - { id: 'free', name: 'Freie Benutzer', icon: 'fa-duotone fa-user-plus' } - ]; - if (window['TT_CONFIG']['CAN_BILLING'] === '1') { - options.push({ id: 'ont', name: 'ONT Parser', icon: 'fa-duotone fa-diagram-project' }); - options.push({ id: 'ontReverse', name: 'ONT Reverse', icon: 'fa-duotone fa-arrows-rotate' }); - } - return options; - } - }, - watch: { - view(newView) { - this.switchView(newView); + const o = [{ 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' }]; + if (window.TT_CONFIG.CAN_BILLING === '1') { o.push({ id: 'ont', name: 'ONT Parser', icon: 'fa-duotone fa-diagram-project' }, { id: 'ontReverse', name: 'ONT Reverse', icon: 'fa-duotone fa-arrows-rotate' }); } return o; } }, + mounted() { this.switchView(this.view); }, methods: { - switchView(v){ - this.view = v; - if (v==='free' && !this._freeInitDone) { - this.$nextTick(()=>{ this.$refs.freeView?.initIfNeeded?.(); this._freeInitDone = true; }); - } - } + switchView(v){ this.view=v; if(!this._initFlags||this._initFlags[v])return; let r=''; if(v==='free')r='freeView';else if(v==='unused')r='unusedView'; if(r){this.$nextTick(()=>{const c=this.$refs[r];if(c&&typeof c.initIfNeeded==='function'){c.initIfNeeded();this._initFlags[v]=true;}});}} } -}); +}); \ No newline at end of file diff --git a/public/js/pages/Radius/RadiusFreeUsers.js b/public/js/pages/Radius/RadiusFreeUsers.js index c6c5515e6..9c4a9ffa9 100644 --- a/public/js/pages/Radius/RadiusFreeUsers.js +++ b/public/js/pages/Radius/RadiusFreeUsers.js @@ -1,111 +1,48 @@ -/* ===== RadiusFreeUsers.js ===== - * Vereinfachte freie Benutzer: - * - Kein Suchfeld, nur Reload-Button - * - Autoload beim ersten Tab-Klick (initIfNeeded() wird von aufgerufen) - * - Zweispaltiges Layout bei breiten Screens - * - Robust gegen Server-Response (users/count/filter), trimmt Info - */ - +/* ===== RadiusFreeUsers.js ===== */ Vue.component('radius-free-users', { template: `
-
- -
+
+
- Freie NAT Benutzer {{ nat.length }} - -
- -
- - - - - - - - - - - - -
UsernameInfo
{{ u.Username }}{{ u.Info }}
Keine Treffer
+ Freie NAT Benutzer {{ filteredNat.length }} +
+ + + + + +
{{ filteredNat.length }} Treffer gefunden
- - -
+
- Freie STF Benutzer {{ stf.length }} - -
- -
- - - - - - - - - - - - -
UsernameInfo
{{ u.Username }}{{ u.Info }}
Keine Treffer
+ Freie STF Benutzer {{ filteredStf.length }} +
+ + + + + +
{{ filteredStf.length }} Treffer gefunden
`, - data() { - return { - nat: [], - stf: [], - loadingNat: false, - loadingStf: false, - _initialized: false - }; - }, + data: () => ({ nat: [], stf: [], loadingNat: false, loadingStf: false, _initialized: false }), + computed: { filteredNat() { return this.nat.filter(this.isTrulyFree); }, filteredStf() { return this.stf.filter(this.isTrulyFree); } }, methods: { - initIfNeeded(){ - if (this._initialized) return; - this._initialized = true; - this.reload(); - }, - normalizeUsers(arr){ - if (!Array.isArray(arr)) return []; - return arr.map(u => ({ - Username: (u.Username || u.username || '').trim(), - Info: (u.Info || u.info || '').toString().replace(/\s+$/,'') - })).filter(u => u.Username); - }, - async reload() { - // NAT - this.loadingNat = true; - try { - const natRes = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=nat'); - const j = natRes.ok ? await natRes.json() : { users: [] }; - this.nat = this.normalizeUsers(j.users); - } catch { this.nat = []; } - this.loadingNat = false; - - // STF - this.loadingStf = true; - try { - const stfRes = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=stf'); - const j = stfRes.ok ? await stfRes.json() : { users: [] }; - this.stf = this.normalizeUsers(j.users); - } catch { this.stf = []; } - this.loadingStf = false; - } + initIfNeeded(){ if (this._initialized) return; this._initialized = true; this.reloadNat(); this.reloadStf(); }, + isTrulyFree(user) { return !/frei[a-z]/.test((user.Info || '').toLowerCase()); }, + normalizeUsers(arr){ if (!Array.isArray(arr)) return []; return arr.map(u => ({ Username: (u.Username || u.username || '').trim(), Info: (u.Info || u.info || '').toString().replace(/\s+$/,'') })).filter(u => u.Username); }, + async reloadNat() { this.nat = []; this.loadingNat = true; try { const r = await fetch(window.TT_CONFIG.BASE_PATH + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=nat'); this.nat = this.normalizeUsers(r.ok ? (await r.json()).users : []); } catch { this.nat = []; } this.loadingNat = false; }, + async reloadStf() { this.stf = []; this.loadingStf = true; try { const r = await fetch(window.TT_CONFIG.BASE_PATH + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=stf'); this.stf = this.normalizeUsers(r.ok ? (await r.json()).users : []); } catch { this.stf = []; } this.loadingStf = false; } } -}); +}); \ No newline at end of file diff --git a/public/js/pages/Radius/RadiusOntFinder.js b/public/js/pages/Radius/RadiusOntFinder.js index 173b5c9c4..17a2de939 100644 --- a/public/js/pages/Radius/RadiusOntFinder.js +++ b/public/js/pages/Radius/RadiusOntFinder.js @@ -1,165 +1,29 @@ -/* ===== RadiusOntFinder.js ===== - * Reverse lookup by ONT Serial (and optional MAC). Styling via shared ONT CSS utilities. - */ - +/* ===== RadiusOntFinder.js ===== */ Vue.component('radius-ont-finder', { template: `
-
-
-
Schritt 1 · Excel (XLSX) Upload
-

- Datei muss die Spalte Serial enthalten. Optional MAC (12 Zeichen, ohne Doppelpunkte). -

-
- -
{{ uploadError }}
+
+
Schritt 1 · Excel (XLSX) Upload

Datei muss die Spalte Serial enthalten. Optional MAC.

+
{{ uploadError }}
- -
-
-
Ergebnisse
-
- - -
-
- -
- - - - - - - - - - - - - - - - - - - - - - -
{{ h }}UsernameKundennummerKundennameInfo
{{ row[h] }}{{ row.fetched_username }}{{ row.fetched_customerNumber }}{{ row.fetched_customerName }}{{ row.fetched_info }}
Keine Daten
+
+
Ergebnisse
+
+ + + + + +
{{ processedData.length }} Zeilen verarbeitet
- - -
-
-
Verarbeitung läuft...
-

Aktuell: {{ currentSerial || '—' }}

-
-
Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}
-
-
-
`, - data() { - return { - step: 1, parsedData: [], processedData: [], originalHeaders: [], - loading: false, progress: 0, currentRow: 0, totalRows: 0, currentSerial: '', - uploadError: null, serialColumnName: 'Serial', macColumnName: 'MAC', - fetchedKeys: { - username: 'fetched_username', customerNumber: 'fetched_customerNumber', - customerName: 'fetched_customerName', info: 'fetched_info' - }, - apiBasePath: window.TT_CONFIG?.BASE_PATH - }; - }, + data: () => ({ step: 1, parsedData: [], processedData: [], originalHeaders: [], loading: false, progress: 0, currentRow: 0, totalRows: 0, currentSerial: '', uploadError: null, serialColumnName: 'Serial', macColumnName: 'MAC', fetchedKeys: { username: 'fetched_username', customerNumber: 'fetched_customerNumber', customerName: 'fetched_customerName', info: 'fetched_info' }, apiBasePath: window.TT_CONFIG?.BASE_PATH }), methods: { resetComponent(){ Object.assign(this.$data, this.$options.data.call(this)); const i=this.$el.querySelector('input[type="file"]'); if (i) i.value=''; }, - onDrop(e){ const f=e.dataTransfer.files?.[0]; if (f) this.readXlsx(f); }, - async handleFileUpload(e){ const f=e.target.files?.[0]; if (f) this.readXlsx(f); }, - async readXlsx(file){ - this.uploadError=null; this.loading=true; - try{ - await this.loadXLSX(); - const arr = await new Promise((resolve,reject)=>{ const r=new FileReader(); r.onload=ev=>resolve(new Uint8Array(ev.target.result)); r.onerror=()=>reject(new Error('Fehler beim Lesen.')); r.readAsArrayBuffer(file); }); - const wb = XLSX.read(arr, { type:'array' }); - const ws = wb.Sheets[wb.SheetNames[0]]; - this.parsedData = XLSX.utils.sheet_to_json(ws, { defval:'' }); - if (!this.parsedData.length) throw new Error('Die Datei ist leer.'); - this.originalHeaders = Object.keys(this.parsedData[0]); - if (!this.originalHeaders.includes(this.serialColumnName)) throw new Error(`Erforderliche Spalte '${this.serialColumnName}' nicht gefunden.`); - this.startProcessing(); - } catch(e){ this.uploadError=e.message; this.loading=false; this.step=1; } - }, - 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(new Error('XLSX konnte nicht geladen werden.')); document.head.appendChild(s); }); - }, - async startProcessing(){ - this.loading=true; this.totalRows=this.parsedData.length; this.processedData=[]; this.progress=0; this.currentRow=0; - const snApi = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?ont_sn=`; - const userApi= `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?username=`; - const sesApi = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?action2=find_by_current_session&mac=`; - const setRow = (row, msg, data={})=>{ - const d={ username:`N/A - ${msg}`, customerNumber:'N/A', customerName:'N/A', info:'N/A' }; - Object.keys(this.fetchedKeys).forEach(k => row[this.fetchedKeys[k]] = data[k] || d[k]); - }; - - for (const [i,row] of this.parsedData.entries()){ - this.currentRow=i; const out={...row}; - const sn=(''+(row[this.serialColumnName]||'')).trim(); this.currentSerial = `SN: ${sn || '—'}`; - let found=false; - - if (sn){ - try{ const r=await fetch(snApi+encodeURIComponent(sn)); if (r.ok){ const j=await r.json(); if (Array.isArray(j) && j.length>0){ setRow(out,'', j[0]); found=true; } } } catch {} - } - if (!found && this.originalHeaders.includes(this.macColumnName)){ - const macRaw=(''+(row[this.macColumnName]||'')).trim(); - if (macRaw && macRaw.length===12){ - const mac = macRaw.toUpperCase().match(/.{1,2}/g).join(':'); - try{ - const s=await fetch(sesApi+encodeURIComponent(mac)); - if (s.ok){ const ses=await s.json(); if (Array.isArray(ses) && ses.length>0){ - const uname = ses[0]; - const u=await fetch(`${userApi}${encodeURIComponent(uname)}&info=&custnum=`); - if (u.ok){ const d=await u.json(); if (Array.isArray(d) && d.length>0){ setRow(out,'', d[0]); found=true; } } - }} - } catch {} - } - } - if (!found) setRow(out, 'Keinen Benutzer gefunden'); - - this.processedData.push(out); - this.progress=((i+1)/this.totalRows)*100; - if ((i+1)%20===0) await new Promise(r=>setTimeout(r,20)); - } - this.loading=false; this.step=2; this.currentSerial=''; - }, - downloadResults(){ - if (!this.processedData.length) return; - try{ - const data = this.processedData.map(r=>{ - const o={}; this.originalHeaders.forEach(h=>o[h]=r[h]); - o['Username']=r[this.fetchedKeys.username]; - o['Kundennummer']=r[this.fetchedKeys.customerNumber]; - o['Kundenname']=r[this.fetchedKeys.customerName]; - o['Info']=r[this.fetchedKeys.info]; - return o; - }); - const ws=XLSX.utils.json_to_sheet(data); const wb=XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, 'ONT_Finder_Results'); - const ts=new Date().toISOString().replace(/[-:.]/g,'').slice(0,14); - XLSX.writeFile(wb, `ont_finder_results_${ts}.xlsx`); - }catch{ if(window.notify) window.notify('error', 'Fehler beim Erstellen der Excel-Datei.'); } - } + async readXlsx(file){ this.uploadError=null; try{ await window.RadiusUtils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js'); const arr = await new Promise((res,rej)=>{ const r=new FileReader(); r.onload=e=>res(new Uint8Array(e.target.result)); r.onerror=()=>rej(new Error('Fehler beim Lesen.')); r.readAsArrayBuffer(file); }); const wb = XLSX.read(arr, {type:'array'}); const ws = wb.Sheets[wb.SheetNames[0]]; this.parsedData = XLSX.utils.sheet_to_json(ws, {defval:''}); if (!this.parsedData.length) throw new Error('Die Datei ist leer.'); this.originalHeaders = Object.keys(this.parsedData[0]); if (!this.originalHeaders.includes(this.serialColumnName)) throw new Error(`Erforderliche Spalte '${this.serialColumnName}' nicht gefunden.`); this.startProcessing(); } catch(e){ this.uploadError=e.message; this.step=1; } }, + async startProcessing(){ this.step = 2; this.loading = true; this.totalRows=this.parsedData.length; this.processedData=[]; const setRow = (row, msg, data={})=>{ const d={username:`N/A - ${msg}`,customerNumber:'N/A',customerName:'N/A',info:'N/A'}; Object.keys(this.fetchedKeys).forEach(k=>row[this.fetchedKeys[k]]=data[k]||d[k]); }; for (const [i,row] of this.parsedData.entries()){ this.currentRow=i; const out={...row}; const sn=(''+(row[this.serialColumnName]||'')).trim(); this.currentSerial=`SN: ${sn||'—'}`; let found=false; if (sn){ try{ const r=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?ont_sn=${encodeURIComponent(sn)}`); if(r.ok){ const j=await r.json(); if(Array.isArray(j)&&j.length>0){ setRow(out,'',j[0]); found=true; }}}catch{} } if (!found && this.originalHeaders.includes(this.macColumnName)){ const macRaw=(''+(row[this.macColumnName]||'')).trim(); if(macRaw&&macRaw.length===12){ const mac=macRaw.toUpperCase().match(/.{1,2}/g).join(':'); try{ const s=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?action2=find_by_current_session&mac=${encodeURIComponent(mac)}`); if(s.ok){ const ses=await s.json(); if(Array.isArray(ses)&&ses.length>0){ const u=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?username=${encodeURIComponent(ses[0])}&info=&custnum=`); if(u.ok){ const d=await u.json(); if(Array.isArray(d)&&d.length>0) {setRow(out,'',d[0]); found=true;}}}}}catch{}}} if(!found) setRow(out,'Keinen Benutzer gefunden'); this.processedData.push(out); this.progress=((i+1)/this.totalRows)*100; if ((i+1)%20===0) await new Promise(r=>setTimeout(r,20)); } this.loading=false; this.currentSerial=''; }, + downloadResults(){ if (!this.processedData.length) return; try{ const data=this.processedData.map(r=>{ const o={}; this.originalHeaders.forEach(h=>o[h]=r[h]); Object.keys(this.fetchedKeys).forEach(k=>{const K=k.charAt(0).toUpperCase()+k.slice(1).replace('Number','nummer').replace('Name','name'); o[K]=r[this.fetchedKeys[k]];}); return o; }); const ws=XLSX.utils.json_to_sheet(data); const wb=XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,'ONT_Finder_Results'); XLSX.writeFile(wb, `ont_finder_results_${new Date().toISOString().replace(/[-:.]/g,'').slice(0,14)}.xlsx`); } catch { if(window.notify) window.notify('error', 'Fehler beim Erstellen der Excel-Datei.'); } } } -}); +}); \ No newline at end of file diff --git a/public/js/pages/Radius/RadiusOntParser.js b/public/js/pages/Radius/RadiusOntParser.js index 5a74dea38..cc35ab919 100644 --- a/public/js/pages/Radius/RadiusOntParser.js +++ b/public/js/pages/Radius/RadiusOntParser.js @@ -1,190 +1,36 @@ -/* ===== RadiusOntParser.js ===== - * Styling via gemeinsame ONT CSS; keine Funktionsänderungen, nur UI-Polish. - */ - +/* ===== RadiusOntParser.js ===== */ Vue.component('radius-ont-parser', { template: `
-
-
-
Schritt 1 · Excel (XLSX) Upload
-
Laden Sie eine XLSX-Datei mit Ihren Kundendaten.
-
- +
+
Schritt 1 · Excel (XLSX) Upload
Laden Sie eine XLSX-Datei mit Ihren Kundendaten.
+
- -
-
-
Schritt 2 · Spaltenzuordnung
-
-
-
- -
- -
-
-
-
- - +
+
Schritt 2 · Spaltenzuordnung
+
+
+
+
+
Schritt 3 · Ergebnisse
+
+ + + + + + + +
{{ processedData.length }} Zeilen verarbeitet
- -
-
-
Schritt 3 · Ergebnisse
-
- - - -
-
- -
- - - - - - - - - - - - - - - - - - - -
ONT SN
{{ row[selectedColumns.kundennummer] }}{{ row[selectedColumns.anschlussstrasse] }}{{ row[selectedColumns.anschlussplz] }}{{ row[selectedColumns.anschlusscity] }}{{ row.ont_sn }}
Keine Daten
-
-
- - -
-
- -
Verarbeitung läuft...
-

Ihre Daten werden Zeile für Zeile analysiert.

-
-
{{ currentRow + 1 }} / {{ totalRows }}
-
-
-
`, - 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 - }; - }, + 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: { - 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; isetTimeout(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'); - }, + 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; isetTimeout(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)); } } -}); +}); \ No newline at end of file diff --git a/public/js/pages/Radius/RadiusUnused.js b/public/js/pages/Radius/RadiusUnused.js new file mode 100644 index 000000000..463cb6d3f --- /dev/null +++ b/public/js/pages/Radius/RadiusUnused.js @@ -0,0 +1,47 @@ +/* ===== RadiusUnused.js ===== */ +Vue.component('radius-unused-users', { + template: ` +
+
+
+ +
+ +
+
+ + + + + + + +
{{ filteredUsers.length }} Treffer gefunden
+
+
+ `, + data: () => ({ users: [], isLoading: false, _initialized: false, hasSearched: false, window: window, visibleCount: 50, observer: null, activeFilter: 'all', filters: [{id: 'all', name:'Alle', icon:'fa-duotone fa-globe'},{id:'nat', name:'NAT*', icon:'fa-duotone fa-users'},{id:'st', name:'ST*', icon:'fa-duotone fa-server'},{id:'stf', name:'STF*', icon:'fa-duotone fa-id-card-clip'}] }), + computed: { filteredUsers() { return this.activeFilter === 'all' ? this.users : this.users.filter(u => u.username && u.username.startsWith(this.activeFilter)); }, visibleFilteredUsers() { return this.filteredUsers.slice(0, this.visibleCount); } }, + mounted() { this.observer = new IntersectionObserver(([e]) => { if (e && e.isIntersecting) this.loadMore(); }, { root: this.$refs.tableWrap, threshold: 0.1 }); if (this.$refs.sentinel) this.observer.observe(this.$refs.sentinel); }, + beforeDestroy() { if (this.observer) this.observer.disconnect(); }, + updated() { if (this.observer && this.$refs.sentinel) { this.observer.disconnect(); this.observer.observe(this.$refs.sentinel); } }, + methods: { + initIfNeeded() { if (this._initialized) return; this._initialized = true; }, + setFilter(filter) { this.activeFilter = filter; this.visibleCount = 50; }, + async fetchUnusedUsers() { this.isLoading = true; this.hasSearched = true; this.visibleCount = 50; this.users = []; try { const res = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?action2=reportUnused`); this.users = res.ok ? (await res.json() || []) : []; } catch (e) { console.error("Failed to fetch unused users:", e); this.users = []; } this.isLoading = false; }, + loadMore() { if (this.visibleCount < this.filteredUsers.length) this.visibleCount += 50; } + } +}); \ No newline at end of file diff --git a/public/js/pages/Radius/RadiusUsers.js b/public/js/pages/Radius/RadiusUsers.js index 96cfd6445..2db98d65c 100644 --- a/public/js/pages/Radius/RadiusUsers.js +++ b/public/js/pages/Radius/RadiusUsers.js @@ -1,141 +1,63 @@ -/* ===== RadiusUsers.js ===== - * Labels entfernt; Platzhalter vereinheitlicht; Online-Status Info; Copy-Tooltips vereinheitlicht; - * Modal zeigt Skeleton mit Überschriften. - */ +/* ===== RadiusUsers.js ===== */ Vue.component('radius-users', { template: `
-
+
- +
-
-
- z.B. nat* für lazy Suche - - +
z.B. nat* für lazy Suche
+
+
+
Prefixe: '=' exakt, '*' Verlauf (lazy), '*=' Verlauf (exakt)
+
+
+
+
+
+
+
-
- -
- z.B. =100.64.32.250 für exakte Suche -
- - -
-
- -
-
- - -
-
- -
- -
- -
- - + +
-
- -
Beginnen Sie Ihre Suche, indem Sie Filter eingeben.
-
-
- -
Keine Ergebnisse für Ihre Suche gefunden.
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KundennummerUsernameInfoStatusAktionen
- - {{ user.customerNumber }} - - - - {{ user.username }} - - - {{ user.info }} - - - -
-
-
-
- Suche läuft... - {{ radiusUsers.length }} Treffer gefunden -
+ + + + + + +
+ Suche läuft... + {{ radiusUsers.length }} Treffer gefunden
@@ -143,59 +65,22 @@ Vue.component('radius-users', {
Status -
-
- - {{ radacctData.online ? 'Online' : 'Offline' }} - -
-
-
+
{{ radacctData.online ? 'Online' : 'Offline' }}
-
IP -
-
- {{ radacctData.ip || '—' }} - -
-
-
+
{{ radacctData.ip || '—' }}
-
Username -
-
- {{ radacctData.username }} - -
-
-
+
{{ radacctData.username }}
-
+ + +
+
+
+
+
+
+ +
{{ y }}
 +
+
+
+
Gesamt {{ transferYear }}:
{{ window.RadiusUtils.formatBytes(transferYearlyData.yearlySummary.grandTotalBytes) }}
+
+
+
Monat gesamt
{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.grandTotalBytes || 0) }}
+
Download
{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.totalDownloadBytes || 0) }}
+
Upload
{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.totalUploadBytes || 0) }}
+
Dauer
{{ window.RadiusUtils.formatDuration(transferMonthlyData?.summary?.totalDurationSeconds || 0) }}
+
+
+
+
Keine Daten in diesem Monat verfügbar
+ +
+
+
+
Keine detaillierten Daten für diesen Monat.
+ + + + + + +
StartzeitDauerIP-AdresseDownloadUploadGesamt
+
+
+
Daten konnten nicht geladen werden.
+
+
`, - data() { - return { - window: window, - billAddrDisplay: '', billAddrCustnum: '', username: '', ip: '', info: '', - radiusUsers: [], - checkOnlineState: false, - isLoading: false, - showRadacctModal: false, - radacctData: null, - searchCount: 0, - hasSearched: false, - visibleCount: 50, - observer: null, - }; - }, + data: () => ({ window: window, billAddrDisplay: '', billAddrCustnum: '', username: '', ip: '', info: '', searchMode: 'autocomplete', radiusUsers: [], checkOnlineState: false, isLoading: false, showRadacctModal: false, radacctData: null, searchCount: 0, hasSearched: false, visibleCount: 50, observer: null, showTransferModal: false, transferInitialLoading: false, transferMonthlyLoading: false, transferModalUsername: '', transferYear: new Date().getFullYear(), transferMonth: new Date().getMonth() + 1, transferYearlyData: null, transferMonthlyData: null, transferChartInstance: null, showYearDropdown: false }), computed: { - hasFilters() { - return this.billAddrDisplay || this.username || this.ip || this.info; - }, - visibleUsers() { - return this.radiusUsers.slice(0, this.visibleCount); - } + hasFilters() { return this.billAddrDisplay || this.username || this.ip || this.info; }, + visibleUsers() { return this.radiusUsers.slice(0, this.visibleCount); }, + availableYears() { const c = new Date().getFullYear(), s = 2021; if (s > c) return [c]; return Array.from({length: c - s + 1}, (_, i) => c - i); }, + allMonths() { return Array.from({ length: 12 }, (_, i) => ({ month: i + 1, name: new Date(2000, i, 1).toLocaleString('de-DE', { month: 'short' }) })); } }, mounted() { - this.observer = new IntersectionObserver(([entry]) => { - if (entry && entry.isIntersecting) { - this.loadMore(); - } - }, { root: this.$refs.tableWrap, threshold: 0.1 }); - if (this.$refs.sentinel) { - this.observer.observe(this.$refs.sentinel); - } + this.observer = new IntersectionObserver(([e]) => { if (e && e.isIntersecting) this.loadMore(); }, { root: this.$refs.tableWrap, threshold: 0.1 }); + if (this.$refs.sentinel) this.observer.observe(this.$refs.sentinel); }, beforeDestroy() { - if (this.observer) { - this.observer.disconnect(); - } + if (this.observer) this.observer.disconnect(); + if (this.transferChartInstance) this.transferChartInstance.destroy(); }, updated() { - // Re-observe if the table view is re-rendered - if (this.observer && this.$refs.sentinel) { - this.observer.disconnect(); - this.observer.observe(this.$refs.sentinel); - } + if (this.observer && this.$refs.sentinel) { this.observer.disconnect(); this.observer.observe(this.$refs.sentinel); } }, methods: { onAddrSelect({ custnum, display }) { this.billAddrCustnum = custnum || ''; this.billAddrDisplay = display || ''; }, + onModeChange(newMode) { this.searchMode = newMode; }, async loadRadiusUsers() { - this.isLoading = true; - this.radiusUsers = []; - this.hasSearched = true; - this.visibleCount = 50; // Reset visible count on new search + this.isLoading = true; this.radiusUsers = []; this.hasSearched = true; this.visibleCount = 50; try { - const params = new URLSearchParams({ - username: this.username || '', - info: this.info || '', - custnum: this.billAddrCustnum || '', - ip: this.ip || '' - }); - const res = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`); - if (res.ok) { - const users = await res.json(); - if (Array.isArray(users) && users.length < 6) this.checkOnlineState = true; - this.radiusUsers = Array.isArray(users) ? users : []; - } + const p = new URLSearchParams({ username: this.username || '', info: this.info || '', ip: this.ip || '' }); + if (this.searchMode === 'text') p.set('estmk_nr', this.billAddrDisplay || ''); else p.set('custnum', this.billAddrCustnum || ''); + const r = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?${p.toString()}`); + if (r.ok) { const u = await r.json(); if (Array.isArray(u) && u.length < 6) this.checkOnlineState = true; this.radiusUsers = Array.isArray(u) ? u : []; } } catch (e) { console.error(e); } - this.isLoading = false; - this.searchCount++; + this.isLoading = false; this.searchCount++; }, async fetchRadacctData(username) { this.showRadacctModal = true; this.radacctData = null; try { - const params = new URLSearchParams({ action2: 'fetchRadacct', username }); - const res = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`); - if (res.ok) this.radacctData = await res.json(); + const r = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${encodeURIComponent(username)}`); + if (r.ok) this.radacctData = await r.json(); } catch (e) { console.error(e); this.radacctData = {}; } }, - async copy(text, type) { - await window.RadiusUtils.copyToClipboard(text); - if (window.notify) { - window.notify('success', `${type} kopiert!`); - } + async copy(text, event) { + if (!event || !event.currentTarget) return; const btn = event.currentTarget; if (btn.classList.contains('is-copied')) return; + await window.RadiusUtils.copyToClipboard(text); btn.classList.add('is-copied'); btn.disabled = true; + setTimeout(() => { btn.classList.remove('is-copied'); btn.disabled = false; }, 1500); }, - clearFilters() { - this.billAddrDisplay = ''; - this.billAddrCustnum = ''; - this.username = ''; - this.ip = ''; - this.info = ''; - this.radiusUsers = []; - this.hasSearched = false; + clearFilters() { this.billAddrDisplay = ''; this.billAddrCustnum = ''; this.username = ''; this.ip = ''; this.info = ''; this.radiusUsers = []; this.hasSearched = false; }, + loadMore() { if (this.visibleCount < this.radiusUsers.length) this.visibleCount += 50; }, + async openTransferModal(username) { this.showTransferModal = true; this.transferModalUsername = username; this.transferYear = new Date().getFullYear(); this.transferMonth = new Date().getMonth() + 1; await this.fetchTransferYearData(); }, + closeTransferModal() { this.showTransferModal = false; this.transferModalUsername = ''; this.transferYearlyData = null; this.transferMonthlyData = null; this.showYearDropdown = false; if (this.transferChartInstance) { this.transferChartInstance.destroy(); this.transferChartInstance = null; } }, + async fetchTransferYearData() { + this.transferInitialLoading = true; this.transferYearlyData = null; + try { + const r = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?action2=transferStatistic&username=${this.transferModalUsername}&year=${this.transferYear}&month=0`); + if (r.ok) { const d = await r.json(); if(d && d.monthlySummary) { this.transferYearlyData = d; const last = [...d.monthlySummary].reverse().find(m => m.grandTotalBytes > 0); this.transferMonth = last ? last.month : new Date().getMonth() + 1; await this.fetchTransferMonthData(); }} + else this.transferYearlyData = null; + } catch (e) { console.error(e); this.transferYearlyData = null; } + this.transferInitialLoading = false; }, - loadMore() { - if (this.visibleCount < this.radiusUsers.length) { - this.visibleCount += 50; - } + async fetchTransferMonthData() { + this.transferMonthlyLoading = true; this.transferMonthlyData = null; if (this.transferChartInstance) this.transferChartInstance.destroy(); + try { + const r = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?action2=transferStatistic&username=${this.transferModalUsername}&year=${this.transferYear}&month=${this.transferMonth}`); + this.transferMonthlyData = r.ok ? await r.json() : null; + } catch (e) { console.error(e); this.transferMonthlyData = null; } + this.transferMonthlyLoading = false; + this.$nextTick(() => { if(this.showTransferModal) this.renderTransferChart(); }); + }, + isMonthDisabled(month) { + if (this.transferInitialLoading || this.transferMonthlyLoading) return true; + if (!this.transferYearlyData?.monthlySummary) return true; + const m = this.transferYearlyData.monthlySummary.find(m => m.month === month); return !m || m.grandTotalBytes === 0; + }, + selectYear(year) { this.showYearDropdown = false; if (this.transferYear !== year) this.changeTransferYear(year); }, + async changeTransferYear(year) { this.transferYear = year; await this.fetchTransferYearData(); }, + async changeTransferMonth(month) { this.transferMonth = month; await this.fetchTransferMonthData(); }, + processChartData(details) { + if (!details || !details.length) return { labels: [], datasets: [] }; + const daily = details.reduce((a, s) => { const d = s.startTime.split(' ')[0]; if (!a[d]) a[d] = { downloadBytes: 0, uploadBytes: 0 }; a[d].downloadBytes += Number(s.downloadBytes) || 0; a[d].uploadBytes += Number(s.uploadBytes) || 0; return a; }, {}); + const dates = Object.keys(daily).sort((a, b) => new Date(a) - new Date(b)); + return { labels: dates, datasets: [ { label: 'Download', data: dates.map(d => daily[d].downloadBytes), borderColor: 'rgba(15, 157, 88, 0.8)', backgroundColor: 'rgba(15, 157, 88, 0.1)', fill: true, tension: 0.3, pointRadius: 2, borderWidth: 1.5 }, { label: 'Upload', data: dates.map(d => daily[d].uploadBytes), borderColor: 'rgba(0, 83, 132, 0.8)', backgroundColor: 'rgba(0, 83, 132, 0.1)', fill: true, tension: 0.3, pointRadius: 2, borderWidth: 1.5 } ] }; + }, + renderTransferChart() { + if (this.transferChartInstance) this.transferChartInstance.destroy(); + if (!this.$refs.transferChartCanvas || !this.transferMonthlyData?.details?.length || !window.Chart) return; + const d = this.processChartData(this.transferMonthlyData.details); if (!d.labels.length) return; + this.transferChartInstance = new Chart(this.$refs.transferChartCanvas.getContext('2d'), { type: 'line', data: d, options: { responsive: true, maintainAspectRatio: false, scales: { x: { type: 'time', time: { unit: 'day', tooltipFormat: 'DD.MM.YYYY', displayFormats: { day: 'DD.MM' } }, grid: { display: false }, ticks: { maxRotation: 0, autoSkip: true, maxTicksLimit: 15 } }, y: { beginAtZero: true, ticks: { callback: (v) => window.RadiusUtils.formatBytes(v, 0) }, grid: { color: 'rgba(0,0,0,0.05)' } } }, plugins: { tooltip: { callbacks: { label: (c) => `${c.dataset.label || ''}: ${window.RadiusUtils.formatBytes(c.parsed.y)}` } }, legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8, padding: 20 } } }, interaction: { mode: 'index', intersect: false } } }); } } }); \ No newline at end of file