strolch-wc-inspector/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">

<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;
            }

        </style>

        <div class="g-row g-pt-4">
            <div class="g-12 g-right">
                <paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
            </div>
        </div>

        <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-3"><b>Roles</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="[[sessions]]">

                        <hr />

                        <div class="g-row">
                            <div class="g-2 g-auto-middle">[[item.username]]</div>
                            <div class="g-2 g-auto-middle">[[_getName(item)]]</div>
                            <div class="g-3 g-auto-middle">[[arrayToString(item.roles)]]</div>
                            <div class="g-2 g-auto-middle">[[toLocalDateTime(item.loginTime)]]</div>
                            <div class="g-2 g-auto-middle">[[toLocalDateTime(item.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>

            </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
            ],

            properties: {
                sessions: {
                    type: Array
                }
            },

            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) {
                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();
            },

            ready: function () {
                //
            },

            reload: function () {

                this.dlgTitle = 'Sessions query failed';
                this._handleAjaxResponse = function (data) {
                    this.sessions = data.detail.response;
                };

                this.$.ajax.url = this.basePath + 'rest/strolch/sessions';
                this.$.ajax.method = 'GET';
                this.$.ajax.generateRequest();
            },

            removeSession: function (evt) {
                var sessionId = evt.model.item.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>