New style and added missing tags

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

apps/dashboard/xaal/dashboard/static/tags/barometer.tag

+<barometer>
+
+<span class="barometer">
+  <span class="pressure">{ pressure }&nbsp;hPa</span><br/>
+</span>
+
+
+<script>
+  this.addr = opts.xaal_addr;
+  this.pressure = null;
+  receive(data) {
+    this.pressure = Math.round(data['attributes']['pressure']);
+    this.update();
+  }
+</script>
+
+<style>
+.barometer {
+    font-weight: bold;
+    color : var(--color1);
+    align: center;
+}
+</style>
+
+</barometer>

apps/dashboard/xaal/dashboard/static/tags/co2meter.tag

+<co2meter>
+
+<span class="co2meter">
+  <span if={value} class="co2">{ value }&nbsp;ppm</span>
+</span>
+
+
+<script>
+  this.addr = opts.xaal_addr;
+  this.value = '';
+  receive(data) {
+    this.value = data['attributes']['co2'];
+    this.update();
+  }
+</script>
+
+<style>
+.co2 {
+    font-weight: bold;
+    color : var(--color1);
+    align: center;
+}
+</style>
+
+</co2meter>

apps/dashboard/xaal/dashboard/static/tags/door.tag

+<door>
+
+<span class="door">
+  <span class="{class}">⚛</span>
+</span>
+
+
+<script>
+  this.addr = opts.xaal_addr;
+  this.class = 'close';
+    
+  receive(data) {
+    state = data['attributes']['position'];
+    if (state == true) {
+       this.class = 'open'
+    }
+    else {
+        this.class = 'close'
+    }
+    this.update();
+  }
+</script>
+
+<style>
+.open {
+    font-weight: bold;
+    color : var(--color3);
+    align: center;
+}
+
+.close {
+    font-weight: bold;
+    color : var(--color2);
+    align: center;
+}
+    
+</style>
+
+</door>

apps/dashboard/xaal/dashboard/static/tags/hygrometer.tag

 <hygrometer>
 
 <span class="hygrometer">
-  <span class="humidity">{ humidity }&nbsp;%</span>
+  <span if={value} class="humidity">{ value }&nbsp;%</span>
 </span>
 
 
 <script>
   this.addr = opts.xaal_addr;
-  this.humidity = '__';
+  this.value = null;
   receive(data) {
-    this.humidity = data['attributes']['humidity'];
+    this.value = data['attributes']['humidity'];
     this.update();
   }
 </script>

apps/dashboard/xaal/dashboard/static/tags/lamp.tag

 <lamp>
 
-<div class="lamp">
-<div class="{stateClass}">{ light }</div>
-  <button class="button ripple" name="btn_on" onclick={ btn }>ON</button>
-  <button class="button ripple" name="btn_off" onclick={ btn }>OFF</button>
+<div class="onoffswitch">
+  <input type="checkbox" class="onoffswitch-checkbox" id={ tag_id } onchange={ chk } checked={checked}>
+    <label class="onoffswitch-label" for={ tag_id }>
+        <span class="onoffswitch-inner"></span>
+        <span class="onoffswitch-switch"></span>
+    </label>
 </div>
 
 <script>
   this.addr = opts.xaal_addr
-  this.light = '__';
-  this.stateClass = 'state-unknow';
+  this.tag_id = 'btn_'+Math.random();
     
   receive(data) {
     state = data['attributes']['light']
     if (state == true) {
-      this.light = 'ON'
-      this.stateClass = 'state-on'
+      this.checked = true
     }
     else {
-      this.light = 'OFF'
-      this.stateClass = 'state-off'
+      this.checked = false
     }
     this.update()
   }
 
-  btn(e) {
-    if (e.target.name =='btn_on')
+  chk(e) {
+    if (e.target.checked == true)
       sio_send_request(this.addr,'on',{})
-    if (e.target.name =='btn_off')
+    else
       sio_send_request(this.addr,'off',{})
   }
 </script>
-
-<style>
- .state-on {
-     color:  var(--color3);
-     font-weight: bold;
-     padding: 8px;
- }
-
- .state-unknow, .state-off {
-     color:  var(--color1);
-     font-weight: bold;
-     padding: 8px;
- }
-</style>
 </lamp>

apps/dashboard/xaal/dashboard/static/tags/motion.tag

+<motion>
+
+<span class="motion">
+  <span class="{class}">⚛</span>
+</span>
+
+
+<script>
+  this.addr = opts.xaal_addr;
+  this.presence = false;
+  this.class = 'no_motion';
+    
+  receive(data) {
+    state = data['attributes']['presence'];
+    if (state == true) {
+       this.presence = true
+       this.class = 'motion'
+    }
+    else {
+       this.presence = false
+        this.class = 'no_motion'
+    }
+    this.update();
+  }
+</script>
+
+<style>
+.motion {
+    font-weight: bold;
+    color : var(--color3);
+    align: center;
+}
+
+.no_motion {
+    font-weight: bold;
+    color : var(--color2);
+    align: center;
+}
+    
+</style>
+
+</motion>

apps/dashboard/xaal/dashboard/static/tags/powermeter.tag

 <powermeter>
 
 <span class="powermeter">
-  <span if={power} class="power">{ power }&nbsp;W</span><br/>
+  <span class="power">{ power }&nbsp;W</span><br/>
   <span if={energy} class="energy">{ energy }&nbsp;kW</span>
 </span>
 

apps/dashboard/xaal/dashboard/static/tags/thermometer.tag

 <thermometer>
 
 <span class="thermometer">
-    <span class="temperature">{ temperature }&nbsp;°</span>
+    <span if={value} class="temperature">{ value }&nbsp;°</span>
 </span>
 
 <script>
   this.addr = opts.xaal_addr
-  this.temperature = '__._';
+  this.value = null
   receive(data) {
-    this.temperature = data['attributes']['temperature']
+    this.value = data['attributes']['temperature']
     this.update()
   }
 </script>