[Project] Initial Commit
This commit is contained in:
parent
b040e85637
commit
a90ad2dfd1
|
@ -0,0 +1,4 @@
|
||||||
|
# Created by .ignore support plugin (hsz.mobi)
|
||||||
|
.idea/
|
||||||
|
bower_components/
|
||||||
|
*.iml
|
|
@ -1,2 +1,2 @@
|
||||||
# strolch-plc-ui
|
# strolch-wc-plc
|
||||||
The UI for the software PLC based on Strolch's runtime
|
The UI components for the software PLC based on Strolch's runtime
|
||||||
|
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"name": "strolch-wc-plc",
|
||||||
|
"description": "Strolch PLC WebComponents",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"authors": ["Robert von Burg"],
|
||||||
|
"keywords": [
|
||||||
|
"strolch",
|
||||||
|
"inspector"
|
||||||
|
],
|
||||||
|
"main": "strolch-wc-plc-logical-devices.html",
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@github.com:4treesCH/strolch-wc-plc.git"
|
||||||
|
},
|
||||||
|
"license": "https://github.com/4treesCH/strolch-wc-plc/blob/master/LICENSE",
|
||||||
|
"homepage": "https://github.com/4treesCH/strolch-wc-plc",
|
||||||
|
"ignore": [],
|
||||||
|
"dependencies": {
|
||||||
|
"strolchjs": "4treesCH/strolchjs#^0.2.7",
|
||||||
|
"strolch-wc-styles": "4treesCH/strolch-wc-styles#^0.3.0",
|
||||||
|
"strolch-wc-debounced-input": "4treesCH/strolch-wc-debounced-input#^0.1.0",
|
||||||
|
"strolch-wc-tree": "4treesCH/strolch-wc-tree#^0.1.5",
|
||||||
|
"strolch-wc-ws-observer": "4treesCH/strolch-wc-ws-observer#^0.1.5",
|
||||||
|
"strolch-wc-localize-behavior": "4treesCH/strolch-wc-localize-behavior#^1.1.4",
|
||||||
|
|
||||||
|
"polymer": "Polymer/polymer#^1.11.3",
|
||||||
|
|
||||||
|
"iron-ajax": "PolymerElements/iron-ajax#^1.4.4",
|
||||||
|
"iron-pages": "PolymerElements/iron-pages#^1.0.9",
|
||||||
|
"iron-icons": "PolymerElements/iron-icons#^1.2.1",
|
||||||
|
"iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.9",
|
||||||
|
|
||||||
|
"app-route": "PolymerElements/app-route#^1.0.1",
|
||||||
|
"app-layout": "PolymerElements/app-layout#^1.0.1",
|
||||||
|
|
||||||
|
"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",
|
||||||
|
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6",
|
||||||
|
"paper-tabs": "PolymerElements/paper-tabs#^1.8.0",
|
||||||
|
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.5.1",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.3.1",
|
||||||
|
"paper-listbox": "polymerelements/paper-listbox#^1.1.3",
|
||||||
|
"paper-item": "PolymerElements/paper-item#^1.2.2",
|
||||||
|
"paper-input": "PolymerElements/paper-input#^1.2.1",
|
||||||
|
"paper-checkbox": "PolymerElements/paper-checkbox#^1.4.2",
|
||||||
|
"paper-radio-group": "PolymerElements/paper-radio-group#^1.2.2",
|
||||||
|
|
||||||
|
"vaadin-date-picker": "vaadin/vaadin-date-picker#^1.2.4",
|
||||||
|
"vaadin-upload": "vaadin/vaadin-upload#v2.1.3"
|
||||||
|
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,69 @@
|
||||||
|
{
|
||||||
|
"de": {
|
||||||
|
"refresh": "Aktualisieren",
|
||||||
|
"close": "Schliessen",
|
||||||
|
"cancel": "Abbrechen",
|
||||||
|
"ok": "Ok",
|
||||||
|
"plcConnections": "SPS Verbindungen",
|
||||||
|
"plcLogicalDevices": "SPS Logische Geräte",
|
||||||
|
"class": "Klasse",
|
||||||
|
"connect": "Verbinden",
|
||||||
|
"disconnect": "Trennen",
|
||||||
|
"Connected": "Verbunden",
|
||||||
|
"Disconnected": "Getrennt",
|
||||||
|
"addresses": "Adressen",
|
||||||
|
"notifications": "Benachrichtigungen",
|
||||||
|
"telegrams": "Telegramme",
|
||||||
|
"send": "Senden",
|
||||||
|
"notify": "Benachrichtigen",
|
||||||
|
"id": "ID",
|
||||||
|
"name": "Name",
|
||||||
|
"on": "Ein",
|
||||||
|
"off": "Aus",
|
||||||
|
"address": "Adresse",
|
||||||
|
"i2cBus": "I2C Bus",
|
||||||
|
"interruptPinName": "Interrupt Pin",
|
||||||
|
"virtualAddresses": "Virtuelle Adressen",
|
||||||
|
"errorOccurred": "Fehler aufgetreten",
|
||||||
|
"plc": "SPS",
|
||||||
|
"start": "Starten",
|
||||||
|
"stop": "Stoppen",
|
||||||
|
"reconfigure": "Neu Konfigurieren",
|
||||||
|
"info": "Info",
|
||||||
|
"reconnect": "Wiederhestellen"
|
||||||
|
},
|
||||||
|
"en": {
|
||||||
|
"info": "Info",
|
||||||
|
"start": "Start",
|
||||||
|
"stop": "Stop",
|
||||||
|
"reconfigure": "Reconfigure",
|
||||||
|
"plc": "PLC",
|
||||||
|
"errorOccurred": "Error Occurred",
|
||||||
|
"virtualAddresses": "Virtual Addresses",
|
||||||
|
"on": "On",
|
||||||
|
"off": "Off",
|
||||||
|
"address": "Address",
|
||||||
|
"i2cBus": "I2C Bus",
|
||||||
|
"interruptPinName": "Interrupt Pin",
|
||||||
|
"id": "ID",
|
||||||
|
"name": "Name",
|
||||||
|
"send": "Send",
|
||||||
|
"notify": "Notify",
|
||||||
|
"addresses": "Addresses",
|
||||||
|
"notifications": "Notifications",
|
||||||
|
"telegrams": "Telegrams",
|
||||||
|
"Connected": "Connected",
|
||||||
|
"Disconnected": "Disconnected",
|
||||||
|
"connect": "Connect",
|
||||||
|
"disconnect": "Disconnect",
|
||||||
|
"class": "Class",
|
||||||
|
"plcConnections": "PLC Connections",
|
||||||
|
"plcLogicalDevices": "PLC Logical Devices",
|
||||||
|
"logout": "Logout",
|
||||||
|
"refresh": "Refresh",
|
||||||
|
"close": "Close",
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"ok": "Ok",
|
||||||
|
"reconnect": "Reconnect"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,83 @@
|
||||||
|
<link rel="import" href="../polymer/polymer.html">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
StrolchPlcBehavior = {
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
localesPath: {
|
||||||
|
type: String,
|
||||||
|
value: './locales.json'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
arrayFilled: function (array) {
|
||||||
|
return !!(array && array.length && array.length > 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
isTelegram: function (addressType) {
|
||||||
|
return addressType === "Telegram";
|
||||||
|
},
|
||||||
|
isNotification: function (addressType) {
|
||||||
|
return addressType === "Notification";
|
||||||
|
},
|
||||||
|
|
||||||
|
isBoolean: function (type) {
|
||||||
|
return type === 'Boolean';
|
||||||
|
},
|
||||||
|
isNumber: function (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'Short':
|
||||||
|
case 'Integer':
|
||||||
|
case 'Long':
|
||||||
|
case 'Float':
|
||||||
|
case 'Double':
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isInteger: function (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'Short':
|
||||||
|
case 'Integer':
|
||||||
|
case 'Long':
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isFloat: function (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'Float':
|
||||||
|
case 'Double':
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isString: function (type) {
|
||||||
|
switch (type) {
|
||||||
|
case 'String':
|
||||||
|
case 'ByteArray':
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isPlcError: function (plc) {
|
||||||
|
return plc.state === "Failed";
|
||||||
|
},
|
||||||
|
isError: function (device) {
|
||||||
|
return device.state === "Error" || device.stateMsg !== "";
|
||||||
|
},
|
||||||
|
isOn: function (device) {
|
||||||
|
return device.state === "On";
|
||||||
|
},
|
||||||
|
|
||||||
|
onRequestError: function (e) {
|
||||||
|
this.fire("strolch-ajax-request-error", e.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,233 @@
|
||||||
|
<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-icon-button/paper-icon-button.html">
|
||||||
|
<link rel="import" href="../paper-toggle-button/paper-toggle-button.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-connections">
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<style is="custom-style" include="strolch-wc-plc-style">
|
||||||
|
.label {
|
||||||
|
min-width: 250px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<paper-icon-button icon="refresh" on-tap="_refresh"></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<paper-card class="item" elevation="1">
|
||||||
|
<div class="header"><h3>[[localize('plc')]]</h3></div>
|
||||||
|
<div class="card-content g-flex-table">
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">[[localize('class')]]</div>
|
||||||
|
<div class="g-flex-table-cell">[[plc.className]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">
|
||||||
|
<template is="dom-if" if="[[isPlcError(plc)]]">
|
||||||
|
<iron-icon class="error-icon" icon="warning"></iron-icon>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[!isPlcError(plc)]]">
|
||||||
|
<iron-icon icon="info-outline"></iron-icon>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<template is="dom-if" if="[[isPlcError(plc)]]">
|
||||||
|
<div class="g-flex-table-cell">[[plc.stateMsg]]</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[!isPlcError(plc)]]">
|
||||||
|
<div class="g-flex-table-cell">[[localize(plc.state)]]</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<dfiv class="card-actions-right">
|
||||||
|
<paper-button on-tap="startPlc" raised>[[localize('start')]]
|
||||||
|
</paper-button>
|
||||||
|
<paper-button on-tap="stopPlc" raised>[[localize('stop')]]
|
||||||
|
</paper-button>
|
||||||
|
<paper-button on-tap="reconfigurePlc" raised>[[localize('reconfigure')]]
|
||||||
|
</paper-button>
|
||||||
|
</dfiv>
|
||||||
|
</div>
|
||||||
|
</paper-card>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[connections]]" as="connection">
|
||||||
|
|
||||||
|
<paper-card class="item" elevation="1">
|
||||||
|
<div class="header"><h3>[[connection.id]] / [[connection.name]]</h3></div>
|
||||||
|
<div class="card-content g-flex-table">
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">[[localize('id')]]</div>
|
||||||
|
<div class="g-flex-table-cell">[[connection.id]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">[[localize('name')]]</div>
|
||||||
|
<div class="g-flex-table-cell">[[connection.name]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">[[localize('class')]]</div>
|
||||||
|
<div class="g-flex-table-cell">[[connection.className]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">
|
||||||
|
<template is="dom-if" if="[[isError(connection)]]">
|
||||||
|
<iron-icon class="error-icon" icon="warning"></iron-icon>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[!isError(connection)]]">
|
||||||
|
<iron-icon icon="info-outline"></iron-icon>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<template is="dom-if" if="[[isError(connection)]]">
|
||||||
|
<div class="g-flex-table-cell">[[connection.stateMsg]]</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[!isError(connection)]]">
|
||||||
|
<div class="g-flex-table-cell">[[localize(connection.state)]]</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[connection.parameters]]" as="param">
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell label">[[param.id]]</div>
|
||||||
|
<div class="g-flex-table-cell">[[param.value]]</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<dfiv class="card-actions-right">
|
||||||
|
<paper-button on-tap="connect" raised>[[localize('connect')]]
|
||||||
|
</paper-button>
|
||||||
|
<paper-button on-tap="disconnect" raised>[[localize('disconnect')]]
|
||||||
|
</paper-button>
|
||||||
|
</dfiv>
|
||||||
|
</div>
|
||||||
|
</paper-card>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iron-ajax id="ajaxGetPlc"
|
||||||
|
url="[[baseRestPath]]/plc/state"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="GET"
|
||||||
|
on-response="onGetPlcResponse"
|
||||||
|
on-error="onRequestError"></iron-ajax>
|
||||||
|
|
||||||
|
<iron-ajax id="ajaxGetConnections"
|
||||||
|
url="[[baseRestPath]]/plc/connections"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="GET"
|
||||||
|
on-response="onGetConnectionsResponse"
|
||||||
|
on-error="onRequestError"></iron-ajax>
|
||||||
|
|
||||||
|
<iron-ajax id="ajaxPutPlcState"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="PUT"
|
||||||
|
on-response="_refresh"
|
||||||
|
on-error="onAjaxError"></iron-ajax>
|
||||||
|
<iron-ajax id="ajaxPutConnectionState"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="PUT"
|
||||||
|
on-response="_refresh"
|
||||||
|
on-error="onAjaxError"></iron-ajax>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Polymer({
|
||||||
|
is: 'strolch-wc-plc-connections',
|
||||||
|
|
||||||
|
behaviors: [
|
||||||
|
StrolchLocalizeBehavior, StrolchPlcBehavior
|
||||||
|
],
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
plc: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
connections: {
|
||||||
|
type: Array,
|
||||||
|
value: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onGetConnectionsResponse: function (e) {
|
||||||
|
this.connections = e.detail.response.data;
|
||||||
|
},
|
||||||
|
onGetPlcResponse: function (e) {
|
||||||
|
this.plc = e.detail.response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
isError: function (connection) {
|
||||||
|
return connection != null && connection.state === "Failed";
|
||||||
|
},
|
||||||
|
|
||||||
|
connect: function (e) {
|
||||||
|
this.sendSwitchState(e.model.connection.id, "Connected");
|
||||||
|
},
|
||||||
|
disconnect: function (e) {
|
||||||
|
this.sendSwitchState(e.model.connection.id, "Disconnected");
|
||||||
|
},
|
||||||
|
sendSwitchState: function (connectionId, state) {
|
||||||
|
this.$.ajaxPutConnectionState.url = this.baseRestPath + "/plc/connections/" + connectionId + "/state/" + state;
|
||||||
|
this.$.ajaxPutConnectionState.body = null;
|
||||||
|
this.$.ajaxPutConnectionState.generateRequest();
|
||||||
|
},
|
||||||
|
|
||||||
|
startPlc: function (e) {
|
||||||
|
this.sendPlcState("Started");
|
||||||
|
},
|
||||||
|
stopPlc: function (e) {
|
||||||
|
this.sendPlcState("Stopped");
|
||||||
|
},
|
||||||
|
reconfigurePlc: function (e) {
|
||||||
|
this.sendPlcState("Configured");
|
||||||
|
},
|
||||||
|
sendPlcState: function (state) {
|
||||||
|
this.$.ajaxPutPlcState.url = this.baseRestPath + "/plc/state/" + state;
|
||||||
|
this.$.ajaxPutPlcState.body = null;
|
||||||
|
this.$.ajaxPutPlcState.generateRequest();
|
||||||
|
},
|
||||||
|
|
||||||
|
reload: function (e) {
|
||||||
|
this._refresh();
|
||||||
|
},
|
||||||
|
_refresh: function (e) {
|
||||||
|
this.$.ajaxGetPlc.generateRequest();
|
||||||
|
this.$.ajaxGetConnections.generateRequest();
|
||||||
|
},
|
||||||
|
onAjaxError: function (e) {
|
||||||
|
this._refresh();
|
||||||
|
this.onRequestError(e);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</dom-module>
|
|
@ -0,0 +1,286 @@
|
||||||
|
<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.name]]</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.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 style="color:#0b8043"
|
||||||
|
icon="icons:radio-button-checked"></iron-icon>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[!address.value]]">
|
||||||
|
<iron-icon style="color:cornflowerblue"
|
||||||
|
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) {
|
||||||
|
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>
|
|
@ -0,0 +1,260 @@
|
||||||
|
<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-ws-observer/strolch-wc-ws-observer.html">
|
||||||
|
|
||||||
|
<link rel="import" href="./strolch-wc-plc-style.html">
|
||||||
|
<link rel="import" href="./strolch-wc-plc-behavior.html">
|
||||||
|
<link rel="import" href="./strolch-wc-plc-logical-device.html">
|
||||||
|
|
||||||
|
<dom-module id="strolch-wc-plc-logical-devices">
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<style is="custom-style" include="strolch-wc-plc-style">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<paper-icon-button class="g-pull-right" icon="refresh" on-tap="_refresh"></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template is="dom-if" if="[[arrayFilled(virtualAddresses)]]">
|
||||||
|
<h2>[[localize('virtualAddresses')]]</h2>
|
||||||
|
<paper-card elevation="1">
|
||||||
|
<div class="card-content">
|
||||||
|
|
||||||
|
<div class="g-row">
|
||||||
|
<div class="g-12">
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[virtualAddresses]]" as="address">
|
||||||
|
<div class="g-flex-table-row">
|
||||||
|
<div class="g-flex-table-cell address-field">
|
||||||
|
<div class="address">[[address.resource]] - [[address.action]]</div>
|
||||||
|
<div class="hw-address">[[address.address]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-cell no-grow value-cell">
|
||||||
|
|
||||||
|
<template is="dom-if" if="[[isBoolean(address.type)]]">
|
||||||
|
<paper-radio-group selected="{{address.value}}" attr-for-selected="name">
|
||||||
|
<paper-radio-button name="true">[[localize('on')]]
|
||||||
|
</paper-radio-button>
|
||||||
|
<paper-radio-button name="false">[[localize('off')]]
|
||||||
|
</paper-radio-button>
|
||||||
|
</paper-radio-group>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[isNumber(address.type)]]">
|
||||||
|
<paper-input class="value-input"
|
||||||
|
value="{{address.value}}"
|
||||||
|
no-label-float></paper-input>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[isString(address.type)]]">
|
||||||
|
<paper-input class="value-input"
|
||||||
|
value="{{address.value}}"
|
||||||
|
no-label-float></paper-input>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="g-flex-table-cell no-grow">
|
||||||
|
<paper-button raised on-tap="sendAddressNotification">[[localize('notify')]]
|
||||||
|
</paper-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</paper-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[devicesByGroup]]" as="group">
|
||||||
|
|
||||||
|
<h2>[[group.name]]</h2>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[group.data]]" as="device">
|
||||||
|
|
||||||
|
<strolch-wc-plc-logical-device device="[[device]]"
|
||||||
|
base-rest-path="[[baseRestPath]]"
|
||||||
|
observer-handler="[[observerHandler]]"></strolch-wc-plc-logical-device>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<iron-ajax id="ajaxGetDevices"
|
||||||
|
url="[[baseRestPath]]/plc/logicalDevices"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="GET"
|
||||||
|
on-response="onGetDevicesResponse"
|
||||||
|
on-error="onRequestError"></iron-ajax>
|
||||||
|
|
||||||
|
<iron-ajax id="ajaxGetVirtualAddresses"
|
||||||
|
url="[[baseRestPath]]/plc/addresses/virtual"
|
||||||
|
content-type="application/json"
|
||||||
|
handle-as="json"
|
||||||
|
method="GET"
|
||||||
|
on-response="onGetVirtualAddressesResponse"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<strolch-wc-ws-observer id="observerHandler" ws-path="[[wsObserverPath]]"></strolch-wc-ws-observer>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Polymer({
|
||||||
|
is: 'strolch-wc-plc-logical-devices',
|
||||||
|
|
||||||
|
behaviors: [
|
||||||
|
StrolchLocalizeBehavior, StrolchPlcBehavior
|
||||||
|
],
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
observerHandler: {
|
||||||
|
type: Object,
|
||||||
|
value: function () {
|
||||||
|
return ObserverHandler;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
registeredForUpdates: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
virtualAddresses: {
|
||||||
|
type: Array,
|
||||||
|
value: []
|
||||||
|
},
|
||||||
|
devicesByGroup: {
|
||||||
|
type: Array,
|
||||||
|
value: []
|
||||||
|
},
|
||||||
|
wsObserverPath: {
|
||||||
|
type: String,
|
||||||
|
value: function () {
|
||||||
|
return CustomWeb.baseWsPath + "/plc/observer";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Listeners */
|
||||||
|
onGetDevicesResponse: function (e) {
|
||||||
|
this.devicesByGroup = e.detail.response.data;
|
||||||
|
},
|
||||||
|
onGetVirtualAddressesResponse: function (e) {
|
||||||
|
this.virtualAddresses = e.detail.response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
sendAddressNotification: function (e) {
|
||||||
|
var a = e.model.address;
|
||||||
|
this.sendAddress("Notification", a.resource, a.action, a.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 () {
|
||||||
|
this.$.ajaxGetDevices.generateRequest();
|
||||||
|
this.$.ajaxGetVirtualAddresses.generateRequest();
|
||||||
|
|
||||||
|
if (!this.registeredForUpdates) {
|
||||||
|
this.$.observerHandler.register("Resource", "PlcAddress", "strolch-wc-plc-logical-devices", true, this.handleUpdate.bind(this));
|
||||||
|
this.registeredForUpdates = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onAjaxError: function (e) {
|
||||||
|
this._refresh();
|
||||||
|
this.onRequestError(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Lifecycle */
|
||||||
|
reload: function () {
|
||||||
|
this._refresh();
|
||||||
|
},
|
||||||
|
handleUpdate: function (notifyType, objectType, type, elements) {
|
||||||
|
console.log("Received updates for " + elements.length + " " + objectType + " " + type + " elements.");
|
||||||
|
|
||||||
|
for (var i = 0; i < elements.length; i++) {
|
||||||
|
this.observerHandler.notifyUpdate(objectType, type, elements[i].id, elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var registrations = {};
|
||||||
|
|
||||||
|
ObserverHandler = {
|
||||||
|
register: function (objectType, type, id, callback) {
|
||||||
|
if (objectType == null || type == null || id == null || callback == null)
|
||||||
|
throw "One of objectType, type, id or callback is null: " + objectType + ", " + type + ", " + id + ", " + callback;
|
||||||
|
var byObjectType = registrations[objectType];
|
||||||
|
if (byObjectType == null) {
|
||||||
|
byObjectType = {};
|
||||||
|
registrations[objectType] = byObjectType;
|
||||||
|
}
|
||||||
|
|
||||||
|
var byType = byObjectType[type];
|
||||||
|
if (byType == null) {
|
||||||
|
byType = {};
|
||||||
|
byObjectType[type] = byType;
|
||||||
|
}
|
||||||
|
|
||||||
|
byType[id] = callback;
|
||||||
|
},
|
||||||
|
|
||||||
|
notifyUpdate: function (objectType, type, id, element) {
|
||||||
|
if (objectType == null || type == null || id == null || element == null)
|
||||||
|
throw "One of objectType, type, id or element is null: " + objectType + ", " + type + ", " + id + ", " + element;
|
||||||
|
|
||||||
|
var byObjectType = registrations[objectType];
|
||||||
|
if (byObjectType == null) {
|
||||||
|
console.log("No observers for objectType " + objectType);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var byType = byObjectType[type];
|
||||||
|
if (byType == null) {
|
||||||
|
console.log("No observers for byType " + byType);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var callback = byType[id];
|
||||||
|
callback(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</dom-module>
|
|
@ -0,0 +1,119 @@
|
||||||
|
<link rel="import" href="../polymer/polymer.html">
|
||||||
|
<link rel="import" href="../paper-styles/color.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
||||||
|
|
||||||
|
<dom-module id="strolch-wc-plc-style">
|
||||||
|
<template>
|
||||||
|
<style is="strolch-wc-plc-style" include="strolch-wc-styles">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-card {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button, iron-icon {
|
||||||
|
color: var(--app-secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3 {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4 {
|
||||||
|
margin: 10px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex; /* or inline-flex */
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
order: 0; /* default is 0 */
|
||||||
|
flex-grow: 0; /* default 0 */
|
||||||
|
flex-shrink: 0; /* default 1 */
|
||||||
|
flex-basis: auto; /* default auto */
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex; /* or inline-flex */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
display: flex; /* or inline-flex */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions-right {
|
||||||
|
display: flex; /* or inline-flex */
|
||||||
|
flex-grow: 1; /* default 0 */
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.g-flex-table-cell {
|
||||||
|
padding: 0;
|
||||||
|
flex-basis: 150px;
|
||||||
|
min-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
flex-basis: 150px;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-icon {
|
||||||
|
color: var(--app-dark-warning-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-grow {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-input {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-field {
|
||||||
|
display: block;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-address {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: smaller;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-radio-button {
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</template>
|
||||||
|
</dom-module>
|
Loading…
Reference in New Issue