From 49b4f6291d0490d649302162c439970759ab760b Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Mon, 6 Feb 2017 18:13:36 +0100
Subject: [PATCH] [Major] Redesigned the pages

---
 bower.json                        |   5 +-
 strolch-wc-inspector-object.html  | 274 ++++++++++++++++++++++--------
 strolch-wc-inspector-objects.html |  42 +++--
 strolch-wc-inspector.html         | 105 ++++++------
 4 files changed, 275 insertions(+), 151 deletions(-)

diff --git a/bower.json b/bower.json
index 3d57fa2..240008f 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-inspector",
   "description": "Strolch WebComponent Inspector",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "authors": "Robert von Burg",
   "keywords": [
     "strolch",
@@ -23,6 +23,9 @@
     "iron-ajax": "PolymerElements/iron-ajax#^1.4.3",
     "iron-pages": "PolymerElements/iron-pages#^1.0.8",
     "iron-icons": "PolymerElements/iron-icons#^1.2.0",
+    "paper-header-panel": "PolymerElements/paper-header-panel#^1.1.7",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4",
     "paper-tabs": "PolymerElements/paper-tabs#^1.7.0",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.5.0",
     "paper-listbox": "polymerelements/paper-listbox#^1.1.2",
diff --git a/strolch-wc-inspector-object.html b/strolch-wc-inspector-object.html
index 70e929b..719b177 100644
--- a/strolch-wc-inspector-object.html
+++ b/strolch-wc-inspector-object.html
@@ -1,6 +1,11 @@
 <link rel="import" href="../polymer/polymer.html">
 
+<link rel="import" href="../paper-toolbar/paper-toolbar.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">
@@ -23,81 +28,86 @@
                 cursor: pointer;
             }
 
-            .title {
-                font-weight: bold;
-            }
-
             .table-title td {
                 border: none;
                 padding: 0;
             }
 
+            paper-material {
+                border-radius: 2px;
+                background-color: #ffffff;
+            }
+
+            paper-toolbar {
+                --paper-toolbar-height: 42px;
+                --paper-toolbar-background: var(--google-grey-300);
+                --paper-toolbar-color: var(--google-grey-700);
+            }
+
+            paper-tabs {
+                --paper-tabs-selection-bar-color: var(--paper-amber-600);
+                background-color: #ffffff;
+                color: #000000;
+            }
+
         </style>
 
-        <paper-material class="card" elevation="1">
+        <paper-material class="mt-4" elevation="1">
+            <paper-toolbar on-tap="_toggleExpanded">
+                <span class="title">[[objectName]] [[summary.id]] / [[summary.name]] / [[summary.type]]</span>
+                <paper-icon-button id="expandedIcon" icon="expand-more"></paper-icon-button>
+            </paper-toolbar>
 
-            <div class="row">
-                <div class="col-6">
+            <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>
 
-                    <table class="table table-sm table-title">
-                        <tr>
-                            <td><span class="title">Id</span></td>
-                            <td>[[summary.id]]</td>
-                        </tr>
-                        <tr>
-                            <td><span class="title">Name</span></td>
-                            <td>[[summary.name]]</td>
-                        </tr>
-                        <tr>
-                            <td><span class="title">Type</span></td>
-                            <td>[[summary.type]]</td>
-                        </tr>
-                    </table>
+            <iron-pages selected="[[selectedDetailType]]" attr-for-selected="name">
 
-                </div>
-            </div>
+                <!-- parameters -->
+                <section name="parameters">
+                    <template is="dom-if" if="[[!details]]">
+                        <p class="m-4 text-center">Loading...</p>
+                    </template>
+                    <template is="dom-if" if="[[details]]">
 
-            <div class="row" on-tap="toggleDetails">
-                <div class="col-12" hidden="[[!hideDetails]]">
-                    <paper-material class="card" elevation="1">
-                        Show parameters
-                    </paper-material>
-                </div>
-                <div class="col-12" hidden="[[hideDetails]]">
-
-                    <paper-material class="card" elevation="1">
-                        <h5>Parameters</h5>
-                        <template is="dom-if" if="[[!details]]">
-                            <p class="title text-center">Loading details...</p>
+                        <template is="dom-if" if="[[_isEmpty(details.parameterBags)]]">
+                            <p class="m-4 text-center">No parameters defined on [[objectName]] [[summary.id]]</p>
                         </template>
