update development bundle

client/config/design/app.js

@@ -0,0 +1,11 @@
+import Styles from 'config/styles';
+import Templates from 'config/templates';
+import app from './../app';
+
+Promise.all([
+  Templates.sync(),
+  Styles.sync()
+]).then(()=>{
+  jQuery('#compiling_layouts').remove();
+  app();
+});

client/config/design/style.js

@@ -0,0 +1,5 @@
+// Vendor Stylesheets
+require('bootstrap/dist/css/bootstrap.min.css');
+require('font-awesome/css/font-awesome.min.css');
+require(__dirname + '/d3/chart.scss');
+

client/config/design/styles.js

@@ -0,0 +1,35 @@
+import sass from 'sass';
+
+const STYLE_ROUTES = Object.freeze({
+  energy: 'dashboard/energy/energy.scss',
+  layout: 'dashboard/energy/layout.scss',
+  power: 'dashboard/energy/power.scss'
+});
+
+class Styles {
+
+  static sync(){
+    var all = [],
+      css = '';
+    for (var view in STYLE_ROUTES){
+      var done = new Promise((fnResolve, fnReject)=>{
+        jQuery.ajax({
+          url: STYLE_ROUTES[view]
+        }).done((scss)=>{
+          sass.compile(scss, (result)=>{
+            css += result;
+            fnResolve()
+          });
+        });
+      });
+      all.push(done);
+    }
+    return Promise.all(all)
+      .then(()=>{
+        document.write(`<style>${css}</style>`);
+      });
+  }
+
+}
+
+

client/config/design/templates.js

@@ -0,0 +1,36 @@
+import rt from 'react-templates';
+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'
+});
+
+var TEMPLATES = {};
+
+class Templates {
+
+  static sync(){
+    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();
+        });
+      });
+      all.push(done);
+    }
+    return Promise.all(all);
+  }
+
+  static forComponent(view){
+    return TEMPLATES[view];
+  }
+
+}

client/config/design/webpack.js

@@ -0,0 +1,53 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import webpack from 'webpack';
+
+const ROOT = __dirname + '/../../../';
+
+module.exports = {
+  entry: {
+    app: ROOT + 'client/config/app',
+    style: ROOT + 'client/config/style'
+  },
+  devtool: 'source-map',
+  output: {
+    filename: '[name].js',
+    path: ROOT + 'client/build/design/assets'
+  },
+  module: {
+    loaders: [
+        {
+          test: /\.scss$/,
+          loader: ExtractTextPlugin.extract("style-loader", "raw-loader!sass-loader")
+        }, {
+          test: /\.css$/,
+          loader: ExtractTextPlugin.extract("style-loader", "raw-loader")
+        }, {
+          test: /\.js$/,
+          loader: 'babel'
+        }
+    ]
+  },
+  sassLoader: {
+    includePaths: [ROOT + 'client', ROOT + 'node_modules']
+  },
+  // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
+  plugins: [
+      new ExtractTextPlugin("style.css", {
+        allChunks: true
+      }),
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      })
+  ],
+  node: {
+    fs: "empty"
+  },
+  resolve: {
+      alias: {
+          api: ROOT + 'client/api/design',
+          config: ROOT + 'client/config/design'
+      }
+  }
+};