306 lines
10 KiB
HTML
306 lines
10 KiB
HTML
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../iron-ajax/iron-ajax.html">
|
|
<link rel="import" href="../iron-pages/iron-pages.html">
|
|
|
|
<link rel="import" href="../paper-styles/color.html">
|
|
|
|
<link rel="import" href="../paper-material/paper-material.html">
|
|
<link rel="import" href="../paper-dialog/paper-dialog.html">
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
|
|
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
|
|
<link rel="import" href="../paper-item/paper-item.html">
|
|
<link rel="import" href="../paper-listbox/paper-listbox.html">
|
|
|
|
<link rel="import" href="../paper-tabs/paper-tabs.html">
|
|
|
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
|
<link rel="import" href="../strolch-wc-debounced-input/strolch-wc-debounced-input.html">
|
|
|
|
<link rel="import" href="strolch-wc-inspector-behavior.html">
|
|
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
|
|
|
|
<dom-module id="strolch-wc-sessions">
|
|
|
|
<template>
|
|
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
|
|
:host {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
paper-material {
|
|
background: white;
|
|
margin-top: 0.3em;
|
|
margin-bottom: 0.3em;
|
|
padding: 0.3em;
|
|
}
|
|
|
|
strolch-wc-debounced-input {
|
|
max-width: 200px;
|
|
display: inline-flex;
|
|
|
|
--regular-color: #919191;
|
|
--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">
|
|
<div class="g-12">
|
|
<paper-icon-button class="g-pull-right"
|
|
icon="refresh"
|
|
title="Refresh"
|
|
on-tap="reload"></paper-icon-button>
|
|
<strolch-wc-debounced-input id="debouncedInput"
|
|
class="g-pull-right"
|
|
debounced-input="{{searchTerm}}"
|
|
disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
|
|
</div>
|
|
</div>
|
|
|
|
<paper-material elevation="1" class="g-m-3">
|
|
|
|
<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-6">
|
|
<div class="g-m-2 g-center">
|
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
|
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
|
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</span>
|
|
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
|
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
|
</div>
|
|
</div>
|
|
<div class="g-3">
|
|
<paper-button on-tap="_setLimit">10</paper-button>
|
|
<paper-button on-tap="_setLimit">50</paper-button>
|
|
<paper-button on-tap="_setLimit">100</paper-button>
|
|
</div>
|
|
</div>
|
|
|
|
</paper-material>
|
|
|
|
<paper-dialog id="dlg" modal>
|
|
<h2>[[dlgTitle]]</h2>
|
|
<p>[[dlgText]]</p>
|
|
<div class="buttons">
|
|
<paper-button dialog-confirm autofocus>Close</paper-button>
|
|
</div>
|
|
</paper-dialog>
|
|
|
|
<iron-ajax id="ajax"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
on-response="_handleAjaxResponse"
|
|
on-error="onAjaxError"></iron-ajax>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: 'strolch-wc-sessions',
|
|
|
|
behaviors: [
|
|
StrolchInspectorBehavior,
|
|
StrolchInspectorPagingBehavior
|
|
],
|
|
|
|
properties: {
|
|
sessions: {
|
|
type: Array
|
|
},
|
|
searchTerm: {
|
|
type: String,
|
|
observer: 'searchTermChanged'
|
|
},
|
|
propagateShowDialog: {
|
|
type: Boolean,
|
|
value: function () {
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
|
|
toLocalDateTime: function (val) {
|
|
return Strolch.toLocalDateTime(val);
|
|
},
|
|
arrayToString: function (arr) {
|
|
var s = '';
|
|
for (var i = 0; i < arr.length; i++) {
|
|
s += arr[i];
|
|
if (i + 1 < arr.length)
|
|
s += ', ';
|
|
}
|
|
|
|
return s;
|
|
},
|
|
_getName: function (user) {
|
|
return user.firstname + ' ' + user.lastname;
|
|
},
|
|
|
|
listeners: {
|
|
"strolch-show-dialog": "onShowDialog"
|
|
},
|
|
onShowDialog: function (event) {
|
|
if (!this.propagateShowDialog) {
|
|
event.cancelBubble = true;
|
|
event.stopPropagation();
|
|
this.showError(event.detail.title, event.detail.text);
|
|
}
|
|
},
|
|
showError: function (title, text) {
|
|
this.dlgTitle = title;
|
|
this.dlgText = text;
|
|
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
|
this.$.dlg.open();
|
|
},
|
|
|
|
searchTermChanged: function (newValue, oldValue) {
|
|
if (newValue != null && oldValue != null) {
|
|
this.queryPage();
|
|
}
|
|
},
|
|
|
|
ready: function () {
|
|
//
|
|
},
|
|
|
|
reload: function () {
|
|
this.queryPage();
|
|
},
|
|
|
|
queryPage: function () {
|
|
|
|
this.dlgTitle = 'Sessions query failed';
|
|
this._handleAjaxResponse = function (data) {
|
|
this.dataObj = data.detail.response;
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/sessions';
|
|
this.$.ajax.method = 'GET';
|
|
this.$.ajax.params = {
|
|
query: this.searchTerm,
|
|
offset: this.dataObj.offset,
|
|
limit: this.dataObj.limit,
|
|
orderBy: 'username'
|
|
};
|
|
this.$.ajax.generateRequest();
|
|
},
|
|
|
|
removeSession: function (evt) {
|
|
var sessionId = evt.model.session.sessionId;
|
|
|
|
this.dlgTitle = 'Remove session failed';
|
|
this._handleAjaxResponse = function (data) {
|
|
this.reload();
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/sessions/' + sessionId;
|
|
this.$.ajax.method = 'DELETE';
|
|
this.$.ajax.generateRequest();
|
|
},
|
|
|
|
_handleAjaxResponse: function (evt) {
|
|
console.log('NOT YET DEFINED!');
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|