strolch-wc-inspector/strolch-wc-inspector-object.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.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-styles/default-theme.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="../paper-styles/typography.html">

<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">

<dom-module id="strolch-wc-inspector-object">

    <template>

        <style is="strolch-wc-styles">

            :host {
                display: block;
            }

            .card {
                padding: 1.0em;
                margin: 1.0em;
                cursor: pointer;
            }

            .title-bar {
                background-color: var(--google-grey-300);
                color: var(--google-grey-700);
            }

            .title {
                padding: 8px;
                background-color: rgb(224, 224, 224);
                color: rgb(97, 97, 97);
                font-size: 20px;
                font-weight: 400;
                line-height: 1.3;
                margin: 0;
            }

            .sub {
                font-size: small;
            }

            .table-title {
                margin-bottom: 0;
                padding: 0;
            }

            paper-material {
                border-radius: 2px;
                background-color: #ffffff;
            }

            paper-tabs {
                border-top: solid #7F7F7F 1px;
                --paper-tabs-selection-bar-color: var(--paper-amber-600);
                background-color: #ffffff;
                color: #000000;
            }

        </style>

        <paper-material class="g-card g-m-3 g-mt-4" elevation="1">

            <div class="g-container">
                <div class="g-row title-bar" on-tap="_toggleExpanded">

                    <div class="g-11">
                        <h1 class="title"><span class="sub g-ml-4">Id:</span> [[summary.id]] <span class="sub g-ml-4">Name:</span>
                                                                              [[summary.name]] <span class="sub g-ml-4">Type:</span>
                                                                              [[summary.type]]
                            <template is="dom-if" if="[[_isOrderOrActivity(objectType)]]">
                                <br /> <span class="sub g-ml-4">State:</span> [[summary.state]]
                                <span class="sub g-ml-4">Date:</span> [[_formatDate(summary.date)]]
                            </template>
                        </h1>
                    </div>

                    <div class="g-1">
                        <paper-icon-button id="expandedIcon" icon="expand-more"></paper-icon-button>
                    </div>

                </div>
                <div class="g-row">
                    <div class="g-12">


                        <template is="dom-if" if="[[expanded]]">
                            <paper-tabs selected="{{selectedDetailType}}" attr-for-selected="name">
                                <paper-tab name="parameters">Parameters</paper-tab>
                                <paper-tab name="policies">Policies</paper-tab>
                                <template is="dom-if" if="[[_isResource(objectType)]]">
                                    <paper-tab name="timedstates">Timed States</paper-tab>
                                </template>
                            </paper-tabs>
                        </template>

                        <iron-pages selected="[[selectedDetailType]]" attr-for-selected="name">

                            <!-- parameters -->
                            <section name="parameters" class="g-p-2 g-pt-0">
                                <template is="dom-if" if="[[!details]]">
                                    <p class="g-center">Loading...</p>
                                </template>
                                <template is="dom-if" if="[[details]]">

                                    <template is="dom-if" if="[[_isEmpty(details.parameterBags)]]">
                                        <p class="g-center">No parameters defined on [[objectName]] [[summary.id]]</p>
                                    </template>
                                    <template is="dom-if" if="[[_isNotEmpty(details.parameterBags)]]">

                                        <table class="g-table">
                                            <thead>
                                            <tr>
                                                <th>ParameterBag</th>
                                                <th>Parameter Id</th>
                                                <th>Name</th>
                                                <th>Interpretation</th>
                                                <th>UOM</th>
                                                <th>Type</th>
                                                <th>Value</th>
                                            </tr>
                                            </thead>

                                            <tbody>

                                            <template is="dom-repeat"
                                                      items="{{_asArray(details.parameterBags)}}"
                                                      as="bag">
                                                <template is="dom-repeat"
                                                          items="{{_asArray(bag.value.parameters)}}"
                                                          as="param">

                                                    <tr>
                                                        <td>[[bag.value.id]]</td>
                                                        <td>[[param.value.id]]</td>
                                                        <td>[[param.value.name]]</td>
                                                        <td>[[param.value.interpretation]]</td>
                                                        <td>[[param.value.uom]]</td>
                                                        <td>[[param.value.type]]</td>
                                                        <td>[[param.value.value]]</td>
                                                    </tr>

                                                </template>
                                            </template>

                                            </tbody>
                                        </table>
                                    </template>

                                </template>
                            </section>

                            <!-- policies -->
                            <section name="policies" class="g-p-2 g-pt-0">
                                <template is="dom-if" if="[[!details]]">
                                    <p class="g-m-4 g-center">Loading...</p>
                                </template>
                                <template is="dom-if" if="[[details]]">

                                    <template is="dom-if" if="[[_isEmpty(details.policies)]]">
                                        <p class="g-pt-4 g-center">No policies defined on [[objectName]]
                                                                   [[summary.id]]</p>
                                    </template>
                                    <template is="dom-if" if="[[_isNotEmpty(details.policies)]]">

                                        <table class="g-table">
                                            <thead>
                                            <tr>
                                                <th>Type</th>
                                                <th>Value</th>
                                            </tr>
                                            </thead>

                                            <tbody>

                                            <template is="dom-repeat"
                                                      items="{{_asArray(details.policies)}}"
                                                      as="policy">

                                                <tr>
                                                    <td>[[policy.key]]</td>
                                                    <td>[[policy.value]]</td>
                                                </tr>

                                            </template>

                                            </tbody>
                                        </table>
                                    </template>

                                </template>
                            </section>

                            <!-- timedstates -->
                            <template is="dom-if" if="[[_isResource(objectType)]]">
                                <section name="timedstates" class="g-p-2 g-pt-0">
                                    <template is="dom-if" if="[[!details]]">
                                        <p class="g-center">Loading...</p>
                                    </template>
                                    <template is="dom-if" if="[[details]]">

                                        <template is="dom-if" if="[[_isEmpty(details.timedStates)]]">
                                            <p class="g-pt-4 g-center">No timed states defined on [[objectName]]
                                                                       [[summary.id]]</p>
                                        </template>
                                        <template is="dom-if" if="[[_isNotEmpty(details.timedStates)]]">
                                            <template is="dom-repeat"
                                                      items="[[_asArray(details.timedStates)]]"
                                                      as="timedState">

                                                <paper-material class="g-card" elevation="1">
                                                    <table class="g-table table-title">
                                                        <tbody>
                                                        <tr>
                                                            <td><b>Id</b> [[timedState.value.id]]</td>
                                                            <td><b>Name</b> [[timedState.value.name]]</td>
                                                            <td><b>Type</b> [[timedState.value.type]]</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>

                                                    <table class="g-table">
                                                        <thead>
                                                        <tr>
                                                            <th>Time</th>
                                                            <th>Value</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <template is="dom-repeat"
                                                                  items="[[timedState.value.values]]"
                                                                  as="timedStateValue">
                                                            <tr>
                                                                <td>[[timedStateValue.time]]</td>
                                                                <td>[[timedStateValue.value]]</td>
                                                            </tr>
                                                        </template>
                                                        </tbody>
                                                    </table>

                                                </paper-material>

                                            </template>
                                        </template>

                                    </template>
                                </section>
                            </template>

                        </iron-pages>

                    </div>
                </div>
            </div>

        </paper-material>

        <iron-ajax id="ajax"
                   content-type="application/json"
                   handle-as="json"
                   on-response="_handleAjaxResponse"
                   on-error="_handleAjaxError"></iron-ajax>

    </template>

    <script>

        Polymer({

            is: 'strolch-wc-inspector-object',

            properties: {
                app: {
                    type: Object,
                    value: function () {
                        return null;
                    }
                },
                basePath: {
                    type: String,
                    value: './'
                },
                realm: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                objectName: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                objectType: {
                    type: String,
                    value: function () {
                        return null;
                    }
                },
                summary: {
                    type: Object,
                    value: function () {
                        return null;
                    }
                },
                details: {
                    type: Object,
                    value: function () {
                        return null;
                    }
                },
                expanded: {
                    type: Boolean,
                    value: function () {
                        return false;
                    }
                },
                selectedDetailType: {
                    type: String,
                    value: function () {
                        return true;
                    },
                    observer: "selectedDetailTypeChanged"
                }
            },

            _isResource: function (objectType) {
                return objectType == 'resources';
            },
            _isOrder: function (objectType) {
                return objectType == 'orders';
            },
            _isActivity: function (objectType) {
                return objectType == 'activities';
            },
            _isOrderOrActivity: function (objectType) {
                return this._isOrder(objectType) || this._isActivity(objectType);
            },

            _isEmpty: function (obj) {
                if (obj == null)
                    return true;
                if (obj instanceof Array) {
                    return obj.length == 0;
                } else if (obj instanceof Object) {
                    return Object.keys(obj).length == 0;
                }

                return true;
            },
            _isNotEmpty: function (obj) {
                return !this._isEmpty(obj);
            },

            _asArray: function (obj) {
                if (!obj)
                    return [];
                return Object.keys(obj).map(function (key) {
                    return {
                        key: key,
                        value: obj[key]
                    };
                });
            },

            _formatDate: function (date) {
                return Strolch.toDateTime(date);
            },

            _toggleExpanded: function (evt) {
                this.expanded = !this.expanded;
                this.$.expandedIcon.icon = this.expanded ? 'expand-less' : 'expand-more';

                if (!this.expanded) {
                    this.selectedDetailType = null;
                }
            },

            selectedDetailTypeChanged: function (newValue, oldValue) {
                if (newValue != null) {
                    console.log('Selected detail type type changed from ' + oldValue + " to " + newValue);
                    this.reloadDetails();
                }
            },

            reloadDetails: function () {

                this.details = null;

                this._handleAjaxResponse = function (data) {
                    this.details = data.detail.response;
                };

                this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.summary.type + '/' + this.summary.id;
                this.$.ajax.method = 'GET';
                this.$.ajax.generateRequest();
            },

            ready: function () {

            },

            reload: function () {

            },

            _handleAjaxResponse: function (evt) {
                console.log('NOT YET DEFINED!');
            },

            _handleAjaxError: function (data) {
                var dlgTitle = 'Debug action failed';
                var dlgText;
                if (data.detail.request.response) {
                    dlgText = data.detail.request.response.msg;
                } else {
                    dlgText = data.detail.error;
                }
                this.app.showError(dlgTitle, dlgText);
            }
        });

    </script>

</dom-module>