Skip to content
Snippets Groups Projects
Commit b489b449 authored by ptangu01's avatar ptangu01
Browse files

add xaal-device component

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/trunk@1320 b32b6428-25c9-4566-ad07-03861ab6144f
parent 8e19970d
No related branches found
No related tags found
No related merge requests found
{
"directory": "../bower_components"
}
{
"name": "xaal-device",
"version": "0.0.0",
"description": "generic xAAL device webcomponent",
"main": "xaal-device",
"keywords": [
"xAAL"
],
"authors": [
"ptanguy"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"../bower_components",
"test",
"tests"
],
"dependencies": {
"paper-card": "PolymerElements/paper-card#~1.0.5"
}
}
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>xaal-device Demo</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../xaal-device.html">
</head>
<body>
<p>An example of <code>&lt;xaal-device&gt;</code>:</p>
<xaal-device>Testing</xaal-device>
</body>
</html>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<!--
Inspired by the material design "paper-card"
### Styling
--xaal-device
--xaal-device-header
--xaal-device-header-text
--xaal-device-methods
-->
<dom-module id="xaal-device">
<template>
<style>
:host {
display: inline-block;
position: relative;
box-sizing: border-box;
background: #fff;
border-radius: 2px;
@apply(--xaal-device);
}
paper-material {
border-radius: inherit;
@apply(--layout-fit);
}
.header {
position: relative;
@apply(--xaal-device-header);
}
.header .friendlyname-text {
padding: 16px;
font-size: 24px;
font-weight: bold;
@apply(--xaal-device-header-text);
}
:host ::content .xaal-device-notifications {
padding: 16px;
position: relative;
@apply(--xaal-device-notifications);
}
:host ::content .xaal-device-methods {
padding: 16px;
position: relative;
@apply(--xaal-device-methods);
}
</style>
<iron-ajax id="xaalsender"
url = "{{apiSender}}"
method="POST"
headers='{"Content-Type": "application/json;charset=UTF-8"}'
body="{{ajaxBody}}"
handle-as="json"></iron-ajax>
<iron-ajax id="getDevice"
url="{{apiDevice}}"
handle-as="json"
on-response="handleDeviceResponse"></iron-ajax>
<paper-material elevation="[[elevation]]"></paper-material>
<div class="header">
<div class="friendlyname-text">[[friendlyname]]</div>
</div>
<content></content>
</template>
<script>
Polymer({
is: "xaal-device",
properties: {
apilocation: {
type: String,
reflectToAttribute: true
},
elevation: {
type: Number,
value: 3
},
addr : String,
friendlyname: {
type: String,
value: 'Friendly Name'
}
},
attached: function(){
this.apiDevice = this.apilocation + "/api/xaal/devices/" + this.addr;
this.$.getDevice.generateRequest();
},
handleDeviceResponse: function(e) {
var device = e.detail.response;
},
send: function(addr,action,body){
this.apiSender = this.apilocation + "/api/xaal/send/";
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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment