From 9a25f5f94900b0474b6c5f2fff254a3418ca7f38 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Thu, 5 Dec 2019 12:42:48 +0100 Subject: FUNCT Add bootstrap support --- package.json | 1 + src/index.html | 167 +--------------------------------- src/index.js | 49 +--------- src/js/app.js | 28 ++++-- src/js/bluetooth.js | 147 +++++++++++++++++++----------- src/js/templates.js | 19 ++++ src/styles/app.scss | 11 ++- src/styles/landscape.scss | 14 --- src/styles/main.scss | 165 +-------------------------------- src/styles/portrait.scss | 6 -- src/templates/bluetooth.template.html | 52 +++++++++++ src/templates/main.template.html | 73 +++++++++++++++ webpack.config.js | 5 + 13 files changed, 285 insertions(+), 452 deletions(-) create mode 100644 src/js/templates.js create mode 100644 src/templates/bluetooth.template.html create mode 100644 src/templates/main.template.html diff --git a/package.json b/package.json index 6fd6ffa..8fbb47e 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ }, "dependencies": { "mustache": "^3.1.0", + "bootstrap": "4.4.1", "agl-js-api": "https://github.com/AGL-web-applications/agl-js-api.git#master" } } diff --git a/src/index.html b/src/index.html index 20de554..7bd906b 100644 --- a/src/index.html +++ b/src/index.html @@ -21,171 +21,6 @@ -

- -

- - - - - - - - - - - -

- -

