Strolch
/
strolch-wc-inspector
mirror of https://github.com/strolch-li/strolch-wc-inspector.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Major] Added history to UI, and better table layout

This commit is contained in:
Robert von Burg 2021-02-23 09:25:27 +01:00
parent 193917ecc1
commit 87ce588f7c
4 changed files with 197 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "strolch-wc-inspector",
"description": "Strolch WebComponent Inspector",
"version": "0.20.2",
"version": "0.21.0",
"authors": ["Robert von Burg"],
"keywords": [
"strolch",

2
strolch-wc-inspector-behavior.html
View File

@ -15,6 +15,8 @@
},
toLocalDateTime: function (val) {
if (val == null || val.startsWith("1970-01-01T01:00:00"))
return "-";
return Strolch.toLocalDateTime(val);
},
arrayToString: function (arr) {

120
strolch-wc-sessions.html
View File

@ -49,6 +49,68 @@
--focus-color: #000000;
}
.table {
min-width: 100%;
display: flex;
flex-direction: column;
}
.table-row {
box-sizing: border-box;
display: flex;
flex-direction: row;
margin-top: -1px;
padding-top: 5px;
padding-bottom: 5px;
}
.table-heading {
font-weight: bold;
}
.table-heading,
.table-cell {
display: flex;
padding: 0 12px;
overflow: hidden;
align-items: center;
flex-basis: 80px;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
min-height: 48px;
}
.source {
flex-grow: 0;
flex-basis: 120px;
}
.login-time,
.last-access {
flex-grow: 0;
flex-basis: 160px;
}
.username {
flex-grow: 0;
flex-basis: 250px;
}
.actions {
flex-grow: 0;
flex-basis: 120px;
}
.data {
padding-top: 10px;
padding-bottom: 10px;
}
.data:nth-child(even) {
background: #f7f7f7;
}
</style>
<div class="g-row g-pt-4">
@ -66,47 +128,33 @@
<paper-material elevation="1" class="g-m-3">
<div class="g-row g-pt-4">
<div class="g-12">
<div class="g-row">
<div class="g-2"><b>Username</b></div>
<div class="g-2"><b>Name</b></div>
<div class="g-2"><b>Roles</b></div>
<div class="g-1"><b>Source</b></div>
<div class="g-2"><b>Login time</b></div>
<div class="g-2"><b>Last Access</b></div>
<div class="g-1"></div>
</div>
<template is="dom-repeat" items="[[dataObj.data]]" as="session">
<hr />
<div class="g-row">
<div class="g-2 g-auto-middle">[[session.username]]</div>
<div class="g-2 g-auto-middle">[[_getName(session)]]</div>
<div class="g-2 g-auto-middle">[[arrayToString(session.roles)]]</div>
<div class="g-1 g-auto-middle">[[session.source]]</div>
<div class="g-2 g-auto-middle">[[toLocalDateTime(session.loginTime)]]</div>
<div class="g-2 g-auto-middle">[[toLocalDateTime(session.lastAccess)]]</div>
<div class="g-1 g-auto-middle">
<paper-icon-button icon="delete"
title="Remove"
on-tap="removeSession"></paper-icon-button>
</div>
</div>
</template>
<div class="table">
<div class="table-row">
<div class="table-heading username"><b>Username</b></div>
<div class="table-heading roles"><b>Roles</b></div>
<div class="table-heading source"><b>Source</b></div>
<div class="table-heading login-time"><b>Login time</b></div>
<div class="table-heading last-access"><b>Last Access</b></div>
<div class="table-heading actions"></div>
</div>
<template is="dom-repeat" items="[[dataObj.data]]" as="session">
<div class="table-row data">
<div class="table-cell username">[[session.username]] <br><br>[[_getName(session)]]</div>
<div class="table-cell roles">[[arrayToString(session.roles)]]</div>
<div class="table-cell source">[[session.source]]</div>
<div class="table-cell login-time">[[toLocalDateTime(session.loginTime)]]</div>
<div class="table-cell last-access">[[toLocalDateTime(session.lastAccess)]]</div>
<div class="table-cell actions">
<paper-icon-button icon="delete" title="Remove" on-tap="removeSession"></paper-icon-button>
</div>
</div>
</template>
</div>
<div class="g-row">
<div class="g-3">
</div>
<div class="g-3"></div>
<div class="g-6">
<div class="g-m-2 g-center">
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>

151
strolch-wc-users.html
View File

