diff --git a/client/api/design/energy_data.js b/client/api/design/energy_data.js new file mode 100644 index 0000000..9f597a9 --- /dev/null +++ b/client/api/design/energy_data.js @@ -0,0 +1,12 @@ +class EnergyDataApi { + + static index(params){ + return Promise.resolve( + + + ); + } + +} + +export default EnergyDataApi; diff --git a/client/api/design/houses.js b/client/api/design/houses.js new file mode 100644 index 0000000..d0e1f6a --- /dev/null +++ b/client/api/design/houses.js @@ -0,0 +1,11 @@ +class HousesApi { + + static index(params){ + return Promise.resolve({ + + }); + } + +} + +export default HousesApi; diff --git a/client/api/design/power_data.js b/client/api/design/power_data.js new file mode 100644 index 0000000..3ed6b42 --- /dev/null +++ b/client/api/design/power_data.js @@ -0,0 +1,12 @@ +class PowerDataApi { + + static index(params){ + return Promise.resolve({ + + }); + } + +} + +export default PowerDataApi; + diff --git a/client/api/energy_data.js b/client/api/development/energy_data.js similarity index 100% rename from client/api/energy_data.js rename to client/api/development/energy_data.js diff --git a/client/api/houses.js b/client/api/development/houses.js similarity index 100% rename from client/api/houses.js rename to client/api/development/houses.js diff --git a/client/api/power_data.js b/client/api/development/power_data.js similarity index 100% rename from client/api/power_data.js rename to client/api/development/power_data.js diff --git a/client/app.js b/client/app.js index c938854..c2dc237 100644 --- a/client/app.js +++ b/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') + ); +}; diff --git a/client/style.scss b/client/app.scss similarity index 100% rename from client/style.scss rename to client/app.scss diff --git a/client/config/api.js b/client/config/api.js deleted file mode 100644 index cc0bafa..0000000 --- a/client/config/api.js +++ /dev/null @@ -1 +0,0 @@ -api.js diff --git a/client/config/db.js b/client/config/db.js deleted file mode 100644 index c974c4b..0000000 --- a/client/config/db.js +++ /dev/null @@ -1,9 +0,0 @@ -import Loki from 'lokijs'; - -var db = new Loki('spike'); - -db.addCollection('PowerData'); -db.addCollection('EnergyData'); -db.addCollection('Houses'); - -export default diff --git a/client/config/design/app.js b/client/config/design/app.js new file mode 100644 index 0000000..ca5bc53 --- /dev/null +++ b/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(); +}); diff --git a/client/style.js b/client/config/design/style.js similarity index 58% rename from client/style.js rename to client/config/design/style.js index 1903da4..805fb34 100644 --- a/client/style.js +++ b/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'); + diff --git a/client/config/design/styles.js b/client/config/design/styles.js new file mode 100644 index 0000000..2b84209 --- /dev/null +++ b/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(``); + }); + } + +} + + diff --git a/client/config/design/templates.js b/client/config/design/templates.js new file mode 100644 index 0000000..24c043f --- /dev/null +++ b/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]; + } + +} diff --git a/client/config/design/webpack.js b/client/config/design/webpack.js new file mode 100644 index 0000000..e7474d5 --- /dev/null +++ b/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' + } + } +}; diff --git a/client/config/development/app.js b/client/config/development/app.js new file mode 100644 index 0000000..1a330ac --- /dev/null +++ b/client/config/development/app.js @@ -0,0 +1,3 @@ +import app from './../../app'; + +app(); diff --git a/client/config/development/style.js b/client/config/development/style.js new file mode 100644 index 0000000..6d67a8e --- /dev/null +++ b/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'); diff --git a/client/config/development/templates.js b/client/config/development/templates.js new file mode 100644 index 0000000..be27504 --- /dev/null +++ b/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; diff --git a/server/config/webpack/development.js b/client/config/development/webpack.js similarity index 64% rename from server/config/webpack/development.js rename to client/config/development/webpack.js index 897de9e..d22ac18 100644 --- a/server/config/webpack/development.js +++ b/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' + } } } diff --git a/server/config/webpack/production.js b/client/config/production/webpack.js similarity index 100% rename from server/config/webpack/production.js rename to client/config/production/webpack.js diff --git a/client/config/store.js b/client/config/store.js deleted file mode 100644 index b1c4591..0000000 --- a/client/config/store.js +++ /dev/null @@ -1 +0,0 @@ -store.js diff --git a/client/config/webpack.js b/client/config/webpack.js new file mode 100644 index 0000000..ddd0a04 --- /dev/null +++ b/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 + } + } +} diff --git a/client/d3/grid/calendar_grid.js b/client/d3/grid/calendar_grid.js index 2e9170c..148e530 100644 --- a/client/d3/grid/calendar_grid.js +++ b/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){ diff --git a/client/dashboard/energy/energy.js b/client/dashboard/energy/energy.js index 6d9de98..ebf9015 100644 --- a/client/dashboard/energy/energy.js +++ b/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); } }); diff --git a/client/dashboard/layout/layout.js b/client/dashboard/layout/layout.js index 24c3de9..ea8d8c1 100644 --- a/client/dashboard/layout/layout.js +++ b/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); } }); diff --git a/client/dashboard/power/power.js b/client/dashboard/power/power.js index 10141a9..c173f54 100644 --- a/client/dashboard/power/power.js +++ b/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); } }); diff --git a/client/dashboard/power/power.rt b/client/dashboard/power/power.rt index f075273..34d9efc 100644 --- a/client/dashboard/power/power.rt +++ b/client/dashboard/power/power.rt @@ -24,7 +24,7 @@