+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6080b75..00da226 100644 --- a/src/index.js +++ b/src/index.js @@ -15,51 +15,12 @@ */ /* JS */ import { init } from './js/app'; -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'; + +import { api } from 'agl-js-api'; +import * as bluetooth from './js/bluetooth'; /* CSS */ import './styles/app.scss'; -window.show = function(page){ - document.getElementById('main').classList.add('hide'); - document.getElementById(page).classList.remove('hide'); -} - -window.hide = function(page) { - document.getElementById('main').classList.remove('hide'); - document.getElementById(page).classList.add('hide'); -} - -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 +api.init(); +init(); diff --git a/src/js/app.js b/src/js/app.js index f95852d..458a5d4 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,12 +1,26 @@ -import { init as init_bluetooth } from './bluetooth'; +import * as bluetooth from './bluetooth'; import { init as init_wifi } from './wifi'; +import { load as load_template } from './templates'; +import Mustache from 'mustache'; -import { api } from 'agl-js-api'; +var template; +var page = { + bluetooth: true, + wifi: false +}; -export function init() { - api.init(); - init_bluetooth(); - init_wifi(); +export function show() { + page.bluetooth = bluetooth.getState(); + document.body.innerHTML = Mustache.render(template, page); } -window.api = api; \ No newline at end of file +export function init() { + load_template('main.template.html').then(function(result) { + template = result; + Mustache.parse(template); + show(); + bluetooth.init(); + }, function(error) { + console.error('ERRROR loading main template', error); + }); +} \ No newline at end of file diff --git a/src/js/bluetooth.js b/src/js/bluetooth.js index 30c2d82..65fa340 100644 --- a/src/js/bluetooth.js +++ b/src/js/bluetooth.js @@ -1,37 +1,43 @@ import { bluetooth } from 'agl-js-api'; import Mustache from 'mustache'; - -window.bluetooth = bluetooth; +import { load as load_template } from './templates'; +import * as app from './app'; +import { getMaxListeners } from 'cluster'; var template; -var filterBy = 'available'; +var page = { + devices: [], + filter: { + available: true, + paired: false, + connected: false + }, + powered: false +}; -function update_state(state) { - var control = document.getElementById('BluetoothControl'); - if( state.powered ) { - control.classList.add('enabled'); - } else { - control.classList.remove('enabled'); - } +function render(){ + document.body.innerHTML = Mustache.render(template, page); } function update_devices(devices) { - var deviceList = document.getElementById('BluetoothContainer'); - deviceList.innerHTML = ''; - + page.devices = []; devices.forEach(function(device) { - if ( filterBy === 'connected' && device.properties.connected ) { - deviceList.innerHTML += Mustache.render(template, device); - } else if ( filterBy === 'paired' && + if ( page.filter.connected && device.properties.connected ) { + page.devices.push(device); + } else if ( page.filter.paired && device.properties.paired && !device.properties.connected ) { - deviceList.innerHTML += Mustache.render(template, device); - } else if ( filterBy === 'available' & + page.devices.push(device); + } else if ( page.filter.available & !device.properties.connected && !device.properties.paired) { - deviceList.innerHTML += Mustache.render(template, device); + page.devices.push(device); } }); + + console.log(page); + + render(); } function refresh_devices() { @@ -40,61 +46,98 @@ function refresh_devices() { }); } +function pair(deviceId) { + bluetooth.pair(deviceId).then(function() { + refresh_devices(); + }); +} + +function connect(deviceId) { + bluetooth.connect(deviceId).then(function() { + refresh_devices(); + }); +} + +function disconnect(deviceId) { + bluetooth.disconnect(deviceId).then(function() { + refresh_devices(); + }); +} + export function toggle() { bluetooth.adapter_state().then(function(result) { bluetooth.adapter_state({ powered: !result.powered - }).then(update_state); + }).then(function(state) { + page.powered = state.powered; + }); }); } export function init() { - template = document.getElementById('bluetooth-device-template').innerHTML; - Mustache.parse(template); - bluetooth.adapter_state({ - discovery: true - }).then(update_state); - refresh_devices(); + load_template('bluetooth.template.html').then(function(result) { + template = result; + Mustache.parse(template); + }, function(error) { + console.error('ERROR Loading bluetooth template', error); + }); - // 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'); - // }); + bluetooth.adapter_state().then(function(state) { + page.powered = state.powered; + }); +} + +export function getState() { + return page.powered; } -export function filter(filter) { - filterBy = filter; +export function show() { refresh_devices(); } -export function getFilter() { - return filterBy; +export function hide() { + app.show(); } -export function remove(deviceId) { - bluetooth.remove_device(deviceId).then(function() { - refresh_devices(); - }); +export function available() { + page.filter = { + available: true, + paired: false, + connected: false + }; + refresh_devices(); } -export function pair(deviceId) { - bluetooth.pair(deviceId).then(function() { - refresh_devices(); - }); +export function connected() { + page.filter = { + available: false, + paired: false, + connected: true + }; + refresh_devices(); } -export function connect(deviceId) { - bluetooth.connect(deviceId).then(function() { - refresh_devices(); - }); +export function paired() { + page.filter = { + available: false, + paired: true, + connected: false + }; + refresh_devices(); } -export function disconnect(deviceId) { - bluetooth.disconnect(deviceId).then(function() { +export function remove(deviceId) { + bluetooth.remove_device(deviceId).then(function() { refresh_devices(); }); +} + +export function manage(deviceId, paired, connected) { + if ( connected ) { + connect(deviceId); + } else if ( paired ) { + disconnect(deviceId); + } else { + pair(deviceId); + } } \ No newline at end of file diff --git a/src/js/templates.js b/src/js/templates.js new file mode 100644 index 0000000..2513722 --- /dev/null +++ b/src/js/templates.js @@ -0,0 +1,19 @@ +export function load(template) { + return new Promise(function(resolve, reject){ + var xhr = new XMLHttpRequest(); + + xhr.open('GET', '/templates/'+template); + + xhr.send(); + + xhr.onload = function() { + if (xhr.status != 200) { + console.error('Error loading template', xhr.status, xhr.statusText); + reject(xhr.status); + } else { + console.log(xhr.responseType); + resolve(xhr.responseText); + } + }; + }); +} \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index c69ad19..d7290f4 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -5,8 +5,15 @@ $colors: ( grey: #848286 ); -@import "style.css"; + +$body-bg: transparent; +$body-color: #FFFFFF; +$list-group-bg: transparent; +$font-size-base: 1.5rem; + +@import "~bootstrap/scss/bootstrap"; @import "main.scss"; @import "portrait.scss"; @import "landscape.scss"; -@import "~@fortawesome/fontawesome-free/css/all.min.css"; \ No newline at end of file +@import "~@fortawesome/fontawesome-free/css/all.min.css"; + diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index 4742273..b7e1bf7 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -3,18 +3,4 @@ html { background-image: url('../images/horizontal_background.png'); } - - body { - - .center { - width: 80%; - float: left; - } - - .bottom { - flex-direction: column; - width: 20%; - } - - } } \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 84d877c..626d127 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -17,167 +17,10 @@ html { } body { - font-size: 2rem; - font-family: Arial; - color: map-get($colors, font); - margin: 0 5%; - height: 100%; - - a { - color: map-get($colors, font); - text-decoration: none; - } - - .button { - &[value="true"] { - color: map-get($colors, primary); - .disabled { - display: none; - } - .enabled { - display: block; - } - } - &[value="false"] { - color: map-get($colors, grey); - .disabled { - display: block; - } - .enabled { - display: none; - } - } - } - - .page { - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - height: 100%; - overflow: hidden; - position: relative; - - &.hide { - display: none; - } - - .header { - text-align: left; - margin: 50px 0; - - .backButton { - padding-right: 20px; - font-size: 1em; - } - } - - .container { - overflow-y: scroll; - height: 1040px; - - .entry { - $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; - } - - .icon { - width: 10%; - height: $entryHeight; - position: relative; - float: left; - text-align: center; - } - - .label { - position: relative; - 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 { - width: 15%; - position: relative; - float: left; - text-align: right; - height: $entryHeight; - - & > * { - height: $entryHeight; - line-height: $entryHeight; - } - - &.enabled { - .on { - display: block; - color: map-get($colors, primary); - } - - .off { - display: none; - } - } - - .on { - display: none; - } - - .off { - display: block; - } - } - } - } - - .footer { - position: absolute; - bottom: 0; - text-align: center; - 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); - } - } - } + + .list-group.scrollable { + height: 720px; + overflow: scroll; } .log { diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index 4016600..f8db5e4 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -7,10 +7,4 @@ background-color: transparent; height: 992px; } - - body { - .center { - width: 100%; - } - } } \ No newline at end of file diff --git a/src/templates/bluetooth.template.html b/src/templates/bluetooth.template.html new file mode 100644 index 0000000..dc732d7 --- /dev/null +++ b/src/templates/bluetooth.template.html @@ -0,0 +1,52 @@ +

