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

@@ -1,15 +1,16 @@
 import webpack from 'webpack';
 
-const ROOT = __dirname + '/../../../';
+const CLIENT = __dirname + '/../..';
+const ROOT = CLIENT + '/..';
 
 module.exports = {
   entry: {
-    app: ROOT + 'client/app',
-    style: ROOT + 'client/style'
+    app: CLIENT + '/config/development/app',
+    style: CLIENT + '/config/development/style'
   },
   output: {
     filename: '[name].js',
-    path: ROOT + 'client/build/development'
+    path: CLIENT + '/build/development'
   },
   module: {
       loaders: [
@@ -22,14 +23,11 @@ module.exports = {
           }, {
             test: /\.js$/,
             loader: 'babel'
-          }, {
-            test: /\.json$/,
-            loader: 'json-loader'
           }
       ]
   },
   sassLoader: {
-    includePaths: [ROOT + 'client', ROOT + 'node_modules']
+    includePaths: [CLIENT, ROOT + '/node_modules']
   },
   plugins: [
       new webpack.ProvidePlugin({
@@ -44,5 +42,11 @@ module.exports = {
   ],
   node: {
     fs: "empty"
+  },
+  resolve: {
+      alias: {
+          api: CLIENT + '/api/development',
+          config: CLIENT + '/config/development'
+      }
   }
 }

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}`;
   }
 

gulpfile.babel.js

@@ -6,7 +6,6 @@ import gutil from 'gulp-util';
 import DB from './server/config/database';
 import {PowerDataSeed, HouseSeed} from './server/lib/tasks/seed_data';
 import rtCompile from './server/lib/tasks/react_template_compile';
-import rt_config from './server/config/react_templates';
 
 gulp.task('generate_power_csv', function(done){
   DB.sync().then(()=>{
@@ -28,24 +27,24 @@ gulp.task('save_house_csv', function(done){
 
 gulp.task('compile_react_templates', function() {
     gulp.src('./client/dashboard/**/*.rt')
-        .pipe(rtCompile(rt_config))
+        .pipe(rtCompile({
+          modules: 'es6',
+          targetVersion: '0.14.0',
+          suffix: '.rt'
+        }))
         .pipe(gulp.dest('./client/dashboard'));
 });
 
-
+// right now, build only available for design.
 gulp.task('build', function(done) {
   var config, env;
 
-  if (yargs.argv.production){
-    env = 'production';
-  } else if (yargs.argv.design){
-    env = 'design';
-  } else if (yargs.argv.test){
-    env = 'test';
+  if (yargs.argv.design){
+    process.env.NODE_ENV = process.env.NODE_ENV || 'design';
   } else {
     throw new gutil.PluginError("webpack", "Must include '--production' or '--design' option.");
   }
-  config = require(`${__dirname}/server/config/webpack/${env}`);
+  config = require(`${__dirname}/client/config/webpack.js`);
   // run webpack
   webpack(config, function(err, stats) {
     if(err) throw new gutil.PluginError("webpack", err);
@@ -55,14 +54,3 @@ gulp.task('build', function(done) {
     done();
   });
 });
-
-gulp.task('test', function(done) {
-  var Jasmine = require('jasmine');
-  var jasmine = new Jasmine();
-
-  jasmine.loadConfigFile('test/jasmine.json');
-  jasmine.configureDefaultReporter({
-      showColors: true
-  });
-  jasmine.execute();
-});

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using npm@3.5.3
+3 info using node@v5.4.1
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle spike_proto@0.0.0~prestart: spike_proto@0.0.0
+6 silly lifecycle spike_proto@0.0.0~prestart: no script for prestart, continuing
+7 info lifecycle spike_proto@0.0.0~start: spike_proto@0.0.0
+8 verbose lifecycle spike_proto@0.0.0~start: unsafe-perm in lifecycle true
+9 verbose lifecycle spike_proto@0.0.0~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/eric/Code/spike2/node_modules/.bin:/home/eric/.rvm/gems/ruby-1.9.3-p484@oroeco_dev/bin:/home/eric/.rvm/gems/ruby-1.9.3-p484@global/bin:/home/eric/.rvm/rubies/ruby-1.9.3-p484/bin:/home/eric/.rvm/bin:/home/eric/bin:/usr/local/heroku/bin:/home/eric/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/opt/lampp/bin
+10 verbose lifecycle spike_proto@0.0.0~start: CWD: /home/eric/Code/spike2
+11 silly lifecycle spike_proto@0.0.0~start: Args: [ '-c', 'babel-node ./server/app.express.js' ]
+12 silly lifecycle spike_proto@0.0.0~start: Returned: code: 1  signal: null
+13 info lifecycle spike_proto@0.0.0~start: Failed to exec start script
+14 verbose stack Error: spike_proto@0.0.0 start: `babel-node ./server/app.express.js`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at EventEmitter.emit (events.js:172:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at ChildProcess.emit (events.js:172:7)
+14 verbose stack     at maybeClose (internal/child_process.js:821:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+15 verbose pkgid spike_proto@0.0.0
+16 verbose cwd /home/eric/Code/spike2
+17 error Linux 3.19.0-49-generic
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+19 error node v5.4.1
+20 error npm  v3.5.3
+21 error code ELIFECYCLE
+22 error spike_proto@0.0.0 start: `babel-node ./server/app.express.js`
+22 error Exit status 1
+23 error Failed at the spike_proto@0.0.0 start script 'babel-node ./server/app.express.js'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the spike_proto package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     babel-node ./server/app.express.js
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs spike_proto
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls spike_proto
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

package.json

@@ -31,7 +31,6 @@
     "jquery": "2.2.0",
     "bootstrap": "3.3.6",
     "d3": "3.5.12",
-    "font-awesome": "4.5.0",
     "raw-loader": "0.5.1",
     "sass-loader": "3.1.2",
     "style-loader": "^0.12.3",

server/app.express.js

@@ -8,13 +8,14 @@ import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import bodyParser from 'body-parser';
 
-
 import DB from './config/database';
 import routes from './routes';
 
 const API_PORT = 8080;
 const APP_PORT = 3000;
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
 var api = express();
 
 /*
@@ -40,7 +41,7 @@ DB.sync().then(()=>{
  * Development Server
  */
 
-var config = require('./config/webpack/development'),
+var config = require('./../client/config/webpack'),
   dev_server = new WebpackDevServer(webpack(config), {
     contentBase: __dirname + '/../client/build/development',
     publicPath: "/assets/",

server/config/react_templates.js

@@ -1,7 +0,0 @@
-var config = {
-  modules: 'es6',
-  targetVersion: '0.14.0',
-  suffix: '.rt'
-};
-
-export default config;

server/config/webpack/design.js

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

server/lib/tasks/react_template_compile.js

@@ -37,8 +37,9 @@ export default function (opt) {
             generatedFile: replaceExtension(file.relative)
         }, opt);
 
-        if (options.suffix && !options.name) {
-            options.name = normalizeName(path.basename(filePath, path.extname(filePath))) + options.suffix;
+        if (options.modules === 'none' && !options.name) {
+            options.name = normalizeName(path.basename(filePath, path.extname(filePath)));
+            console.log('options.name ', options.name)
         }
 
         try {