senaduka/old-spike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update design build

Browse Source
This commit is contained in:
Eric Hulburd
2016-03-05 16:53:29 -06:00
parent 43a9daf94e
commit d7af1fc2b2
20 changed files with 172 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/config/design/app.js
View File

@@ -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));
});

2
client/config/design/component_map.js
View File

@@ -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"}

1
client/config/design/style.js
View File

@@ -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');

18
client/config/design/styles.js
View File

@@ -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;

35
client/config/design/templates.js
View File

@@ -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();
});

55
client/config/test/webpack.js
View File

@@ -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'
}
}
}

2
client/dashboard/energy/energy.component.js
View File

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

2
client/dashboard/energy/graph/graph.component.js
View File

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

2
client/dashboard/energy/table/table.component.js
View File

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

12
client/dashboard/layout/layout.component.js
View File

@@ -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;

12
client/dashboard/layout/layout.rt
View File

@@ -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}"

12
client/dashboard/power/graph/graph.component.js
View File

@@ -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;

8
client/dashboard/power/power.component.js
View File

@@ -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;

2
client/dashboard/power/table/table.component.js
View File

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

39
client/dashboard/state_manager.js
View File

@@ -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){

35
gulpfile.babel.js
View File

@@ -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()
});
})
});
}

20
karma.conf.js
View File

@@ -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'

41
server/lib/fs_helper.js
View File

@@ -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;

12
server/lib/tasks/build_dashboard_assets.js Normal file
View File

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

6
tests.webpack.js
View File

@@ -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);*/