+
+
+ +
+
+ Bluetooth +
+
+ +
+
+

+ {{ #devices }} +

+ +

+ {{ properties.name }} +

+ {{ properties.address}} +

+ +

+ {{ /devices }} +

+ + + +

\ No newline at end of file diff --git a/src/templates/main.template.html b/src/templates/main.template.html new file mode 100644 index 0000000..6965b5a --- /dev/null +++ b/src/templates/main.template.html @@ -0,0 +1,73 @@ +

+ Settings +

+ +

+ Date & Time +

+ +

+ Bluetooth +

+ {{ #bluetooth }} + + {{ /bluetooth }} + {{ ^bluetooth }} + + {{ /bluetooth }} +

+ +

+ Wifi +

+ {{ #wifi }} + + {{ /wifi }} + {{ ^wifi }} + + {{ /wifi }} +

+ +

+ Wired +

+ +

+ Version info +

+ +

\ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index d64373c..b6177cc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -42,6 +42,11 @@ module.exports = { from: 'src/images/*', to: 'images/', flatten: true + }, + { + from: 'src/templates/*', + to: 'templates/', + flatten: true } ]), new HtmlWebpackPlugin({ -- cgit 1.2.3-korg

- Settings -

- - - - Date & Time -

- Date -

- Time -

- - - - Bluetooth -

- - - - Wifi -

- - - - Wired -

- - - - Version info -

+
+
+ +
+
+ Bluetooth +
+
+ +
+
+

+ Settings +

- Settings -

- - - - Date & Time -

- Date -

- Time -

- - - - Bluetooth -

- - - - Wifi -

- - - - Wired -

- - - - Version info -

+ + + + + + Bluetooth + + + + + +

+ Settings +

+
+
+ +
+
+ Bluetooth +
+
+ +
+
+