summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-11 08:39:27 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:12:47 +0100
commit6d8916c58d823b13b89477f59bf05373e87f3a98 (patch)
tree97142e38adc872fe58999b7d01f806d66153be3e
parentfb39b8f31f9323f5e56670de2f382f7b19daed08 (diff)
RESTRUCT Upadate homescreen layout
-rw-r--r--src/config.json16
-rw-r--r--src/index.js12
-rw-r--r--src/js/app.js27
-rw-r--r--src/js/apps.js31
-rw-r--r--src/js/main.js11
-rw-r--r--src/js/network.js31
-rw-r--r--src/js/templates.js19
-rw-r--r--src/js/time.js37
-rw-r--r--src/js/weather.js5
-rw-r--r--src/styles/landscape.scss12
-rw-r--r--src/styles/main.scss39
-rw-r--r--src/templates/apps.template.html10
-rw-r--r--src/templates/main.template.html8
-rw-r--r--src/templates/network.template.html3
-rw-r--r--src/templates/time.template.html10
-rw-r--r--webpack.config.js5
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({