-                        <template is="dom-if" if="[[details]]">
+                        <template is="dom-if" if="[[_isNotEmpty(details.parameterBags)]]">
 
-                            <table class="table">
+                            <table class="table table-sm">
                                 <thead>
                                 <tr>
                                     <th>ParameterBag</th>
                                     <th>Parameter Id</th>
                                     <th>Name</th>
-                                    <th>Type</th>
                                     <th>Interpretation</th>
                                     <th>UOM</th>
+                                    <th>Type</th>
                                     <th>Value</th>
                                 </tr>
                                 </thead>
 
                                 <tbody>
 
-                                <template is="dom-repeat" items="{{_toArray(details.parameterBags)}}" as="bag">
-                                    <template is="dom-repeat" items="{{_toArray(bag.parameters)}}" as="param">
+                                <template is="dom-repeat" items="{{_asArray(details.parameterBags)}}" as="bag">
+                                    <template is="dom-repeat" items="{{_asArray(bag.value.parameters)}}" as="param">
 
                                         <tr>
-                                            <td>[[bag.id]]</td>
-                                            <td>[[param.id]]</td>
-                                            <td>[[param.name]]</td>
-                                            <td>[[param.type]]</td>
-                                            <td>[[param.interpretation]]</td>
-                                            <td>[[param.uom]]</td>
-                                            <td>[[param.value]]</td>
+                                            <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>
@@ -105,12 +115,104 @@
 
                                 </tbody>
                             </table>
+                        </template>
+
+                    </template>
+                </section>
+
+                <!-- policies -->
+                <section name="policies">
+                    <template is="dom-if" if="[[!details]]">
+                        <p class="m-4 text-center">Loading...</p>
+                    </template>
+                    <template is="dom-if" if="[[details]]">
+
+                        <template is="dom-if" if="[[_isEmpty(details.policies)]]">
+                            <p class="m-4 text-center">No policies defined on [[objectName]] [[summary.id]]</p>
+                        </template>
+                        <template is="dom-if" if="[[_isNotEmpty(details.policies)]]">
+
+                            <table class="table table-sm">
+                                <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">
+                        <template is="dom-if" if="[[!details]]">
+                            <p class="m-4 text-center">Loading...</p>
+                        </template>
+                        <template is="dom-if" if="[[details]]">
+
+                            <template is="dom-if" if="[[_isEmpty(details.timedStates)]]">
+                                <p class="m-4 text-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="card" elevation="1">
+                                        <table class="table table-sm 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="table table-sm">
+                                            <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>
-                    </paper-material>
+                    </section>
+                </template>
+
+            </iron-pages>
 
-                </div>
-            </div>
         </paper-material>
 
         <iron-ajax id="ajax"
@@ -135,19 +237,19 @@
                     }
                 },
                 realm: {
-                    type: Object,
+                    type: String,
                     value: function () {
                         return null;
                     }
                 },
                 objectName: {
-                    type: Object,
+                    type: String,
                     value: function () {
                         return null;
                     }
                 },
                 objectType: {
-                    type: Object,
+                    type: String,
                     value: function () {
                         return null;
                     }
@@ -164,38 +266,70 @@
                         return null;
                     }
                 },
-                hideDetails: {
+                expanded: {
                     type: Boolean,
                     value: function () {
-                        return true;
+                        return false;
                     }
+                },
+                selectedDetailType: {
+                    type: String,
+                    value: function () {
+                        return true;
+                    },
+                    observer: "selectedDetailTypeChanged"
                 }
             },
 
