From 9da093dea552fb2ab45361398a14055d7837c637 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Tue, 7 Feb 2017 18:46:52 +0100
Subject: [PATCH] [Major] Removed bootstrap and using strolch-wc-styles

---
 bower.json                        |  10 +-
 demo/c-app.html                   | 274 ++++++++++++++++++++++++++++++
 demo/c-view404.html               |  23 +++
 demo/index.html                   |  36 ++++
 strolch-wc-inspector-object.html  |  27 +--
 strolch-wc-inspector-objects.html |  28 +--
 strolch-wc-inspector.html         |  33 ++--
 7 files changed, 395 insertions(+), 36 deletions(-)
 create mode 100644 demo/c-app.html
 create mode 100644 demo/c-view404.html
 create mode 100644 demo/index.html

diff --git a/bower.json b/bower.json
index 240008f..76774b1 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-inspector",
   "description": "Strolch WebComponent Inspector",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "authors": "Robert von Burg",
   "keywords": [
     "strolch",
@@ -17,9 +17,10 @@
   "homepage": "https://github.com/4treesCH/strolch-wc-inspector",
   "ignore": [],
   "dependencies": {
-    "bootstrap": "v4.0.0-alpha.6",
+    "strolch-wc-styles" : "4treesCH/strolch-wc-styles#^0.1.2",
+    "app-route": "PolymerElements/app-route#^0.9.3",
+    "app-layout": "PolymerElements/app-layout#^0.10.6",
     "paper-material": "PolymerElements/paper-material#^1.0.6",
-    "components-font-awesome": "^4.7.0",
     "iron-ajax": "PolymerElements/iron-ajax#^1.4.3",
     "iron-pages": "PolymerElements/iron-pages#^1.0.8",
     "iron-icons": "PolymerElements/iron-icons#^1.2.0",
@@ -30,5 +31,8 @@
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.5.0",
     "paper-listbox": "polymerelements/paper-listbox#^1.1.2",
     "paper-item": "PolymerElements/paper-item#^1.2.1"
+  },
+  "devDependencies": {
+    "strolch-wc-auth" : "4treesCH/strolch-wc-auth#^0.2.2"
   }
 }
