From d7af1fc2b2d809e654be21c44b2ad6ca5f5b28c0 Mon Sep 17 00:00:00 2001 From: Eric Hulburd Date: Sat, 5 Mar 2016 16:53:29 -0600 Subject: [PATCH] update design build --- client/config/design/app.js | 5 +- client/config/design/component_map.js | 2 +- client/config/design/style.js | 1 - client/config/design/styles.js | 18 +++++- client/config/design/templates.js | 35 ++++++------ client/config/test/webpack.js | 55 ------------------- client/dashboard/energy/energy.component.js | 2 +- .../dashboard/energy/graph/graph.component.js | 2 + .../dashboard/energy/table/table.component.js | 2 + client/dashboard/layout/layout.component.js | 12 +++- client/dashboard/layout/layout.rt | 12 ++-- .../dashboard/power/graph/graph.component.js | 12 ++-- client/dashboard/power/power.component.js | 8 +-- .../dashboard/power/table/table.component.js | 2 + client/dashboard/state_manager.js | 39 ++++++------- gulpfile.babel.js | 35 ++++++++---- karma.conf.js | 20 +------ server/lib/fs_helper.js | 41 ++++++++++++++ server/lib/tasks/build_dashboard_assets.js | 12 ++++ tests.webpack.js | 6 -- 20 files changed, 172 insertions(+), 149 deletions(-) delete mode 100644 client/config/test/webpack.js create mode 100644 server/lib/tasks/build_dashboard_assets.js diff --git a/client/config/design/app.js b/client/config/design/app.js index 07a045d..b42887f 100644 --- a/client/config/design/app.js +++ b/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)); }); diff --git a/client/config/design/component_map.js b/client/config/design/component_map.js index f599bcd..49e8dc3 100644 --- a/client/config/design/component_map.js +++ b/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"} \ No newline at end of file +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"} \ No newline at end of file diff --git a/client/config/design/style.js b/client/config/design/style.js index 5a41f1a..5e71106 100644 --- a/client/config/design/style.js +++ b/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'); diff --git a/client/config/design/styles.js b/client/config/design/styles.js index 544c90f..741356b 100644 --- a/client/config/design/styles.js +++ b/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(``); @@ -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; diff --git a/client/config/design/templates.js b/client/config/design/templates.js index 7a94949..d647df7 100644 --- a/client/config/design/templates.js +++ b/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(); }); diff --git a/client/config/test/webpack.js b/client/config/test/webpack.js deleted file mode 100644 index c71a86c..0000000 --- a/client/config/test/webpack.js +++ /dev/null @@ -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' - } - } -} diff --git a/client/dashboard/energy/energy.component.js b/client/dashboard/energy/energy.component.js index 36d31d0..162ff31 100644 --- a/client/dashboard/energy/energy.component.js +++ b/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; diff --git a/client/dashboard/energy/graph/graph.component.js b/client/dashboard/energy/graph/graph.component.js index 9c3ce72..7a76d79 100644 --- a/client/dashboard/energy/graph/graph.component.js +++ b/client/dashboard/energy/graph/graph.component.js @@ -70,4 +70,6 @@ class GraphComponent extends React.Component { } +GraphComponent.NAME = 'EnergyGraph'; + module.exports = GraphComponent; diff --git a/client/dashboard/energy/table/table.component.js b/client/dashboard/energy/table/table.component.js index ed6b20c..1ca20e1 100644 --- a/client/dashboard/energy/table/table.component.js +++ b/client/dashboard/energy/table/table.component.js @@ -20,4 +20,6 @@ class TableComponent extends React.Component { } +TableComponent.NAME = 'EnergyTable'; + module.exports = TableComponent; diff --git a/client/dashboard/layout/layout.component.js b/client/dashboard/layout/layout.component.js index 32799bb..7a04d09 100644 --- a/client/dashboard/layout/layout.component.js +++ b/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; diff --git a/client/dashboard/layout/layout.rt b/client/dashboard/layout/layout.rt index 956db9d..46db55a 100644 --- a/client/dashboard/layout/layout.rt +++ b/client/dashboard/layout/layout.rt @@ -1,5 +1,5 @@ - - + +
@@ -75,16 +75,16 @@

- - { - 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){ diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 74d3e13..4d09a73 100644 --- a/gulpfile.babel.js +++ b/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, - gulpCopy = require('gulp-copy'); + var config, env; 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([ - `client/app.scss` - ]).pipe(gulpCopy(`client/build/design/dashboard`, {prefix: 1})); + FsHelper.rmdirAsync(path, ()=>{ + console.log('path removed') + fs.mkdir(path, ()=>{ + console.log('path recreated') + gulp.src([ + `client/app.scss` + ]).pipe(gulpCopy(path, {prefix: 1})); - FsHelper.walk('client/dashboard', (err, files)=>{ - 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})); - done() + FsHelper.walk('client/dashboard', (err, files)=>{ + if (err){ console.log(err); done(); return false; } + var files_to_copy = files.filter((file)=>{ + return /\.(rt|scss)$/.test(file) + }); + console.log(files_to_copy) + gulp.src(files_to_copy) + .pipe(gulpCopy(path, {prefix: 2})); + done() + }); + }) }); } diff --git a/karma.conf.js b/karma.conf.js index fee5710..69ab3fb 100644 --- a/karma.conf.js +++ b/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' diff --git a/server/lib/fs_helper.js b/server/lib/fs_helper.js index 7068e56..c48eacc 100644 --- a/server/lib/fs_helper.js +++ b/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; diff --git a/server/lib/tasks/build_dashboard_assets.js b/server/lib/tasks/build_dashboard_assets.js new file mode 100644 index 0000000..3075450 --- /dev/null +++ b/server/lib/tasks/build_dashboard_assets.js @@ -0,0 +1,12 @@ + + +class BuildDashboardAssets { + + static copyToDir(path, gulp, done){ + + + } + +} + +export default BuildDashboardAssets; diff --git a/tests.webpack.js b/tests.webpack.js index 4037771..6c09f6c 100644 --- a/tests.webpack.js +++ b/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);*/ - -