1 files changed, 21 insertions, 10 deletions

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);