update development bundle

client/api/design/energy_data.js

@@ -0,0 +1,12 @@
+class EnergyDataApi {
+
+  static index(params){
+    return Promise.resolve(
+
+
+    );
+  }
+
+}
+
+export default EnergyDataApi;

client/api/design/houses.js

@@ -0,0 +1,11 @@
+class HousesApi {
+
+  static index(params){
+    return Promise.resolve({
+
+    });
+  }
+
+}
+
+export default HousesApi;

client/api/design/power_data.js

@@ -0,0 +1,12 @@
+class PowerDataApi {
+
+  static index(params){
+    return Promise.resolve({
+
+    });
+  }
+
+}
+
+export default PowerDataApi;
+

client/app.js

@@ -5,7 +5,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout from './dashboard/layout/layout';
 
-ReactDOM.render(
-  React.createElement(Layout),
-  document.getElementById('root')
-);
+export default function(){
+  ReactDOM.render(
+    React.createElement(Layout),
+    document.getElementById('root')
+  );
+};

client/config/api.js

@@ -1 +0,0 @@
-api.js

client/config/db.js

@@ -1,9 +0,0 @@
-import Loki from 'lokijs';
-
-var db = new Loki('spike');
-
-db.addCollection('PowerData');
-db.addCollection('EnergyData');
-db.addCollection('Houses');
-
-export default

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

@@ -1,9 +1,5 @@
 // Vendor Stylesheets
 require('bootstrap/dist/css/bootstrap.min.css');
 require('font-awesome/css/font-awesome.min.css');
-
-
-// Component Stylesheets
-require(__dirname + '/style.scss');
-require(__dirname + '/dashboard/layout/layout.scss');
 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'
+      }
+  }
+};

client/config/development/app.js

@@ -0,0 +1,3 @@
+import app from './../../app';
+
+app();

client/config/development/style.js

@@ -0,0 +1,10 @@
+// Vendor Stylesheets
+require('bootstrap/dist/css/bootstrap.min.css');
+require(__dirname + '/../../d3/chart.scss');
+
+// Component Stylesheets
+require(__dirname + '/../../app.scss');
+// TODO: iterate through directories, instead of explicit requires.
+require(__dirname + '/../../dashboard/layout/layout.scss');
+require(__dirname + '/../../dashboard/energy/energy.scss');
+require(__dirname + '/../../dashboard/power/power.scss');

client/config/development/templates.js

@@ -0,0 +1,22 @@
+// All react templates should be pre-compiled for development.
+// run 'gulp compile_react_templates'
+
+import layoutRt from './../../dashboard/layout/layout.rt.js';
+import energyRt from './../../dashboard/energy/energy.rt.js';
+import powerRt from './../../dashboard/power/power.rt.js';
+
+const TEMPLATES = Object.freeze({
+  layout: layoutRt,
+  energy: energyRt,
+  power: powerRt,
+});
+
+class Templates {
+
+  static forComponent(view){
+    return TEMPLATES[view];
+  }
+
+}
+
+export default Templates;

client/config/development/webpack.js

@@ -0,0 +1,52 @@
+import webpack from 'webpack';
+
+const CLIENT = __dirname + '/../..';
+const ROOT = CLIENT + '/..';
+
+module.exports = {
+  entry: {
+    app: CLIENT + '/config/development/app',
+    style: CLIENT + '/config/development/style'
+  },
+  output: {
+    filename: '[name].js',
+    path: CLIENT + '/build/development'
+  },
+  module: {
+      loaders: [
+          {
+              test: /\.scss$/,
+              loaders: ['style', 'raw', 'sass']
+          }, {
+              test: /\.css$/,
+              loaders: ['style', 'raw']
+          }, {
+            test: /\.js$/,
+            loader: 'babel'
+          }
+      ]
+  },
+  sassLoader: {
+    includePaths: [CLIENT, ROOT + '/node_modules']
+  },
+  plugins: [
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      }),
+      new webpack.ProvidePlugin({
+          d3: "d3",
+          "window.d3": "d3"
+      })
+  ],
+  node: {
+    fs: "empty"
+  },
+  resolve: {
+      alias: {
+          api: CLIENT + '/api/development',
+          config: CLIENT + '/config/development'
+      }
+  }
+}

client/config/production/webpack.js

@@ -0,0 +1,58 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import webpack from 'webpack';
+
+const ROOT = __dirname + '/../../../';
+
+module.exports = {
+  entry: {
+    app: ROOT + 'client/app',
+    style: ROOT + 'client/style'
+  },
+  devtool: 'source-map',
+  output: {
+    filename: '[name].min.js',
+    path: ROOT + 'client/build/production'
+  },
+  externals: {
+    jquery: "$",
+    d3: "d3"
+  },
+  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'
+        }, {
+          test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: "url-loader?limit=10000&minetype=application/font-woff"
+        }, {
+          test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: "file-loader"
+        }
+    ]
+  },
+  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.min.css", {
+        allChunks: true
+      }),
+      new webpack.optimize.UglifyJsPlugin({minimize: true}),
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      })
+  ],
+  node: {
+    fs: "empty"
+  }
+};

client/config/store.js

@@ -1 +0,0 @@
-store.js

client/config/webpack.js

