514 lines
19 KiB
HTML
514 lines
19 KiB
HTML
<link rel="import" href="../polymer/polymer.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-material/paper-material.html">
|
|
<link rel="import" href="../paper-dialog/paper-dialog.html">
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
|
|
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
|
|
<link rel="import" href="../paper-item/paper-item.html">
|
|
<link rel="import" href="../paper-listbox/paper-listbox.html">
|
|
|
|
<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-behavior.html">
|
|
<link rel="import" href="strolch-wc-inspector-objects.html">
|
|
|
|
<dom-module id="strolch-wc-inspector">
|
|
|
|
<template>
|
|
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
|
|
:host {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.toolbar {
|
|
background-color: var(--paper-blue-600);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
height: 42px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
paper-tabs {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
--paper-tabs-selection-bar-color: var(--paper-amber-600);
|
|
background-color: var(--paper-blue-600);
|
|
color: #fff;
|
|
}
|
|
|
|
paper-dropdown-menu {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
paper-dropdown-menu.custom {
|
|
--paper-dropdown-menu-label: {
|
|
background-color: var(--paper-blue-600);
|
|
color: #ffffff;
|
|
};
|
|
--paper-dropdown-menu-input: {
|
|
background-color: var(--paper-blue-600);
|
|
color: #ffffff;
|
|
};
|
|
--paper-input-container: {
|
|
color: #ffffff;
|
|
};
|
|
--paper-input-container-input: {
|
|
color: #ffffff;
|
|
};
|
|
--paper-input-container-label: {
|
|
color: #ffffff;
|
|
font-size: smaller;
|
|
};
|
|
--paper-input-container-focus: {
|
|
color: #ffffff;
|
|
};
|
|
--paper-input-container-underline: {
|
|
display: none;
|
|
};
|
|
}
|
|
|
|
paper-listbox {
|
|
--paper-listbox-background-color: var(--paper-blue-600);
|
|
--paper-listbox-color: #ffffff;
|
|
}
|
|
|
|
paper-material {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.addDlg {
|
|
width: 600px;
|
|
}
|
|
|
|
textarea {
|
|
padding: 10px;
|
|
margin: 10px;
|
|
width: calc(100% - 40px);
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="g-row">
|
|
|
|
<div class="g-3">
|
|
|
|
<div class="toolbar">
|
|
|
|
<paper-dropdown-menu no-label-float label="select realm" class="custom">
|
|
<paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRealm}}">
|
|
|
|
<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="g-9">
|
|
<div class="g-row toolbar">
|
|
<div class="g-10">
|
|
<template is="dom-if" if="[[selectedRealm]]">
|
|
<paper-tabs selected="{{selectedObjectType}}" attr-for-selected="name">
|
|
<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>
|
|
<div class="g-2">
|
|
<paper-icon-button icon="refresh" title="Refresh" on-tap="reloadRealms"></paper-icon-button>
|
|
<paper-icon-button icon="cloud-download"
|
|
title="Download entire Realm"
|
|
on-tap="exportRealm"></paper-icon-button>
|
|
<paper-icon-button icon="cloud-upload"
|
|
title="Upload data to realm"
|
|
on-tap="onAddTapped"></paper-icon-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="g-row">
|
|
|
|
<div class="g-12">
|
|
<iron-pages selected="{{selectedObjectType}}" attr-for-selected="name">
|
|
<section name="Resource">
|
|
<strolch-wc-inspector-objects base-path="[[basePath]]"
|
|
realm="[[selectedRealm]]"
|
|
object-type="Resource"
|
|
object-summaries="[[resources]]"></strolch-wc-inspector-objects>
|
|
</section>
|
|
<section name="Order">
|
|
<strolch-wc-inspector-objects base-path="[[basePath]]"
|
|
realm="[[selectedRealm]]"
|
|
object-type="Order"
|
|
object-summaries="[[orders]]"></strolch-wc-inspector-objects>
|
|
</section>
|
|
<section name="Activity">
|
|
<strolch-wc-inspector-objects base-path="[[basePath]]"
|
|
realm="[[selectedRealm]]"
|
|
object-type="Activity"
|
|
object-summaries="[[activities]]"></strolch-wc-inspector-objects>
|
|
</section>
|
|
</iron-pages>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<paper-dialog id="addDlg" class="addDlg" modal>
|
|
<h3>Import elements</h3>
|
|
|
|
<textarea value="{{modelAsText::input}}"></textarea>
|
|
|
|
<div class="buttons">
|
|
<paper-button class="g-pull-right" on-tap="onSaveTap" raised>
|
|
<iron-icon icon="add"></iron-icon>
|
|
Add
|
|
</paper-button>
|
|
<paper-button class="g-pull-right" on-tap="onCancelTap" raised>
|
|
<iron-icon icon="close"></iron-icon>
|
|
Cancel
|
|
</paper-button>
|
|
</div>
|
|
</paper-dialog>
|
|
|
|
<iron-ajax id="ajax"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
on-response="_handleAjaxResponse"
|
|
on-error="onAjaxError"></iron-ajax>
|
|
|
|
<iron-ajax id="ajaxXml"
|
|
content-type="application/xml"
|
|
handle-as="text"
|
|
method="GET"
|
|
on-response="_handleAjaxResponse"
|
|
on-error="onAjaxError"></iron-ajax>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: 'strolch-wc-inspector',
|
|
|
|
behaviors: [
|
|
StrolchInspectorBehavior
|
|
],
|
|
|
|
properties: {
|
|
realms: {
|
|
type: Array,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
},
|
|
selectedRealm: {
|
|
type: Object,
|
|
value: function () {
|
|
return null;
|
|
},
|
|
observer: 'selectedRealmChanged'
|
|
},
|
|
|
|
resourcesSummary: {
|
|
type: String,
|
|
value: function () {
|
|
return 'Resources';
|
|
}
|
|
},
|
|
ordersSummary: {
|
|
type: String,
|
|
value: function () {
|
|
return 'Orders';
|
|
}
|
|
},
|
|
activitiesSummary: {
|
|
type: String,
|
|
value: function () {
|
|
return 'Activities';
|
|
}
|
|
},
|
|
|
|
selectedObjectType: {
|
|
type: String,
|
|
value: function () {
|
|
return null;
|
|
},
|
|
observer: 'selectedObjectTypeChanged'
|
|
},
|
|
|
|
resources: {
|
|
type: Object,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
},
|
|
orders: {
|
|
type: Object,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
},
|
|
activities: {
|
|
type: Object,
|
|
value: function () {
|
|
return null;
|
|
}
|
|
},
|
|
modelAsText: {
|
|
type: String,
|
|
value: ''
|
|
}
|
|
},
|
|
|
|
listeners: {
|
|
"strolch-show-dialog": "onShowDialog"
|
|
},
|
|
|
|
onShowDialog: function (event) {
|
|
this.showError(event.detail.title, event.detail.text);
|
|
},
|
|
showError: function (title, text) {
|
|
this.dlgTitle = title;
|
|
this.dlgText = text;
|
|
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
|
this.$.dlg.open();
|
|
},
|
|
|
|
selectedRealmChanged: function (newValue, oldValue) {
|
|
if (newValue != null) {
|
|
console.log('Selected realm changed from ' + oldValue + " to " + newValue);
|
|
Strolch.setQueryParamValue('realm', newValue);
|
|
this.reloadSelectedRealm();
|
|
}
|
|
},
|
|
selectedObjectTypeChanged: function (newValue, oldValue) {
|
|
if (newValue != null) {
|
|
console.log('Selected object type changed from ' + oldValue + " to " + newValue);
|
|
Strolch.setQueryParamValue('objectType', newValue);
|
|
this.reloadSelectedObjectType();
|
|
}
|
|
},
|
|
|
|
ready: function () {
|
|
//
|
|
},
|
|
|
|
reload: function () {
|
|
this.selectedRealm = null;
|
|
this.selectedObjectType = null;
|
|
this.resources = null;
|
|
this.orders = null;
|
|
this.activities = null;
|
|
|
|
this.reloadRealms();
|
|
},
|
|
|
|
reloadRealms: function () {
|
|
|
|
var realmToSelect = Strolch.getQueryParamValue('realm');
|
|
|
|
this._handleAjaxResponse = function (data) {
|
|
this.selectedRealm = null;
|
|
this.selectedObjectType = null;
|
|
this.resources = null;
|
|
this.orders = null;
|
|
this.activities = null;
|
|
|
|
this.realms = data.detail.response.realms;
|
|
|
|
if (Strolch.isNotEmptyString(realmToSelect)) {
|
|
for (var i = 0; i < this.realms.length; i++) {
|
|
if (this.realms[i].name == realmToSelect) {
|
|
this.selectedRealm = realmToSelect;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.selectedRealm == null && this.realms.length > 0) {
|
|
this.selectedRealm = this.realms[0].name;
|
|
}
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/inspector';
|
|
this.$.ajax.method = 'GET';
|
|
this.$.ajax.generateRequest();
|
|
},
|
|
|
|
exportRealm: function () {
|
|
|
|
this._handleAjaxResponse = function (data) {
|
|
var response = data.detail.response;
|
|
var fileName = this.selectedRealm + '_' + Strolch.toDateTimeNoDelim(new Date()) + '.xml';
|
|
Strolch.handleAjaxFileDownload(response, fileName, 'application/xml');
|
|
};
|
|
|
|
this.$.ajaxXml.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm + '/xml';
|
|
this.$.ajaxXml.headers = {'Accept': 'application/xml'};
|
|
this.$.ajaxXml.method = 'GET';
|
|
this.$.ajaxXml.generateRequest();
|
|
},
|
|
|
|
onAddTapped: function (event) {
|
|
this.modelAsText = '';
|
|
this.$.addDlg.open();
|
|
},
|
|
onCancelTap: function (event) {
|
|
this.modelAsText = '';
|
|
this.$.addDlg.close();
|
|
},
|
|
onSaveTap: function (event) {
|
|
if (!this.modelAsText || this.modelAsText == null || this.modelAsText == '') {
|
|
this.showError('Model empty', 'Model can not be empty!');
|
|
return;
|
|
}
|
|
|
|
this.dlgTitle = 'Import failed';
|
|
this._handleAjaxResponse = function (data) {
|
|
this.modelAsText = '';
|
|
this.$.addDlg.close();
|
|
|
|
this.dlgTitle = 'Import done';
|
|
this.dlgText = data.detail.response.msg;
|
|
this.$.dlg.open();
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm + '/import';
|
|
this.$.ajax.headers = {
|
|
'Accept': 'application/xml',
|
|
'Content-Type': 'application/xml'
|
|
};
|
|
this.$.ajax.handleAs = 'json';
|
|
this.$.ajax.method = 'POST';
|
|
this.$.ajax.body = this.modelAsText;
|
|
this.$.ajax.generateRequest();
|
|
},
|
|
|
|
reloadSelectedRealm: function () {
|
|
|
|
if (Strolch.isEmptyString(this.selectedRealm)) {
|
|
console.log('No realm selected!');
|
|
return;
|
|
}
|
|
|
|
var objectTypeToSelect = Strolch.getQueryParamValue('objectType');
|
|
|
|
this.selectedObjectType = null;
|
|
this.resources = null;
|
|
this.orders = null;
|
|
this.activities = null;
|
|
|
|
this._handleAjaxResponse = function (data) {
|
|
var elementMaps = data.detail.response.elementMaps;
|
|
for (var i = 0; i < elementMaps.length; i++) {
|
|
var element = elementMaps[i];
|
|
switch (element.objectType) {
|
|
case 'Resource':
|
|
this.resourcesSummary = 'Resources (' + element.nrOfElements + ')';
|
|
break;
|
|
case 'Order':
|
|
this.ordersSummary = 'Orders (' + element.nrOfElements + ')';
|
|
break;
|
|
case 'Activity':
|
|
this.activitiesSummary = 'Activities (' + element.nrOfElements + ')';
|
|
break;
|
|
default:
|
|
console.log('Unhandled object type: ' + element.objectType);
|
|
}
|
|
}
|
|
|
|
if (Strolch.isNotEmptyString(objectTypeToSelect)) {
|
|
this.selectedObjectType = objectTypeToSelect;
|
|
}
|
|
};
|
|
|
|
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.selectedRealm;
|
|
this.$.ajax.method = 'GET';
|
|
this.$.ajax.generateRequest();
|
|
},
|
|
|
|
reloadSelectedObjectType: function () {
|
|
|
|
if (Strolch.isEmptyString(this.selectedRealm)) {
|
|
console.log('No realm selected!');
|
|
return;
|
|
}
|
|
if (Strolch.isEmptyString(this.selectedObjectType)) {
|
|
console.log('No objectType selected!');
|
|
return;
|
|
}
|
|
|
|
if (this.selectedObjectType == 'Resource' && this.resources != null) return;
|
|
if (this.selectedObjectType == 'Order' && this.orders != null) return;
|
|
if (this.selectedObjectType == 'Activity' && this.activities != null) return;
|
|
|
|
this._handleAjaxResponse = function (data) {
|
|
switch (data.detail.response.objectType) {
|
|
case 'Resource':
|
|
this.resources = data.detail.response;
|
|
break;
|
|
case 'Order':
|
|
this.orders = data.detail.response;
|
|
break;
|
|
case 'Activity':
|
|
this.activities = data.detail.response;
|
|
break;
|
|
default:
|
|
console.log('Unhandled object type: ' + data.detail.response.objectType);
|
|
}
|
|
};
|
|
|
|
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!');
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|