diff --git a/demo/c-app.html b/demo/c-app.html
new file mode 100644
index 0000000..b6493e2
--- /dev/null
+++ b/demo/c-app.html
@@ -0,0 +1,274 @@
+<link rel="import" href="../../polymer/polymer.html">
+
+<link rel="import" href="../../iron-pages/iron-pages.html">
+<link rel="import" href="../../iron-selector/iron-selector.html">
+<link rel="import" href="../../iron-icons/iron-icons.html">
+
+<link rel="import" href="../../app-route/app-location.html">
+<link rel="import" href="../../app-route/app-route.html">
+
+<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../app-layout/app-drawer/app-drawer.html">
+<link rel="import" href="../../app-layout/app-drawer-layout/app-drawer-layout.html">
+
+<link rel="import" href="../../paper-icon-button/paper-icon-button.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">
+<link rel="import" href="../../strolch-wc-auth/strolch-wc-auth.html">
+<link rel="import" href="../../strolch-wc-inspector/strolch-wc-inspector.html">
+<link rel="import" href="./c-view404.html">
+
+<dom-module id="c-app">
+
+    <template>
+
+        <style is="strolch-wc-styles">
+
+            :host {
+                --app-primary-color: var(--paper-blue-900);
+                --app-secondary-color: black;
+                display: block;
+                margin: 0;
+                padding: 0;
+            }
+
+            app-header {
+                color: #fff;
+                background-color: var(--app-primary-color);
+            }
+
+            app-header paper-icon-button {
+                --paper-icon-button-ink-color: white;
+            }
+
+            app-toolbar {
+                background-color: var(--paper-blue-900);
+                color: #fff;
+            }
+
+            .drawer-list {
+                margin: 0 20px;
+            }
+
+            .drawer-list a {
+                display: block;
+                padding: 0 16px;
+                text-decoration: none;
+                color: var(--app-secondary-color);
+                line-height: 40px;
+            }
+
+            .drawer-list a.iron-selected {
+                color: black;
+                font-weight: bold;
+            }
+
+        </style>
+
+        <app-location route="{{route}}" use-hash-as-path></app-location>
+        <app-route route="{{route}}" pattern="/:view" data="{{routeData}}" tail="{{subroute}}"></app-route>
+
+        <app-drawer-layout fullbleed force-narrow>
+            <!-- Drawer content -->
+            <app-drawer id="drawer" opened="false">
+                <app-toolbar>Menu</app-toolbar>
+                <iron-selector selected="[[routeData.view]]"
+                               attr-for-selected="name"
+                               class="drawer-list"
+                               role="navigation"
+                               hidden="[[sessionInvalid]]">
+                    <a name="inspector" href="#/inspector">Inspector</a> <a href="#" on-tap="logout">Logout</a>
+                </iron-selector>
+
+            </app-drawer>
+
+            <!-- Main content -->
+            <app-header-layout has-scrolling-region>
+
+                <div class="g-container">
+                    <div class="g-row">
+                        <div class="g-12">
+
+                            <app-header condenses reveals effects="waterfall">
+                                <app-toolbar>
+                                    <paper-icon-button icon="menu"
+                                                       hidden="[[sessionInvalid]]"
+                                                       drawer-toggle></paper-icon-button>
+                                    <div main-title>[[title]]</div>
+                                </app-toolbar>
+                            </app-header>
+
+                        </div>
+                    </div>
+
+                    <div class="g-row">
+                        <div class="g-12">
+                            <iron-pages selected="[[routeData.view]]"
+                                        attr-for-selected="id"
+                                        fallback-selection="c-view404"
+                                        role="main">
+
+                                <strolch-wc-auth id="auth"
+                                                 app="[[app]]"
+                                                 base-path="../../../"
+                                                 app-title="Strolch Inspector Demo"
+                                                 dlg="[[dlg]]"></strolch-wc-auth>
+
+                                <strolch-wc-inspector id="inspector"
+                                                      app="[[app]]"
+                                                      base-path="../../../"
+                                                      route="{{subroute}}"></strolch-wc-inspector>
+
+                                <c-view404 id="c-view404"></c-view404>
+
+                            </iron-pages>
+
+                        </div>
+                    </div>
+                </div>
+
+            </app-header-layout>
+        </app-drawer-layout>
+
+        <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>
+
+    </template>
+
+    <script>
+
+        Polymer({
+
+            is: 'c-app',
+
+            properties: {
+                app: {
+                    type: Object
+                },
+                dlg: {
+                    type: Object
+                },
+                dlgTitle: {
+                    type: String
+                },
+                dlgText: {
+                    type: String
+                },
+                title: {
+                    type: String,
+                    reflectToAttribute: true
+                },
+                sessionInvalid: {
+                    type: Boolean,
+                    reflectToAttribute: true,
+                    value: function () {
+                        return true;
+                    }
+                },
+                currentView: {
+                    type: String,
+                    value: function () {
+                        return null;
+                    }
+                }
+            },
+
+            observers: [
+                'viewChanged(routeData.view)'
+            ],
+
+            viewChanged: function (view) {
+                if (this.currentView != view) {
+                    console.log('View changed to ' + view + " from " + this.currentView);
+
+                    if (view != null && view != 'auth') {
+                        this.currentView = view;
+                    }
+
+                    this.title = this._getTitle(view);
+
+                    if (!this.sessionInvalid) {
+                        this._reloadView();
+                    }
+
+                    if (!this.$.drawer.persistent) {
+                        this.$.drawer.close();
+                    }
+                }
+            },
+
+            _reloadView: function () {
+                var viewElement = this.$$('#' + this.currentView);
+                if (viewElement != null && viewElement.reload) {
+                    console.log('Reloading view ' + this.currentView);
+                    viewElement.reload();
+                }
+            },
+
+            _getTitle: function (view) {
+                if (view == 'auth')
+                    return 'Inspector Demo';
+                if (view == 'inspector')
+                    return 'Inspector';
+                return view;
+            },
+
+            ready: function () {
+                this.app = this;
+                this.dlg = this.$.dlg;
+                if (Strolch.hasAuthToken()) {
+                    this.$$('#auth').reload();
+                }
+                window.location = this._toUrl('auth');
+            },
+
+            sessionValid: function () {
+                this.sessionInvalid = false;
+                //this.$.drawerSelector.hidden = false;
+                //this.$.menuBtn.hidden = false;
+
+                if (this.currentView == null) {
+                    window.location = this._toUrl('inspector');
+                } else {
+                    window.location = this._toUrl(this.currentView);
+                    this._reloadView();
+                }
+            },
+
+            _toUrl: function (view) {
+                var queryParams = Strolch.getQueryParamsAsString();
+                if (Strolch.isEmptyString(queryParams)) {
+                    return '#/' + view;
+                } else {
+                    return '#/' + view + '/?' + queryParams;
+                }
+            },
+
+            logout: function () {
+                this.sessionInvalid = true;
+                this.$$('#auth').logout();
+                window.location = this._toUrl('auth');
+            },
+
+            showError: function (title, text) {
+                this.dlgTitle = title;
+                this.dlgText = text;
+                console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
+                this.$.dlg.open();
+            }
+        });
+
+    </script>
+
+</dom-module>
diff --git a/demo/c-view404.html b/demo/c-view404.html
new file mode 100644
index 0000000..1aba953
--- /dev/null
+++ b/demo/c-view404.html
@@ -0,0 +1,23 @@
+<link rel="import" href="../../polymer/polymer.html">
+
+<dom-module id="c-view404">
+    <template>
+
+        <style>
+            :host {
+                display: block;
+                min-height: 100%;
+                padding: 10px 20px;
+            }
+        </style>
+
+        Oops you hit a 404.
+
+    </template>
+
+    <script>
+        Polymer({
+            is: 'c-view404'
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..2b17af3
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <title>Strolch Inspector Demo</title>
+    <meta name="description" content="Strolch Inspector Demo">
+
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../strolchjs/Strolch.js"></script>
+
+    <link rel="import" href="./c-app.html">
+
+    <style>
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Roboto', 'Noto', sans-serif;
+            line-height: 1.5;
+            background-color: #eeeeee;
+        }
+
+    </style>
+</head>
+
+<body unresolved>
+
+<c-app></c-app>
+
+</body>
+</html>
diff --git a/strolch-wc-inspector-object.html b/strolch-wc-inspector-object.html
index 719b177..b1459b3 100644
--- a/strolch-wc-inspector-object.html
+++ b/strolch-wc-inspector-object.html
@@ -12,11 +12,13 @@
 <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>
+        <style is="strolch-wc-styles">
 
             :host {
                 display: block;
@@ -42,6 +44,7 @@
                 --paper-toolbar-height: 42px;
                 --paper-toolbar-background: var(--google-grey-300);
                 --paper-toolbar-color: var(--google-grey-700);
+                border-bottom: solid #7F7F7F 1px;
             }
 
             paper-tabs {
@@ -52,7 +55,7 @@
 
         </style>
 
-        <paper-material class="mt-4" elevation="1">
+        <paper-material class="g-card g-m-3 g-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>
@@ -73,16 +76,16 @@
                 <!-- parameters -->
                 <section name="parameters">
                     <template is="dom-if" if="[[!details]]">
-                        <p class="m-4 text-center">Loading...</p>
+                        <p class="g-m-2 g-center">Loading...</p>
                     </template>
                     <template is="dom-if" if="[[details]]">
 
                         <template is="dom-if" if="[[_isEmpty(details.parameterBags)]]">
-                            <p class="m-4 text-center">No parameters defined on [[objectName]] [[summary.id]]</p>
+                            <p class="g-p-4 g-center">No parameters defined on [[objectName]] [[summary.id]]</p>
                         </template>
                         <template is="dom-if" if="[[_isNotEmpty(details.parameterBags)]]">
 
-                            <table class="table table-sm">
+                            <table class="g-table">
                                 <thead>
                                 <tr>
                                     <th>ParameterBag</th>
@@ -123,12 +126,12 @@
                 <!-- policies -->
                 <section name="policies">
                     <template is="dom-if" if="[[!details]]">
-                        <p class="m-4 text-center">Loading...</p>
+                        <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="m-4 text-center">No policies defined on [[objectName]] [[summary.id]]</p>
+                            <p class="g-p-4 g-center">No policies defined on [[objectName]] [[summary.id]]</p>
                         </template>
                         <template is="dom-if" if="[[_isNotEmpty(details.policies)]]">
 
@@ -162,12 +165,12 @@
                 <template is="dom-if" if="[[_isResource(objectType)]]">
                     <section name="timedstates">
                         <template is="dom-if" if="[[!details]]">
-                            <p class="m-4 text-center">Loading...</p>
+                            <p class="g-p-4 g-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>
+                                <p class="g-p-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">
@@ -236,6 +239,10 @@
                         return null;
                     }
                 },
