[Major] Now activity children are also drawn

This commit is contained in:
Robert von Burg 2017-02-08 15:41:01 +01:00
parent 52f70ca797
commit 9c3068d220
4 changed files with 189 additions and 65 deletions

View File

@ -1,7 +1,7 @@
{
"name": "strolch-wc-inspector",
"description": "Strolch WebComponent Inspector",
"version": "0.1.11",
"version": "0.1.12",
"authors": "Robert von Burg",
"keywords": [
"strolch",
@ -18,7 +18,7 @@
"ignore": [],
"dependencies": {
"strolchjs" : "4treesCH/strolchjs#^0.1.3",
"strolch-wc-styles" : "4treesCH/strolch-wc-styles#^0.1.3",
"strolch-wc-styles" : "4treesCH/strolch-wc-styles#^0.1.4",
"app-route": "PolymerElements/app-route#^0.9.3",
"app-layout": "PolymerElements/app-layout#^0.10.6",
"paper-material": "PolymerElements/paper-material#^1.0.6",
@ -34,6 +34,6 @@
"paper-item": "PolymerElements/paper-item#^1.2.1"
},
"devDependencies": {
"strolch-wc-auth" : "4treesCH/strolch-wc-auth#^0.2.2"
"strolch-wc-auth" : "4treesCH/strolch-wc-auth#^0.2.3"
}
}

View File

@ -38,7 +38,7 @@
padding: 8px;
background-color: rgb(224, 224, 224);
color: rgb(97, 97, 97);
font-size: 20px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
margin: 0;
@ -73,14 +73,10 @@
<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>
<h1 class="title"><span style="text-transform: uppercase">[[summary.objectType]]</span> <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]] </h1>
</div>
<div class="g-1">
@ -91,19 +87,109 @@
<div class="g-row">
<div class="g-12">
<!-- Tabs -->
<template is="dom-if" if="[[expanded]]">
<paper-tabs selected="{{selectedDetailType}}" attr-for-selected="name">
<paper-tabs selected="{{selectedDetailType}}"
attr-for-selected="name"
fallback-selection="none">
<paper-tab name="details">Details</paper-tab>
<paper-tab name="parameters">Parameters</paper-tab>
<paper-tab name="policies">Policies</paper-tab>
<template is="dom-if" if="[[_isResource(objectType)]]">
<template is="dom-if" if="[[_isResource(summary.objectType)]]">
<paper-tab name="timedstates">Timed States</paper-tab>
</template>
<template is="dom-if" if="[[_isActivity(summary.objectType)]]">
<paper-tab name="elements">Elements</paper-tab>
</template>
</paper-tabs>
</template>
<!-- Tab sections -->
<iron-pages selected="[[selectedDetailType]]" attr-for-selected="name">
<!-- details -->
<section name="details" 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]]">
<div class="g-row">
<div class="g-6">
<dl class="g-dl">
<dt>Id</dt>
<dd>[[details.id]]</dd>
<dt>Name</dt>
<dd>[[details.name]]</dd>
<dt>Type</dt>
<dd>[[details.type]]</dd>
</dl>
<template is="dom-if"
if="[[_isActivity(details.objectType)]]"
restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[details.state]]</dd>
<dt>TimeOrdering</dt>
<dd>[[details.timeOrdering]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(details.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(details.end)]]</dd>
</dl>
</template>
<template is="dom-if" if="[[_isOrder(details.objectType)]]" restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[details.state]]</dd>
<dt>Date</dt>
<dd>[[_formatDate(details.date)]]</dd>
</dl>
</template>
<template is="dom-if" if="[[_isAction(details.objectType)]]" restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[details.state]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(details.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(details.end)]]</dd>
<dt>Resource Type</dt>
<dd>[[details.resourceType]]</dd>
<dt>Resource Id</dt>
<dd>[[details.resourceId]]</dd>
</dl>
</template>
</div>
<div class="g-6">
<template is="dom-if" if="[[details.version]]" restamp="true">
<dl class="g-dl">
<dt>CreatedAt</dt>
<dd>[[_formatDate(details.version.createdAt)]]</dd>
<dt>CreatedBy</dt>
<dd>[[details.version.createdBy]]</dd>
<dt>Deleted</dt>
<dd>[[details.version.deleted]]</dd>
<dt>Version</dt>
<dd>[[details.version.version]]</dd>
</dl>
</template>
</div>
</div>
</template>
</section>
<!-- parameters -->
<section name="parameters" class="g-p-2 g-pt-0">
<template is="dom-if" if="[[!details]]">
@ -112,7 +198,8 @@
<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>
<p class="g-center">No parameters defined on [[summary.objectType]]
[[summary.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(details.parameterBags)]]">
@ -200,7 +287,7 @@
</section>
<!-- timedstates -->
<template is="dom-if" if="[[_isResource(objectType)]]">
<template is="dom-if" if="[[_isResource(summary.objectType)]]">
<section name="timedstates" class="g-p-2 g-pt-0">
<template is="dom-if" if="[[!details]]">
<p class="g-center">Loading...</p>
@ -255,6 +342,27 @@
</section>
</template>
<!-- activity children -->
<template is="dom-if" if="[[_isActivity(summary.objectType)]]">
<section name="elements" 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-repeat" items="[[details.elements]]" as="childElement">
<strolch-wc-inspector-object base-path="[[basePath]]"
app="[[app]]"
realm="[[realm]]"
details="[[childElement]]"
summary="[[childElement]]"
class="g-m-2"></strolch-wc-inspector-object>
</template>
</template>
</section>
</template>
</iron-pages>
</div>
@ -294,18 +402,6 @@
return null;
}
},
objectName: {
type: String,
value: function () {
return null;
}
},
objectType: {
type: String,
value: function () {
return null;
}
},
summary: {
type: Object,
value: function () {
@ -333,17 +429,29 @@
}
},
_typeSubPath: function (selectedType) {
if (selectedType == 'Resource') {
return 'resources';
} else if (selectedType == 'Order') {
return 'orders';
} else if (selectedType == 'Activity') {
return 'activities';
} else {
throw 'Unhandled selected type ' + selectedType;
}
},
_isResource: function (objectType) {
return objectType == 'resources';
return objectType == 'Resource';
},
_isOrder: function (objectType) {
return objectType == 'orders';
return objectType == 'Order';
},
_isActivity: function (objectType) {
return objectType == 'activities';
return objectType == 'Activity';
},
_isOrderOrActivity: function (objectType) {
return this._isOrder(objectType) || this._isActivity(objectType);
_isAction: function (objectType) {
return objectType == 'Action';
},
_isEmpty: function (obj) {
@ -387,20 +495,23 @@
selectedDetailTypeChanged: function (newValue, oldValue) {
if (newValue != null) {
console.log('Selected detail type type changed from ' + oldValue + " to " + newValue);
console.log('Selected detail type changed from ' + oldValue + " to " + newValue);
this.reloadDetails();
}
},
reloadDetails: function () {
this.details = null;
if (this.details != null)
return;
this._handleAjaxResponse = function (data) {
this.details = data.detail.response;
console.log(this.objectType);
console.log(this.details);
};
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.summary.type + '/' + this.summary.id;
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.summary.objectType) + '/' + this.summary.type + '/' + this.summary.id;
this.$.ajax.method = 'GET';
this.$.ajax.generateRequest();
},

View File

@ -41,7 +41,7 @@
</style>
<template is="dom-if" if="[[_noElements(objectData)]]" restamp>
<p class="title g-center">No [[objectName]] objects exists.</p>
<p class="title g-center">No [[objectType]] objects exists.</p>
</template>
<template is="dom-if" if="[[!_noElements(objectData)]]" restamp>
@ -54,7 +54,7 @@
<div class="g-row">
<div class="g-offset-4 g-4">
<paper-material class="card g-m-2 g-p-4" elevation="1" on-tap="_showTypeDetails">
<p class="g-mb-0">[[objectName]] of type <b>[[item.type]]</b> ([[item.size]])</p>
<p class="g-mb-0">[[objectType]] of type <b>[[item.type]]</b> ([[item.size]])</p>
</paper-material>
</div>
</div>
@ -65,17 +65,15 @@
<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 on-tap="_closeTypeDetails">
<paper-icon-button icon="arrow-back"></paper-icon-button>
<span class="align-text-bottom">Showing [[objectType]] objects of type [[selectedType]]</span>
</paper-toolbar>
<template is="dom-repeat" items="[[typeData.elements]]">
<strolch-wc-inspector-object base-path="[[basePath]]"
app="[[app]]"
realm="[[realm]]"
object-name="[[objectName]]"
object-type="[[objectType]]"
summary="[[item]]"></strolch-wc-inspector-object>
</template>
@ -119,12 +117,6 @@
return null;
}
},
objectName: {
type: String,
value: function () {
return null;
}
},
objectType: {
type: String,
value: function () {
@ -177,13 +169,25 @@
Strolch.setQueryParamValue('type', null);
},
_typeSubPath: function (selectedType) {
if (selectedType == 'Resource') {
return 'resources';
} else if (selectedType == 'Order') {
return 'orders';
} else if (selectedType == 'Activity') {
return 'activities';
} else {
throw 'Unhandled selected type ' + selectedType;
}
},
reloadTypeDetails: function () {
this._handleAjaxResponse = function (data) {
this.typeData = data.detail.response;
};
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.selectedType;
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType;
this.$.ajax.method = 'GET';
this.$.ajax.generateRequest();
},

View File

@ -108,9 +108,9 @@
<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-tab name="Resource">[[resourcesSummary]]</paper-tab>
<paper-tab name="Order">[[ordersSummary]]</paper-tab>
<paper-tab name="Activity">[[activitiesSummary]]</paper-tab>
</paper-tabs>
</template>
</div>
@ -121,28 +121,25 @@
<div class="g-12">
<iron-pages selected="{{selectedObjectType}}" attr-for-selected="name">
<section name="resources">
<section name="Resource">
<strolch-wc-inspector-objects base-path="[[basePath]]"
app="[[app]]"
realm="[[selectedRealm]]"
object-name="Resource"
object-type="resources"
object-type="Resource"
object-data="[[resources]]"></strolch-wc-inspector-objects>
</section>
<section name="orders">
<section name="Order">
<strolch-wc-inspector-objects base-path="[[basePath]]"
app="[[app]]"
realm="[[selectedRealm]]"
object-name="Order"
object-type="orders"
object-type="Order"
object-data="[[orders]]"></strolch-wc-inspector-objects>
</section>
<section name="activities">
<section name="Activity">
<strolch-wc-inspector-objects base-path="[[basePath]]"
app="[[app]]"
realm="[[selectedRealm]]"
object-name="Activity"
object-type="activities"
object-type="Activity"
object-data="[[activities]]"></strolch-wc-inspector-objects>
</section>
</iron-pages>
@ -350,15 +347,27 @@
this.activities = data.detail.response;
break;
default:
console.log('Unhandled object type: ' + element.objectType);
console.log('Unhandled object type: ' + data.detail.response.objectType);
}
};
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm + '/' + this.selectedObjectType;
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm + '/' + this._typeSubPath(this.selectedObjectType);
this.$.ajax.method = 'GET';
this.$.ajax.generateRequest();
},
_typeSubPath: function (selectedType) {
if (selectedType == 'Resource') {
return 'resources';
} else if (selectedType == 'Order') {
return 'orders';
} else if (selectedType == 'Activity') {
return 'activities';
} else {
throw 'Unhandled selected type ' + selectedType;
}
},
_handleAjaxResponse: function (evt) {
console.log('NOT YET DEFINED!');
},