RESTRUCT Upadate homescreen layout

16 files changed, 198 insertions, 78 deletions

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 }}
+    <a href="#" class="button" id="app-{{id}}" app-id="{{ id }}" onclick="apps.start('{{id}}');">
+        <div class="icon {{ icon }}">
+
+        </div>
+        <div class="label">
+            {{ name }}
+        </div>
+    </a>
+{{ /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 @@
+<div class="top">
+    <div class="appsContainer" id="AppsContainer"></div>
+    <div class="infoContainer" id="TimeContainer"></div>
+    <div class="statusContainer" id="NetworkContainer"></div>
+</div>
+<div class="bottom">
+
+</div>
\ 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 }}
+    <div class="statusItem {{icon}} {{#properties.connected}}text-primary{{/properties.connected}}"></div>
+{{ /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 @@
+<div class="infoItem day">
+    {{ date.day }}
+</div>
+<div class="infoItem hour">
+    {{ date.hour }}
+</div>
+<div class="infoItem wheater">
+    <i class="{{ weather.icon }}"></i>
+    {{ weather.temperature }}
+</div>
\ 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({