From 556ccc3a73de1c374c3b2c76d977483b24a05f34 Mon Sep 17 00:00:00 2001 From: "manuel.sowada" Date: Wed, 13 May 2026 16:05:12 +0200 Subject: [PATCH] style fixes --- public/images/shield.png | Bin 0 -> 2787 bytes public/javascript/main.js | 10 +- public/javascript/rbacAPI.js | 247 +++++++++++++---------- public/styles/default.css | 4 +- public/styles/table.css | 1 - public/views/rbac.hbs | 32 ++- src/models/integratedStartMenuItems.json | 2 +- 7 files changed, 175 insertions(+), 121 deletions(-) create mode 100644 public/images/shield.png diff --git a/public/images/shield.png b/public/images/shield.png new file mode 100644 index 0000000000000000000000000000000000000000..45cb698d41bb39c062e2ed083295a2233c06779b GIT binary patch literal 2787 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 { tableEl.before(container); - // Höhe messen → thead offset setzen - requestAnimationFrame(()=>{ - const h = container.getBoundingClientRect().height; - tableEl.style.setProperty('--filter-height', h + 'px'); - }); - if(!filterConfig.hideCounter) { filterState.counterEl = document.createElement('div'); filterState.counterEl.className = 'live-counter'; @@ -1242,6 +1236,10 @@ window.addEventListener('resize', () => { const wrapperResizeObserver = new ResizeObserver(() => { // Filter-Header anpassen syncFilterWidth(container); + + // Höhe messen → thead offset setzen + const h = container.getBoundingClientRect().height; + tableEl.style.setProperty('--filter-height', h + 'px'); // Tabelle neu rendern rebuildPrefix(); diff --git a/public/javascript/rbacAPI.js b/public/javascript/rbacAPI.js index 88ea3b4..1615f7f 100644 --- a/public/javascript/rbacAPI.js +++ b/public/javascript/rbacAPI.js @@ -122,67 +122,67 @@ function createDropZone(el, type, target) { // 📋 TABLE (USERS) ////////////////////////////// -const rbacUsersVT = virtualTable({ - tableEl: document.querySelector('#rbacUsersTable'), - data: [], - rowHeight: 20, - buffer: 5, - groupKey: 'ObjectSourceName', - rowKey: 'ObjectGUID', - filterConfig: { - hideCounter: true, - exceptedColumns: ['', 'Rollen', 'Gruppen'], - columnModes: { - Aktiv: 'dropdown', - Online: 'dropdown' - } - }, +// const rbacUsersVT = virtualTable({ +// tableEl: document.querySelector('#rbacUsersTable'), +// data: [], +// rowHeight: 35, +// buffer: 10, +// groupKey: 'ObjectSourceName', +// rowKey: 'ObjectGUID', +// filterConfig: { +// hideCounter: true, +// exceptedColumns: ['', 'Rollen', 'Gruppen'], +// columnModes: { +// Aktiv: 'dropdown', +// Online: 'dropdown' +// } +// }, - customRender: (row, tr) => { +// customRender: (row, tr) => { - createDragZone(tr, row, 'user'); +// createDragZone(tr, row, 'user'); - tr.addEventListener('contextmenu', (evt) => { - evt.preventDefault(); +// tr.addEventListener('contextmenu', (evt) => { +// evt.preventDefault(); - ctxRBAC.setItems([ - { - label: "Details", - onClick: () => showAuthDetails(row.ObjectGUID) - } - ]); +// ctxRBAC.setItems([ +// { +// label: "Details", +// onClick: () => showAuthDetails(row.ObjectGUID) +// } +// ]); - ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); - }); +// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); +// }); - createTd(tr, - ``, { - styles: { - 'position': 'sticky', - 'left': '0px', - 'max-width': '20px', - 'z-index': '2' - }, classes: [ - 'text-align:left' - ], onclick: () => { - if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return; - deleteUser(row['ObjectGUID'], row['sAMAccountName']); - } - }); - createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } }); - createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } }); - createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } }); - createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } }); - createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } }); - createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] }); - } -}); +// createTd(tr, +// ``, { +// styles: { +// 'position': 'sticky', +// 'left': '0px', +// 'max-width': '20px', +// 'z-index': '2' +// }, classes: [ +// 'text-align:left' +// ], onclick: () => { +// if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return; +// deleteUser(row['ObjectGUID'], row['sAMAccountName']); +// } +// }); +// createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } }); +// createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } }); +// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } }); +// createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } }); +// createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } }); +// createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] }); +// } +// }); @@ -190,62 +190,84 @@ const rbacUsersVT = virtualTable({ // 📋 TABLE (PERMISSIONS) ////////////////////////////// -const rbacPermissionsVT = virtualTable({ - tableEl: document.querySelector('#rbacPermissionsTable'), - data: [], - rowHeight: 20, - buffer: 5, - groupKey: null, - rowKey: 'ID', - filterConfig: { - hideCounter: true, - exceptedColumns: ['', 'ID'] - }, +// const rbacPermissionsVT = virtualTable({ +// tableEl: document.querySelector('#rbacPermissionsTable'), +// data: [], +// rowHeight: 20, +// buffer: 5, +// groupKey: null, +// rowKey: 'ID', +// filterConfig: { +// hideCounter: true, +// exceptedColumns: ['', 'ID'] +// }, - customRender: (row, tr) => { +// customRender: (row, tr) => { - createDragZone(tr, row, 'user'); +// createDragZone(tr, row, 'user'); - tr.addEventListener('contextmenu', (evt) => { - evt.preventDefault(); +// tr.addEventListener('contextmenu', (evt) => { +// evt.preventDefault(); - ctxRBAC.setItems([ - { - label: "Details", - onClick: () => showAuthDetails(row.ObjectGUID) - } - ]); +// ctxRBAC.setItems([ +// { +// label: "Details", +// onClick: () => showAuthDetails(row.ObjectGUID) +// } +// ]); - ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); - }); +// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); +// }); - createTd(tr, - ``, { - styles: { - 'position': 'sticky', - 'left': '0px', - 'max-width': '20px', - 'z-index': '2' - }, classes: [ - 'text-align:left' - ], onclick: () => { - if(row['ID'] === 1) return; - deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`); - } - }); - createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } ); - createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); - createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } }); - createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); - createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } }); +// createTd(tr, +// ``, { +// styles: { +// 'position': 'sticky', +// 'left': '0px', +// 'max-width': '20px', +// 'z-index': '2' +// }, classes: [ +// 'text-align:left' +// ], onclick: () => { +// if(row['ID'] === 1) return; +// deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`); +// } +// }); +// createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } ); +// createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } }); +// } +// }); + + +class Tile { + constructor(title, parent, options = {}) { + this.title = title; + this.parent = parent; + this.options = options; } -}); + + render() { + const tile = document.createElement('div'); + tile.classList.add('tile'); + tile.innerHTML = this.title; + + if(this.options.onclick) { + tile.addEventListener('click', this.options.onclick); + } + + this.parent.appendChild(tile); + } +} + ////////////////////////////// // 📥 LOADERS @@ -253,7 +275,14 @@ const rbacPermissionsVT = virtualTable({ async function loadUsers() { try { - rbacUsersVT.source(await RBAC.loadUsers()); + // rbacUsersVT.source(await RBAC.loadUsers()); + const users = await RBAC.loadUsers(); + + users.forEach(user => { + const tile = new Tile(`[${user.UserCount}] ${user.sAMAccountName}`, document.querySelector('#rbacTabContents') , { onclick: () => showAuthDetails(user.ObjectGUID) }); + tile.render(); + }) + } catch (err) { console.error(err); } @@ -528,7 +557,7 @@ async function deletePermission(id, name) { // 🚀 INIT ////////////////////////////// - loadUsers(); - loadGroups(); - loadRoles(); - loadPermissions(); \ No newline at end of file +loadUsers(); +// loadGroups(); +// loadRoles(); +// loadPermissions(); \ No newline at end of file diff --git a/public/styles/default.css b/public/styles/default.css index 48b3ca8..498ee77 100644 --- a/public/styles/default.css +++ b/public/styles/default.css @@ -38,14 +38,14 @@ button:not(:disabled).yellowbutton:hover { background:var(--theme-button-yellow- /* #region Container */ -.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100%; flex-direction: column;} +.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100vh; flex-direction: column;} /* .card.static { display:flex; flex-direction:column;flex: 0 0 auto; } */ .card.static.row { overflow:hidden; display:flex; flex-direction:row; flex-wrap: wrap;} .card.static { overflow:hidden; display:flex; flex-direction:column; } .container:not(.static) { width:calc(100% - 10px); margin:5px auto; display:grid; grid-template-columns:100%; gap:12px; min-height:0; overflow:auto; max-height:100%; } .container:not(.static) * { box-sizing:border-box; } -.card { border-width:1px; border-style:solid; border-radius:8px; padding:15px; } +.card { border-width:1px; border-style:solid; border-radius:8px; padding:10px; } .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); } /* #endregion */ diff --git a/public/styles/table.css b/public/styles/table.css index 0f89f9d..a44d4b1 100644 --- a/public/styles/table.css +++ b/public/styles/table.css @@ -56,7 +56,6 @@ td { overflow:hidden; text-overflow:ellipsis; /* verhindert, dass Inhalt die Zel left:0px; top:0px; width: 100% !important; - height: fit-content; /* z-index:20; */ padding:0px; border-radius:var(--border-raduis) var(--border-raduis) 0 0; diff --git a/public/views/rbac.hbs b/public/views/rbac.hbs index 5e96b85..1ff0306 100644 --- a/public/views/rbac.hbs +++ b/public/views/rbac.hbs @@ -59,12 +59,40 @@ section span { input { margin: 5px; } + + +.tile { + display:inline-flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + align-items: stretch; + height:60px; + padding: 5px; + width: 200px; + border: 1px solid #ccc; + border-radius: 8px; + margin: 0 2px 2px 0; + transition: background var(--times-transition-colors) ease, border-color var(--times-transition-colors) ease, color var(--times-transition-colors) ease; +} + +
+
+
+
Verwaltung
+
Benutzer & Gruppen
+
Rollen & Berechtigungen
+
+ +
+
+
-
+ {{!--
AD Synchronisation: @@ -146,7 +174,7 @@ input {
-
+
--}}