+                basePath: {
+                    type: String,
+                    value: './'
+                },
                 realm: {
                     type: String,
                     value: function () {
@@ -342,7 +349,7 @@
                     this.details.parameterBagsArr = console.log(this.details);
                 };
 
-                this.$.ajax.url = './rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.summary.type + '/' + this.summary.id;
+                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();
             },
diff --git a/strolch-wc-inspector-objects.html b/strolch-wc-inspector-objects.html
index 7d1848b..80de6fe 100644
--- a/strolch-wc-inspector-objects.html
+++ b/strolch-wc-inspector-objects.html
@@ -5,13 +5,15 @@
 <link rel="import" href="../iron-ajax/iron-ajax.html">
 <link rel="import" href="../iron-pages/iron-pages.html">
 
+<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
+
 <link rel="import" href="strolch-wc-inspector-object.html">
 
 <dom-module id="strolch-wc-inspector-objects">
 
     <template>
 
-        <style>
+        <style is="strolch-wc-styles">
 
             :host {
                 display: block;
@@ -27,6 +29,7 @@
             }
 
             .card {
+                background-color: #ffffff;
                 cursor: pointer;
                 border-style: none;
             }
@@ -38,7 +41,7 @@
         </style>
 
         <template is="dom-if" if="[[_noElements(objectData)]]" restamp>
