[Major] Added export functions and fixed error dialogs
This commit is contained in:
parent
93ad85acf1
commit
87966699cb
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "strolch-wc-inspector",
|
||||
"description": "Strolch WebComponent Inspector",
|
||||
"version": "0.2.6",
|
||||
"version": "0.3.0",
|
||||
"authors": "Robert von Burg",
|
||||
"keywords": [
|
||||
"strolch",
|
||||
|
@ -17,7 +17,7 @@
|
|||
"homepage": "https://github.com/4treesCH/strolch-wc-inspector",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"strolchjs" : "4treesCH/strolchjs#^0.2.1",
|
||||
"strolchjs" : "4treesCH/strolchjs#^0.2.2",
|
||||
"strolch-wc-styles" : "4treesCH/strolch-wc-styles#^0.1.7",
|
||||
"app-route": "PolymerElements/app-route#^0.9.3",
|
||||
"app-layout": "PolymerElements/app-layout#^0.10.6",
|
||||
|
|
|
@ -426,9 +426,6 @@
|
|||
dlgTitle: {
|
||||
type: String
|
||||
},
|
||||
dlgText: {
|
||||
type: String
|
||||
},
|
||||
realm: {
|
||||
type: String,
|
||||
value: function () {
|
||||
|
@ -583,6 +580,7 @@
|
|||
}
|
||||
this.model = null;
|
||||
|
||||
this.dlgTitle = 'Reload model failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.model = data.detail.response;
|
||||
};
|
||||
|
@ -602,6 +600,7 @@
|
|||
url += '?flat=true';
|
||||
}
|
||||
|
||||
this.dlgTitle = 'Save model failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.model = null;
|
||||
this.model = data.detail.response;
|
||||
|
@ -624,6 +623,7 @@
|
|||
var url = this._getObjectUrl();
|
||||
|
||||
var object = this.object;
|
||||
this.dlgTitle = 'Remove model failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.fire("strolch-wc-obj-remove", {object: object});
|
||||
};
|
||||
|
@ -651,21 +651,10 @@
|
|||
},
|
||||
|
||||
_handleAjaxError: function (data) {
|
||||
var dlgTitle = 'Debug action failed';
|
||||
var dlgText;
|
||||
if (data.detail.request.response) {
|
||||
dlgText = data.detail.request.response.msg;
|
||||
} else {
|
||||
dlgText = data.detail.error;
|
||||
}
|
||||
this.showError(dlgTitle, dlgText);
|
||||
},
|
||||
|
||||
showError: function (title, text) {
|
||||
this.dlgTitle = title;
|
||||
this.dlgText = text;
|
||||
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
||||
this.$.dlg.open();
|
||||
this.fire('strolch-handle-ajax-error', {
|
||||
title: this.dlgTitle,
|
||||
detail: data.detail
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -43,20 +43,26 @@
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
paper-toolbar {
|
||||
--paper-toolbar-height: 42px;
|
||||
.toolbar {
|
||||
background-color: var(--paper-blue-900);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
paper-input {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
|
||||
--paper-input-container: {
|
||||
padding-top: 12px;
|
||||
};
|
||||
--paper-input-container-color: var(--regular-color);
|
||||
--paper-input-container-focus-color: var(--focus-color);
|
||||
--paper-input-container-input-color: var(--focus-color);
|
||||
--paper-input-container-input: {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
};
|
||||
--paper-input-container-underline-disabled: {
|
||||
border-bottom-style: solid;
|
||||
|
@ -69,10 +75,6 @@
|
|||
height: 0;
|
||||
}
|
||||
|
||||
paper-input iron-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
paper-input:not([focused]) iron-icon {
|
||||
color: var(--regular-color);
|
||||
}
|
||||
|
@ -81,13 +83,12 @@
|
|||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
#clear {
|
||||
cursor: pointer;
|
||||
.toolbar-icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
#clear {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
@ -111,6 +112,10 @@
|
|||
background-color: #faebd7;
|
||||
}
|
||||
|
||||
.card-export-btn {
|
||||
background-color: #faa193;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template is="dom-if" if="[[_noElements(objectSummaries)]]" restamp>
|
||||
|
@ -124,14 +129,22 @@
|
|||
<section name="typesSummary" class="g-pt-4">
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-offset-4 g-4">
|
||||
<div class="g-offset-4 g-2">
|
||||
<paper-material class="card card-import-btn g-m-2 g-p-4"
|
||||
elevation="1"
|
||||
on-tap="onImportTapped">
|
||||
<iron-icon icon="communication:import-export"></iron-icon>
|
||||
<iron-icon icon="cloud-upload"></iron-icon>
|
||||
Import
|
||||
</paper-material>
|
||||
</div>
|
||||
<div class="g-2">
|
||||
<paper-material class="card card-export-btn g-m-2 g-p-4"
|
||||
elevation="1"
|
||||
on-tap="onExportTapped">
|
||||
<iron-icon icon="cloud-download"></iron-icon>
|
||||
Export
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
@ -148,24 +161,33 @@
|
|||
|
||||
<section name="typeDetails">
|
||||
|
||||
<div class="g-row toolbar">
|
||||
<div class="g-1">
|
||||
<paper-icon-button icon="arrow-back" on-tap="_closeTypeDetails"></paper-icon-button>
|
||||
</div>
|
||||
<div class="g-7">
|
||||
<span class="toolbar-title">[[selectedType]] types</span>
|
||||
</div>
|
||||
<div class="g-3">
|
||||
<paper-input no-label-float value="{{searchTerm}}" class="searchField">
|
||||
<template is="dom-if" if="[[isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="search"></iron-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
|
||||
</template>
|
||||
</paper-input>
|
||||
</div>
|
||||
<div class="g-1">
|
||||
<paper-icon-button class="toolbar-icon"
|
||||
icon="cloud-download"
|
||||
title="Download queried elements"
|
||||
on-tap="onExportQueriedElements"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 [[objectType]] objects of type [[selectedType]]</span>
|
||||
<paper-input no-label-float value="{{searchTerm}}" class="searchField">
|
||||
<template is="dom-if" if="[[isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="search"></iron-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!isEmptyString(searchTerm)]]">
|
||||
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
|
||||
</template>
|
||||
</paper-input>
|
||||
<!--paper-icon-button icon="add-box"
|
||||
class="add-btn"
|
||||
on-tap="onAddTapped"></paper-icon-button-->
|
||||
</paper-toolbar>
|
||||
|
||||
<template is="dom-repeat" items="[[objects.data]]">
|
||||
<strolch-wc-inspector-object base-path="[[basePath]]"
|
||||
realm="[[realm]]"
|
||||
|
@ -173,7 +195,6 @@
|
|||
on-strolch-wc-obj-remove="onRemoveElement"
|
||||
object="[[item]]"></strolch-wc-inspector-object>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -212,20 +233,19 @@
|
|||
</div>
|
||||
</paper-dialog>
|
||||
|
||||
<paper-dialog id="dlg" modal on-iron-overlay-closed="onCloseDlg">
|
||||
<h2>[[dlgTitle]]</h2>
|
||||
<p>[[dlgText]]</p>
|
||||
<div class="buttons">
|
||||
<paper-button dialog-confirm autofocus>Close</paper-button>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
|
||||
<iron-ajax id="ajax"
|
||||
content-type="application/json"
|
||||
handle-as="json"
|
||||
on-response="_handleAjaxResponse"
|
||||
on-error="_handleAjaxError"></iron-ajax>
|
||||
|
||||
<iron-ajax id="ajaxXml"
|
||||
content-type="application/xml"
|
||||
handle-as="text"
|
||||
method="GET"
|
||||
on-response="_handleAjaxResponse"
|
||||
on-error="_handleAjaxError"></iron-ajax>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -239,10 +259,7 @@
|
|||
type: String,
|
||||
value: './'
|
||||
},
|
||||
dlgTitle: {
|
||||
type: String
|
||||
},
|
||||
dlgText: {
|
||||
dlgTitle : {
|
||||
type: String
|
||||
},
|
||||
realm: {
|
||||
|
@ -318,8 +335,7 @@
|
|||
type: String,
|
||||
value: function () {
|
||||
return 'xml';
|
||||
},
|
||||
observer: "_modelTypeChanged"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -413,6 +429,37 @@
|
|||
this.importType = 'import';
|
||||
this.addDlgOpen = true;
|
||||
},
|
||||
onExportTapped: function (event) {
|
||||
this.dlgTitle = 'Export failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
var response = data.detail.response;
|
||||
var fileName = this.realm + '_' + this.objectType + '_' + Strolch.toDateTimeNoDelim(new Date()) + '.xml';
|
||||
Strolch.handleAjaxFileDownload(response, fileName, 'application/xml');
|
||||
};
|
||||
|
||||
this.$.ajaxXml.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/xml';
|
||||
this.$.ajaxXml.headers = {'Accept': 'application/xml'};
|
||||
this.$.ajaxXml.method = 'GET';
|
||||
this.$.ajaxXml.generateRequest();
|
||||
|
||||
},
|
||||
onExportQueriedElements: function (event) {
|
||||
this.dlgTitle = 'Export failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
var response = data.detail.response;
|
||||
var fileName = this.realm + '_' + this.objectType + '_' + this.selectedType + '_' + Strolch.toDateTimeNoDelim(new Date()) + '.xml';
|
||||
Strolch.handleAjaxFileDownload(response, fileName, 'application/xml');
|
||||
};
|
||||
|
||||
var url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType + '/xml';
|
||||
url += '?query=' + this.searchTerm;
|
||||
|
||||
this.$.ajaxXml.url = url;
|
||||
this.$.ajaxXml.headers = {'Accept': 'application/xml'};
|
||||
this.$.ajaxXml.method = 'GET';
|
||||
this.$.ajaxXml.generateRequest();
|
||||
},
|
||||
|
||||
onAddTapped: function (event) {
|
||||
this.set('importDlgTitle', 'Add ' + this.objectType + ' of type ' + this.selectedType);
|
||||
this.importType = 'add';
|
||||
|
@ -424,10 +471,14 @@
|
|||
},
|
||||
onSaveTap: function (event) {
|
||||
if (!this.modelAsText || this.modelAsText == null || this.modelAsText == '') {
|
||||
this.showError('Model empty', 'Model can not be empty!');
|
||||
this.fire('strolch-show-dialog', {
|
||||
title: 'Model empty',
|
||||
text: 'Model can not be empty!'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.dlgTitle = 'Import failed';
|
||||
if (this.importType == 'import') {
|
||||
|
||||
this._handleAjaxResponse = function (data) {
|
||||
|
@ -510,6 +561,7 @@
|
|||
|
||||
reloadTypeDetails: function () {
|
||||
|
||||
this.dlgTitle = 'Reload failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.set('objects', data.detail.response);
|
||||
};
|
||||
|
@ -540,25 +592,10 @@
|
|||
},
|
||||
|
||||
_handleAjaxError: function (data) {
|
||||
var dlgTitle = 'Server action failed';
|
||||
var dlgText;
|
||||
if (data.detail.request.response) {
|
||||
if (data.detail.request.response.msg) {
|
||||
dlgText = data.detail.request.response.msg;
|
||||
} else {
|
||||
dlgText = data.detail.request.response;
|
||||
}
|
||||
} else {
|
||||
dlgText = data.detail.error;
|
||||
}
|
||||
this.showError(dlgTitle, dlgText);
|
||||
},
|
||||
|
||||
showError: function (title, text) {
|
||||
this.dlgTitle = title;
|
||||
this.dlgText = text;
|
||||
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
||||
this.$.dlg.open();
|
||||
this.fire('strolch-handle-ajax-error', {
|
||||
title: this.dlgTitle,
|
||||
detail: data.detail
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -109,7 +109,7 @@
|
|||
</div>
|
||||
<div class="g-9">
|
||||
<div class="g-row toolbar">
|
||||
<div class="g-11">
|
||||
<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>
|
||||
|
@ -118,8 +118,11 @@
|
|||
</paper-tabs>
|
||||
</template>
|
||||
</div>
|
||||
<div class="g-1">
|
||||
<paper-icon-button icon="refresh" on-tap="reloadRealms"></paper-icon-button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -153,7 +156,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<paper-dialog id="dlg" modal on-iron-overlay-closed="onCloseDlg">
|
||||
<paper-dialog id="dlg" modal>
|
||||
<h2>[[dlgTitle]]</h2>
|
||||
<p>[[dlgText]]</p>
|
||||
<div class="buttons">
|
||||
|
@ -167,6 +170,13 @@
|
|||
on-response="_handleAjaxResponse"
|
||||
on-error="_handleAjaxError"></iron-ajax>
|
||||
|
||||
<iron-ajax id="ajaxXml"
|
||||
content-type="application/xml"
|
||||
handle-as="text"
|
||||
method="GET"
|
||||
on-response="_handleAjaxResponse"
|
||||
on-error="_handleAjaxError"></iron-ajax>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -247,6 +257,11 @@
|
|||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
"strolch-handle-ajax-error": "onAjaxError",
|
||||
"strolch-show-dialog": "onShowDialog"
|
||||
},
|
||||
|
||||
selectedRealmChanged: function (newValue, oldValue) {
|
||||
if (newValue != null) {
|
||||
console.log('Selected realm changed from ' + oldValue + " to " + newValue);
|
||||
|
@ -267,6 +282,38 @@
|
|||
this.showError('Import complete', event.detail.msg);
|
||||
},
|
||||
|
||||
onAjaxError: function (event) {
|
||||
var dlgTitle = event.detail.title;
|
||||
var data = event.detail;
|
||||
var dlgText;
|
||||
if (data.detail.request.response) {
|
||||
if (data.detail.request.response.msg) {
|
||||
dlgText = data.detail.request.response.msg;
|
||||
} else if (data.detail.request.response.charAt(0) == '{') {
|
||||
var json = JSON.parse(data.detail.request.response);
|
||||
if (json.msg) {
|
||||
dlgText = json.msg;
|
||||
} else {
|
||||
dlgText = data.detail.request.response;
|
||||
}
|
||||
} else {
|
||||
dlgText = data.detail.request.response;
|
||||
}
|
||||
} else {
|
||||
dlgText = data.detail.error;
|
||||
}
|
||||
|
||||
this.fire('strolch-show-dialog', {
|
||||
title: dlgTitle,
|
||||
text: dlgText
|
||||
});
|
||||
},
|
||||
onShowDialog: function (event) {
|
||||
var dlgTitle = event.detail.title;
|
||||
var dlgText = event.detail.text;
|
||||
this.showError(dlgTitle, dlgText);
|
||||
},
|
||||
|
||||
ready: function () {
|
||||
//
|
||||
},
|
||||
|
@ -313,6 +360,20 @@
|
|||
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();
|
||||
},
|
||||
|
||||
reloadSelectedRealm: function () {
|
||||
|
||||
if (Strolch.isEmptyString(this.selectedRealm)) {
|
||||
|
|
Loading…
Reference in New Issue