@@ -0,0 +1,55 @@
+import webpack from 'webpack';
+
+const CLIENT = __dirname + '/..';
+const ROOT = CLIENT + '/..';
+
+module.exports = {
+  entry: {
+    app: CLIENT + '/config/' + process.env.NODE_ENV + '/app',
+    style: CLIENT + '/config/' + process.env.NODE_ENV + '/style'
+  },
+  output: {
+    filename: '[name].js',
+    path: CLIENT + '/build/' + process.env.NODE_ENV
+  },
+  module: {
+      loaders: [
+          {
+              test: /\.scss$/,
+              loaders: ['style', 'raw', 'sass']
+          }, {
+              test: /\.css$/,
+              loaders: ['style', 'raw']
+          }, {
+            test: /\.js$/,
+            loader: 'babel'
+          }, {
+            test: /\.json$/,
+            loader: 'json'
+          }
+      ]
+  },
+  sassLoader: {
+    includePaths: [CLIENT, ROOT + '/node_modules']
+  },
+  plugins: [
+      new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery"
+      }),
+      new webpack.ProvidePlugin({
+          d3: "d3",
+          "window.d3": "d3"
+      })
+  ],
+  node: {
+    fs: "empty"
+  },
+  resolve: {
+      alias: {
+          api: CLIENT + '/api/' + process.env.NODE_ENV,
+          config: CLIENT + '/config/' + process.env.NODE_ENV
+      }
+  }
+}

client/d3/grid/calendar_grid.js

@@ -141,7 +141,7 @@ class CalendarGridChart extends Chart{
           })
           .attr("width", function(d) { return grid_chart.grid_unit_size; })
           .attr('fill', grid_chart.color)
-          .attr("opacity", function(d) { return grid_chart.calculateOpacity(75, data.range);  });
+          .attr("opacity", function(d) { return grid_chart.calculateOpacity(grid_chart.rangeValue(d), data.range);  });
   }
 
   calculateOpacity(value, range){

client/dashboard/energy/energy.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import energyRt from './energy.rt.js';
+import Templates from 'config/templates';
 import House from './../../models/house';
 import CalendarGridChart from './../../d3/grid/calendar_grid';
 
@@ -28,11 +28,6 @@ var Energy = React.createClass({
     });
   },
 
-  componentWillUnmount: function(){
-    var energy = this;
-    energy.destroyGraph();
-  },
-
   componentWillReceiveProps: function(new_props){
     var energy = this;
     if (new_props.house !== energy.props.house){
@@ -127,6 +122,7 @@ var Energy = React.createClass({
   },
 
   render: function() {
+    var energyRt = Templates.forComponent('energy');
     return energyRt.call(this);
   }
 });

client/dashboard/layout/layout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import layoutRt from './layout.rt.js';
+import Templates from 'config/templates';
 import House from './../../models/house';
 import PowerDatum from './../../models/power_datum';
 
@@ -81,6 +81,7 @@ var Layout = React.createClass({
   },
 
   render: function() {
+    var layoutRt = Templates.forComponent('layout');
     return layoutRt.call(this);
   }
 });

client/dashboard/power/power.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment-timezone';
 import _ from 'lodash';
 
-import powerRt from './power.rt.js';
+import Templates from 'config/templates';
 import House from './../../models/house';
 import SplineStackChart from './../../d3/line/spline_stack';
 import DateRangeSlider from './../../d3/sliders/date_range';
@@ -34,11 +34,6 @@ var Power = React.createClass({
     });
   },
 
-  componentWillUnmount: function(){
-    var power = this;
-    power.destroyGraph();
-  },
-
   componentWillReceiveProps: function(new_props){
     var power = this;
     if (new_props.house !== power.props.house){
@@ -192,6 +187,7 @@ var Power = React.createClass({
   },
 
   render: function() {
+    var powerRt = Templates.forComponent('power');
     return powerRt.call(this);
   }
 });

client/dashboard/power/power.rt

@@ -24,7 +24,7 @@
     </thead>
     <tbody>
       <tr rt-repeat="power_datum in this.props.house.power_data" key="{power_datum.scoped_id}">
-        <td>{power_datum.data.id}</td>
+        <td></td>
         <td>{power_datum.time_to_s}</td>
         <td>{power_datum.consumption_to_s}</td>
         <td>{power_datum.production_to_s}</td>

client/dashboard/power/power.rt.js

@@ -9,7 +9,10 @@ function repeatMonth1(month, monthIndex) {
     }, month);
 }
 function repeatPower_datum2(power_datum, power_datumIndex) {
-    return React.createElement('tr', { 'key': power_datum.scoped_id }, React.createElement('td', {}, power_datum.data.id), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
+    return React.createElement('tr', {
+        'className': 'fuck-you',
+        'key': power_datum.scoped_id
+    }, React.createElement('td', {}, power_datum.data.id), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
 }
 export default function () {
     return React.createElement('div', { 'id': 'power_view' }, React.createElement.apply(this, [

client/lib/model.js

@@ -1,9 +0,0 @@
-import Loki from 'lokijs';
-
-
-class Model {
-
-
-
-
-}

client/models/energy_datum.js

@@ -13,7 +13,7 @@ class EnergyDatum {
     energy_datum.data = data;
   }
 
-  get react_key(){
+  get scoped_id(){
     return `energy-datum-${this.data.id}`;
   }
 

client/models/house.js

@@ -2,11 +2,11 @@ import extend from 'extend';
 import Loki from 'lokijs/src/lokijs';
 import moment from 'moment-timezone';
 
+import HousesApi from 'api/houses';
+import PowerDataApi from 'api/power_data';
+import EnergyDataApi from 'api/energy_data';
 import PowerDatum from './power_datum';
 import EnergyDatum from './energy_datum';
-import PowerDataApi from './../api/power_data';
-import EnergyDataApi from './../api/energy_data';
-import HousesApi from './../api/houses';
 import ArrayUtil from './../../shared/utils/array';
 import MathUtil from './../../shared/utils/math';
 import DateRange from './../../shared/utils/date_range';

client/models/power_datum.js

@@ -14,7 +14,7 @@ class PowerDatum {
     power_datum.data = data;
   }
 
-  get react_key(){
+  get scoped_id(){
     return `power-datum-${this.data.id}`;
   }