finalize design package

client/config/design/templates.js

@@ -1,13 +1,21 @@
 import rt from 'react-templates';
+import React from 'react';
+import _ from 'lodash';
+
 import Energy from './../../dashboard/energy/energy';
 import Power from './../../dashboard/power/power';
 
 const TEMPLATE_ROUTES = Object.freeze({
-  energy: 'dashboard/energy/energy.html',
-  layout: 'dashboard/energy/layout.html',
-  power: 'dashboard/energy/power.html'
+  energy: 'dashboard/energy/energy.rt',
+  layout: 'dashboard/layout/layout.rt',
+  power: 'dashboard/power/power.rt'
 });
 
+const COMPONENTS = {
+  Power: Power,
+  Energy: Energy
+};
+
 var TEMPLATES = {};
 
 class Templates {
@@ -16,13 +24,7 @@ class Templates {
     var all = [];
     for (var view in TEMPLATE_ROUTES){
       var done = new Promise((fnResolve, fnReject)=>{
-        jQuery.ajax({
-          url: TEMPLATE_ROUTES[view]
-        }).done((template)=>{
-          eval(rt.convertTemplateToReact(template, {modules: 'none'}));
-          TEMPLATES[view] = eval(view);
-          fnResolve();
-        });
+          Templates.evalTemplate(view, fnResolve);
       });
       all.push(done);
     }
@@ -33,4 +35,25 @@ class Templates {
     return TEMPLATES[view];
   }
 
+  static evalTemplate(view, fnResolve){
+    jQuery.ajax({
+      url: TEMPLATE_ROUTES[view]
+    }).done((template)=>{
+      var code = rt.convertTemplateToReact(template, {modules: 'none', name: view}),
+        context = {};
+      code = code.replace('var '+view+' = ', 'context.'+view+' = ');
+      new Function('with(this){ ' + code + ' } ').call({
+        Energy: Energy,
+        Power: Power,
+        context: context,
+        '_': _,
+        'React': React
+      });
+      TEMPLATES[view] = context[view];
+      fnResolve();
+    });
+  }
+
 }
+
+export default Templates;