[Major] Redesign of object header
This commit is contained in:
parent
89afe1aec6
commit
03746e4d3c
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "strolch-wc-inspector",
|
||||
"description": "Strolch WebComponent Inspector",
|
||||
"version": "0.1.9",
|
||||
"version": "0.1.10",
|
||||
"authors": "Robert von Burg",
|
||||
"keywords": [
|
||||
"strolch",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<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">
|
||||
|
||||
|
|
@ -30,8 +29,27 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-title td {
|
||||
border: none;
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -40,14 +58,8 @@
|
|||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
paper-toolbar {
|
||||
--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 {
|
||||
border-top: solid #7F7F7F 1px;
|
||||
--paper-tabs-selection-bar-color: var(--paper-amber-600);
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
|
|
@ -56,165 +68,198 @@
|
|||
</style>
|
||||
|
||||
<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>
|
||||
</paper-toolbar>
|
||||
|
||||
<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>
|
||||
<div class="g-container">
|
||||
<div class="g-row title-bar" on-tap="_toggleExpanded">
|
||||
|
||||
<iron-pages selected="[[selectedDetailType]]" attr-for-selected="name">
|
||||
|
||||
<!-- parameters -->
|
||||
<section name="parameters">
|
||||
<template is="dom-if" if="[[!details]]">
|
||||
<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="g-p-4 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">
|
||||
<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-p-4 g-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="g-p-4 g-center">Loading...</p>
|
||||
</template>
|
||||
<template is="dom-if" if="[[details]]">
|
||||
|
||||
<template is="dom-if" if="[[_isEmpty(details.timedStates)]]">
|
||||
<p class="g-p-4 g-center">No timed states defined on [[objectName]] [[summary.id]]</p>
|
||||
<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>
|
||||
<template is="dom-if" if="[[_isNotEmpty(details.timedStates)]]">
|
||||
<template is="dom-repeat" items="[[_asArray(details.timedStates)]]" as="timedState">
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="g-1">
|
||||
<paper-icon-button id="expandedIcon" icon="expand-more"></paper-icon-button>
|
||||
</div>
|
||||
|
||||
<table class="table table-sm">
|
||||
</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>Time</th>
|
||||
<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="[[timedState.value.values]]"
|
||||
as="timedStateValue">
|
||||
<tr>
|
||||
<td>[[timedStateValue.time]]</td>
|
||||
<td>[[timedStateValue.value]]</td>
|
||||
</tr>
|
||||
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>
|
||||
|
||||
</paper-material>
|
||||
</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>
|
||||
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
</iron-pages>
|
||||
|
||||
</iron-pages>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</paper-material>
|
||||
|
||||
|
|
@ -297,6 +342,9 @@
|
|||
_isActivity: function (objectType) {
|
||||
return objectType == 'activities';
|
||||
},
|
||||
_isOrderOrActivity: function (objectType) {
|
||||
return this._isOrder(objectType) || this._isActivity(objectType);
|
||||
},
|
||||
|
||||
_isEmpty: function (obj) {
|
||||
if (obj == null)
|
||||
|
|
@ -324,6 +372,10 @@
|
|||
});
|
||||
},
|
||||
|
||||
_formatDate: function (date) {
|
||||
return Strolch.toDateTime(date);
|
||||
},
|
||||
|
||||
_toggleExpanded: function (evt) {
|
||||
this.expanded = !this.expanded;
|
||||
this.$.expandedIcon.icon = this.expanded ? 'expand-less' : 'expand-more';
|
||||
|
|
@ -346,7 +398,6 @@
|
|||
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.details = data.detail.response;
|
||||
this.details.parameterBagsArr = console.log(this.details);
|
||||
};
|
||||
|
||||
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this.objectType + '/' + this.summary.type + '/' + this.summary.id;
|
||||
|
|
|
|||
|
|
@ -48,13 +48,13 @@
|
|||
|
||||
<iron-pages selected="{{section}}" attr-for-selected="name">
|
||||
|
||||
<section name="typesSummary">
|
||||
<section name="typesSummary" class="g-pt-4">
|
||||
|
||||
<template is="dom-repeat" items="[[objectData.types]]">
|
||||
<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 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>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue