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){
-    return TEMPLATES[name];
-  }
-
-  static evalTemplate(component_name, fnResolve){
+  static evalTemplate(component_name, eval_context, fnResolve){
     jQuery.ajax({
       url: COMPONENT_MAP[component_name] + '.rt'
     }).done((template)=>{
-      var code = rt.convertTemplateToReact(template, {modules: 'none', name: component_name}),
-        eval_context = {};
-      code = code.replace('var ' + component_name + ' = ', 'eval_context.' + component_name + ' = ');
-      new Function('with(this){ ' + code + ' } ').call({
-        eval_context: eval_context,
-        '_': _,
-        'React': React
-      });
+      var code = react_templates.convertTemplateToReact(template, {modules: 'none', name: component_name}),
+      code = code.replace('var ' + component_name + ' = ', 'this.' + component_name + ' = ');
+      new Function('with(this){ ' + code + ' } ').call(eval_context);
       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="./../power/power.component" as="PowerComponent"/>
+<rt-require dependency="./../energy/energy.component" as="Energy"/>
+<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
-      rt-if="this.state.dataset === 'energy'"
+    <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
-      rt-if="this.state.dataset === 'power'"
+    <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 ||
-        prev_props.year != power.props.year ||
+    if (prev_props.power_range[0] != power.props.power_range[0] ||
+        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),
-        house = null;
-      if (params.dataset === 'power' && location.query.dates) {
-        params.power_range = [+location.query.dates[0], +location.query.dates[1]];
-      }
-      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; });
-      }
-      state_manager.state.house = house;
-      Object.assign(state_manager.state, params);
-      if (state_manager.state.house_id) {
-        state_manager.updateHouseFromState(component);
-      } else {
-        component.syncFromStateManager(()=>{
-          state_manager.update_in_progress = false;
-          fnResolve();
-        });
-      }
-    });
+    var params = state_manager.parseUrl(location.pathname),
+      house = null;
+    if (params.dataset === 'power' && location.query.dates) {
+      params.power_range = [+location.query.dates[0], +location.query.dates[1]];
+    }
+    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; });
+    }
+    state_manager.state.house = house;
+    Object.assign(state_manager.state, params);
+    if (state_manager.state.house_id) {
+      state_manager.updateHouseFromState(component);
+    } else {
+      component.syncFromStateManager(()=>{
+        state_manager.update_in_progress = false;
+      });
+    }
   }
 
   parseUrl(url, query){