update design build

client/config/design/app.js

@@ -1,6 +1,7 @@
 import Styles from 'config/styles';
 import Templates from 'config/templates';
-import {hashHistory} from 'react-router';
+import createHistory from 'history/lib/createHashHistory';
+import { useQueries } from 'history';
 import app from './../../app';
 
 Promise.all([
@@ -8,5 +9,5 @@ Promise.all([
   Styles.sync()
 ]).then(()=>{
   jQuery('#compiling_layouts').remove();
-  app(hashHistory);
+  app(useQueries(createHistory));
 });

client/config/design/component_map.js

@@ -1 +1 @@
-export const COMPONENT_MAP = {"about":"dashboard/about/about","energy":"dashboard/energy/energy","energy_graph":"dashboard/energy/graph/graph","energy_table":"dashboard/energy/table/table","house":"dashboard/house/house","layout":"dashboard/layout/layout","power_graph":"dashboard/power/graph/graph","power":"dashboard/power/power","power_table":"dashboard/power/table/table"}
+export const COMPONENT_MAP = {"energy":"dashboard/energy/energy","energy_graph":"dashboard/energy/graph/graph","energy_table":"dashboard/energy/table/table","layout":"dashboard/layout/layout","power_graph":"dashboard/power/graph/graph","power":"dashboard/power/power","power_table":"dashboard/power/table/table"}

client/config/design/style.js

@@ -1,5 +1,4 @@
 // 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

@@ -9,10 +9,13 @@ class Styles {
       var done = new Promise((fnResolve, fnReject)=>{
         Styles.addCss(view, fnResolve)
       }).then((result)=>{
-        css += result;
+        if (result) css += result;
       });
       all.push(done);
     }
+    var app_styles =
+    all.push(Styles.addAppCss()
+      .then((result)=>{ if(result)css += result; }));
     return Promise.all(all)
       .then(()=>{
         jQuery('head').append(`<style>${css}</style>`);
@@ -31,6 +34,19 @@ class Styles {
     });
   }
 
+  static addAppCss(){
+    return new Promise((fnResolve, fnReject)=>{
+      jQuery.ajax({
+        url: '/dashboard/app.scss'
+      }).then((scss)=>{
+        var sass = new Sass();
+        sass.compile(scss, (result, a)=>{
+          fnResolve(result.text);
+        });
+      });
+    });
+  }
+
 }
 
 export default Styles;

client/config/design/templates.js

@@ -1,4 +1,4 @@
-import rt from 'react-templates';
+import react_templates from 'react-templates/dist/reactTemplates';
 import React from 'react';
 import _ from 'lodash';
 
@@ -8,33 +8,36 @@ var TEMPLATES = {};
 
 class Templates {
 
+  static forComponent(name){
+    return TEMPLATES[name];
+  }
+
   static sync(){
-    var all = [];
+    var all = [],
+      eval_context = {
+        '_': _,
+        'React': React
+      };
+    for (var component_name in COMPONENT_MAP){
+      var component = require('./../../' + COMPONENT_MAP[component_name] + '.component');
+      eval_context[component.NAME] = component;
+    }
     for (var component_name in COMPONENT_MAP){
       var done = new Promise((fnResolve, fnReject)=>{
-        Templates.evalTemplate(component_name, fnResolve);
+        Templates.evalTemplate(component_name, eval_context, fnResolve);
       });
       all.push(done);
     }
     return Promise.all(all);
   }
 
-  static forComponent(name){
+  static evalTemplate(component_name, eval_context, fnResolve){
-    return TEMPLATES[name];
-  }
-
-  static evalTemplate(component_name, fnResolve){
     jQuery.ajax({
       url: COMPONENT_MAP[component_name] + '.rt'
     }).done((template)=>{
-      var code = rt.convertTemplateToReact(template, {modules: 'none', name: component_name}),
+      var code = react_templates.convertTemplateToReact(template, {modules: 'none', name: component_name}),
-        eval_context = {};
+      code = code.replace('var ' + component_name + ' = ', 'this.' + component_name + ' = ');
-      code = code.replace('var ' + component_name + ' = ', 'eval_context.' + component_name + ' = ');
+      new Function('with(this){ ' + code + ' } ').call(eval_context);
-      new Function('with(this){ ' + code + ' } ').call({
-        eval_context: eval_context,
-        '_': _,
-        'React': React
-      });
       TEMPLATES[component_name] = eval_context[component_name];
       fnResolve();
     });

client/config/test/webpack.js

@@ -1,55 +0,0 @@
-import webpack from 'webpack';
-
-module.exports = {
-  entry: {
-    app: __dirname + '/../../config/development/app',
-    style: __dirname + '/../../config/development/style'
-  },
-  output: {
-    filename: '[name].js',
-    path: __dirname + '/../../build/development'
-  },
-  module: {
-      loaders: [
-          {
-              test: /\.scss$/,
-              loaders: ['style', 'raw', 'sass']
-          }, {
-              test: /\.css$/,
-              loaders: ['style', 'raw']
-          }, {
-            test: /\.js$/,
-            loader: 'babel'
-          }, {
-            test: /\.json$/,
-            loader: 'json'
-          }, {
-            test: /\.rt/,
-            loader: "react-templates-loader?targetVersion=0.14.0"
-          }
-      ]
-  },
-  sassLoader: {
-    includePaths: [__dirname + '/../..', __dirname + '/../../../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: __dirname + '/../../api/development',
-          config: __dirname + '/../../config/development'
-      }
-  }
-}

client/dashboard/energy/energy.component.js

@@ -35,6 +35,6 @@ class EnergyComponent extends React.Component {
     return energyRt.call(this);
   }
 }
-EnergyComponent.NAME = 'EnergyComponent'
+EnergyComponent.NAME = 'Energy';
 
 module.exports = EnergyComponent;

client/dashboard/energy/graph/graph.component.js

@@ -70,4 +70,6 @@ class GraphComponent extends React.Component {
 
 }
 
+GraphComponent.NAME = 'EnergyGraph';
+
 module.exports = GraphComponent;

client/dashboard/energy/table/table.component.js

@@ -20,4 +20,6 @@ class TableComponent extends React.Component {
 
 }
 
+TableComponent.NAME = 'EnergyTable';
+
 module.exports = TableComponent;

client/dashboard/layout/layout.component.js

@@ -26,6 +26,14 @@ class LayoutComponent extends React.Component {
     return this.state_manager && this.state_manager.state.house;
   }
 
+  get should_show_energy_data(){
+    return this.state.dataset === 'energy' && this.house && this.house.energy_data;
+  }
+
+  get should_show_power_data(){
+    return this.state.dataset === 'power' && this.house && this.house.power_data;
+  }
+
   componentDidMount() {
     var layout = this;
     House.ensureHouses().then((houses)=>{
@@ -83,4 +91,6 @@ class LayoutComponent extends React.Component {
   }
 }
 
-export default LayoutComponent;
+LayoutComponent.NAME = 'Layout';
+
+module.exports = LayoutComponent;

client/dashboard/layout/layout.rt

@@ -1,5 +1,5 @@
-<rt-require dependency="./../energy/energy.component" as="EnergyComponent"/>
+<rt-require dependency="./../energy/energy.component" as="Energy"/>
-<rt-require dependency="./../power/power.component" as="PowerComponent"/>
+<rt-require dependency="./../power/power.component" as="Power"/>
 <div id="layout">
   <div rt-if="!this.house" id="about">
     <div class="panel panel-default">
@@ -75,16 +75,16 @@
       </div>
     </div><br/>
 
-    <EnergyComponent
+    <Energy
-      rt-if="this.state.dataset === 'energy'"
+      rt-if="this.should_show_energy_data"
       house="{this.state.house}"
       loading_energy_data="{this.state.loading_energy_data}"
       state_manager="{this.state_manager}"
       view="{this.state.view}"
       graph_attr="{this.state.graph_attr}"
       year="{this.state.year}" />
-    <PowerComponent
+    <Power
-      rt-if="this.state.dataset === 'power'"
+      rt-if="this.should_show_power_data"
       house="{this.state.house}"
       loading_power_data="{this.state.loading_power_data}"
       state_manager="{this.state_manager}"

client/dashboard/power/graph/graph.component.js

@@ -6,11 +6,6 @@ import SplineStackChart from './../../../d3/line/spline_stack';
 
 class GraphComponent extends React.Component {
 
-  componentDidMount(){
-    var power_graph = this;
-    power_graph.updateGraph();
-  }
-
   get house(){
     return this.state_manager.state.house;
   }
@@ -19,6 +14,11 @@ class GraphComponent extends React.Component {
     return this.props.state_manager;
   }
 
+  componentDidMount(){
+    var power_graph = this;
+    power_graph.updateGraph();
+  }
+
   componentDidUpdate(prev_props, prev_state){
     var power_graph = this;
     if (prev_props.house != power_graph.props.house || prev_props.power_range != power_graph.props.power_range){
@@ -84,4 +84,6 @@ class GraphComponent extends React.Component {
 
 }
 
+GraphComponent.NAME = 'PowerGraph';
+
 module.exports = GraphComponent;

client/dashboard/power/power.component.js

@@ -37,8 +37,8 @@ class PowerComponent extends React.Component {
   componentDidUpdate(prev_props, prev_state){
     var power = this,
       state_manager = power.state_manager;
-    if (prev_props.month != power.props.month ||
+    if (prev_props.power_range[0] != power.props.power_range[0] ||
-        prev_props.year != power.props.year ||
+        prev_props.power_range[1] != power.props.power_range[1] ||
         prev_props.house != power.props.house){
       power.initDateRange();
       state_manager.powerDataRendered();
@@ -101,6 +101,6 @@ class PowerComponent extends React.Component {
 
 }
 
-PowerComponent.NAME = 'PowerComponent'
+PowerComponent.NAME = 'Power';
 
-module.exports = PowerComponent
+module.exports = PowerComponent;

client/dashboard/power/table/table.component.js

@@ -19,4 +19,6 @@ class TableComponent extends React.Component {
   }
 }
 
+TableComponent.NAME = 'PowerTable';
+
 module.exports = TableComponent;

client/dashboard/state_manager.js

@@ -44,7 +44,7 @@ class StateManager {
   }
 
   // This will update the house state acccording to passed update parameters.
-  updateHouseFromState(component){
+  updateHouseFromState(component, fnResolve){
     var state_manager = this,
       house = state_manager.state.house,
       promise;
@@ -133,26 +133,23 @@ class StateManager {
 
   updateStateFromUrl(location, component){
     var state_manager = this;
-    return new Promise((fnResolve, fnReject)=>{
+    var params = state_manager.parseUrl(location.pathname),
-      var params = state_manager.parseUrl(location.pathname),
+      house = null;
-        house = null;
+    if (params.dataset === 'power' && location.query.dates) {
-      if (params.dataset === 'power' && location.query.dates) {
+      params.power_range = [+location.query.dates[0], +location.query.dates[1]];
-        params.power_range = [+location.query.dates[0], +location.query.dates[1]];
+    }
-      }
+    if (params.house_id || params.house_id != state_manager.state.house_id){
-      if (params.house_id || params.house_id != state_manager.state.house_id){
+      house = state_manager.houses.find((h)=>{ return h.data.id == params.house_id; });
-        house = state_manager.houses.find((h)=>{ return h.data.id == params.house_id; });
+    }
-      }
+    state_manager.state.house = house;
-      state_manager.state.house = house;
+    Object.assign(state_manager.state, params);
-      Object.assign(state_manager.state, params);
+    if (state_manager.state.house_id) {
-      if (state_manager.state.house_id) {
+      state_manager.updateHouseFromState(component);
-        state_manager.updateHouseFromState(component);
+    } else {
-      } else {
+      component.syncFromStateManager(()=>{
-        component.syncFromStateManager(()=>{
+        state_manager.update_in_progress = false;
-          state_manager.update_in_progress = false;
+      });
-          fnResolve();
+    }
-        });
-      }
-    });
   }
 
   parseUrl(url, query){

gulpfile.babel.js

@@ -2,9 +2,12 @@ import gulp from 'gulp';
 import yargs from 'yargs';
 import webpack from 'webpack';
 import gutil from 'gulp-util';
+import gulpCopy from 'gulp-copy'
+import fs from 'fs';
 
 import FsHelper from './server/lib/fs_helper';
 import ComponentMapWriter from './server/lib/tasks/component_map_writer';
+import BuildDashboardAssets from './server/lib/tasks/build_dashboard_assets';
 import DB from './server/config/database';
 import {PowerDataSeed, HouseSeed} from './server/lib/tasks/seed_data';
 
@@ -28,8 +31,7 @@ gulp.task('save_house_csv', function(done){
 
 // right now, build only available for design.
 gulp.task('build', function(done) {
-  var config, env,
+  var config, env;
-    gulpCopy = require('gulp-copy');
 
   if (yargs.argv.design){
     process.env.NODE_ENV = 'design';
@@ -48,18 +50,27 @@ gulp.task('build', function(done) {
         gutil.log("[webpack]", stats.toString({}));
 
         if (yargs.argv.design){
+          var path = 'client/build/design/dashboard';
           // copy all react templates and their styles sheets into build/design/dashboard.
-         gulp.src([
+          FsHelper.rmdirAsync(path, ()=>{
-            `client/app.scss`
+            console.log('path removed')
-          ]).pipe(gulpCopy(`client/build/design/dashboard`, {prefix: 1}));
+            fs.mkdir(path, ()=>{
+              console.log('path recreated')
+              gulp.src([
+                `client/app.scss`
+              ]).pipe(gulpCopy(path, {prefix: 1}));
 
-          FsHelper.walk('client/dashboard', (err, files)=>{
+              FsHelper.walk('client/dashboard', (err, files)=>{
-            var files_to_copy = files.filter((file)=>{
+                if (err){ console.log(err); done(); return false; }
-              return /\.(rt|scss)$/.test(file)
+                var files_to_copy = files.filter((file)=>{
-            });
+                  return /\.(rt|scss)$/.test(file)
-            gulp.src(files_to_copy)
+                });
-              .pipe(gulpCopy('client/build/design/dashboard', {prefix: 2}));
+                console.log(files_to_copy)
-            done()
+                gulp.src(files_to_copy)
+                  .pipe(gulpCopy(path, {prefix: 2}));
+                done()
+              });
+            })
           });
         }
 

karma.conf.js

@@ -3,12 +3,6 @@ var path = require('path');
 module.exports = function (config) {
   config.set({
     browsers: ['PhantomJS'],
-    //coverageReporter: {
-    //  reporters: [
-    //    { type: 'html', subdir: 'html' },
-    //    { type: 'lcovonly', subdir: '.' },
-    //  ],
-    // },
     files: [
       'tests.webpack.js',
     ],
@@ -32,15 +26,7 @@ module.exports = function (config) {
             query: {
               cacheDirectory: true,
             },
-          }/*, {
+          }
-            test: /\.js?$/,
-            include: /(client|shared)/,
-            exclude: /(node_modules|spec)/,
-            loader: 'babel-istanbul',
-            query: {
-              cacheDirectory: true,
-            },
-          }*/
         ],
         loaders: [
           {
@@ -49,8 +35,8 @@ module.exports = function (config) {
             exclude: /(node_modules|spec)/,
             loader: 'babel',
             query: {
-              cacheDirectory: true,
+              cacheDirectory: true
-            },
+            }
           }, {
             test: /\.json$/,
             loader: 'json'

server/lib/fs_helper.js

@@ -28,6 +28,47 @@ class FsHelper {
     });
   }
 
+  static rmdirAsync(path, callback) {
+    fs.readdir(path, function(err, files) {
+      if(err) {
+        // Pass the error on to callback
+        callback(err, []);
+        return;
+      }
+      var wait = files.length,
+        count = 0,
+        folderDone = function(err) {
+        count++;
+        // If we cleaned out all the files, continue
+        if( count >= wait || err) {
+          fs.rmdir(path,callback);
+        }
+      };
+      // Empty directory to bail early
+      if(!wait) {
+        folderDone();
+        return;
+      }
+
+      // Remove one or more trailing slash to keep from doubling up
+      path = path.replace(/\/+$/,"");
+      files.forEach(function(file) {
+        var curPath = path + "/" + file;
+        fs.lstat(curPath, function(err, stats) {
+          if( err ) {
+            callback(err, []);
+            return;
+          }
+          if( stats.isDirectory() ) {
+            FsHelper.rmdirAsync(curPath, folderDone);
+          } else {
+            fs.unlink(curPath, folderDone);
+          }
+        });
+      });
+    });
+  }
+
 }
 
 export default FsHelper;

server/lib/tasks/build_dashboard_assets.js

@@ -0,0 +1,12 @@
+
+
+class BuildDashboardAssets {
+
+  static copyToDir(path, gulp, done){
+
+
+  }
+
+}
+
+export default BuildDashboardAssets;

tests.webpack.js

@@ -6,9 +6,3 @@ testsContext.keys().forEach(testsContext);
 
 require('./client/models/house');
 require('./shared/utils/date_range');
-
-/*
-var srcContext = require.context('./client', true, /\.js$/);
-srcContext.keys().forEach(srcContext);*/
-
-