tangojs · hardion · Feb 23, 2018 · Feb 23, 2018 · Apr 14, 2018 · Apr 14, 2018
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# \<tangojs-label\>
+
+TangoJS Label connected to a Stri
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "tangojs-label",
+  "version": "0.1.0",
+  "description": "TangoJS Label connected to a String",
+  "authors": [
+    "Vincent Hardion <[email protected]>"
+  ],
+  "keywords": [
+    "web-component",
+    "polymer",
+    "tangojs"
+  ],
+  "license": "https://raw.githubusercontent.com/tangojs/tangojs-label/master/LICENSE",
+  "homepage": "https://github.com/tangojs/tangojs-label/",
+  "main": "tangojs-label.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0",
+    "tangojs-polymer": "^0.1.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>tangojs-label demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../tangojs-label.html">
+<!-- TANGOJS SCRIPT-->
+<script src="../node_modules/tangojs-core/lib/tangojs-core.js"></script>
+<script src="../node_modules/tangojs-connector-local/lib/tangojs-connector-local.js"></script>
+<script src="../node_modules/tangojs-connector-mtango/lib/tangojs-connector-mtango.js"></script>
+
+<!--
+    Configure your connector here.
+-->
+<script type="text/javascript">
+(function (window) {
+    'use strict'
+
+       // Setup tangojs-connector-local.
+       //const model = window.tangojsLocalDemoModel.createModel()
+       //const conn = new window.tangojs.connector.local.LocalConnector(model)
+
+       // example configuration for mTango rc3 backend
+       const conn = new window.tangojs.connector.mtango.MTangoConnector(
+	            'http://w-v-kitslab-cc-0:8000/tango/rest/rc3',
+		         'w-v-kitslab-csdb-0', // hostname
+			      '10000', // port
+			           'admin', // username
+				        'admin') // password
+       console.log('Tango connection');
+            // Bind desired connector to TangoJS API.
+            window.tangojs.core.setConnector(conn)
+	       })(window)
+</script>
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic tangojs-label demo</h3>
+      <demo-snippet>
+        <template>
+          <tangojs-label model="sys/tg_test/1/double_scalar"></tangojs-label>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>tangojs-label</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}
diff --git a/tangojs-label.html b/tangojs-label.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="import" href="../polymer/polymer-element.html">
+<!--link rel="import" href="html-led-element.html"-->
+<!--link rel="import" href="assets/tangojs-common-css.html"
+  id="tangojs-common-css"-->
+<link rel="import" href="../tangojs-polymer/with-tango-attribute.html">
+
+<dom-module id="tangojs-label">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    /*#root {
+      grid-template-columns: 1fr 1fr 1fr 30px 20px;
+    }
+    #name  { grid-column: 1; }
+    #value { grid-column: 2; }
+    #input { grid-column: 3; }
+    #unit  { grid-column: 4; }
+    #led   { grid-column: 5; }*/
+    </style>
+
+    <div id="root" class="tangojs-form-row">
+      <span id="name">[[info.label]]</span>
+      <span id="value" style$="background-color: [[qualityColor]]">[[attribute.value]]</span>
+      <span id="unit">[[unit]]</span>
+      <x-led id="led"></x-led>
+    </div>
+  </template>
+
+  <script>
+    /**
+     * `tangojs-label`
+     * TangoJS Label
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class TangojsLabel extends Tangojs.withTangoAttribute(Polymer.Element) {
+      static get is() { return 'tangojs-label'; }
+    }
+
+    window.customElements.define(TangojsLabel.is, TangojsLabel);
+  </script>
+</dom-module>
+
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'tangojs-label_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/test/tangojs-label_test.html b/test/tangojs-label_test.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>tangojs-label test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../tangojs-label.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <tangojs-label></tangojs-label>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <tangojs-label prop1="new-prop1"></tangojs-label>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('tangojs-label', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'tangojs-label');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello tangojs-label!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>