RESTRUCT Upadate homescreen layout

7 files changed, 115 insertions, 46 deletions

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