-            _isResource: function () {
-                return this.objectType == 'Resource';
+            _isResource: function (objectType) {
+                return objectType == 'resources';
             },
-            _isOrder: function () {
-                return this.objectType == 'Order';
+            _isOrder: function (objectType) {
+                return objectType == 'orders';
             },
-            _isActivity: function () {
-                return this.objectType == 'Activity';
+            _isActivity: function (objectType) {
+                return objectType == 'activities';
             },
 
-            _toArray: function (obj) {
+            _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 obj[key];
+                    return {
+                        key: key,
+                        value: obj[key]
+                    };
                 });
             },
 
-            toggleDetails: function () {
-                this.hideDetails = !this.hideDetails;
+            _toggleExpanded: function (evt) {
+                this.expanded = !this.expanded;
+                this.$.expandedIcon.icon = this.expanded ? 'expand-less' : 'expand-more';
 
-                if (!this.hideDetails && this.details == null) {
-                    var that = this;
-                    setTimeout(function () {
-                        that.reloadDetails();
-                    }, 1000);
+                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();
                 }
             },
 
diff --git a/strolch-wc-inspector-objects.html b/strolch-wc-inspector-objects.html
index 2155023..7d1848b 100644
--- a/strolch-wc-inspector-objects.html
+++ b/strolch-wc-inspector-objects.html
@@ -1,5 +1,7 @@
 <link rel="import" href="../polymer/polymer.html">
 
+<link rel="import" href="../paper-toolbar/paper-toolbar.html">
+
 <link rel="import" href="../iron-ajax/iron-ajax.html">
 <link rel="import" href="../iron-pages/iron-pages.html">
 
@@ -24,11 +26,15 @@
                 font-size: 1rem;
             }
 
-            table {
+            .card {
                 cursor: pointer;
                 border-style: none;
             }
 
+            paper-toolbar {
+                --paper-toolbar-height: 42px;
+            }
+
         </style>
 
         <template is="dom-if" if="[[_noElements(objectData)]]" restamp>
@@ -40,36 +46,26 @@
             <iron-pages selected="{{section}}" attr-for-selected="name">
 
                 <section name="typesSummary">
-                    <table class="table table-sm table-hover">
-                        <thead>
-                        <tr>
-                            <th>Size</th>
-                            <th>Type</th>
-                        </tr>
-                        </thead>
 
-                        <tbody>
-
-                        <template is="dom-repeat" items="[[objectData.types]]">
-                            <tr on-tap="_showTypeDetails">
-                                <td>[[item.size]]</td>
-                                <td>[[item.type]]</td>
-                            </tr>
-                        </template>
-
-                        </tbody>
-
-                    </table>
+                    <template is="dom-repeat" items="[[objectData.types]]">
+                        <div class="row justify-content-center">
+                            <div class="col-4">
+                                <paper-material class="card m-2 p-4" elevation="1" on-tap="_showTypeDetails">
+                                    <p>[[objectName]] of type <b>[[item.type]]</b> ([[item.size]])</p>
+                                </paper-material>
+                            </div>
+                        </div>
+                    </template>
                 </section>
 
                 <section name="typeDetails">
 
                     <div class="row">
                         <div class="col-12">
-                            <h5 class="mt-2">
-                                <paper-icon-button icon="close" on-tap="_closeTypeDetails"></paper-icon-button>
+                            <paper-toolbar>
+                                <paper-icon-button icon="arrow-back" on-tap="_closeTypeDetails"></paper-icon-button>
                                 <span class="align-text-bottom">Showing [[objectName]] objects of type [[selectedType]]</span>
-                            </h5>
+                            </paper-toolbar>
 
                             <hr />
 
diff --git a/strolch-wc-inspector.html b/strolch-wc-inspector.html
index 756e086..9d6a5bb 100644
--- a/strolch-wc-inspector.html
+++ b/strolch-wc-inspector.html
@@ -28,25 +28,16 @@
                 height: 100%;
             }
 
-            .toolbar-row {
+            .toolbar {
                 background-color: var(--paper-blue-600);
-                margin: 0;
-                padding: 0;
-            }
-
-            .toolbar-cell {
-                margin: 0;
-                padding: 0;
+                height: 42px;
             }
 
             paper-tabs {
-                --paper-tabs-selection-bar-color: var(--paper-amber-600);
                 margin: 0;
                 padding: 0;
                 height: 100%;
-            }
-
-            paper-tabs {
+                --paper-tabs-selection-bar-color: var(--paper-amber-600);
                 background-color: var(--paper-blue-600);
                 color: #fff;
             }
@@ -93,63 +84,63 @@
 
         </style>
 
-        <div class="row toolbar-row">
+        <div class="row">
 
-            <div class="col-3 toolbar-cell">
+            <div class="col-3 pr-0">
 
-                <paper-dropdown-menu no-label-float="true" label="select realm" class="custom">
-                    <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
+                <div class="toolbar">
 
-                        <template is="dom-repeat" items="{{realms}}">
-                            <paper-item value="[[item.name]]">[[item.name]] ([[item.size]])</paper-item>
-                        </template>
+                    <paper-dropdown-menu no-label-float="true" label="select realm" class="custom">
+                        <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
 
-                    </paper-listbox>
-                </paper-dropdown-menu>
+                            <template is="dom-repeat" items="{{realms}}">
+                                <paper-item value="[[item.name]]">[[item.name]] ([[item.size]])</paper-item>
+                            </template>
+
+                        </paper-listbox>
+                    </paper-dropdown-menu>
+                </div>
 
             </div>
-            <div class="col-9 toolbar-cell">
-                <template is="dom-if" if="[[selectedRealm]]">
-                    <paper-tabs selected="{{selectedObjectType}}" attr-for-selected="name">
-                        <paper-tab name="resources">[[resourcesSummary]]</paper-tab>
-                        <paper-tab name="orders">[[ordersSummary]]</paper-tab>
-                        <paper-tab name="activities">[[activitiesSummary]]</paper-tab>
-                    </paper-tabs>
-                </template>
+            <div class="col-9 pl-0">
+                <div class="toolbar">
+                    <template is="dom-if" if="[[selectedRealm]]">
+                        <paper-tabs selected="{{selectedObjectType}}" attr-for-selected="name">
+                            <paper-tab name="resources">[[resourcesSummary]]</paper-tab>
+                            <paper-tab name="orders">[[ordersSummary]]</paper-tab>
+                            <paper-tab name="activities">[[activitiesSummary]]</paper-tab>
+                        </paper-tabs>
+                    </template>
+                </div>
             </div>
         </div>
 
         <div class="row">
 
             <div class="col-12">
-
-                <paper-material elevation="1">
-
-                    <iron-pages selected="{{selectedObjectType}}" attr-for-selected="name">
-                        <div name="resources">
-                            <strolch-wc-inspector-objects app="[[app]]"
-                                                          realm="[[selectedRealm]]"
-                                                          object-name="Resource"
-                                                          object-type="resources"
-                                                          object-data="[[resources]]"></strolch-wc-inspector-objects>
-                        </div>
-                        <div name="orders">
-                            <strolch-wc-inspector-objects app="[[app]]"
-                                                          realm="[[selectedRealm]]"
-                                                          object-name="Order"
-                                                          object-type="orders"
-                                                          object-data="[[orders]]"></strolch-wc-inspector-objects>
-                        </div>
-                        <div name="activities">
-                            <strolch-wc-inspector-objects app="[[app]]"
-                                                          realm="[[selectedRealm]]"
-                                                          object-name="Activity"
-                                                          object-type="activities"
-                                                          object-data="[[activities]]"></strolch-wc-inspector-objects>
-                        </div>
-                    </iron-pages>
-
-                </paper-material>
+                <iron-pages selected="{{selectedObjectType}}" attr-for-selected="name">
+                    <section name="resources">
+                        <strolch-wc-inspector-objects app="[[app]]"
+                                                      realm="[[selectedRealm]]"
+                                                      object-name="Resource"
+                                                      object-type="resources"
+                                                      object-data="[[resources]]"></strolch-wc-inspector-objects>
+                    </section>
+                    <section name="orders">
+                        <strolch-wc-inspector-objects app="[[app]]"
+                                                      realm="[[selectedRealm]]"
+                                                      object-name="Order"
+                                                      object-type="orders"
+                                                      object-data="[[orders]]"></strolch-wc-inspector-objects>
+                    </section>
+                    <section name="activities">
+                        <strolch-wc-inspector-objects app="[[app]]"
+                                                      realm="[[selectedRealm]]"
+                                                      object-name="Activity"
+                                                      object-type="activities"
+                                                      object-data="[[activities]]"></strolch-wc-inspector-objects>
+                    </section>
+                </iron-pages>
             </div>
 
         </div>