Add new components for managing free users and ONT lookup, enhance UI styling,...
This commit is contained in:
Luca Haid
@@ -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);
|
||||
}
|
||||
[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; }
|
||||
@@ -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: `
|
||||
<div class="table-view-wrapper">
|
||||
<div v-if="!hasSearched" class="table-placeholder" :style="{minHeight: tableMinHeight}">
|
||||
<i :class="initialPlaceholderIcon"></i>
|
||||
<div>{{ initialPlaceholderText }}</div>
|
||||
</div>
|
||||
<div v-else-if="isLoading">
|
||||
<slot name="loading-placeholder">
|
||||
<div class="table-wrap" :style="{maxHeight: '65vh', ...tableStyle}">
|
||||
<table class="tt-table" :class="[density, tableClass]">
|
||||
<slot name="head"></slot>
|
||||
<tbody><tr v-for="n in skeletonRowCount" :key="'skel'+n"><slot name="skeleton-row"></slot></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-else-if="!items.length" class="table-placeholder" :style="{minHeight: tableMinHeight}">
|
||||
<i :class="noResultsPlaceholderIcon"></i>
|
||||
<div>{{ noResultsPlaceholderText }}</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="table-wrap" :style="{maxHeight: '65vh', ...tableStyle}">
|
||||
<table class="tt-table" :class="[density, tableClass]">
|
||||
<slot name="head"></slot>
|
||||
<tbody><tr v-for="(item, index) in items" :key="index" class="row-fade-in"><slot name="row" :item="item" :index="index"></slot></tr></tbody>
|
||||
</table>
|
||||
<slot name="observer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
||||
/* ---------- Reusable Component: radius-file-drop ---------- */
|
||||
Vue.component('radius-file-drop', {
|
||||
data: () => ({ dragCounter: 0 }),
|
||||
computed: { isDragging() { return this.dragCounter > 0; } },
|
||||
template: `
|
||||
<label class="file-drop" :class="{'is-dragover': isDragging}" @dragover.prevent @dragenter.prevent="dragCounter++" @dragleave.prevent="dragCounter--" @drop.prevent="onDrop">
|
||||
<input type="file" accept=".xlsx" @change="$emit('file-selected', $event.target.files[0])" hidden ref="fileInput">
|
||||
<div class="file-cta">
|
||||
<i class="fa-duotone fa-cloud-arrow-up"></i>
|
||||
<div>Hierhin ziehen oder <button type="button" class="link-btn" @click.prevent="$refs.fileInput.click()">Datei auswählen</button></div>
|
||||
</div>
|
||||
</label>
|
||||
`,
|
||||
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: `
|
||||
<div class="table-placeholder">
|
||||
<i class="fa-duotone fa-hourglass-half animated-hourglass" style="font-size: 36px; margin-bottom: 10px; color: var(--brand-blue);"></i>
|
||||
<div class="h5">Verarbeitung läuft...</div>
|
||||
<slot name="description"><p v-if="currentSerial" class="muted small">Aktuell: {{ currentSerial || '—' }}</p></slot>
|
||||
<div class="progress-bar mt-3" style="width: 250px; margin-left: auto; margin-right: auto;"><div class="bar" :style="{width: progress + '%'}"></div></div>
|
||||
<div class="muted small mt-2">Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
||||
/* ---------- 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: `
|
||||
<div class="radius-scope ros-wrap" ref="root">
|
||||
<template v-if="data===null">
|
||||
<span class="ros-chip skeleton">
|
||||
<span class="dot"></span>
|
||||
<span class="skeleton-line" style="width: 80px; height: 10px; margin: auto;"></span>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="data!==null">
|
||||
<span
|
||||
class="ros-chip"
|
||||
:class="[data.online ? 'on' : 'off', {'is-clickable': data.ip}]"
|
||||
:title="data.ip ? 'Klicken zum Kopieren' : ''"
|
||||
@click="copyIp"
|
||||
>
|
||||
<span class="dot"></span>
|
||||
<span class="ip">{{ data.ip || '—' }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="data===null"><span class="ros-chip skeleton"><span class="dot"></span><span class="skeleton-line" style="width: 80px; height: 18px; margin: auto;"></span></span></template>
|
||||
<template v-else-if="data!==null"><span class="ros-chip" :class="[data.online ? 'on' : 'off', {'is-clickable': data.ip}]" :data-tooltip="data.ip ? 'IP-Adresse kopieren' : null" @click="copyIp($event)"><span class="dot"></span><span class="ip">{{ data.ip || '—' }}</span></span></template>
|
||||
</div>
|
||||
`,
|
||||
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: `
|
||||
<div class="radius-scope ac-root" :data-wide="wide ? '1' : null"
|
||||
@keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="chooseHighlighted(true)">
|
||||
<div class="radius-scope ac-root" :data-wide="wide ? '1' : null" @keydown.down.prevent="mode === 'autocomplete' && move(1)" @keydown.up.prevent="mode === 'autocomplete' && move(-1)" @keydown.enter.prevent="onEnter">
|
||||
<span class="ac-focus-tooltip">Klicken Sie auf das Logo, um die Kundenbasis zu wechseln</span>
|
||||
<div class="input-wrap">
|
||||
<i class="fa-duotone fa-magnifying-glass input-icon" aria-hidden="true"></i>
|
||||
<input
|
||||
:placeholder="placeholder || 'Rechnungsadresse suchen…'"
|
||||
class="ri"
|
||||
v-model="q"
|
||||
autocomplete="off"
|
||||
autocapitalize="none"
|
||||
autocorrect="off"
|
||||
@input="debouncedFetch"
|
||||
@focus="maybeOpen"
|
||||
@blur="deferClose"
|
||||
/>
|
||||
<button class="btn-clear" :disabled="!q" @mousedown.prevent="clear" title="Feld leeren"><i class="fa-duotone fa-xmark"></i></button>
|
||||
<div class="logo-switcher" @mousedown.prevent.stop="toggleLogoDropdown" :class="{'is-open': logoDropdownOpen}"><img v-if="mode === 'autocomplete'" src="/img/xinon-logo.png" class="input-icon-logo" alt="Xinon Logo"><img v-else src="/img/estmk_logo.png" class="input-icon-logo" alt="ESTMK Logo"><i class="fa-solid fa-chevron-down switcher-caret"></i></div>
|
||||
<input ref="mainInput" :placeholder="placeholderText" class="ri" v-model="q" autocomplete="off" autocapitalize="none" autocorrect="off" @input="onInput" @focus="mode === 'autocomplete' && maybeOpen()" @blur="deferClose"/>
|
||||
<button v-if="q" class="btn-clear" @mousedown.prevent="clear" title="Feld leeren"><i class="fa-duotone fa-xmark"></i></button>
|
||||
</div>
|
||||
|
||||
<transition name="ac-pop">
|
||||
<div v-if="open" class="ac-panel" :class="{'wide': wide}">
|
||||
<div v-if="busy" class="ac-skel">
|
||||
<div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-if="!Object.keys(items).length" class="ac-empty muted">Keine Treffer</div>
|
||||
<ul class="ac-list" role="listbox">
|
||||
<li v-for="(disp, id) in items" :key="id"
|
||||
:class="['ac-item', highlightedId===id ? 'is-active' : '']"
|
||||
@mousedown.prevent="choose(id, disp)">
|
||||
<i class="fa-duotone fa-address-card"></i>
|
||||
<span class="txt">{{ disp }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="ac-pop"><div v-if="logoDropdownOpen" class="logo-dropdown"><div class="logo-option" @mousedown.prevent="selectMode('autocomplete')"><img src="/img/xinon-logo.png" alt="Xinon Logo"><span>XINON (Suche)</span></div><div class="logo-option" @mousedown.prevent="selectMode('text')"><img src="/img/estmk_logo.png" alt="ESTMK Logo"><span>ESTMK (Eingabe)</span></div></div></transition>
|
||||
<transition name="ac-pop"><div v-if="open && mode === 'autocomplete'" class="ac-panel" :class="{'wide': wide}"><div v-if="busy" class="ac-skel"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div></div><template v-else><div v-if="!Object.keys(items).length" class="ac-empty muted">Keine Treffer</div><ul ref="resultsList" class="ac-list" role="listbox"><li v-for="(disp, id) in items" :key="id" :class="['ac-item', highlightedId===id ? 'is-active' : '']" @mousedown.prevent="choose(id, disp)"><i class="fa-duotone fa-address-card"></i><span class="txt">{{ disp }}</span></li></ul></template></div></transition>
|
||||
</div>
|
||||
`,
|
||||
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: `
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="radius-scope modal-overlay" @click.self="$emit('close')">
|
||||
<div class="modal-card pop">
|
||||
<div class="modal-card pop" :class="modalClass">
|
||||
<div class="modal-head">
|
||||
<div class="modal-title"><i class="fa-duotone fa-database"></i> {{ title }}</div>
|
||||
<button class="icon-btn" @click="$emit('close')" aria-label="Close" title="Schließen"><i class="fa-duotone fa-xmark"></i></button>
|
||||
@@ -182,61 +211,51 @@ Vue.component('radius-modal', {
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
`
|
||||
`,
|
||||
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: <radius> ---------- */
|
||||
Vue.component('radius', {
|
||||
template: `
|
||||
<div class="radius-scope radius-container">
|
||||
<section class="card card-in">
|
||||
<div class="pane-header">
|
||||
<div class="title"><span class="logo-dot"></span><span>Radius</span></div>
|
||||
<nav class="view-tabs">
|
||||
<button v-for="item in viewOptions" :key="item.id" class="tab-btn" :class="{active:view===item.id}" @click="switchView(item.id)">
|
||||
<i :class="item.icon"></i> {{ item.name }}
|
||||
</button>
|
||||
</nav>
|
||||
<div class="view-select-wrap select">
|
||||
<select v-model="view">
|
||||
<option v-for="item in viewOptions" :value="item.id">{{ item.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Views -->
|
||||
<section v-show="view==='users'" class="card-in"><radius-users/></section>
|
||||
<section v-show="view==='free'" class="card-in"><radius-free-users ref="freeView"/></section>
|
||||
<section v-show="view==='ont'" class="card-in"><radius-ont-parser/></section>
|
||||
<section v-show="view==='ontReverse'" class="card-in"><radius-ont-finder/></section>
|
||||
<div class="pane-header"><div class="title"><span class="logo-dot"></span><span>Radius</span></div><nav class="view-tabs"><button v-for="i in viewOptions" :key="i.id" class="tab-btn" :class="{active:view===i.id}" @click="switchView(i.id)"><i :class="i.icon"></i> {{ i.name }}</button></nav><div class="view-select-wrap select"><select v-model="view" @change="switchView($event.target.value)"><option v-for="i in viewOptions" :value="i.id">{{ i.name }}</option></select></div></div>
|
||||
<hr class="content-divider" />
|
||||
<section v-show="view==='users'" class="card-in"><radius-users/></section><section v-show="view==='free'" class="card-in"><radius-free-users ref="freeView"/></section><section v-show="view==='unused'" class="card-in"><radius-unused-users ref="unusedView"/></section><section v-show="view==='ont'" class="card-in"><radius-ont-parser/></section><section v-show="view==='ontReverse'" class="card-in"><radius-ont-finder/></section>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
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;}});}}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,111 +1,48 @@
|
||||
/* ===== RadiusFreeUsers.js =====
|
||||
* Vereinfachte freie Benutzer:
|
||||
* - Kein Suchfeld, nur Reload-Button
|
||||
* - Autoload beim ersten Tab-Klick (initIfNeeded() wird von <radius> aufgerufen)
|
||||
* - Zweispaltiges Layout bei breiten Screens
|
||||
* - Robust gegen Server-Response (users/count/filter), trimmt Info
|
||||
*/
|
||||
|
||||
/* ===== RadiusFreeUsers.js ===== */
|
||||
Vue.component('radius-free-users', {
|
||||
template: `
|
||||
<div class="radius-scope">
|
||||
<div class="grid g-6 cols-1 cols-2-xl">
|
||||
<!-- NAT -->
|
||||
<div class="subcard">
|
||||
<div class="grid cols-1 cols-2-xl">
|
||||
<div class="subcard" style="border-right: 1px solid var(--border); padding-right: 12px;">
|
||||
<div class="h5" style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<span><i class="fa-duotone fa-shield-keyhole"></i> Freie NAT Benutzer <span class="badge">{{ nat.length }}</span></span>
|
||||
<button class="ghost-btn" @click="reload" :disabled="loadingNat || loadingStf">
|
||||
<span v-if="!loadingNat && !loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
|
||||
<span v-else class="btn-loader"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap" style="margin-top:8px;">
|
||||
<table class="tt-table ultra-compact">
|
||||
<thead><tr><th>Username</th><th>Info</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-if="loadingNat" v-for="n in 8" :key="'nats'+n"><td colspan="2"><div class="skeleton-line"></div></td></tr>
|
||||
<transition-group name="rows" tag="tbody">
|
||||
<tr v-for="u in nat" :key="u.Username" class="row-fade-in">
|
||||
<td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + u.Username">{{ u.Username }}</a></td>
|
||||
<td class="clamp-2 mono">{{ u.Info }}</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
<tr v-if="!loadingNat && !nat.length"><td colspan="2" class="muted center p-sm">Keine Treffer</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span><i class="fa-duotone fa-shield-keyhole"></i> Freie NAT Benutzer <span class="badge">{{ filteredNat.length }}</span></span>
|
||||
<button class="ghost-btn" @click="reloadNat" :disabled="loadingNat"><span v-if="!loadingNat"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
|
||||
</div>
|
||||
<radius-table-view :items="filteredNat" :is-loading="loadingNat" :has-searched="true" density="ultra-compact" table-class="no-min-width" no-results-placeholder-text="Keine Treffer" :skeleton-row-count="8">
|
||||
<template #head><thead><tr><th>Username</th><th>Info</th></tr></thead></template>
|
||||
<template #skeleton-row><td colspan="2"><div class="skeleton-line"></div></td></template>
|
||||
<template #row="{ item }">
|
||||
<td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username" data-tooltip="User in Radius öffnen" data-tooltip-align="right">{{ item.Username }}</a></td>
|
||||
<td class="clamp-2 mono">{{ item.Info }}</td>
|
||||
</template>
|
||||
</radius-table-view>
|
||||
<div v-if="!loadingNat && filteredNat.length" class="results-summary">{{ filteredNat.length }} Treffer gefunden</div>
|
||||
</div>
|
||||
|
||||
<!-- STF -->
|
||||
<div class="subcard">
|
||||
<div class="subcard" style="padding-left: 12px;">
|
||||
<div class="h5" style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
|
||||
<span><i class="fa-duotone fa-id-card-clip"></i> Freie STF Benutzer <span class="badge">{{ stf.length }}</span></span>
|
||||
<button class="ghost-btn" @click="reload" :disabled="loadingNat || loadingStf">
|
||||
<span v-if="!loadingNat && !loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
|
||||
<span v-else class="btn-loader"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap" style="margin-top:8px;">
|
||||
<table class="tt-table ultra-compact">
|
||||
<thead><tr><th>Username</th><th>Info</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-if="loadingStf" v-for="n in 8" :key="'stfs'+n"><td colspan="2"><div class="skeleton-line"></div></td></tr>
|
||||
<transition-group name="rows" tag="tbody">
|
||||
<tr v-for="u in stf" :key="u.Username" class="row-fade-in">
|
||||
<td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + u.Username">{{ u.Username }}</a></td>
|
||||
<td class="clamp-2 mono">{{ u.Info }}</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
<tr v-if="!loadingStf && !stf.length"><td colspan="2" class="muted center p-sm">Keine Treffer</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span><i class="fa-duotone fa-id-card-clip"></i> Freie STF Benutzer <span class="badge">{{ filteredStf.length }}</span></span>
|
||||
<button class="ghost-btn" @click="reloadStf" :disabled="loadingStf"><span v-if="!loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
|
||||
</div>
|
||||
<radius-table-view :items="filteredStf" :is-loading="loadingStf" :has-searched="true" density="ultra-compact" table-class="no-min-width" no-results-placeholder-text="Keine Treffer" :skeleton-row-count="8">
|
||||
<template #head><thead><tr><th>Username</th><th>Info</th></tr></thead></template>
|
||||
<template #skeleton-row><td colspan="2"><div class="skeleton-line"></div></td></template>
|
||||
<template #row="{ item }">
|
||||
<td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username" data-tooltip="User in Radius öffnen" data-tooltip-align="right">{{ item.Username }}</a></td>
|
||||
<td class="clamp-2 mono">{{ item.Info }}</td>
|
||||
</template>
|
||||
</radius-table-view>
|
||||
<div v-if="!loadingStf && filteredStf.length" class="results-summary">{{ filteredStf.length }} Treffer gefunden</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
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; }
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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: `
|
||||
<div class="radius-scope ont-card">
|
||||
<div v-if="step===1" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div>
|
||||
<p class="muted small">
|
||||
Datei muss die Spalte <code>Serial</code> enthalten. Optional <code>MAC</code> (12 Zeichen, ohne Doppelpunkte).
|
||||
</p>
|
||||
</div>
|
||||
<label class="file-drop" @dragover.prevent @drop.prevent="onDrop">
|
||||
<input type="file" accept=".xlsx" @change="handleFileUpload" hidden ref="fileInput">
|
||||
<div class="file-cta">
|
||||
<i class="fa-duotone fa-cloud-arrow-up"></i>
|
||||
<div>Hierhin ziehen oder <button type="button" class="link-btn" @click="$refs.fileInput.click()">Datei auswählen</button></div>
|
||||
</div>
|
||||
</label>
|
||||
<div v-if="uploadError" class="alert error mt-2">{{ uploadError }}</div>
|
||||
<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><p class="muted small">Datei muss die Spalte <code>Serial</code> enthalten. Optional <code>MAC</code>.</p></div>
|
||||
<radius-file-drop @file-selected="readXlsx" /><div v-if="uploadError" class="alert error mt-2">{{ uploadError }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="step===2" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-list-check"></i> Ergebnisse</div>
|
||||
<div class="cluster">
|
||||
<button class="primary-btn" @click="downloadResults"><i class="fa-duotone fa-download"></i> Ergebnisse herunterladen</button>
|
||||
<button class="ghost-btn" @click="resetComponent"><i class="fa-duotone fa-rotate-right"></i> Neue Datei</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="tt-table compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="h in originalHeaders" :key="'h'+h">{{ h }}</th>
|
||||
<th>Username</th>
|
||||
<th>Kundennummer</th>
|
||||
<th>Kundenname</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in processedData" :key="i" class="row-fade-in">
|
||||
<td v-for="h in originalHeaders" :key="h+i">{{ row[h] }}</td>
|
||||
<td class="mono">{{ row.fetched_username }}</td>
|
||||
<td class="mono">{{ row.fetched_customerNumber }}</td>
|
||||
<td class="clamp-2">{{ row.fetched_customerName }}</td>
|
||||
<td class="clamp-2 mono">{{ row.fetched_info }}</td>
|
||||
</tr>
|
||||
<tr v-if="processedData.length===0">
|
||||
<td :colspan="originalHeaders.length + 4" class="muted center p-lg">Keine Daten</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="step===2">
|
||||
<div class="block-head"><div class="h4"><i class="fa-duotone fa-list-check"></i> Ergebnisse</div><div class="cluster"><button class="primary-btn" @click="downloadResults" :disabled="loading"><i class="fa-duotone fa-download"></i> Ergebnisse herunterladen</button><button class="ghost-btn" @click="resetComponent" :disabled="loading"><i class="fa-duotone fa-rotate-right"></i> Neue Datei</button></div></div>
|
||||
<div class="results-container mt-between">
|
||||
<radius-processing-indicator v-if="loading" :progress="progress" :current-row="currentRow" :total-rows="totalRows" :current-serial="currentSerial" />
|
||||
<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 originalHeaders" :key="'h'+h">{{ h }}</th><th>Username</th><th>Kundennummer</th><th>Kundenname</th><th>Info</th></tr></thead></template>
|
||||
<template #row="{ item }"><td v-for="h in originalHeaders" :key="h+item.Serial">{{ item[h] }}</td><td class="mono">{{ item.fetched_username }}</td><td class="mono">{{ item.fetched_customerNumber }}</td><td class="clamp-2">{{ item.fetched_customerName }}</td><td class="clamp-2 mono">{{ item.fetched_info }}</td></template>
|
||||
</radius-table-view>
|
||||
<div v-if="!loading && processedData.length" class="results-summary">{{ processedData.length }} Zeilen verarbeitet</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="loading" class="overlay">
|
||||
<div class="ont-loading-card pop">
|
||||
<div class="h5">Verarbeitung läuft...</div>
|
||||
<p class="muted small">Aktuell: {{ currentSerial || '—' }}</p>
|
||||
<div class="progress-bar is-yellow mt-3"><div class="bar" :style="{width: progress + '%'}"></div></div>
|
||||
<div class="muted small mt-2">Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
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.'); } }
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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: `
|
||||
<div class="radius-scope ont-card">
|
||||
<div v-if="step===1" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div>
|
||||
<div class="muted small">Laden Sie eine XLSX-Datei mit Ihren Kundendaten.</div>
|
||||
</div>
|
||||
<label class="file-drop" @dragover.prevent @drop.prevent="onDrop">
|
||||
<input type="file" accept=".xlsx" @change="handleFileUpload" hidden ref="fileInput">
|
||||
<div class="file-cta">
|
||||
<i class="fa-duotone fa-cloud-arrow-up"></i>
|
||||
<div>Hierhin ziehen oder <button type="button" class="link-btn" @click="$refs.fileInput.click()">Datei auswählen</button></div>
|
||||
</div>
|
||||
</label>
|
||||
<div 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>
|
||||
|
||||
<div v-if="step===2" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-sliders"></i> Schritt 2 · Spaltenzuordnung</div>
|
||||
</div>
|
||||
<div class="grid g-4 cols-2 cols-1@sm">
|
||||
<div class="field" v-for="(field, idx) in requiredFields" :key="idx">
|
||||
<label>{{ field.label }}</label>
|
||||
<div class="select">
|
||||
<select v-model="selectedColumns[field.key]">
|
||||
<option v-for="header in headers" :key="header" :value="header">{{ header }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cluster mt-3">
|
||||
<button class="primary-btn" @click="startProcessing"><i class="fa-duotone fa-play"></i> Verarbeitung starten</button>
|
||||
<button class="ghost-btn" @click="step = 1"><i class="fa-duotone fa-arrow-left"></i> Zurück</button>
|
||||
<div 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>
|
||||
<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="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="step===3" class="block">
|
||||
<div class="block-head">
|
||||
<div class="h4"><i class="fa-duotone fa-list-check"></i> Schritt 3 · Ergebnisse</div>
|
||||
<div class="cluster">
|
||||
<button class="primary-btn" @click="downloadResults"><i class="fa-duotone fa-download"></i> Neue Excel herunterladen</button>
|
||||
<button class="ghost-btn" @click="step = 2"><i class="fa-duotone fa-arrow-left"></i> Zurück</button>
|
||||
<button class="ghost-btn" @click="resetLocal"><i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="tt-table compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<template v-for="header in requiredFields">
|
||||
<th :key="header.key">{{ header.label }}</th>
|
||||
</template>
|
||||
<th>ONT SN</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in processedData" :key="i" class="row-fade-in">
|
||||
<td>{{ row[selectedColumns.kundennummer] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlussstrasse] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlussplz] }}</td>
|
||||
<td>{{ row[selectedColumns.anschlusscity] }}</td>
|
||||
<td class="mono">{{ row.ont_sn }}</td>
|
||||
</tr>
|
||||
<tr v-if="processedData.length===0">
|
||||
<td colspan="5" class="muted center p-lg">Keine Daten</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="loading" class="overlay">
|
||||
<div class="ont-loading-card pop">
|
||||
<div class="spinner-lg"></div>
|
||||
<div class="h4 mt-2">Verarbeitung läuft...</div>
|
||||
<p class="muted">Ihre Daten werden Zeile für Zeile analysiert.</p>
|
||||
<div class="progress-bar is-yellow mt-3"><div class="bar" :style="{width: progress + '%'}"></div></div>
|
||||
<div class="muted small mt-2 mono">{{ currentRow + 1 }} / {{ totalRows }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
step: 1, headers: [], parsedData: [], processedData: [],
|
||||
selectedColumns: { kundennummer: 'crmPartner', anschlussstrasse: 'AnlStrasse', anschlussplz: 'AnlPlz', anschlusscity: 'AnlOrt' },
|
||||
requiredFields: [
|
||||
{ key: 'kundennummer', label: 'Kundennummer' },
|
||||
{ key: 'anschlussstrasse', label: 'Anschlussstraße' },
|
||||
{ key: 'anschlussplz', label: 'Anschluss PLZ' },
|
||||
{ key: 'anschlusscity', label: 'Anschluss City' }
|
||||
],
|
||||
loading: false, progress: 0, currentRow: 0, totalRows: 0
|
||||
};
|
||||
},
|
||||
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; i<dataToProcess.length; i++){
|
||||
this.currentRow = i; this.progress = ((i + 1) / dataToProcess.length) * 100;
|
||||
const row = { ...dataToProcess[i] };
|
||||
try{
|
||||
const findUserResponse = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?custnume=' + encodeURIComponent(row[this.selectedColumns.kundennummer])
|
||||
);
|
||||
const users = await findUserResponse.json();
|
||||
|
||||
if (users.length === 0) {
|
||||
row.ont_sn = 'N/A - Kein Benutzer mit dieser Kundennummer gefunden';
|
||||
processed.push(row);
|
||||
} else if (users.length === 1) {
|
||||
const username = users[0].username;
|
||||
const r = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + encodeURIComponent(username)
|
||||
);
|
||||
const d = await r.json();
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN gefunden';
|
||||
processed.push(row);
|
||||
} else {
|
||||
const s = row[this.selectedColumns.anschlussstrasse];
|
||||
const p = row[this.selectedColumns.anschlussplz];
|
||||
const c = row[this.selectedColumns.anschlusscity];
|
||||
for (let u of users) {
|
||||
const info = u.info || users[0].info || '';
|
||||
if (window.RadiusUtils.validateData(s, p, c, info)) {
|
||||
const r = await fetch(
|
||||
window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + encodeURIComponent(u.username)
|
||||
);
|
||||
const d = await r.json();
|
||||
row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN gefunden';
|
||||
processed.push(row);
|
||||
continue loop;
|
||||
}
|
||||
}
|
||||
row.ont_sn = 'N/A - Anschluss konnte nicht zugeordnet werden';
|
||||
processed.push(row);
|
||||
}
|
||||
} catch {
|
||||
row.ont_sn = 'N/A - Fehler bei der Verarbeitung';
|
||||
processed.push(row);
|
||||
}
|
||||
if ((i + 1) % 20 === 0) await new Promise(r=>setTimeout(r,20));
|
||||
}
|
||||
this.loading=false; this.processedData = processed; this.step = 3;
|
||||
},
|
||||
downloadResults(){
|
||||
const ws = XLSX.utils.json_to_sheet(this.processedData);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Results');
|
||||
XLSX.writeFile(wb, 'results.xlsx');
|
||||
},
|
||||
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)); }
|
||||
}
|
||||
});
|
||||
});
|
||||
47
public/js/pages/Radius/RadiusUnused.js
Normal file
47
public/js/pages/Radius/RadiusUnused.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/* ===== RadiusUnused.js ===== */
|
||||
Vue.component('radius-unused-users', {
|
||||
template: `
|
||||
<div class="radius-scope">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 12px;">
|
||||
<div class="cluster">
|
||||
<button v-for="f in filters" :key="f.id" class="tab-btn" :class="{active: activeFilter === f.id}" @click="setFilter(f.id)" :disabled="isLoading || !users.length"><i :class="f.icon"></i> {{f.name}}</button>
|
||||
</div>
|
||||
<button class="ghost-btn" @click="fetchUnusedUsers" :disabled="isLoading" style="min-width: 120px;"><span v-if="!isLoading"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
|
||||
</div>
|
||||
<div class="results-container">
|
||||
<radius-table-view :items="visibleFilteredUsers" :is-loading="isLoading" :has-searched="hasSearched" initial-placeholder-icon="fa-duotone fa-play-circle" initial-placeholder-text="Klicken Sie auf 'Neu laden', um nach inaktiven Benutzern zu suchen." no-results-placeholder-text="Keine Treffer für den aktuellen Filter gefunden.">
|
||||
<template #loading-placeholder>
|
||||
<div class="table-placeholder">
|
||||
<i class="fa-duotone fa-hourglass-half animated-hourglass" style="font-size: 36px; margin-bottom: 10px; color: var(--brand-blue);"></i>
|
||||
<div>Die Abfrage läuft...</div>
|
||||
<div class="muted small">Dies kann einen Moment dauern, da große Datenmengen analysiert werden.</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #head><thead><tr><th style="width: 130px;">Kundennummer</th><th style="width: 170px;">Username</th><th style="width: 170px;">Letzter Login</th><th>Info</th><th style="width: 100px; text-align: right;">Sessions</th><th style="width: 150px; text-align: right;">Dauer</th><th style="width: 150px; text-align: right;">Traffic</th></tr></thead></template>
|
||||
<template #skeleton-row><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td></template>
|
||||
<template #row="{ item }">
|
||||
<td><a v-if="item.customerNumber" class="link" target="_blank" :href="window.TT_CONFIG.BASE_PATH + '/Address?filter%5Bcustomer_number%5D=' + item.customerNumber" data-tooltip="Kunden öffnen" data-tooltip-align="right">{{ item.customerNumber }}</a></td>
|
||||
<td class="nowrap"><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.username" data-tooltip="User in Radius öffnen">{{ item.username }}</a></td>
|
||||
<td class="mono small">{{ item.lastLogin }}</td><td class="mono clamp-2 small">{{ item.info }}</td>
|
||||
<td style="text-align: right;">{{ item.totalSessions }}</td>
|
||||
<td style="text-align: right;">{{ window.RadiusUtils.formatDuration(item.totalDurationSeconds) }}</td>
|
||||
<td style="text-align: right;">{{ window.RadiusUtils.formatBytes(item.totalTrafficBytes) }}</td>
|
||||
</template>
|
||||
<template #observer><div ref="sentinel" style="height: 1px;"></div></template>
|
||||
</radius-table-view>
|
||||
<div v-if="hasSearched && !isLoading && filteredUsers.length" class="results-summary">{{ filteredUsers.length }} Treffer gefunden</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
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; }
|
||||
}
|
||||
});
|
||||
@@ -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: `
|
||||
<div class="radius-scope">
|
||||
<div class="filters">
|
||||
<div class="filters-layout">
|
||||
<div class="field">
|
||||
<radius-autocomplete
|
||||
v-model="billAddrDisplay"
|
||||
:wide="true"
|
||||
placeholder="Rechnungsadresse suchen…"
|
||||
@select="onAddrSelect"
|
||||
@enter="loadRadiusUsers"
|
||||
/>
|
||||
<radius-autocomplete v-model="billAddrDisplay" :wide="true" placeholder="Kunde suchen" @select="onAddrSelect" @enter="loadRadiusUsers" @mode-change="onModeChange"/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="input-wrap ip-field-wrapper">
|
||||
<span class="ip-focus-tooltip">z.B. nat* für lazy Suche</span>
|
||||
<i class="fa-duotone fa-user input-icon"></i>
|
||||
<input class="ri" v-model="username" placeholder="Username" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="text" name="radius-username" data-lpignore="true" data-1p-ignore="true" data-lastpass-icon="disabled"/>
|
||||
<div class="input-wrap ip-field-wrapper"><span class="ip-focus-tooltip">z.B. nat* für lazy Suche</span><i class="fa-duotone fa-user input-icon"></i><input class="ri" v-model="username" placeholder="Username" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="text" name="radius-username"/></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="input-wrap ip-field-wrapper"><span class="ip-focus-tooltip">Prefixe: '=' exakt, '*' Verlauf (lazy), '*=' Verlauf (exakt)</span><div class="input-wrap"><i class="fa-duotone fa-network-wired input-icon"></i><input class="ri" v-model="ip" placeholder="IP-Adresse" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="decimal" name="radius-ip"/></div></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="input-wrap"><i class="fa-duotone fa-note-sticky input-icon"></i><input class="ri" v-model="info" placeholder="Info" @keydown.enter="loadRadiusUsers"/></div>
|
||||
</div>
|
||||
<div class="cluster" style="gap: 8px;">
|
||||
<div class="field">
|
||||
<label class="switch-field"><span class="mini muted">Online-Status</span><span class="switch"><input type="checkbox" v-model="checkOnlineState"><span class="switch-track"><i class="fa-duotone fa-signal-bars-good on"></i><i class="fa-duotone fa-signal-bars-slash off"></i></span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field ip-field-wrapper">
|
||||
<span class="ip-focus-tooltip">z.B. =100.64.32.250 für exakte Suche</span>
|
||||
<div class="input-wrap">
|
||||
<i class="fa-duotone fa-network-wired input-icon"></i>
|
||||
<input class="ri" v-model="ip" placeholder="IP-Adresse" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="decimal" name="radius-ip" data-lpignore="true" data-1p-ignore="true" data-lastpass-icon="disabled"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="input-wrap">
|
||||
<i class="fa-duotone fa-note-sticky input-icon"></i>
|
||||
<input class="ri" v-model="info" placeholder="Info" @keydown.enter="loadRadiusUsers"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="switch-field">
|
||||
<span class="mini muted">Online-Status abfragen</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" v-model="checkOnlineState">
|
||||
<span class="switch-track">
|
||||
<i class="fa-duotone fa-signal-bars-good on"></i>
|
||||
<i class="fa-duotone fa-signal-bars-slash off"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field cluster" style="gap: 8px;">
|
||||
<button class="primary-btn" @click="loadRadiusUsers" :disabled="isLoading" style="flex-grow: 1;">
|
||||
<span v-if="!isLoading"><i class="fa-duotone fa-magnifying-glass"></i> Suchen</span>
|
||||
<span v-else class="btn-loader"></span>
|
||||
</button>
|
||||
<button class="danger-btn" @click="clearFilters" :disabled="!hasFilters" data-tooltip="Eingaben leeren">
|
||||
<i class="fa-duotone fa-xmark"></i>
|
||||
</button>
|
||||
<button class="primary-btn" @click="loadRadiusUsers" :disabled="isLoading" style="flex-grow: 1;"><span v-if="!isLoading"><i class="fa-duotone fa-magnifying-glass"></i></span><span v-else class="btn-loader"></span></button>
|
||||
<button class="danger-btn" @click="clearFilters" :disabled="!hasFilters" data-tooltip="Eingaben leeren" data-tooltip-align="left"><i class="fa-duotone fa-xmark"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-container mt-between">
|
||||
<div v-if="!hasSearched" class="table-placeholder">
|
||||
<i class="fa-duotone fa-keyboard"></i>
|
||||
<div>Beginnen Sie Ihre Suche, indem Sie Filter eingeben.</div>
|
||||
</div>
|
||||
<div v-else-if="!isLoading && radiusUsers.length === 0" class="table-placeholder">
|
||||
<i class="fa-duotone fa-database"></i>
|
||||
<div>Keine Ergebnisse für Ihre Suche gefunden.</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="table-view-wrapper">
|
||||
<div class="table-wrap" ref="tableWrap">
|
||||
<table class="tt-table compact">
|
||||
<colgroup>
|
||||
<col style="width: 170px;">
|
||||
<col style="width: 183px;">
|
||||
<col>
|
||||
<col style="width: 190px;">
|
||||
<col style="width: 115px;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align: center">Kundennummer</th>
|
||||
<th style="text-align: center">Username</th>
|
||||
<th style="text-align: center">Info</th>
|
||||
<th style="text-align: center">Status</th>
|
||||
<th style="text-align: center">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="isLoading" v-for="n in 6" :key="'s'+n">
|
||||
<td><div class="skeleton-line"></div></td>
|
||||
<td><div class="skeleton-line"></div></td>
|
||||
<td><div class="skeleton-line"></div></td>
|
||||
<td><div class="skeleton-line"></div></td>
|
||||
<td><div class="skeleton-line" style="height: 36px;"></div></td>
|
||||
</tr>
|
||||
|
||||
<tr v-for="user in visibleUsers" :key="user.id || user.username" class="row-fade-in">
|
||||
<td>
|
||||
<a class="link" target="_blank" :href="window['TT_CONFIG']['BASE_PATH'] + '/Address?filter%5Bcustomer_number%5D=' + user.customerNumber" data-tooltip="Kunden in neuem Tab öffnen">
|
||||
{{ user.customerNumber }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="nowrap">
|
||||
<a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + user.username" data-tooltip="User in Radius öffnen">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<button class="icon-btn sm" data-tooltip="Kopieren" @click="copy(user.username, 'Username')">
|
||||
<i class="fa-duotone fa-copy"></i>
|
||||
</button>
|
||||
</td>
|
||||
<td class="mono clamp-2">{{ user.info }}</td>
|
||||
<td>
|
||||
<template v-if="checkOnlineState">
|
||||
<radius-online-state :username="user.username" :key="user.username + '_'+searchCount"/>
|
||||
</template>
|
||||
</td>
|
||||
<td class="nowrap">
|
||||
<button class="ghost-btn" @click="fetchRadacctData(user.username)">
|
||||
<i class="fa-duotone fa-circle-info"></i> Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div ref="sentinel" style="height: 1px;"></div>
|
||||
</div>
|
||||
<div class="results-summary">
|
||||
<span v-if="isLoading">Suche läuft...</span>
|
||||
<span v-else>{{ radiusUsers.length }} Treffer gefunden</span>
|
||||
</div>
|
||||
<radius-table-view :items="visibleUsers" :is-loading="isLoading" :has-searched="hasSearched" :skeleton-row-count="6"
|
||||
initial-placeholder-text="Beginnen Sie Ihre Suche, indem Sie Filter eingeben.">
|
||||
<template #head>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align: center; width: 170px;">Kundennummer</th>
|
||||
<th style="text-align: center; width: 183px;">Username</th>
|
||||
<th style="text-align: center">Info</th>
|
||||
<th style="text-align: center; width: 190px;">Status</th>
|
||||
<th style="text-align: center; width: 115px;">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</template>
|
||||
<template #skeleton-row>
|
||||
<td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td>
|
||||
<td><div class="skeleton-line"></div></td><td><div class="skeleton-line" style="height: 36px;"></div></td>
|
||||
</template>
|
||||
<template #row="{ item }">
|
||||
<td><a class="link" target="_blank" :href="window.TT_CONFIG.BASE_PATH + '/Address?filter%5Bcustomer_number%5D=' + item.customerNumber" data-tooltip="Kunden in neuem Tab öffnen" data-tooltip-align="right">{{ item.customerNumber }}</a></td>
|
||||
<td class="nowrap"><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.username" data-tooltip="User in Radius öffnen" data-tooltip-align="right">{{ item.username }}</a><button class="icon-btn sm" data-tooltip="Kopieren" data-tooltip-align="right" @click="copy(item.username, $event)"><i class="fa-duotone fa-copy copy-icon"></i><i class="fa-duotone fa-check check-icon"></i></button></td>
|
||||
<td class="mono clamp-2">{{ item.info }}</td>
|
||||
<td><radius-online-state v-if="checkOnlineState" :username="item.username" :key="item.username + '_'+searchCount"/></td>
|
||||
<td class="nowrap cluster" style="gap: 4px; justify-content: center;">
|
||||
<button class="ghost-btn" @click="fetchRadacctData(item.username)" data-tooltip="Details"><i class="fa-duotone fa-circle-info"></i></button>
|
||||
<button class="ghost-btn" @click="openTransferModal(item.username)" data-tooltip="Transfer Statistik" data-tooltip-align="left"><i class="fa-duotone fa-chart-line"></i></button>
|
||||
</td>
|
||||
</template>
|
||||
<template #observer><div ref="sentinel" style="height: 1px;"></div></template>
|
||||
</radius-table-view>
|
||||
<div v-if="hasSearched" class="results-summary">
|
||||
<span v-if="isLoading">Suche läuft...</span>
|
||||
<span v-else-if="radiusUsers.length">{{ radiusUsers.length }} Treffer gefunden</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -143,59 +65,22 @@ Vue.component('radius-users', {
|
||||
<div class="kv-redesign">
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Status</span>
|
||||
<div class="kv-value">
|
||||
<div v-if="radacctData">
|
||||
<strong class="chip" :class="radacctData.online ? 'ok' : 'bad'">
|
||||
{{ radacctData.online ? 'Online' : 'Offline' }}
|
||||
</strong>
|
||||
</div>
|
||||
<div v-else><div class="skeleton-line" style="width: 80px; --h: 24px; margin-left: auto;"></div></div>
|
||||
</div>
|
||||
<div class="kv-value"><div v-if="radacctData"><strong class="chip" :class="radacctData.online ? 'ok' : 'bad'">{{ radacctData.online ? 'Online' : 'Offline' }}</strong></div><div v-else><div class="skeleton-line" style="width: 80px; --h: 24px; margin-left: auto;"></div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">IP</span>
|
||||
<div class="kv-value">
|
||||
<div v-if="radacctData" class="inline-copy">
|
||||
<code>{{ radacctData.ip || '—' }}</code>
|
||||
<button v-if="radacctData.ip" class="icon-btn sm" @click="copy(radacctData.ip, 'IP-Adresse')" data-tooltip="Kopieren"><i class="fa-duotone fa-copy"></i></button>
|
||||
</div>
|
||||
<div v-else><div class="skeleton-line" style="width: 120px; margin-left: auto;"></div></div>
|
||||
</div>
|
||||
<div class="kv-value"><div v-if="radacctData" class="inline-copy"><code>{{ radacctData.ip || '—' }}</code><button v-if="radacctData.ip" class="icon-btn sm" @click="copy(radacctData.ip, $event)" data-tooltip="Kopieren"><i class="fa-duotone fa-copy copy-icon"></i><i class="fa-duotone fa-check check-icon"></i></button></div><div v-else><div class="skeleton-line" style="width: 120px; margin-left: auto;"></div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Username</span>
|
||||
<div class="kv-value">
|
||||
<div v-if="radacctData" class="inline-copy">
|
||||
<a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + radacctData.username" data-tooltip="User in Radius öffnen">{{ radacctData.username }}</a>
|
||||
<button class="icon-btn sm" @click="copy(radacctData.username, 'Username')" data-tooltip="Kopieren"><i class="fa-duotone fa-copy"></i></button>
|
||||
</div>
|
||||
<div v-else><div class="skeleton-line" style="width: 150px; margin-left: auto;"></div></div>
|
||||
</div>
|
||||
<div class="kv-value"><div v-if="radacctData" class="inline-copy"><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + radacctData.username" data-tooltip="User in Radius öffnen">{{ radacctData.username }}</a><button class="icon-btn sm" @click="copy(radacctData.username, $event)" data-tooltip="Kopieren"><i class="fa-duotone fa-copy copy-icon"></i><i class="fa-duotone fa-check check-icon"></i></button></div><div v-else><div class="skeleton-line" style="width: 150px; margin-left: auto;"></div></div></div>
|
||||
</div>
|
||||
|
||||
<template v-if="radacctData">
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Kundennummer</span>
|
||||
<code class="kv-value">{{ radacctData.customerNumber || '—' }}</code>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Kundenname</span>
|
||||
<div class="kv-value clamp-2">{{ radacctData.customerName || '—' }}</div>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Info</span>
|
||||
<div class="kv-value clamp-3 mono small">{{ radacctData.info || '—' }}</div>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">WLAN Password</span>
|
||||
<code class="kv-value mono">{{ radacctData.wlanPassword || '—' }}</code>
|
||||
</div>
|
||||
<div class="kv-row">
|
||||
<span class="kv-label">Bandbreite</span>
|
||||
<code class="kv-value">{{ radacctData.actualBandwidth || '—' }}</code>
|
||||
</div>
|
||||
<div class="kv-row"><span class="kv-label">Kundennummer</span><code class="kv-value">{{ radacctData.customerNumber || '—' }}</code></div>
|
||||
<div class="kv-row"><span class="kv-label">Kundenname</span><div class="kv-value clamp-2">{{ radacctData.customerName || '—' }}</div></div>
|
||||
<div class="kv-row"><span class="kv-label">Info</span><div class="kv-value clamp-3 mono small">{{ radacctData.info || '—' }}</div></div>
|
||||
<div class="kv-row"><span class="kv-label">WLAN Password</span><code class="kv-value mono">{{ radacctData.wlanPassword || '—' }}</code></div>
|
||||
<div class="kv-row"><span class="kv-label">Bandbreite</span><code class="kv-value">{{ radacctData.actualBandwidth || '—' }}</code></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="kv-row"><span class="kv-label">Kundennummer</span><div class="kv-value"><div class="skeleton-line" style="width: 70px; margin-left: auto;"></div></div></div>
|
||||
@@ -206,104 +91,133 @@ Vue.component('radius-users', {
|
||||
</template>
|
||||
</div>
|
||||
</radius-modal>
|
||||
|
||||
<radius-modal :show="showTransferModal" :title="'Transfer Statistik für ' + transferModalUsername" @close="closeTransferModal" modal-class="modal-card-wide">
|
||||
<div class="modal-body-scrollable">
|
||||
<div v-if="transferYearlyData || transferInitialLoading">
|
||||
<div class="unselectable">
|
||||
<div class="cluster" style="justify-content: space-between; margin-bottom: 16px; flex-wrap: nowrap; margin-top: 4px; padding-left: 8px;">
|
||||
<div class="cluster">
|
||||
<div class="custom-dropdown">
|
||||
<button class="dropdown-toggle" @click="!transferInitialLoading && (showYearDropdown = !showYearDropdown)" :class="{'is-open': showYearDropdown}"><span>{{ transferYear }}</span><i class="fa-solid fa-chevron-down"></i></button>
|
||||
<transition name="ac-pop"><div v-if="showYearDropdown" class="dropdown-panel"><div v-for="y in availableYears" :key="y" class="dropdown-item" @click="selectYear(y)">{{ y }}</div></div></transition>
|
||||
</div>
|
||||
<div class="cluster" style="gap: 4px;"><button v-for="m in allMonths" :key="m.month" class="tab-btn" :class="{active: transferMonth === m.month}" :disabled="isMonthDisabled(m.month)" @click="changeTransferMonth(m.month)">{{ m.name }}</button></div>
|
||||
</div>
|
||||
<div class="muted small mono" style="text-align: right; flex-shrink: 0;">Gesamt {{ transferYear }}:<br><strong v-if="transferInitialLoading || !transferYearlyData"><div class="skeleton-line" style="width: 110px; height: 16px; margin-left:auto;"></div></strong><strong v-else>{{ window.RadiusUtils.formatBytes(transferYearlyData.yearlySummary.grandTotalBytes) }}</strong></div>
|
||||
</div>
|
||||
<div class="grid g-4 cols-4">
|
||||
<div class="stat-card-v2 stat-total"><div class="stat-icon"><i class="fa-duotone fa-grid-2"></i></div><div><div class="stat-label">Monat gesamt</div><div class="stat-value"><span v-if="transferInitialLoading || transferMonthlyLoading"><div class="skeleton-line" style="width: 100px; height: 18px;"></div></span><span v-else>{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.grandTotalBytes || 0) }}</span></div></div></div>
|
||||
<div class="stat-card-v2 stat-download"><div class="stat-icon"><i class="fa-duotone fa-arrow-down-to-line"></i></div><div><div class="stat-label">Download</div><div class="stat-value"><span v-if="transferInitialLoading || transferMonthlyLoading"><div class="skeleton-line" style="width: 100px; height: 18px;"></div></span><span v-else>{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.totalDownloadBytes || 0) }}</span></div></div></div>
|
||||
<div class="stat-card-v2 stat-upload"><div class="stat-icon"><i class="fa-duotone fa-arrow-up-from-line"></i></div><div><div class="stat-label">Upload</div><div class="stat-value"><span v-if="transferInitialLoading || transferMonthlyLoading"><div class="skeleton-line" style="width: 100px; height: 18px;"></div></span><span v-else>{{ window.RadiusUtils.formatBytes(transferMonthlyData?.summary?.totalUploadBytes || 0) }}</span></div></div></div>
|
||||
<div class="stat-card-v2 stat-duration"><div class="stat-icon"><i class="fa-duotone fa-hourglass-clock"></i></div><div><div class="stat-label">Dauer</div><div class="stat-value"><span v-if="transferInitialLoading || transferMonthlyLoading"><div class="skeleton-line" style="width: 80px; height: 18px;"></div></span><span v-else>{{ window.RadiusUtils.formatDuration(transferMonthlyData?.summary?.totalDurationSeconds || 0) }}</span></div></div></div>
|
||||
</div>
|
||||
<div class="chart-card mt-3" style="height: 250px;">
|
||||
<div v-if="transferMonthlyLoading || transferInitialLoading" class="chart-placeholder"><div class="skeleton-line" style="width: 100%; height: 100%; border-radius: var(--radius);"></div></div>
|
||||
<div v-else-if="!transferMonthlyData || !transferMonthlyData.details || !transferMonthlyData.details.length" class="chart-placeholder"><i class="fa-duotone fa-chart-pie"></i><span>Keine Daten in diesem Monat verfügbar</span></div>
|
||||
<canvas v-show="!transferMonthlyLoading && !transferInitialLoading && transferMonthlyData?.details?.length" ref="transferChartCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap mt-3" style="height: 350px;">
|
||||
<div v-if="!transferInitialLoading && !transferMonthlyLoading && (!transferMonthlyData || !transferMonthlyData.details || !transferMonthlyData.details.length)" class="table-placeholder-fixed-height"><i class="fa-duotone fa-database"></i><span>Keine detaillierten Daten für diesen Monat.</span></div>
|
||||
<table v-else class="tt-table compact">
|
||||
<thead><tr><th>Startzeit</th><th>Dauer</th><th>IP-Adresse</th><th style="text-align: right;">Download</th><th style="text-align: right;">Upload</th><th style="text-align: right;">Gesamt</th></tr></thead>
|
||||
<tbody>
|
||||
<template v-if="transferInitialLoading || transferMonthlyLoading"><tr v-for="n in 10" :key="'skel'+n"><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td></tr></template>
|
||||
<template v-else><tr v-for="(d, i) in transferMonthlyData.details" :key="i"><td class="mono small">{{ d.startTime }}</td><td class="mono small">{{ window.RadiusUtils.formatDuration(d.durationSeconds) }}</td><td class="mono small">{{ d.ipAddress }}</td><td class="mono small" style="text-align: right;">{{ window.RadiusUtils.formatBytes(d.downloadBytes) }}</td><td class="mono small" style="text-align: right;">{{ window.RadiusUtils.formatBytes(d.uploadBytes) }}</td><td class="mono small" style="text-align: right;"><strong>{{ window.RadiusUtils.formatBytes(d.totalBytes) }}</strong></td></tr></template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!transferInitialLoading" class="table-placeholder" style="min-height: 400px;"><i class="fa-duotone fa-wifi-slash"></i><div>Daten konnten nicht geladen werden.</div></div>
|
||||
</div>
|
||||
</radius-modal>
|
||||
</div>
|
||||
`,
|
||||
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 } } });
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user