strolch-wc-sessions.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-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-app-style">

            :host {
                display: block;
                margin: 0;
                padding: 0;
            }

            paper-material {
                padding: 4px;
                margin: 0 0 8px;
            }

            .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: 1;
                flex-shrink: 1;
                flex-basis: 100px;
            }

            .login-time,
            .last-access {
               flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 100px;
            }

            .username {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 100px;
            }

            .groups, .roles {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 100px;
            }

            .actions {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 100px;
            }

            .data {
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .data:nth-child(even) {
                background: #f7f7f7;
            }

        </style>

        <div class="actions actions-right">
            <paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
        </div>

        <paper-material elevation="1">

            <div class="table">
                <div class="table-row">
                    <div class="table-heading username"><b>Username</b></div>
                    <div class="table-heading groups"><b>Groups</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 groups">[[arrayToString(session.groups)]]</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) {
                if (newValue != 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>