mv xaal webcomp.

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/trunk@1076 b32b6428-25c9-4566-ad07-03861ab6144f

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-dashboard/xaal-dashboard.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+
+<dom-module id="xaal-dashboard">
+    
+    <template>
+        <iron-ajax
+                auto
+                url="http://127.0.0.1:9000/api/xaal/devices/"
+                handle-as="json"
+                on-response="handleDevicesResponse"></iron-ajax>
+    </template>
+
+    <script>
+         // Polymer function, register element
+        Polymer({
+            is: "xaal-dashboard",
+            handleDevicesResponse: function(e) {
+                var devices = e.detail.response;
+                console.log('Fetching devices api response');
+                console.log(devices);
+                for(var addr in devices) {
+                    var componentName = "xaal-"+devices[addr]['devType'].replace(".","-");
+                    this.loadElement(componentName,addr);
+                }
+            },
+            loadElement:  function (name,addr){
+                // Dynamic loading xaal-xxxx elements
+                console.log('Loading xaal component');
+                var urlElement = '/bower_components/'+name+'/'+name+'.html';
+                this.importHref(urlElement, function(e) {
+                    var newElement = document.createElement(name);
+                    newElement.setAttribute("id",addr);
+                    newElement.setAttribute("addr",addr);
+                    Polymer.dom(this.root).appendChild(newElement); 
+                }, function(e) {
+                    // loading error
+                    console.log("No element found")
+                });
+            },
+        });
+
+            if(typeof(EventSource) !== "undefined") {
+                    var source = new EventSource('http://127.0.0.1:9000/api/xaal/notifications');
+                    source.addEventListener('attributesChange',handleNotifications,false);
+            } else {
+                alert("Sorry, your browser does not support server-sent events...");
+            }
+
+        function handleNotifications(event){
+            var msg = JSON.parse(event.data);
+            var element = document.getElementById(msg.header.source);
+            if (element != null) {
+                console.log(element);
+                console.log(msg.body);
+                for(var attr in msg.body) {
+                    element.setAttribute(attr,msg.body[attr]);
+                }
+            }
+        }
+    </script>
+</dom-module>

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-lamp-basic/xaal-lamp-basic.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
+<dom-module id="xaal-lamp-basic">
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 2px;
+      padding: 4px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+
+
+  <template>
+       <iron-ajax id="xaalsender"
+                url = "http://127.0.0.1:9000/api/xaal/send"
+                method="POST"
+                headers='{"Content-Type": "application/json;charset=UTF-8"}'
+                body="{{ajaxBody}}"
+                handle-as="json"></iron-ajax>
+    
+                <h1>Lamp</h1>
+                Addr: <span>{{addr}}</span></br>
+                Light: <span>{{light}}</span></br>
+                Switch light: <paper-toggle-button id="switch" checked></paper-toggle-button></br>
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-lamp-basic",
+         listeners: {
+            'switch.change': 'onToggle',
+        },
+        properties: {
+            addr : String,
+            light: {
+                type: Boolean,
+                value: 0
+            }
+        },
+         onToggle: function () {
+                console.log(this.$.switch.checked);
+                if (this.$.switch.checked){
+                    this.send(this.addr,"on");
+                    console.log("on");
+                } else {
+                    this.send(this.addr,"off");
+                    console.log("off");
+                }
+        },
+        send: function(addr,action,body){
+            if (body!==undefined){
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action,'body':body});
+            } else {
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action});
+            }
+            this.$.xaalsender.generateRequest();
+        }
+    });
+  </script>
+</dom-module>
+

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-lamp-cie1931/xaal-lamp-cie1931.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
+
+<dom-module id="xaal-lamp-cie1931"> 
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 2px;
+      padding: 4px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+
+  <template>
+      <iron-ajax id="xaalsender"
+                url = "http://127.0.0.1:9000/api/xaal/send"
+                method="POST"
+                headers='{"Content-Type": "application/json;charset=UTF-8"}'
+                body="{{ajaxBody}}"
+                handle-as="json"></iron-ajax>
+           
+            <h1>Lamp Color</h1>
+            Addr: <span>{{addr}}</span></br>
+            Light: <span>{{light}}</span></br>
+            Dimmer: <span>{{dimmer}}</span></br>
+            Saturation: <span>{{saturation}}</span></br>
+            Switch light: <paper-toggle-button id="switch" checked></paper-toggle-button></br>
+            Dim light: <paper-slider id="dimmer" min="0" max="100"></paper-slider></br>
+            Saturation: <paper-slider id="saturation" min="0" max="254"></paper-slider></br> 
+            TODO add color picker
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-lamp-cie1931",
+        listeners: {
+            'switch.change': 'onToggle',
+            'dimmer.change': 'onDim',
+            'saturation.change': 'onSat',
+        },
+        properties: {
+            addr : {
+                type: String,
+                reflectToAttribute: true
+            },
+            light: {
+                type: String,
+                reflectToAttribute: true
+            },
+            dimmer: {
+                type: String,
+                reflectToAttribute: true
+            },
+            saturation: {
+                type: String,
+                reflectToAttribute: true
+            },
+
+        },
+        onToggle: function () {
+                console.log(this.$.switch.checked);
+                if (this.$.switch.checked){
+                    this.send(this.addr,"on");
+                    console.log("on");
+                } else {
+                    this.send(this.addr,"off");
+                    console.log("off");
+                }
+        },
+        onDim: function () {
+            console.log(this.$.dimmer.value);
+            var target = this.$.dimmer.value;
+            this.send(this.addr,"dim",{'target': parseInt(target)});
+        }, 
+        onSat: function () {
+            var target = this.$.saturation.value;
+            this.send(this.addr,"saturation",{'target': parseInt(target)});
+        }, 
+        send: function(addr,action,body){
+            if (body!==undefined){
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action,'body':body});
+            } else {
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action});
+            }
+            this.$.xaalsender.generateRequest();
+        }
+    });
+  </script>
+</dom-module>

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-lamp-dimmer/xaal-lamp-dimmer.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
+
+<dom-module id="xaal-lamp-dimmer"> 
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 2px;
+      padding: 4px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+    
+  <template>
+      <iron-ajax id="xaalsender"
+                url = "http://127.0.0.1:9000/api/xaal/send"
+                method="POST"
+                headers='{"Content-Type": "application/json;charset=UTF-8"}'
+                body="{{ajaxBody}}"
+                handle-as="json"></iron-ajax>
+           
+            <h1>Lamp Dimmer</h1>
+            Addr: <span id="addrVal">{{addr}}</span></br>
+            Light: <span>{{light}}</span></br>
+            Dimmer: <span>{{dimmer}}</span></br>
+            Switch light: <paper-toggle-button id="switch" checked></paper-toggle-button></br>
+            Dim light: <paper-slider id="dimmer" min="0" max="100"></paper-slider>
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-lamp-dimmer",
+        listeners: {
+            'switch.change': 'onToggle',
+            'dimmer.change': 'onDim',
+        },
+        properties: {
+            addr : {
+                type: String,
+                reflectToAttribute: true
+            },
+            light: {
+                type: String,
+                reflectToAttribute: true
+            },
+            dimmer: {
+                type: String,
+                reflectToAttribute: true
+            },
+        },
+        onToggle: function () {
+                console.log(this.$.switch.checked);
+                if (this.$.switch.checked){
+                    this.send(this.addr,"on");
+                    console.log("on");
+                } else {
+                    this.send(this.addr,"off");
+                    console.log("off");
+                }
+        },
+        onDim: function () {
+            console.log(this.$.dimmer.value);
+            var target = this.$.dimmer.value;
+            this.send(this.addr,"dim",{'target': parseInt(target)});
+        }, 
+        send: function(addr,action,body){
+            if (body!==undefined){
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action,'body':body});
+            } else {
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action});
+            }
+            this.$.xaalsender.generateRequest();
+        }
+    });
+  </script>
+</dom-module>

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-powerrelay-basic/xaal-powerrelay-basic.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
+
+<dom-module id="xaal-powerrelay-basic">
+
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 2px;
+      padding: 4px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+
+
+  <template>
+      <iron-ajax id="xaalsender"
+                url = "http://127.0.0.1:9000/api/xaal/send"
+                method="POST"
+                headers='{"Content-Type":"application/json;charset=UTF-8"}'
+                body="{{ajaxBody}}"
+                handle-as="json"></iron-ajax>
+    
+        <h1>Power Relay</h1>
+        Addr: <span>{{addr}}</span></br>
+        Power: <span>{{power}}</span> </br>
+        Switch: <paper-toggle-button id="switch"></paper-toggle-button>
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-powerrelay-basic",
+        listeners: {
+            'switch.change': 'onToggle',
+        },
+        properties: {
+            addr : {
+                type: String,
+                reflectToAttribute: true
+            },
+            power: {
+                type: String,
+                reflectToAttribute: true
+            }
+        },
+        onToggle: function () {
+                console.log(this.$.switch.checked);
+                if (this.$.switch.checked){
+                    this.send(this.addr,"on");
+                    console.log("on");
+                } else {
+                    this.send(this.addr,"off");
+                    console.log("off");
+                }
+        },
+        send: function(addr,action,body){
+            if (body!==undefined){
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action,'body':body});
+            } else {
+                this.ajaxBody=JSON.stringify({'addr':addr,'action':action});
+            }
+            this.$.xaalsender.generateRequest();
+        }
+
+    });
+  </script>
+</dom-module>

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-statistics/xaal-statistics.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+
+<dom-module id="xaal-statistics">
+
+  <template>
+       <iron-ajax id="getStatistics"
+                url = "http://127.0.0.1:9000/api/xaal/statistics/"
+                handle-as="json"
+                on-response="handleStatisticsResponse"></iron-ajax>
+  Devices: <span>{{devices}}</span>
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-statistics",
+        properties: {
+            devices: {
+                type: String
+            },
+        },
+       attached: function(){
+            this.$.getStatistics.generateRequest();
+        },
+        handleStatisticsResponse: function(e) {
+                var statistics = e.detail.response;
+                console.log(statistics);
+                this.devices = statistics.devices;
+        }
+    });
+  </script>
+</dom-module>
+

apps/frontend/polymer/xaal-webcomponents-polymer/xaal-switch-basic/xaal-switch-basic.html

+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+
+<dom-module id="xaal-switch-basic">
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      background: #fff;
+      border-radius: 2px;
+      padding: 4px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+
+  <template>
+       <iron-ajax id="getDevice"
+                url = "http://127.0.0.1:9000/api/xaal/devices/"+"{{addr}}"
+                handle-as="json"
+                on-response="handleDeviceResponse"></iron-ajax>
+
+      <h1>Switch</h1>
+      Addr: <span>{{addr}}</span></br>
+      Position: <span>{{position}}</span>
+  </template>
+
+  <script>
+    Polymer({
+        is: "xaal-switch-basic",
+        properties: {
+            addr : {
+                type: String,
+                reflectToAttribute: true
+            },
+            position: {
+                type: String,
+                reflectToAttribute: true
+            },
+        },
+       attached: function(){
+            this.$.getDevice.generateRequest();
+        },
+        handleDeviceResponse: function(e) {
+                var device = e.detail.response;
+                console.log(device);
+                this.position = device.position;
+        }
+    });
+  </script>
+</dom-module>
+