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/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 ----- 7 files changed, 115 insertions(+), 46 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 (limited to 'src/js') 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 -- cgit 1.2.3-korg