-            <p class="title text-center">No [[objectName]] objects exists.</p>
+            <p class="title g-center">No [[objectName]] objects exists.</p>
         </template>
 
         <template is="dom-if" if="[[!_noElements(objectData)]]" restamp>
@@ -48,9 +51,9 @@
                 <section name="typesSummary">
 
                     <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">
+                        <div class="g-row">
+                            <div class="g-offset-4 g-4">
+                                <paper-material class="card g-m-2 g-p-2" elevation="1" on-tap="_showTypeDetails">
                                     <p>[[objectName]] of type <b>[[item.type]]</b> ([[item.size]])</p>
                                 </paper-material>
                             </div>
@@ -60,17 +63,16 @@
 
                 <section name="typeDetails">
 
-                    <div class="row">
-                        <div class="col-12">
+                    <div class="g-row">
+                        <div class="g-12">
                             <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>
                             </paper-toolbar>
 
-                            <hr />
-
                             <template is="dom-repeat" items="[[typeData.elements]]">
-                                <strolch-wc-inspector-object app="[[app]]"
+                                <strolch-wc-inspector-object base-path="[[basePath]]"
+                                                             app="[[app]]"
                                                              realm="[[realm]]"
                                                              object-name="[[objectName]]"
                                                              object-type="[[objectType]]"
@@ -107,6 +109,10 @@
                         return null;
                     }
                 },
+                basePath: {
+                    type: String,
+                    value: './'
+                },
                 realm: {
                     type: String,
                     value: function () {
@@ -177,7 +183,7 @@
                     this.typeData = data.detail.response;
                 };
 
-                this.$.ajax.url = './rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.selectedType;
+                this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.selectedType;
                 this.$.ajax.method = 'GET';
                 this.$.ajax.generateRequest();
             },
diff --git a/strolch-wc-inspector.html b/strolch-wc-inspector.html
index 9d6a5bb..1c56c2d 100644
--- a/strolch-wc-inspector.html
+++ b/strolch-wc-inspector.html
@@ -13,13 +13,15 @@
 
 <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-objects.html">
 
 <dom-module id="strolch-wc-inspector">
 
     <template>
 
-        <style>
+        <style is="strolch-wc-styles">
 
             :host {
                 display: block;
@@ -84,9 +86,9 @@
 
         </style>
 
-        <div class="row">
+        <div class="g-row">
 
-            <div class="col-3 pr-0">
+            <div class="g-3">
 
                 <div class="toolbar">
 
@@ -102,7 +104,7 @@
                 </div>
 
             </div>
-            <div class="col-9 pl-0">
+            <div class="g-9">
                 <div class="toolbar">
                     <template is="dom-if" if="[[selectedRealm]]">
                         <paper-tabs selected="{{selectedObjectType}}" attr-for-selected="name">
@@ -115,26 +117,29 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="g-row">
 
-            <div class="col-12">
+            <div class="g-12">
                 <iron-pages selected="{{selectedObjectType}}" attr-for-selected="name">
                     <section name="resources">
-                        <strolch-wc-inspector-objects app="[[app]]"
+                        <strolch-wc-inspector-objects base-path="[[basePath]]"
+                                                      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]]"
+                        <strolch-wc-inspector-objects base-path="[[basePath]]"
+                                                      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]]"
+                        <strolch-wc-inspector-objects base-path="[[basePath]]"
+                                                      app="[[app]]"
                                                       realm="[[selectedRealm]]"
                                                       object-name="Activity"
                                                       object-type="activities"
@@ -166,6 +171,10 @@
                         return null;
                     }
                 },
+                basePath: {
+                    type: String,
+                    value: './'
+                },
                 realms: {
                     type: Array,
                     value: function () {
@@ -275,7 +284,7 @@
                     }
                 };
 
-                this.$.ajax.url = './rest/strolch/inspector';
+                this.$.ajax.url = this.basePath + 'rest/strolch/inspector';
                 this.$.ajax.method = 'GET';
                 this.$.ajax.generateRequest();
             },
@@ -313,7 +322,7 @@
                     }
                 };
 
-                this.$.ajax.url = './rest/strolch/inspector/' + this.selectedRealm;
+                this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm;
                 this.$.ajax.method = 'GET';
                 this.$.ajax.generateRequest();
             },
@@ -345,7 +354,7 @@
                     }
                 };
 
-                this.$.ajax.url = './rest/strolch/inspector/' + this.selectedRealm + '/' + this.selectedObjectType;
+                this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm + '/' + this.selectedObjectType;
                 this.$.ajax.method = 'GET';
                 this.$.ajax.generateRequest();
             },