Add files via upload

Sources/CustomControls/Table/control/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2020 Oli Folkerd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Sources/CustomControls/Table/control/README.md

@@ -0,0 +1,64 @@
+![Tabulator Table](http://olifolkerd.github.io/tabulator/images/tabulator.png)
+
+An easy to use interactive table generation JavaScript library
+
+Full documentation & demos can be found at: [http://tabulator.info](http://tabulator.info)
+***
+![Tabulator Table](http://tabulator.info/images/tabulator_table.jpg)
+***
+
+Features
+================================
+Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array or JSON formatted data.
+
+Simply include the library and the css in your project and you're away!
+
+Tabulator is packed with useful features including:
+
+![Tabulator Features](http://olifolkerd.github.io/tabulator/images/featurelist_share.png)
+
+
+Frontend Framework Support
+================================
+Tabulator is built to work with all the major front end JavaScript frameworks including React, Angular and Vue.
+
+
+Setup
+================================
+Setting up tabulator could not be simpler.
+
+Include the library and the css
+```html
+<link href="dist/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
+```
+
+Create an element to hold the table
+```html
+<div id="example-table"></div>
+```
+
+Turn the element into a tabulator with some simple javascript
+```js
+var table = new Tabulator("#example-table", {});
+```
+
+
+### Bower Installation
+To get Tabulator via the Bower package manager, open a terminal in your project directory and run the following commmand:
+```
+bower install tabulator --save
+```
+
+### NPM Installation
+To get Tabulator via the NPM package manager, open a terminal in your project directory and run the following commmand:
+```
+npm install tabulator-tables --save
+```
+
+### CDN - UNPKG
+To access Tabulator directly from the UNPKG CDN servers, include the following two lines at the start of your project, instead of the localy hosted versions:
+```html
+<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
+```

Sources/CustomControls/Table/control/codeDnomaid.js

@@ -0,0 +1,54 @@
+		let ArrayData = [];
+		let ArrayColumn = [];
+		let table;
+		let selectedRow = null;
+		// Initialize the custom control (without a successful initialization, the CWC will remain empty. Make sure to include the webcc.min.js script!)
+		// "result" is a boolean defining if the connection was successfull or not.
+		function init(result) {
+            if (result) {
+                webccInterfaceInit();				
+            } else {
+                console.log('Connection NOK');
+            }
+        }
+		WebCC.start(init, webccInterface.contract, EXTENSIONS, TIMEOUT);		
+		function showDemoData() {
+			// Get the table container element
+			var tableContainer = document.getElementById("example-table");
+		}
+		function drawTable(columnStyleString, tableDataString) {
+			try {
+				var tabledata = (tableDataString && JSON.parse(tableDataString)) || [];
+				var columnStyle = (columnStyleString && JSON.parse(columnStyleString)) || [];
+			} catch(e) {
+				console.error('Error parsing JSON:', e);
+				return; 
+			}
+			//choose how the table should look like or behave. More information on http://tabulator.info/
+			table = new Tabulator("#example-table", {
+				height: 'calc(100% - 2px)', // set height of table to 100% minus 2 px, because the border of the table is 1px top and border
+				data: tabledata, //load initial data into table
+				layout: "fitColumns", //fit columns to width of table (optional)
+				columns: columnStyle,
+				selectable: true, // Enable selection				
+				rowClick: function (e, row) { // Table configuration options
+					// Deselect all rows
+					if (selectedRow) {				
+					table.deselectRow();
+					}
+					// Select the clicked row
+					row.select();
+					selectedRow = row;
+				}  			
+			});
+		}
+		function showRuntimeData() {
+			// Get the table container element
+			var tableContainer = document.getElementById("example-table");
+			// Attach a click event listener to the table container
+			tableContainer.addEventListener("click", function () {
+			// Get the selected row(s)
+			var selectedRows = table.getSelectedRows();
+			WebCC.Events.fire("SelectedRow",selectedRows[0]._row.data);						
+			});		
+		}	

Sources/CustomControls/Table/control/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang='en' style="height: 100%;">
+
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
+	<script src='webcc.min.js'></script> <!-- mandatory dependency -->
+	<script src="./webccInterface.js"></script>
+	<!--Tabulator-->
+	<script type="text/javascript" src="./dist/js/tabulator.min.js"></script>
+	<link href="./dist/css/tabulator.css" rel="stylesheet">
+</head>
+
+<body style="height: 100%; margin: 0;">
+	<div id="example-table"></div>
+	<script src='./codeDnomaid.js'></script>
+</body>
+
+</html>

Sources/CustomControls/Table/control/webccInterface.js

@@ -0,0 +1,69 @@
+// contract (same as manifest.json)
+const CONTRACT = {
+    methods: {
+		DrawTableData: function(tableDataString){
+			ArrayData = tableDataString;			
+			drawTable(ArrayColumn,ArrayData);
+		}
+	},  
+    events: ["SelectedRow"],
+    properties: {"TableDataString": " ","ColumnStyleString": " "},
+    types: {}
+};
+// placeholder to include additional Unified dependencies (not used in this example)
+const EXTENSIONS = ['HMI'];
+// connection timeout
+const TIMEOUT = 1000;
+
+var webccInterface = function () {
+    var init_ = function () {
+        console.log('Interface initialized');
+		ArrayColumn = "[{\"title\":\"ID\", \"field\":\"ID\"},{\"title\":\"Name\", \"field\":\"Name\"},{\"title\":\"Temperature\", \"field\":\"Temperature\"},{\"title\":\"Time\", \"field\":\"Time\"}]";			
+		ArrayData = "[{\"ID\":\"1\",\"Name\":\"Test1\",\"Temperature\":\"1°C\",\"Time\":\"00_00_00 00_00_1999\"},{\"ID\":\"2\",\"Name\":\"Test2\",\"Temperature\":\"2°C\",\"Time\":\"00_00_01 00-00-1999\"}]"; 
+		WebCC.Properties.ColumnStyleString = ArrayColumn;
+		WebCC.Properties.TableDataString = ArrayData;
+		drawTable(ArrayColumn,ArrayData);
+		// Subscribe for value changes
+		webccInterface.subscribe();																	   							 
+    };
+	// Set current values when CWC shows up
+    var setProperty_ = function (data) {
+		switch (data.key) {
+			case "TableDataString":
+				if (data.value) {
+					ArrayData = data.value;
+				}
+				break;			
+			case "ColumnStyleString":
+				if (data.value) {
+					ArrayColumn = data.value;
+				}
+				break;
+			}
+		drawTable(ArrayColumn,ArrayData);		
+		console.log('Set property: Key <', data.key, '>',' Value <', data.value, '>');
+    };
+	var subscribe_ = function () {		
+		WebCC.onPropertyChanged.subscribe(webccInterface.setProperty);
+		console.log('Subscribe');				
+    };	
+    return {
+		init: init_,
+		setProperty: setProperty_,
+		subscribe: subscribe_,
+        contract: CONTRACT
+    };
+}();
+
+var webccInterfaceInit = function () {
+    // Initialize
+	if (WebCC.isDesignMode) {
+		webccInterface.init();
+		showDemoData();
+		console.log('Design Mode');
+	}else {
+		webccInterface.init();
+		showRuntimeData();
+		console.log('Connection OK');
+	}		    
+};