strolch-wc-plc/strolch-wc-plc-logical-devi...

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">&nbsp;&nbsp;&nbsp;[[address.resource]] - [[address.action]]
</div>
<div class="hw-address">&nbsp;&nbsp;&nbsp;[[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>