[New] Added feature to remove bulk elements
This commit is contained in:
parent
5d0b421d4f
commit
76ffc58c5f
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "strolch-wc-inspector",
|
||||
"description": "Strolch WebComponent Inspector",
|
||||
"version": "0.8.3",
|
||||
"authors": "Robert von Burg",
|
||||
"version": "0.9.0",
|
||||
"authors": ["Robert von Burg"],
|
||||
"keywords": [
|
||||
"strolch",
|
||||
"inspector"
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
"paper-material": "PolymerElements/paper-material#^1.0.7",
|
||||
"paper-header-panel": "PolymerElements/paper-header-panel#^1.1.7",
|
||||
"paper-card": "PolymerElements/paper-card#^1.1.6",
|
||||
"paper-badge": "PolymerElements/paper-badge#^1.1.4",
|
||||
"paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.15",
|
||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
|
||||
<link rel="import" href="../paper-radio-group/paper-radio-group.html">
|
||||
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="../paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="../paper-button/paper-button.html">
|
||||
|
||||
|
|
@ -28,24 +29,18 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.0em;
|
||||
margin: 1.0em;
|
||||
cursor: pointer;
|
||||
.object-div {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background-color: var(--google-grey-300);
|
||||
color: var(--google-grey-700);
|
||||
.title-div {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 8px;
|
||||
background-color: rgb(224, 224, 224);
|
||||
color: rgb(97, 97, 97);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -53,11 +48,6 @@
|
|||
font-size: small;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
paper-material {
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -89,53 +79,60 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<paper-material class="g-card g-m-3 g-mt-4" elevation="1">
|
||||
<div class="object-div">
|
||||
|
||||
<div class="g-container">
|
||||
<div class="g-row title-bar" on-tap="_toggleExpanded">
|
||||
|
||||
<div class="g-11">
|
||||
<h1 class="title"><span style="text-transform: uppercase">[[object.objectType]]</span> <span
|
||||
class="sub g-ml-4">Id:</span> [[object.id]] <span class="sub g-ml-4">Name:</span>
|
||||
[[object.name]] <span class="sub g-ml-4">Type:</span>
|
||||
[[object.type]] </h1>
|
||||
</div>
|
||||
|
||||
<div class="g-1">
|
||||
<paper-icon-button id="expandedIcon" icon="expand-more"></paper-icon-button>
|
||||
</div>
|
||||
<div class="g-row title-div" on-tap="_toggleExpanded">
|
||||
<div class="g-12">
|
||||
<h1 class="title">
|
||||
<paper-checkbox checked="{{object._checked}}" on-tap="onCheckTapped"></paper-checkbox>
|
||||
<span style="text-transform: uppercase">[[object.objectType]]</span> <span class="sub g-ml-4">Id:</span>
|
||||
[[object.id]] <span class="sub g-ml-4">Name:</span> [[object.name]] <span class="sub g-ml-4">Type:</span>
|
||||
[[object.type]]
|
||||
|
||||
<paper-icon-button class="g-pull-right"
|
||||
id="expandedIcon"
|
||||
icon="expand-more"></paper-icon-button>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template is="dom-if" if="[[expanded]]">
|
||||
<div class="g-row">
|
||||
<div class="g-12">
|
||||
|
||||
<!-- Tabs -->
|
||||
<template is="dom-if" if="[[expanded]]">
|
||||
<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(object.objectType)]]">
|
||||
<paper-tab name="timedstates">Timed States</paper-tab>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
|
||||
<paper-tab name="elements">Elements</paper-tab>
|
||||
</template>
|
||||
<template is="dom-if" if="[[isRootElement]]">
|
||||
<paper-tab name="model">Model</paper-tab>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
</template>
|
||||
|
||||
<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(object.objectType)]]">
|
||||
<paper-tab name="timedstates">Timed States</paper-tab>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
|
||||
<paper-tab name="elements">Elements</paper-tab>
|
||||
</template>
|
||||
<template is="dom-if" if="[[isRootElement]]">
|
||||
<paper-tab name="model">Model</paper-tab>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
|
||||
|
||||
<!-- Tab sections -->
|
||||
<iron-pages selected="[[selectedDetailType]]" attr-for-selected="name">
|
||||
<iron-pages selected="{{selectedDetailType}}" attr-for-selected="name">
|
||||
|
||||
<!-- details -->
|
||||
<section name="details" class="g-p-2 g-pt-0">
|
||||
<section name="details">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-center">Loading...</p>
|
||||
</template>
|
||||
|
|
@ -218,7 +215,7 @@
|
|||
</section>
|
||||
|
||||
<!-- parameters -->
|
||||
<section name="parameters" class="g-p-2 g-pt-0">
|
||||
<section name="parameters">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-center">Loading...</p>
|
||||
</template>
|
||||
|
|
@ -264,7 +261,7 @@
|
|||
</section>
|
||||
|
||||
<!-- policies -->
|
||||
<section name="policies" class="g-p-2 g-pt-0">
|
||||
<section name="policies">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-m-4 g-center">Loading...</p>
|
||||
</template>
|
||||
|
|
@ -295,7 +292,7 @@
|
|||
|
||||
<!-- timedstates -->
|
||||
<template is="dom-if" if="[[_isResource(object.objectType)]]">
|
||||
<section name="timedstates" class="g-p-2 g-pt-0">
|
||||
<section name="timedstates">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-center">Loading...</p>
|
||||
</template>
|
||||
|
|
@ -340,7 +337,7 @@
|
|||
|
||||
<!-- activity children -->
|
||||
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
|
||||
<section name="elements" class="g-p-2 g-pt-0">
|
||||
<section name="elements">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-center">Loading...</p>
|
||||
</template>
|
||||
|
|
@ -359,23 +356,25 @@
|
|||
|
||||
<!-- model -->
|
||||
<template is="dom-if" if="[[isRootElement]]">
|
||||
<section name="model" class="g-p-2 g-pt-0">
|
||||
<section name="model">
|
||||
<template is="dom-if" if="[[!object]]">
|
||||
<p class="g-center">Loading...</p>
|
||||
</template>
|
||||
<template is="dom-if" if="[[object]]">
|
||||
<textarea value="{{model::input}}"></textarea>
|
||||
|
||||
<paper-radio-group selected="{{modelType}}" style="font-size: small">
|
||||
<paper-radio-button name="xml">XML</paper-radio-button>
|
||||
<paper-radio-button name="json">JSON</paper-radio-button>
|
||||
<paper-radio-button name="json-flat">JSON Flat</paper-radio-button>
|
||||
</paper-radio-group>
|
||||
<div class="g-mt-3">
|
||||
<paper-radio-group selected="{{modelType}}" style="font-size: small">
|
||||
<paper-radio-button name="xml">XML</paper-radio-button>
|
||||
<paper-radio-button name="json">JSON</paper-radio-button>
|
||||
<paper-radio-button name="json-flat">JSON Flat</paper-radio-button>
|
||||
</paper-radio-group>
|
||||
|
||||
<paper-button raised class="g-pull-right" on-tap="_saveModel">Save
|
||||
</paper-button>
|
||||
<paper-button class="g-pull-right" on-tap="_removeModel">Remove
|
||||
</paper-button>
|
||||
<paper-button raised class="g-pull-right" on-tap="_saveModel">Save
|
||||
</paper-button>
|
||||
<paper-button class="g-pull-right" on-tap="_removeModel">Remove
|
||||
</paper-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</section>
|
||||
|
|
@ -385,9 +384,12 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</paper-material>
|
||||
</template>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
|
||||
<iron-ajax id="ajax"
|
||||
content-type="application/json"
|
||||
|
|
@ -435,25 +437,24 @@
|
|||
},
|
||||
model: {
|
||||
type: String,
|
||||
value: function () {
|
||||
return null;
|
||||
}
|
||||
value: null
|
||||
},
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
value: function () {
|
||||
return false;
|
||||
}
|
||||
value: false
|
||||
},
|
||||
selectedDetailType: {
|
||||
type: String,
|
||||
value: function () {
|
||||
return true;
|
||||
},
|
||||
value: '',
|
||||
observer: '_selectedDetailTypeChanged'
|
||||
}
|
||||
},
|
||||
|
||||
onCheckTapped: function (evt) {
|
||||
evt.cancelBubble = true;
|
||||
this.fire('strolch-element-selected', {object: this.object});
|
||||
},
|
||||
|
||||
_objectChanged: function (newValue, oldValue) {
|
||||
if (newValue != null && oldValue == null || (newValue != null && oldValue != null && newValue.id != oldValue.id)) {
|
||||
this.expanded = false;
|
||||
|
|
@ -468,6 +469,9 @@
|
|||
},
|
||||
|
||||
_selectedDetailTypeChanged: function (newValue, oldValue) {
|
||||
if (newValue == null || newValue.length == 0 || newValue == 'none')
|
||||
return;
|
||||
|
||||
if (this.expanded) {
|
||||
if (newValue == 'model')
|
||||
this.reloadModel();
|
||||
|
|
@ -533,8 +537,11 @@
|
|||
this.expanded = !this.expanded;
|
||||
this.$.expandedIcon.icon = this.expanded ? 'expand-less' : 'expand-more';
|
||||
|
||||
if (!this.expanded) {
|
||||
this.selectedDetailType = null;
|
||||
if (this.expanded) {
|
||||
if (this.selectedDetailType == 'model')
|
||||
this.reloadModel();
|
||||
else
|
||||
this.reloadObject();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
<link rel="import" href="../paper-input/paper-input.html">
|
||||
<link rel="import" href="../paper-dialog/paper-dialog.html">
|
||||
<link rel="import" href="../paper-button/paper-button.html">
|
||||
<link rel="import" href="../paper-badge/paper-badge.html">
|
||||
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
||||
|
||||
<link rel="import" href="../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
|
|
@ -48,6 +50,7 @@
|
|||
background-color: var(--paper-blue-900);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
height: 42px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
|
|
@ -92,15 +95,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.g-container {
|
||||
margin: 0 10px 50px 10px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.card-import-btn {
|
||||
background-color: #faebd7;
|
||||
}
|
||||
|
||||
.card-export-btn {
|
||||
background-color: #faa193;
|
||||
}
|
||||
|
|
@ -174,13 +168,24 @@
|
|||
realm="[[realm]]"
|
||||
is-root-element="true"
|
||||
on-strolch-wc-obj-remove="onRemoveElement"
|
||||
on-strolch-element-selected="onElementSelected"
|
||||
object="[[item]]"></strolch-wc-inspector-object>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="g-row">
|
||||
<div class="g-12">
|
||||
<div class="g-row g-mb-1">
|
||||
<div class="g-3 g-pt-3 g-pl-4">
|
||||
<paper-button on-tap="_toggleAllSelected" raised>
|
||||
<template is="dom-if" if="[[allSelected]]">Select None</template>
|
||||
<template is="dom-if" if="[[!allSelected]]">Select All</template>
|
||||
</paper-button>
|
||||
<paper-button on-tap="_removeSelected" raised>Remove
|
||||
<paper-badge label="[[selectedObjectIds.length]]"></paper-badge>
|
||||
</paper-button>
|
||||
|
||||
</div>
|
||||
<div class="g-6">
|
||||
<div class="g-m-2 g-center">
|
||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
||||
|
|
@ -189,6 +194,9 @@
|
|||
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g-3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -280,6 +288,15 @@
|
|||
}
|
||||
},
|
||||
|
||||
allSelected: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
selectedObjectIds: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
|
||||
importType: {
|
||||
type: String,
|
||||
value: 'import'
|
||||
|
|
@ -417,6 +434,46 @@
|
|||
this.$.ajaxXml.generateRequest();
|
||||
},
|
||||
|
||||
_toggleAllSelected: function (evt) {
|
||||
var select = !this.allSelected;
|
||||
console.log(select ? 'Selecting ALL' : 'Selecting NONE');
|
||||
this.set('selectedObjectIds', []);
|
||||
for (var i = 0; i < this.objects.data.length; i++) {
|
||||
var path = 'objects.data.' + i + '._checked';
|
||||
this.set(path, !select);
|
||||
this.set(path, select);
|
||||
console.log('Set path ' + path + ' = ' + select);
|
||||
|
||||
if (select) {
|
||||
var object = this.objects.data[i];
|
||||
this.push('selectedObjectIds', object.id);
|
||||
console.log('Added ' + object.id + ' as selected');
|
||||
}
|
||||
}
|
||||
|
||||
this.set('allSelected', select);
|
||||
},
|
||||
onElementSelected: function (evt) {
|
||||
var index = this.selectedObjectIds.indexOf(evt.detail.object.id);
|
||||
var selected = evt.detail.object._checked;
|
||||
console.log('Element ' + evt.detail.object.id + ' is ' + (selected ? 'selected' : 'not selected') + ' and its index is ' + index);
|
||||
|
||||
if (selected) {
|
||||
if (index < 0) {
|
||||
this.push('selectedObjectIds', evt.detail.object.id);
|
||||
console.log('Added ' + evt.detail.object.id + ' as selected');
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.splice('selectedObjectIds', index, 1);
|
||||
console.log('Removed ' + evt.detail.object.id + ' from selected');
|
||||
}
|
||||
}
|
||||
|
||||
this.set('allSelected', this.selectedObjectIds.length == this.objects.data.length);
|
||||
console.log(this.allSelected ? 'All are selected' : 'None or some are selected');
|
||||
},
|
||||
|
||||
onRemoveElement: function (event) {
|
||||
console.log("Delete element " + event.detail.object.id);
|
||||
|
||||
|
|
@ -463,6 +520,36 @@
|
|||
|
||||
_handleAjaxResponse: function (evt) {
|
||||
console.log('NOT YET DEFINED!');
|
||||
},
|
||||
|
||||
_removeSelected: function (evt) {
|
||||
if (!confirm('Do you really want to delete ' + this.selectedObjectIds.length + ' ' + this.selectedType + ' ' + this.objectType + ' elements?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.dlgTitle = 'Remove elements failed';
|
||||
this._handleAjaxResponse = function (data) {
|
||||
this.set('objects', null);
|
||||
this.set('selectedObjectIds', []);
|
||||
this.set('allSelected', false);
|
||||
this.reloadTypeDetails();
|
||||
};
|
||||
|
||||
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType;
|
||||
this.$.ajax.params = {
|
||||
ids: ''
|
||||
};
|
||||
|
||||
for (var i = 0; i < this.selectedObjectIds.length; i++) {
|
||||
this.$.ajax.params.ids += this.selectedObjectIds[i];
|
||||
if (i < this.selectedObjectIds.length - 1) {
|
||||
this.$.ajax.params.ids += ',';
|
||||
}
|
||||
}
|
||||
|
||||
this.$.ajax.handleAs = 'text';
|
||||
this.$.ajax.method = 'DELETE';
|
||||
this.$.ajax.generateRequest();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
background-color: var(--paper-blue-600);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
height: 42px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
paper-tabs {
|
||||
|
|
|
|||
Loading…
Reference in New Issue