295 lines
14 KiB
HTML
295 lines
14 KiB
HTML
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../iron-ajax/iron-ajax.html">
|
|
<link rel="import" href="../iron-icons/iron-icons.html">
|
|
<link rel="import" href="../iron-icons/notification-icons.html">
|
|
<link rel="import" href="../iron-icons/maps-icons.html">
|
|
<link rel="import" href="../iron-icons/av-icons.html">
|
|
<link rel="import" href="../iron-icons/communication-icons.html">
|
|
<link rel="import" href="../iron-icons/device-icons.html">
|
|
<link rel="import" href="../iron-icons/hardware-icons.html">
|
|
<link rel="import" href="../iron-icons/editor-icons.html">
|
|
<link rel="import" href="../iron-icons/places-icons.html">
|
|
<link rel="import" href="../iron-icons/social-icons.html">
|
|
|
|
<link rel="import" href="../paper-material/paper-material.html">
|
|
<link rel="import" href="../paper-card/paper-card.html">
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
<link rel="import" href="../paper-input/paper-input.html">
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
|
|
<link rel="import" href="../paper-radio-group/paper-radio-group.html">
|
|
|
|
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
|
|
|
|
<link rel="import" href="./strolch-wc-plc-style.html">
|
|
<link rel="import" href="./strolch-wc-plc-behavior.html">
|
|
|
|
<dom-module id="strolch-wc-plc-logical-device">
|
|
<template>
|
|
|
|
<style is="custom-style" include="strolch-wc-plc-style">
|
|
|
|
</style>
|
|
|
|
<paper-card elevation="1">
|
|
<div class="header"><h3>[[device.description]]</h3></div>
|
|
<div class="card-content">
|
|
|
|
<div class="g-row">
|
|
<div class="g-5">
|
|
<h4>[[localize('addresses')]]</h4>
|
|
<template is="dom-repeat" items="[[addresses]]" as="address">
|
|
<div class="g-flex-table-row">
|
|
<div class="g-flex-table-cell address-field" title="[[address.id]]">
|
|
<div class="address">[[address.description]]</div>
|
|
<div class="hw-address"> [[address.resource]] - [[address.action]]
|
|
</div>
|
|
<div class="hw-address"> [[address.address]]</div>
|
|
</div>
|
|
<div class="g-flex-table-cell address-field no-grow">
|
|
<template is="dom-if" if="[[isBoolean(address.valueType)]]">
|
|
<template is="dom-if" if="[[address.value]]">
|
|
<iron-icon class="active-icon"
|
|
icon="icons:radio-button-checked"></iron-icon>
|
|
</template>
|
|
<template is="dom-if" if="[[!address.value]]">
|
|
<iron-icon class="inactive-icon"
|
|
icon="icons:radio-button-unchecked"></iron-icon>
|
|
</template>
|
|
</template>
|
|
<template is="dom-if" if="[[isNumber(address.valueType)]]">
|
|
[[address.value]]
|
|
</template>
|
|
<template is="dom-if" if="[[isString(address.valueType)]]">
|
|
[[address.value]]
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="g-7">
|
|
<template is="dom-if" if="[[arrayFilled(telegrams)]]">
|
|
<h4>[[localize('telegrams')]]</h4>
|
|
<template is="dom-repeat" items="[[telegrams]]" as="telegram">
|
|
<div class="g-flex-table-row">
|
|
<div class="g-flex-table-cell address-field" title="[[telegram.id]]">
|
|
<div class="address">[[telegram.resource]] - [[telegram.action]]</div>
|
|
<div class="hw-address">[[telegram.address]]</div>
|
|
</div>
|
|
<div class="g-flex-table-cell no-grow value-cell">
|
|
|
|
<template is="dom-if" if="[[isBoolean(telegram.valueType)]]">
|
|
<paper-radio-button checked="{{telegram.value}}">[[localize('on')]]
|
|
</paper-radio-button>
|
|
<paper-radio-button checked="{{!telegram.value}}">[[localize('off')]]
|
|
</paper-radio-button>
|
|
</template>
|
|
<template is="dom-if" if="[[isNumber(telegram.valueType)]]">
|
|
<paper-input class="value-input"
|
|
value="{{telegram.value}}"
|
|
no-label-float></paper-input>
|
|
</template>
|
|
<template is="dom-if" if="[[isString(telegram.valueType)]]">
|
|
<paper-input class="value-input"
|
|
value="{{telegram.value}}"
|
|
no-label-float></paper-input>
|
|
</template>
|
|
|
|
</div>
|
|
<div class="g-flex-table-cell no-grow">
|
|
<paper-button raised on-tap="sendTelegram">[[localize('send')]]
|
|
</paper-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[arrayFilled(notifications)]]">
|
|
<h4>[[localize('notifications')]]</h4>
|
|
<template is="dom-repeat" items="[[notifications]]" as="notification">
|
|
<div class="g-flex-table-row">
|
|
<div class="g-flex-table-cell address-field" title="[[notification.id]]">
|
|
<div class="address">[[notification.resource]] - [[notification.action]]</div>
|
|
<div class="hw-address">[[notification.address]]</div>
|
|
</div>
|
|
<div class="g-flex-table-cell no-grow value-cell">
|
|
|
|
<template is="dom-if" if="[[isBoolean(notification.valueType)]]">
|
|
<paper-radio-button checked="{{notification.value}}">[[localize('on')]]
|
|
</paper-radio-button>
|
|
<paper-radio-button checked="{{!notification.value}}">[[localize('off')]]
|
|
</paper-radio-button>
|
|
</paper-radio-group>
|
|
</template>
|
|
<template is="dom-if" if="[[isNumber(notification.valueType)]]">
|
|
<paper-input class="value-input"
|
|
value="{{notification.value}}"
|
|
no-label-float></paper-input>
|
|
</template>
|
|
<template is="dom-if" if="[[isString(notification.valueType)]]">
|
|
<paper-input class="value-input"
|
|
value="{{notification.value}}"
|
|
no-label-float></paper-input>
|
|
</template>
|
|
|
|
</div>
|
|
<div class="g-flex-table-cell no-grow">
|
|
<paper-button raised on-tap="sendNotification">[[localize('notify')]]
|
|
</paper-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</paper-card>
|
|
|
|
<iron-ajax id="ajaxGetAddresses"
|
|
url="[[baseRestPath]]/plc/logicalDevices/[[logicalDeviceId]]/addresses"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="GET"
|
|
on-response="onGetAddressesResponse"
|
|
on-error="onRequestError"></iron-ajax>
|
|
|
|
<iron-ajax id="ajaxGetTelegrams"
|
|
url="[[baseRestPath]]/plc/logicalDevices/[[logicalDeviceId]]/telegrams"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="GET"
|
|
on-response="onGetTelegramsResponse"
|
|
on-error="onRequestError"></iron-ajax>
|
|
|
|
<iron-ajax id="ajaxGetNotifications"
|
|
url="[[baseRestPath]]/plc/logicalDevices/[[logicalDeviceId]]/notifications"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="GET"
|
|
on-response="onGetNotificationsResponse"
|
|
on-error="onRequestError"></iron-ajax>
|
|
|
|
<iron-ajax id="ajaxPutAddress"
|
|
url="[[baseRestPath]]/plc/addresses"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="PUT"
|
|
on-response="_refresh"
|
|
on-error="onAjaxError"></iron-ajax>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'strolch-wc-plc-logical-device',
|
|
|
|
behaviors: [
|
|
StrolchLocalizeBehavior, StrolchPlcBehavior
|
|
],
|
|
|
|
properties: {
|
|
observerHandler: {
|
|
type: Object
|
|
},
|
|
logicalDeviceId: {
|
|
type: String
|
|
},
|
|
device: {
|
|
type: Object,
|
|
observer: 'deviceChanged'
|
|
},
|
|
addresses: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
telegrams: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
notifications: {
|
|
type: Array,
|
|
value: []
|
|
}
|
|
},
|
|
|
|
/* Listeners */
|
|
onGetAddressesResponse: function (e) {
|
|
var addresses = e.detail.response.data;
|
|
for (var i = 0; i < addresses.length; i++) {
|
|
var a = addresses[i];
|
|
this.observerHandler.register(a.objectType, a.type, a.id, this.handleAddressUpdate.bind(this));
|
|
}
|
|
|
|
this.addresses = addresses;
|
|
},
|
|
onGetTelegramsResponse: function (e) {
|
|
this.telegrams = e.detail.response.data;
|
|
},
|
|
onGetNotificationsResponse: function (e) {
|
|
this.notifications = e.detail.response.data;
|
|
},
|
|
deviceChanged: function (newValue) {
|
|
if (newValue != null) {
|
|
this.logicalDeviceId = newValue.id;
|
|
this.$.ajaxGetAddresses.generateRequest();
|
|
this.$.ajaxGetTelegrams.generateRequest();
|
|
this.$.ajaxGetNotifications.generateRequest();
|
|
}
|
|
},
|
|
|
|
sendTelegram: function (e) {
|
|
var a = e.model.telegram;
|
|
this.sendAddress("Telegram", a.resource, a.action, a.value);
|
|
},
|
|
sendNotification: function (e) {
|
|
var a = e.model.notification;
|
|
this.sendAddress("Notification", a.resource, a.action, a.value);
|
|
},
|
|
sendAddressNotification: function (e) {
|
|
var a = e.model.address;
|
|
this.sendAddress("Notification", a.resource, a.action, a.value);
|
|
},
|
|
|
|
sendAddress: function (type, resource, action, value) {
|
|
this.confirmActionWarning(function () {
|
|
this._sendAddress(type, resource, action, value);
|
|
});
|
|
},
|
|
|
|
_sendAddress: function (type, resource, action, value) {
|
|
|
|
console.log("Sending " + type + " for " + resource + " - " + action + ": " + value);
|
|
this.$.ajaxPutAddress.body = {
|
|
type: type,
|
|
resource: resource,
|
|
action: action,
|
|
value: value
|
|
};
|
|
this.$.ajaxPutAddress.generateRequest();
|
|
},
|
|
|
|
_refresh: function () {
|
|
console.log("Should refresh!");
|
|
},
|
|
onAjaxError: function (e) {
|
|
this._refresh();
|
|
this.onRequestError(e);
|
|
},
|
|
|
|
handleAddressUpdate: function (address) {
|
|
for (var i = 0; i < this.addresses.length; i++) {
|
|
if (this.addresses[i].id === address.id) {
|
|
this.set("addresses." + i + ".value", address.value);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/* Lifecycle */
|
|
reload: function () {
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module> |