@ -27,9 +27,7 @@
<dom-module id="strolch-wc-users">
<template>
<style is="custom-style" include="strolch-wc-styles">
:host {
display: block;
margin: 0;
@ -56,6 +54,67 @@
--focus-color: #000000;
}
.table {
min-width: 100%;
display: flex;
flex-direction: column;
}
.table-row {
box-sizing: border-box;
display: flex;
flex-direction: row;
margin-top: -1px;
padding-top: 5px;
padding-bottom: 5px;
}
.table-heading {
font-weight: bold;
}
.table-heading,
.table-cell {
display: flex;
padding: 0 12px;
overflow: hidden;
align-items: center;
flex-basis: 80px;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
min-height: 48px;
}
.state,
.locale {
flex-grow: 0;
}
.username {
flex-grow: 0;
flex-basis: 250px;
}
.actions {
flex-grow: 0;
flex-basis: 120px;
}
.history {
flex-grow: 0;
flex-basis: 250px;
}
.data {
padding-top: 10px;
padding-bottom: 10px;
}
.data:nth-child(even) {
background: #f7f7f7;
}
</style>
<div class="g-row g-pt-4">
@ -74,43 +133,36 @@
<paper-material elevation="1" class="g-ml-3 g-mr-3">
<div class="g-row g-pt-4">
<div class="g-12">
<div class="g-row">
<div class="g-2">Username</div>
<div class="g-3">Name</div>
<div class="g-1">State</div>
<div class="g-1">Locale</div>
<div class="g-3">Roles</div>
<div class="g-2"></div>
</div>
<template is="dom-repeat" items="[[dataObj.data]]">
<hr />
<div class="g-row">
<div class="g-2">[[item.username]]</div>
<div class="g-3">[[_getName(item)]]</div>
<div class="g-1">[[item.userState]]</div>
<div class="g-1">[[item.locale]]</div>
<div class="g-3">[[arrayToString(item.roles)]]</div>
<div class="g-2">
<paper-icon-button icon="create" title="Edit" on-tap="_editUser"></paper-icon-button>
<paper-icon-button icon="lock-outline"
title="Set password"
on-tap="_openPwDlg"></paper-icon-button>
<paper-icon-button icon="delete"
title="Remove"
on-tap="_removeUser"></paper-icon-button>
</div>
</div>
</template>
<div class="table">
<div class="table-row">
<div class="table-heading username">Username / Name</div>
<div class="table-heading state">State</div>
<div class="table-heading locale">Locale</div>
<div class="table-heading roles">Roles</div>
<div class="table-heading history">History</div>
<div class="table-heading actions"></div>
</div>
<template is="dom-repeat" items="[[dataObj.data]]">
<div class="table-row data">
<div class="table-cell username">[[item.username]]<br /><br />[[_getName(item)]]</div>
<div class="table-cell state">[[item.userState]]</div>
<div class="table-cell locale">[[item.locale]]</div>
<div class="table-cell roles">[[arrayToString(item.roles)]]</div>
<div class="table-cell history">
FirstLogin: [[toLocalDateTime(item.history.firstLogin)]]<br /> LastLogin:
[[toLocalDateTime(item.history.lastLogin)]]<br /> PasswordChange:
[[toLocalDateTime(item.history.lastPasswordChange)]]
</div>
<div class="table-cell actions">
<paper-icon-button icon="create" title="Edit" on-tap="_editUser"></paper-icon-button>
<paper-icon-button icon="lock-outline"
title="Set password"
on-tap="_openPwDlg"></paper-icon-button>
<paper-icon-button icon="delete" title="Remove" on-tap="_removeUser"></paper-icon-button>
</div>
</div>
</template>
</div>
<div class="g-row">
@ -146,6 +198,7 @@
<paper-input label="Password" value="{{password0}}" type="password"></paper-input>
<paper-input label="Repeat" value="{{password1}}" type="password"></paper-input>
<div class="buttons">
<paper-button on-tap="_clearPassword">Clear</paper-button>
<paper-button dialog-confirm autofocus>Close</paper-button>
<paper-button on-tap="_setPassword" autofocus>Save</paper-button>
</div>
@ -376,6 +429,22 @@
this.$.ajax.generateRequest();
},
_clearPassword: function (e) {
this.dlgTitle = 'Clear password failed';
this._handleAjaxResponse = function (data) {
this.reload();
this.password0 = '';
this.password1 = '';
this.$.pwDlg.close();
};
this.$.ajax.url = this.basePath + 'rest/strolch/privilege/users/' + this.user.username + '/password';
this.$.ajax.method = 'DELETE';
this.$.ajax.body = {};
this.$.ajax.generateRequest();
},
_removeUser: function (e) {
var user = e.model.item;
if (!confirm('Do you really want to delete user ' + user.username + ': ' + user.firstname + ' ' + user.lastname)) {
@ -442,7 +511,7 @@
return 'User state is not set!';
if (this.isEmptyString(user.locale))
return 'Locale is not set!';
if (this.selectedRoles.length == 0)
if (this.selectedRoles.length === 0)
return 'No role selected!';
return '';
@ -460,7 +529,7 @@
var i = 0;
for (; i < this.user.properties.length; i++) {
if (this.user.properties[i].key == property.key) {
if (this.user.properties[i].key === property.key) {
this.user.properties.splice(i, 1);
this.notifySplices('user.properties', [
{
@ -503,7 +572,7 @@
var role = this.roles[i];
for (var j = 0; j < this.user.roles.length; j++) {
var r = this.user.roles[j];
if (role.name == r)
if (role.name === r)
selectedRoles.push(i);
}
}