FUNCT Added bluetooth screen

15 files changed, 287 insertions, 86 deletions

diff --git a/package.json b/package.json
index 1109399..6fd6ffa 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
         "automotivegradelinux"
     ],
     "devDependencies": {
+        "@fortawesome/fontawesome-free": "^5.11.2",
         "clean-webpack-plugin": "^1.0.1",
         "copy-webpack-plugin": "^4.6.0",
         "css-loader": "^2.1.0",
diff --git a/src/index.html b/src/index.html
index 6f16a23..6ec2e60 100644
--- a/src/index.html
+++ b/src/index.html
@@ -28,46 +28,50 @@
             <div class="container">
                 <a href="#" class="entry" onclick="window.show('datetime');">
                     <div class="icon">
-                        <span class="icon-time"></span>
+                        <i class="fa fa-clock"></i>
                     </div>
                     <div class="label">
                         Date & Time
                     </div>
+                    <div class="control">
+                    </div>
                 </a>
                 <a href="#" class="entry">
                     <div class="icon">
-                        <span class="icon-bluetooth"></span>
+                        <i class="fab fa-bluetooth-b"></i>
                     </div>
                     <div class="label" onclick="window.show('bluetooth');">
                         Bluetooth
                     </div>
                     <div id="BluetoothControl" class="control enabled" onclick="window.toggle_bluetooth();">
-                        <span class="icon-toggle_on"></span>
-                        <span class="icon-toggle_off"></span>
+                        <span class="fa fa-toggle-on on"></span>
+                        <span class="fa fa-toggle-off off"></span>
                     </div>
                 </a>
                 <a href="#" class="entry" onclick="window.show('wifi');">
                     <div class="icon">
-                        <span class="icon-wifi"></span>
+                        <i class="fas fa-wifi"></i>
                     </div>
                     <div class="label">
                         Wifi
                     </div>
                     <div class="control">
-                        <span class="icon-toggle_off"></span>
+                        <!-- <span class="fa fa-toggle-on on"></span> -->
+                        <span class="fa fa-toggle-off off"></span>
                     </div>
                 </a>
                 <a href="#" class="entry" onclick="window.show('wired');">
                     <div class="icon">
-                        <span class="icon-ethernet"></span>
+                        <i class="fas fa-network-wired"></i>
                     </div>
                     <div class="label">
                         Wired
                     </div>
                 </a>
                 <a href="#" class="entry" onclick="window.show('version');">
+                    <div class="icon"></div>
                     <div class="icon">
-                        <span class="icon-speed"></span>
+                        <i class="fas fa-tachometer-alt"></i>
                     </div>
                     <div class="label">
                         Version info
@@ -78,7 +82,10 @@
 
         <div class="secondary page hide" id="datetime">
             <h1 class="header">
-                Date & Time
+                <a href="#" class="backButton" onclick="window.hide('datetime')">
+                    <i class="fas fa-chevron-left"></i>
+                </a>
+                Date & Time 
             </h1>
             <div class="entry">
                 <h2>
@@ -90,59 +97,86 @@
                     Time
                 </h2>
             </div>
-            <a href="#" class="confirm button" onclick="window.hide('datetime')">
-                Confirm
-            </a>
         </div>
 
         <div class="secondary page hide" id="bluetooth">
             <h1 class="header">
+                <a href="#" class="backButton" onclick="window.hide('bluetooth')">
+                    <i class="fas fa-chevron-left"></i>
+                </a>
                 Bluetooth
             </h1>
             <div id="BluetoothContainer" class="container"></div>
+            <div class="footer">
+                <a href="#" filter="available" class="button active" onclick="window.setFilter_bluetooth(this)">
+                    Available
+                </a>
+                <a href="#" filter="paired" class="button" onclick="window.setFilter_bluetooth(this)">
+                    Paired
+                </a>
+                <a href="#" filter="connected" class="button" onclick="window.setFilter_bluetooth(this)">
+                    Connected
+                </a>
+            </div>
             <script id="bluetooth-device-template" type="x-tmpl-mustache">
-                <a href="#" class="entry">
+                <div class="entry" deviceId="{{device}}">
                     <div class="icon">
-                        <span class="icon-{{ properties.icon }}"></span>
+                        <span class="fab fa-bluetooth"></span>
                     </div>
-                    <div class="label">
-                        {{ properties.name }}
+                    <div class="label" onclick="window.manage_bluetooth('{{device}}', {{properties.paired}}, {{ properties.connected }})">
+                        <div class="title">
+                            {{ properties.name }}
+                        </div>
+                        <div class="subtitle">
+                            {{ properties.address }}
+                        </div>
                     </div>
-                    <div class="control">
-                        <span class="icon-clear"></span>
+                    <div class="control" onclick="window.remove_device_bluetooth('{{device}}')">
+                        <span class="fa fa-trash"></span>
                     </div>
-                </a>
+                </div>
             </script>
-            <a href="#" class="confirm button" onclick="window.hide('bluetooth')">
-                Confirm
-            </a>
         </div>
 
         <div class="secondary page hide" id="wifi">
             <h1 class="header">
+                <a href="#" class="backButton" onclick="window.hide('wifi')">
+                    <i class="fas fa-chevron-left"></i>
+                </a>
                 Wifi
             </h1>
-            <a href="#" class="confirm button" onclick="window.hide('wifi')">
-                Confirm
-            </a>
+            <div id="WifiContainer" class="container"></div>
+            <script id="wifi-device-template" type="x-tmpl-mustache">
+                <a href="#" class="entry">
+                    <div class="icon">
+                        <span class="icon-wifi"></span>
+                    </div>
+                    <div class="label">
+                        {{ properties.name }}
+                    </div>
+                    <div class="control">
+                        <span class="icon-clear"></span>
+                    </div>
+                </a>
+            </script>
         </div>
 
         <div class="secondary page hide" id="wired">
             <h1 class="header">
+                <a href="#" class="backButton" onclick="window.hide('wired')">
+                    <i class="fas fa-chevron-left"></i>
+                </a>
                 Wired
             </h1>
-            <a href="#" class="confirm button" onclick="window.hide('wired')">
-                Confirm
-            </a>
         </div>
 
         <div class="secondary page hide" id="version">
             <h1 class="header">
+                <a href="#" class="backButton" onclick="window.hide('version')">
+                    <i class="fas fa-chevron-left"></i>
+                </a>
                 Version info
             </h1>
-            <a href="#" class="confirm button" onclick="window.hide('version')">
-                Confirm
-            </a>
         </div>
 
         <div class="log" id="log">
diff --git a/src/index.js b/src/index.js
index efdafaa..6080b75 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,7 +15,13 @@
  */
 /* JS */
 import { init } from './js/app';
-import { toggle as toggle_bluetooth } from './js/bluetooth';
+import { toggle as toggle_bluetooth, 
+    pair as pair_bluetooth, 
+    connect as connect_bluetooth,
+    disconnect as disconnect_bluetooth,
+    filter as setFilter_bluetooth,
+    remove as remove_device_bluetooth
+} from './js/bluetooth';
 
 /* CSS */
 import './styles/app.scss';
@@ -30,8 +36,30 @@ window.hide = function(page) {
     document.getElementById(page).classList.add('hide');
 }
 
-window.toggle_bluetooth =  function() {
-    toggle_bluetooth();
+window.toggle_bluetooth =  toggle_bluetooth;
+window.remove_device_bluetooth = remove_device_bluetooth;
+window.manage_remove_bluetooth = function(deviceId, isPaired, isConnected) { 
+    if ( !isConnected ) {
+        remove_device_bluetooth(deviceId);
+    } else if ( isConnected ) {
+        disconnect_bluetooth(deviceId);
+    }
 }
+window.manage_bluetooth = function(deviceId, isPaired, isConnected) {
+    if ( !isPaired && !isConnected ) {
+        pair_bluetooth(deviceId);
+    } else if ( isPaired && !isConnected ) {
+        connect_bluetooth(deviceId);
+    }
+};
+window.setFilter_bluetooth = function(entry){
+    setFilter_bluetooth(entry.getAttribute('filter'));
+    var buttons = document.getElementById('bluetooth').getElementsByClassName('footer')[0].getElementsByClassName('button');
 
+    for( var i = 0; i < buttons.length; i++ ) {
+        buttons[i].classList.remove('active');
+    }
+
+    entry.classList.add('active');
+}
 init();
\ No newline at end of file
diff --git a/src/js/app.js b/src/js/app.js
index 8e80039..ed7b028 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,8 +1,12 @@
 import { init as init_bluetooth } from './bluetooth';
+import { init as init_wifi } from './wifi';
 
 import { api } from 'agl-js-api';
 
 export function init() {
     api.init();
     init_bluetooth();
-}
\ No newline at end of file
+    // init_wifi();
+}
+
+window.api = api;
\ No newline at end of file
diff --git a/src/js/bluetooth.js b/src/js/bluetooth.js
index 679ef0b..30c2d82 100644
--- a/src/js/bluetooth.js
+++ b/src/js/bluetooth.js
@@ -1,8 +1,10 @@
 import { bluetooth } from 'agl-js-api';
 import Mustache from 'mustache';
 
-var isPowered = false;
+window.bluetooth = bluetooth;
+
 var template;
+var filterBy = 'available';
 
 function update_state(state) {
     var control = document.getElementById('BluetoothControl');
@@ -14,12 +16,27 @@ function update_state(state) {
 }
 
 function update_devices(devices) {
-    console.log('update_devices', devices);
     var deviceList = document.getElementById('BluetoothContainer');
     deviceList.innerHTML = '';
 
     devices.forEach(function(device) {
-        deviceList.innerHTML += Mustache.render(template, device);
+        if ( filterBy === 'connected' && device.properties.connected ) {
+            deviceList.innerHTML += Mustache.render(template, device);
+        } else if ( filterBy === 'paired' && 
+                device.properties.paired && 
+                !device.properties.connected ) {
+            deviceList.innerHTML += Mustache.render(template, device); 
+        } else if ( filterBy === 'available' & 
+                !device.properties.connected && 
+                !device.properties.paired) {
+            deviceList.innerHTML += Mustache.render(template, device); 
+        }
+    });
+}
+
+function refresh_devices() {
+    bluetooth.managed_objects().then(function(result){
+        update_devices(result.devices);
     });
 }
 
@@ -34,17 +51,50 @@ export function toggle() {
 export function init() {
     template = document.getElementById('bluetooth-device-template').innerHTML;
     Mustache.parse(template);
-    bluetooth.adapter_state().then(update_state);
+    bluetooth.adapter_state({
+        discovery: true
+    }).then(update_state);
+    refresh_devices();
 
-    bluetooth.managed_objects().then(function(result){
-        update_devices(result.devices);
+    // This code has been commented to improve performance
+    // bluetooth.on_device_changes(function(data) {
+    //     bluetooth.managed_objects().then(function(result){
+    //         update_devices(result.devices);
+    //     });
+    // }).then(function(result) {
+    //     console.log('SUBSCRIBED TO DEVICE CHANGES');
+    // });
+}
+
+export function filter(filter) {
+    filterBy = filter;
+    refresh_devices();
+}
+
+export function getFilter() {
+    return filterBy;
+}
+
+export function remove(deviceId) {
+    bluetooth.remove_device(deviceId).then(function() {
+        refresh_devices();
+    });
+}
+
+export function pair(deviceId) {
+    bluetooth.pair(deviceId).then(function() {
+        refresh_devices();
     });
+}
+
+export function connect(deviceId) {
+    bluetooth.connect(deviceId).then(function() {
+        refresh_devices();
+    });
+}
 
-    bluetooth.on_device_changes(function(data) {
-        bluetooth.managed_objects().then(function(result){
-            update_devices(result.devices);
-        });
-    }).then(function(result) {
-        console.log('SUBSCRIBED TO DEVICE CHANGES');
+export function disconnect(deviceId) {
+    bluetooth.disconnect(deviceId).then(function() {
+        refresh_devices();
     });
 }
\ No newline at end of file
diff --git a/src/js/wifi.js b/src/js/wifi.js
new file mode 100644
index 0000000..35e7235
--- /dev/null
+++ b/src/js/wifi.js
@@ -0,0 +1,34 @@
+import { network } from 'agl-js-api';
+import Mustache from 'mustache';
+
+var template;
+
+
+function update_devices(devices) {
+    console.log('update_devices', devices);
+    var deviceList = document.getElementById('WifiContainer');
+    deviceList.innerHTML = '';
+
+    devices.forEach(function(device) {
+        if( device.properties.type === 'wifi' ) {
+            deviceList.innerHTML += Mustache.render(template, device);
+        }
+    });
+}
+
+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');
+    });
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d97030b..c69ad19 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,5 +1,6 @@
 $colors: (
   primary:          #00ADDC,
+  secondary:        #223340,
   font:             #FFFFFF,
   grey:             #848286
 );
@@ -7,4 +8,5 @@ $colors: (
 @import "style.css";
 @import "main.scss";
 @import "portrait.scss";
-@import "landscape.scss";
\ No newline at end of file
+@import "landscape.scss";
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
\ No newline at end of file
diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot
index fb55d1c..ba1208c 100755
--- a/src/styles/fonts/icomoon.eot
+++ b/src/styles/fonts/icomoon.eot
diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg
index 6fedeea..809d2c2 100755
--- a/src/styles/fonts/icomoon.svg
+++ b/src/styles/fonts/icomoon.svg
@@ -14,9 +14,10 @@
 <glyph unicode="&#xe904;" glyph-name="speed" d="M512 256.667q-34 0-60 25t-26 59q0 36 26 62l362 240-242-362q-24-24-60-24zM870 572.667q28-44 48-112t20-120q0-118-56-212-26-44-74-44h-592q-48 0-74 44-56 94-56 212 0 176 125 301t303 125q52 0 119-20t111-48l-80-52q-72 36-152 36-140 0-241-100t-101-242q0-92 46-170h592q46 78 46 170 0 82-36 154z" />
 <glyph unicode="&#xe905;" glyph-name="toggle_off" d="M298 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
 <glyph unicode="&#xe906;" glyph-name="toggle_on" d="M726 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
-<glyph unicode="&#xe907;" glyph-name="keyboard_arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
-<glyph unicode="&#xe908;" glyph-name="keyboard_arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
+<glyph unicode="&#xe907;" glyph-name="arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
+<glyph unicode="&#xe908;" glyph-name="arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
 <glyph unicode="&#xe909;" glyph-name="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
 <glyph unicode="&#xe90a;" glyph-name="computer" d="M854 298.667v426h-684v-426h684zM598 170.667v42h-172v-42h172zM938 170.667h86v-86h-1024v86h86v640h852v-640z" />
 <glyph unicode="&#xe90b;" glyph-name="phone" d="M736 170.667v598h-448v-598h448zM598 42.667v42h-172v-42h172zM682 896.667q52 0 90-38t38-90v-684q0-52-38-90t-90-38h-340q-52 0-90 38t-38 90v684q0 52 38 90t90 38h340z" />
+<glyph unicode="&#xe90c;" glyph-name="arrow_back" d="M498 772.667l-346-346 346-346-76-76-422 422 422 422z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf
index ec51acb..f79ee84 100755
--- a/src/styles/fonts/icomoon.ttf
+++ b/src/styles/fonts/icomoon.ttf
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
index ca1195e..f21dee2 100755
--- a/src/styles/fonts/icomoon.woff
+++ b/src/styles/fonts/icomoon.woff
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6b917d1..84d877c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -26,7 +26,6 @@ body {
     a {
         color: map-get($colors, font);
         text-decoration: none;
-        font-size: 2.5rem;
     }
 
     .button {
@@ -51,33 +50,44 @@ body {
     }
 
     .page {
-        display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
         justify-content: center;
         height: 100%;
         overflow: hidden;
+        position: relative;
 
         &.hide {
             display: none;
         }
 
         .header {
-            text-align: center;
-            margin: 0;
+            text-align: left;
+            margin: 50px 0;
+
+            .backButton {
+                padding-right: 20px;
+                font-size: 1em;
+            }
         }
 
         .container {
-            display: flex;
-            flex-direction: column;
-            flex-wrap: nowrap;
-            justify-content: center;
-            flex-grow: 2;
+            overflow-y: scroll;
+            height: 1040px;
 
             .entry {
-                height: 120px;
-                line-height: 120px;
-                border-bottom: 1px solid map-get($colors, grey);
+                $entryHeight: 120px;
+                height: $entryHeight;
+                line-height: $entryHeight;
+                border-bottom: 9 solid map-get($colors, grey);
+
+                &:nth-last-child(1) {
+                    margin-bottom: 90px;
+                }
+
+                &.secondary {
+                    $entryHeight: 90px;
+                }
 
                 &:last-child {
                     border-bottom: none;
@@ -85,6 +95,7 @@ body {
 
                 .icon {
                     width: 10%;
+                    height: $entryHeight;
                     position: relative;
                     float: left;
                     text-align: center;
@@ -95,9 +106,20 @@ body {
                     float: left;
                     text-align: left;
                     width: 75%;
+                    height: $entryHeight;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
+
+                    .title {
+                        height: 2*$entryHeight/3;
+                        line-height: 2*$entryHeight/3;
+                    }
+                    .subtitle {
+                        height: $entryHeight/3;
+                        line-height: $entryHeight/3;
+                        font-size: 0.75em;
+                    }
                 }
 
                 .control {
@@ -105,46 +127,56 @@ body {
                     position: relative;
                     float: left;
                     text-align: right;
-                    font-size: 5rem;
+                    height: $entryHeight;
 
                     & > * {
-                        height: 120px;
-                        line-height: 120px;
+                        height: $entryHeight;
+                        line-height: $entryHeight;
                     }
 
                     &.enabled {
-                        .icon-toggle_on {
+                        .on {
                             display: block;
                             color: map-get($colors, primary);
                         }
 
-                        .icon-toggle_off {
+                        .off {
                             display: none;
                         }
                     }
 
-                    .icon-toggle_on {
+                    .on {
                         display: none;
                     }
 
-                    .icon-toggle_off {
+                    .off {
                         display: block;
                     }
                 }
             }
         }
 
-
-
-        .confirm {
+        .footer {            
             position: absolute;
-            bottom: 5%;
+            bottom: 0;
             text-align: center;
-            height: 120px;
-            line-height: 120px;
-            width: 90%;
-            background: map-get($colors, primary);
-            border-radius: 20px;
+            height: 80px;
+            line-height: 80px;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: space-evenly;
+            align-content: stretch;
+
+            .button {
+                flex-grow: 1;
+                background: map-get($colors, secondary);
+
+                &.active {
+                    background: map-get($colors, primary);
+                }
+            }
         }
     }
 
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index eff553c..4016600 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -2,6 +2,10 @@
 
     html {
         background-image: url('../images/vertical_background.png');
+        background-position: top center;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        height: 992px;
     }
 
     body {
diff --git a/src/styles/style.css b/src/styles/style.css
index e656a4e..d947765 100755
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?6brftk');
-  src:  url('fonts/icomoon.eot?6brftk#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?6brftk') format('truetype'),
-    url('fonts/icomoon.woff?6brftk') format('woff'),
-    url('fonts/icomoon.svg?6brftk#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?wt3pj6');
+  src:  url('fonts/icomoon.eot?wt3pj6#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?wt3pj6') format('truetype'),
+    url('fonts/icomoon.woff?wt3pj6') format('woff'),
+    url('fonts/icomoon.svg?wt3pj6#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -34,10 +34,10 @@
 .icon-bluetooth:before {
   content: "\e901";
 }
-.icon-keyboard_arrow_down:before {
+.icon-arrow_down:before {
   content: "\e907";
 }
-.icon-keyboard_arrow_up:before {
+.icon-arrow_up:before {
   content: "\e908";
 }
 .icon-computer:before {
@@ -46,6 +46,9 @@
 .icon-phone:before {
   content: "\e90b";
 }
+.icon-arrow_back:before {
+  content: "\e90c";
+}
 .icon-wifi:before {
   content: "\e902";
 }
diff --git a/webpack.config.js b/webpack.config.js
index 6ea609a..d64373c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -74,7 +74,15 @@ module.exports = {
                 use: [
                     MiniCSSExtractPlugin.loader,
                     "css-loader",
-                    "sass-loader"
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sassOptions: {
+                                indentWidth: 4,
+                                includePaths: ['./src', './node_modules'],
+                            },
+                        },
+                    },
                 ]
             },
             {