From 6d8916c58d823b13b89477f59bf05373e87f3a98 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Wed, 11 Dec 2019 08:39:27 +0100 Subject: RESTRUCT Upadate homescreen layout --- src/config.json | 16 +++++++-------- src/index.js | 12 ++++++++---- src/js/app.js | 27 +++++++++++++++++++++++++ src/js/apps.js | 31 ++++++++++++++++++----------- src/js/main.js | 11 ----------- src/js/network.js | 31 +++++++++++++++++++---------- src/js/templates.js | 19 ++++++++++++++++++ src/js/time.js | 37 ++++++++++++++++++++++++++--------- src/js/weather.js | 5 ----- src/styles/landscape.scss | 12 +++++++++--- src/styles/main.scss | 39 +++++++++++++++++++++---------------- src/templates/apps.template.html | 10 ++++++++++ src/templates/main.template.html | 8 ++++++++ src/templates/network.template.html | 3 +++ src/templates/time.template.html | 10 ++++++++++ webpack.config.js | 5 +++++ 16 files changed, 198 insertions(+), 78 deletions(-) create mode 100644 src/js/app.js delete mode 100644 src/js/main.js create mode 100644 src/js/templates.js delete mode 100644 src/js/weather.js create mode 100644 src/templates/apps.template.html create mode 100644 src/templates/main.template.html create mode 100644 src/templates/network.template.html create mode 100644 src/templates/time.template.html diff --git a/src/config.json b/src/config.json index 5a53010..b14744e 100644 --- a/src/config.json +++ b/src/config.json @@ -1,20 +1,20 @@ { "apps": [ { - "id": "webapps-mediaplayer", - "icon": "fas fa-music" - }, - { - "id": "webapps-hvac", - "icon": "fas fa-thermometer-half" + "id": "webapps-html5-launcher", + "icon": "fas fa-home" }, { "id": "navigation", "icon": "fas fa-location-arrow" }, { - "id": "webapps-html5-launcher", - "icon": "fas fa-home" + "id": "webapps-hvac", + "icon": "fas fa-thermometer-half" + }, + { + "id": "webapps-mediaplayer", + "icon": "fas fa-music" } ], "launch": "webapps-html5-launcher", diff --git a/src/index.js b/src/index.js index 7b6f84c..eb7b4ac 100644 --- a/src/index.js +++ b/src/index.js @@ -16,8 +16,12 @@ /* CSS */ import './styles/app.scss'; -import { init } from './js/main'; -import { start } from './js/apps'; -window.start = start; -init(); \ No newline at end of file +import { api } from 'agl-js-api'; + +import * as app from './js/app'; +import * as apps from './js/apps'; + +window.apps = apps; +api.init(); +app.init(); \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..f308032 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,27 @@ +import { load as load_template } from './templates'; +import * as network from './network'; +import * as apps from './apps'; +import * as time from './time'; +import Mustache from 'mustache'; + +var template; +var page = { + +}; + +export function show() { + document.body.innerHTML = Mustache.render(template, page); + network.init(document.getElementById('NetworkContainer')); + apps.init(document.getElementById('AppsContainer')); + time.init(document.getElementById('TimeContainer')); +} + +export function init() { + load_template('main.template.html').then(function(result) { + template = result; + Mustache.parse(template); + show(); + }, function(error) { + console.error('ERRROR loading main template', error); + }); +} \ No newline at end of file diff --git a/src/js/apps.js b/src/js/apps.js index c7d50a0..9fe7107 100644 --- a/src/js/apps.js +++ b/src/js/apps.js @@ -1,12 +1,16 @@ +import { load as load_template } from './templates'; import { homescreen, afmMain } from 'agl-js-api'; import Mustache from 'mustache'; var configjson = require('../config.json'); var template; -var parent; +var root; +var page = { + apps: [] +}; -function renderApp(app) { - parent.innerHTML = Mustache.render(template, app) + parent.innerHTML; +function show() { + root.innerHTML = Mustache.render(template, page); } function locateApp(appId, appList) { @@ -21,7 +25,7 @@ function load_application_list() { var internalApp = locateApp(app.id, result); if( internalApp ) { - renderApp({ + page.apps.push({ id: internalApp.id, name: internalApp.name, icon: app.icon @@ -35,19 +39,24 @@ function load_application_list() { } }); + + show(); }); } -export function start(node) { - var appId = node.getAttribute('app-id'); +export function start(appId) { homescreen.showWindow(appId.split('@')[0]).then(function(result) { console.log("success: " + result); }); } -export function init() { - template = document.getElementById('app-template').innerHTML; - parent = document.getElementById('app-template').parentNode - Mustache.parse(template); - load_application_list(); +export function init(node) { + load_template('apps.template.html').then(function(result) { + template = result; + root = node; + Mustache.parse(template); + load_application_list(); + }, function(error) { + console.error('ERRROR loading main template', error); + }); } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index f07c210..0000000 --- a/src/js/main.js +++ /dev/null @@ -1,11 +0,0 @@ -import { init as init_apps } from './apps'; -import { init as init_weather } from './weather'; -import { init as init_network } from './network'; -import { init as init_time } from './time'; - -export function init() { - init_apps(); - init_weather(); - init_network(); - init_time(); -} \ No newline at end of file diff --git a/src/js/network.js b/src/js/network.js index bb60a1d..3e1caad 100644 --- a/src/js/network.js +++ b/src/js/network.js @@ -1,27 +1,38 @@ +import { load as load_template } from './templates'; import { network } from 'agl-js-api'; import Mustache from 'mustache'; var configjson = require('../config.json'); var template; +var root; +var page = { + items: [], + icon: function() { + return configjson.network[this.technology]; + } +}; -function render_network_item(networkItem) { - document.getElementById('networkStatusContainer').innerHTML += Mustache.render(template, networkItem); +function show() { + root.innerHTML = Mustache.render(template, page); } function load_network_state() { network.technologies().then(function(result) { - result.values.forEach(function(networkItem) { - networkItem.icon = configjson.network[networkItem.technology]; - render_network_item(networkItem); - }); + page.items = result.values; + show(); }); } -export function init() { - template = document.getElementById('network-status-template').innerHTML; - Mustache.parse(template); - load_network_state(); +export function init(node) { + load_template('network.template.html').then(function(result) { + template = result; + root = node; + Mustache.parse(template); + load_network_state(); + }, function(error) { + console.error('ERRROR loading main template', error); + }); network.on_global_state(function(result) { console.log('GLOBAL SATATE', result); 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/js/time.js b/src/js/time.js index 55165c7..1757257 100644 --- a/src/js/time.js +++ b/src/js/time.js @@ -1,9 +1,25 @@ +import { load as load_template } from './templates'; import Mustache from 'mustache'; var template; +var root; +var page = { + date: { + day: '', + hour: '' + }, + weather: { + icon: 'fas fa-cloud-sun-rain', + temperature: '20ºC' + } +} var days = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']; +function show() { + root.innerHTML = Mustache.render(template, page); +} + function formatAMPM(date) { var hours = date.getHours(); var minutes = date.getMinutes(); @@ -18,16 +34,19 @@ function formatAMPM(date) { function initInterval() { setInterval(function() { var date = new Date(); - document.getElementById('timeContainer').innerHTML = Mustache.render(template, { - day: days[date.getDay()], - hour: formatAMPM(date) - }); + page.date.day = days[date.getDay()], + page.date.hour = formatAMPM(date); + show(); }, 1000); } -export function init() { - template = document.getElementById('time-template').innerHTML; - Mustache.parse(template); - - initInterval(); +export function init(node) { + load_template('time.template.html').then(function(result) { + template = result; + root = node; + Mustache.parse(template); + initInterval(); + }, function(error) { + console.error('ERRROR loading main template', error); + }); } \ No newline at end of file diff --git a/src/js/weather.js b/src/js/weather.js deleted file mode 100644 index 26c64b9..0000000 --- a/src/js/weather.js +++ /dev/null @@ -1,5 +0,0 @@ -import { weather } from 'agl-js-api'; - -export function init() { - console.log('TBD'); -} \ No newline at end of file diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index 0a12494..b72c200 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -11,9 +11,15 @@ height: 100%; flex-direction: column; - .button { - border-width: 1px 0 1px 0; - order: 2; + .appsContainer { + flex-direction: column; + .button { + border-width: 1px 0 1px 0; + order: 2; + .label { + display: none; + } + } } .infoContainer { diff --git a/src/styles/main.scss b/src/styles/main.scss index cab20c6..f96dacc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -25,24 +25,29 @@ body { justify-content: space-between; background-color: map-get($colors, background); - .button { - border-color: map-get($colors, grey); - border-style: solid; + .appsContainer { + display: flex; + justify-content: space-between; flex: 1 1 0px; - text-align: center; - background-color: map-get($colors, button); - - .icon { - width: 100%; - height: $header_size*0.70; - line-height: $header_size*0.70; - font-size: 5em; - } - - .label { - width: 100%; - height: $header_size*0.30; - line-height: $header_size*0.30; + .button { + border-color: map-get($colors, grey); + border-style: solid; + flex: 1 1 0px; + text-align: center; + background-color: map-get($colors, button); + + .icon { + width: 100%; + height: $header_size*0.70; + line-height: $header_size*0.70; + font-size: 5em; + } + + .label { + width: 100%; + height: $header_size*0.30; + line-height: $header_size*0.30; + } } } diff --git a/src/templates/apps.template.html b/src/templates/apps.template.html new file mode 100644 index 0000000..9916e2a --- /dev/null +++ b/src/templates/apps.template.html @@ -0,0 +1,10 @@ +{{ #apps }} + +
+ +
+
+ {{ name }} +
+ +{{ /apps }} \ 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..6b4eecc --- /dev/null +++ b/src/templates/main.template.html @@ -0,0 +1,8 @@ +
+
+
+
+
+
+ +
\ No newline at end of file diff --git a/src/templates/network.template.html b/src/templates/network.template.html new file mode 100644 index 0000000..90af010 --- /dev/null +++ b/src/templates/network.template.html @@ -0,0 +1,3 @@ +{{ #items }} +
+{{ /items }} \ No newline at end of file diff --git a/src/templates/time.template.html b/src/templates/time.template.html new file mode 100644 index 0000000..c8ed97e --- /dev/null +++ b/src/templates/time.template.html @@ -0,0 +1,10 @@ +
+ {{ date.day }} +
+
+ {{ date.hour }} +
+
+ + {{ weather.temperature }} +
\ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 3470e35..55c8d7a 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