manuel.sowada/radixOS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style fixes

Browse Source
This commit is contained in:
manuel.sowada
2026-05-13 16:05:12 +02:00
parent 4db4ac755c
commit 556ccc3a73
7 changed files with 175 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/shield.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

10
public/javascript/main.js
View File

@@ -1225,12 +1225,6 @@ window.addEventListener('resize', () => {
tableEl.before(container); 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) { if(!filterConfig.hideCounter) {
filterState.counterEl = document.createElement('div'); filterState.counterEl = document.createElement('div');
filterState.counterEl.className = 'live-counter'; filterState.counterEl.className = 'live-counter';
@@ -1243,6 +1237,10 @@ window.addEventListener('resize', () => {
// Filter-Header anpassen // Filter-Header anpassen
syncFilterWidth(container); syncFilterWidth(container);
// Höhe messen → thead offset setzen
const h = container.getBoundingClientRect().height;
tableEl.style.setProperty('--filter-height', h + 'px');
// Tabelle neu rendern // Tabelle neu rendern
rebuildPrefix(); rebuildPrefix();
render(); render();

243
public/javascript/rbacAPI.js
View File

@@ -122,67 +122,67 @@ function createDropZone(el, type, target) {
// 📋 TABLE (USERS) // 📋 TABLE (USERS)
////////////////////////////// //////////////////////////////
const rbacUsersVT = virtualTable({ // const rbacUsersVT = virtualTable({
tableEl: document.querySelector('#rbacUsersTable'), // tableEl: document.querySelector('#rbacUsersTable'),
data: [], // data: [],
rowHeight: 20, // rowHeight: 35,
buffer: 5, // buffer: 10,
groupKey: 'ObjectSourceName', // groupKey: 'ObjectSourceName',
rowKey: 'ObjectGUID', // rowKey: 'ObjectGUID',
filterConfig: { // filterConfig: {
hideCounter: true, // hideCounter: true,
exceptedColumns: ['', 'Rollen', 'Gruppen'], // exceptedColumns: ['', 'Rollen', 'Gruppen'],
columnModes: { // columnModes: {
Aktiv: 'dropdown', // Aktiv: 'dropdown',
Online: 'dropdown' // Online: 'dropdown'
} // }
}, // },
customRender: (row, tr) => { // customRender: (row, tr) => {
createDragZone(tr, row, 'user'); // createDragZone(tr, row, 'user');
tr.addEventListener('contextmenu', (evt) => { // tr.addEventListener('contextmenu', (evt) => {
evt.preventDefault(); // evt.preventDefault();
ctxRBAC.setItems([ // ctxRBAC.setItems([
{ // {
label: "Details", // label: "Details",
onClick: () => showAuthDetails(row.ObjectGUID) // onClick: () => showAuthDetails(row.ObjectGUID)
} // }
]); // ]);
ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); // ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
}); // });
createTd(tr, // createTd(tr,
`<button class="redbutton" // `<button class="redbutton"
${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ? // ${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ?
'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' : // 'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' :
'' // ''
}>X</button>`, { // }>X</button>`, {
styles: { // styles: {
'position': 'sticky', // 'position': 'sticky',
'left': '0px', // 'left': '0px',
'max-width': '20px', // 'max-width': '20px',
'z-index': '2' // 'z-index': '2'
}, classes: [ // }, classes: [
'text-align:left' // 'text-align:left'
], onclick: () => { // ], onclick: () => {
if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return; // if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return;
deleteUser(row['ObjectGUID'], row['sAMAccountName']); // 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['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['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } });
createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] }); // createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] });
createTd(tr, row['GroupCount'], { 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['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['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['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } });
createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] }); // createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] });
} // }
}); // });
@@ -190,62 +190,84 @@ const rbacUsersVT = virtualTable({
// 📋 TABLE (PERMISSIONS) // 📋 TABLE (PERMISSIONS)
////////////////////////////// //////////////////////////////
const rbacPermissionsVT = virtualTable({ // const rbacPermissionsVT = virtualTable({
tableEl: document.querySelector('#rbacPermissionsTable'), // tableEl: document.querySelector('#rbacPermissionsTable'),
data: [], // data: [],
rowHeight: 20, // rowHeight: 20,
buffer: 5, // buffer: 5,
groupKey: null, // groupKey: null,
rowKey: 'ID', // rowKey: 'ID',
filterConfig: { // filterConfig: {
hideCounter: true, // hideCounter: true,
exceptedColumns: ['', 'ID'] // exceptedColumns: ['', 'ID']
}, // },
customRender: (row, tr) => { // customRender: (row, tr) => {
createDragZone(tr, row, 'user'); // createDragZone(tr, row, 'user');
tr.addEventListener('contextmenu', (evt) => { // tr.addEventListener('contextmenu', (evt) => {
evt.preventDefault(); // evt.preventDefault();
ctxRBAC.setItems([ // ctxRBAC.setItems([
{ // {
label: "Details", // label: "Details",
onClick: () => showAuthDetails(row.ObjectGUID) // onClick: () => showAuthDetails(row.ObjectGUID)
// }
// ]);
// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 });
// });
// createTd(tr,
// `<button class="redbutton"
// ${row['ID'] === 1 ?
// 'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
// ''
// }>X</button>`, {
// 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;
} }
]);
ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); render() {
}); const tile = document.createElement('div');
tile.classList.add('tile');
tile.innerHTML = this.title;
createTd(tr, if(this.options.onclick) {
`<button class="redbutton" tile.addEventListener('click', this.options.onclick);
${row['ID'] === 1 ?
'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
''
}>X</button>`, {
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' } } ); this.parent.appendChild(tile);
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' } });
} }
}); }
////////////////////////////// //////////////////////////////
// 📥 LOADERS // 📥 LOADERS
@@ -253,7 +275,14 @@ const rbacPermissionsVT = virtualTable({
async function loadUsers() { async function loadUsers() {
try { 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) { } catch (err) {
console.error(err); console.error(err);
} }
@@ -528,7 +557,7 @@ async function deletePermission(id, name) {
// 🚀 INIT // 🚀 INIT
////////////////////////////// //////////////////////////////
loadUsers(); loadUsers();
loadGroups(); // loadGroups();
loadRoles(); // loadRoles();
loadPermissions(); // loadPermissions();

4
public/styles/default.css
View File

@@ -38,14 +38,14 @@ button:not(:disabled).yellowbutton:hover { background:var(--theme-button-yellow-
/* #region Container */ /* #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 { display:flex; flex-direction:column;flex: 0 0 auto; } */
.card.static.row { overflow:hidden; display:flex; flex-direction:row; flex-wrap: wrap;} .card.static.row { overflow:hidden; display:flex; flex-direction:row; flex-wrap: wrap;}
.card.static { overflow:hidden; display:flex; flex-direction:column; } .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) { 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; } .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)); } .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
/* #endregion */ /* #endregion */

1
public/styles/table.css
View File

@@ -56,7 +56,6 @@ td { overflow:hidden; text-overflow:ellipsis; /* verhindert, dass Inhalt die Zel
left:0px; left:0px;
top:0px; top:0px;
width: 100% !important; width: 100% !important;
height: fit-content;
/* z-index:20; */ /* z-index:20; */
padding:0px; padding:0px;
border-radius:var(--border-raduis) var(--border-raduis) 0 0; border-radius:var(--border-raduis) var(--border-raduis) 0 0;

32
public/views/rbac.hbs
View File

@@ -59,12 +59,40 @@ section span {
input { input {
margin: 5px; 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;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container static" style="height:100vh;">
<div class="card static">
<div class="tabs" id="rbacTabs" style="flex: 0 0 auto;">
<div class="tab">Verwaltung</div>
<div class="tab">Benutzer & Gruppen</div>
<div class="tab">Rollen & Berechtigungen</div>
</div>
<div id="rbacTabContents" class="tab-contents" style="flex: 1 1 100%;overflow-y:auto;padding:0;">
</div>
</div>
<div class="container static" style="max-width:100vw;flex-direction:row;flex-wrap:wrap;flex: 1 1 100vh;"> {{!-- <div class="container static" style="max-width:100vw;flex-direction:row;flex-wrap:wrap;flex: 1 1 100vh;">
<!-- USERS --> <!-- USERS -->
<div class="card static row" style="align-items:center;height:fit-content;width:100%"> <div class="card static row" style="align-items:center;height:fit-content;width:100%">
AD Synchronisation: AD Synchronisation:
@@ -146,7 +174,7 @@ input {
</div> </div>
</div> </div>
</div> </div> --}}
</body> </body>
<script type="text/javascript"> <script type="text/javascript">

2
src/models/integratedStartMenuItems.json
View File

@@ -42,7 +42,7 @@
"width": "800px", "width": "800px",
"height": "600px" "height": "600px"
}, },
"icon": "app.png", "icon": "shield.png",
"permissions": [ "permissions": [
{ {
"scope": "SYSTEM", "scope": "SYSTEM",