FUNCT Add wifi support

5 files changed, 74 insertions, 20 deletions

diff --git a/src/index.js b/src/index.js
index 00da226..879e10e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,9 +18,12 @@ import { init } from './js/app';
 
 import { api } from 'agl-js-api';
 import * as bluetooth from './js/bluetooth';
+import * as wifi from './js/wifi';
 
 /* CSS */
 import './styles/app.scss';
 
+window.bluetooth = bluetooth;
+window.wifi = wifi;
 api.init();
 init();
diff --git a/src/js/app.js b/src/js/app.js
index 458a5d4..fb7f77f 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,5 +1,5 @@
 import * as bluetooth from './bluetooth';
-import { init as init_wifi } from './wifi';
+import * as wifi from './wifi';
 import { load as load_template } from './templates';
 import Mustache from 'mustache';
 
@@ -20,6 +20,7 @@ export function init() {
         Mustache.parse(template);
         show();
         bluetooth.init();
+        wifi.init();
     }, function(error) {
         console.error('ERRROR loading main template', error);
     });
diff --git a/src/js/wifi.js b/src/js/wifi.js
index 35e7235..d9f91d0 100644
--- a/src/js/wifi.js
+++ b/src/js/wifi.js
@@ -1,34 +1,49 @@
 import { network } from 'agl-js-api';
 import Mustache from 'mustache';
+import { load as load_template } from './templates';
+import * as app from './app';
 
 var template;
+var page = {
+    devices: []
+}
 
+function render(){
+    document.body.innerHTML = Mustache.render(template, page);
+}
 
 function update_devices(devices) {
-    console.log('update_devices', devices);
-    var deviceList = document.getElementById('WifiContainer');
-    deviceList.innerHTML = '';
-
+    page.devices = [];
     devices.forEach(function(device) {
         if( device.properties.type === 'wifi' ) {
-            deviceList.innerHTML += Mustache.render(template, device);
+            page.devices.push(device);
         }
     });
+
+    console.log(page);
+
+    render();
+}
+
+function refresh_devices() {
+    network.services().then(function(result) {
+        update_devices(result.values);
+    });
 }
 
 export function init() {
-    template = document.getElementById('wifi-device-template').innerHTML;
-    Mustache.parse(template);
-
-    setInterval(function() {
-        network.services().then(function(result) {
-            update_devices(result.values);
-        })
-    }, 10000);
-
-    network.on_global_state(function(result) {
-        console.log('on_global_state', result);
-    }).then(function(){
-        console.log('SUBSCRIBED', 'on_global_state');
+    load_template('wifi.template.html').then(function(result) {
+        template = result;
+        Mustache.parse(template);
+    }, function(error) {
+        console.error('ERROR Loading bluetooth template', error);
     });
+}
+
+export function show() {
+    refresh_devices();
+}
+
+export function hide() {
+    app.show();
 }
\ No newline at end of file
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
index 6965b5a..e37c935 100644
--- a/src/templates/main.template.html
+++ b/src/templates/main.template.html
@@ -33,7 +33,7 @@
         <div class="col-1">
             <i class="fas fa-wifi"></i>
         </div>
-        <div class="col-9">
+        <div class="col-9" onclick="window.wifi.show()">
             Wifi
         </div>
         <div class="col-2 text-right">
diff --git a/src/templates/wifi.template.html b/src/templates/wifi.template.html
new file mode 100644
index 0000000..a2203c3
--- /dev/null
+++ b/src/templates/wifi.template.html
@@ -0,0 +1,35 @@
+<div class="container">
+    <h2 class="my-5">
+        <div class="row">
+            <div class="col-1" onclick="wifi.hide()">
+                <i class="fas fa-chevron-left"></i>
+            </div>
+            <div class="col-10">
+                Wifi
+            </div>
+            <div class="col-1" onclick="wifi.show()">
+                <i class="fas fa-sync"></i>               
+            </div> 
+        </div>
+    </h2>
+    <div class="list-group scrollable">
+            {{ #devices }}
+                <div class="row border-bottom py-3 list-group-action">
+                    <div class="col-1">
+                        <i class="fas fa-wifi"></i>
+                    </div>
+                    <div class="col-9">
+                        <div>
+                            {{ properties.name }}
+                        </div>
+                        <div class="badge badge-secondary">
+                            {{ properties.ethernet.address}}
+                        </div>
+                    </div>
+                    <div class="col-2 text-right">
+                        {{ properties.strength }}%
+                    </div>
+                </div>
+            {{ /devices }}
+        </div>
+    </div>
\ No newline at end of file