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

use react templates loader

Browse Source
This commit is contained in:
Eric Hulburd
2016-03-01 13:39:47 -06:00
parent 916a8dc255
commit d650baab6d
15 changed files with 13 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/config/development/templates.js
View File

@@ -3,15 +3,15 @@
import fs from 'fs';
import aboutRt from './../../dashboard/about/about.rt.js';
import houseRt from './../../dashboard/house/house.rt.js';
import layoutRt from './../../dashboard/layout/layout.rt.js';
import energyRt from './../../dashboard/energy/energy.rt.js';
import energyGraphRt from './../../dashboard/energy/graph/graph.rt.js';
import energyTableRt from './../../dashboard/energy/table/table.rt.js';
import powerRt from './../../dashboard/power/power.rt.js';
import powerGraphRt from './../../dashboard/power/graph/graph.rt.js';
import powerTableRt from './../../dashboard/power/table/table.rt.js';
import aboutRt from './../../dashboard/about/about.rt';
import houseRt from './../../dashboard/house/house.rt';
import layoutRt from './../../dashboard/layout/layout.rt';
import energyRt from './../../dashboard/energy/energy.rt';
import energyGraphRt from './../../dashboard/energy/graph/graph.rt';
import energyTableRt from './../../dashboard/energy/table/table.rt';
import powerRt from './../../dashboard/power/power.rt';
import powerGraphRt from './../../dashboard/power/graph/graph.rt';
import powerTableRt from './../../dashboard/power/table/table.rt';
const TEMPLATES = {
about: aboutRt,

3
client/config/development/webpack.js
View File

@@ -23,6 +23,9 @@ module.exports = {
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.rt/,
loader: "react-templates-loader"
}
]
},

5
client/dashboard/about/about.rt.js
View File

@@ -1,5 +0,0 @@
import React from 'react';
import _ from 'lodash';
export default function () {
return React.createElement('div', { 'id': 'about' }, React.createElement('div', { 'className': 'panel panel-default' }, React.createElement('div', { 'className': 'panel-heading' }, 'About'), React.createElement('div', { 'className': 'panel-body' }, React.createElement('p', {}, 'This is a Spike bundle prototype using the following lirbaries:'), React.createElement('ul', {}, React.createElement('li', {}, 'React'), React.createElement('li', {}, 'React Templates'), React.createElement('li', {}, 'React Router'), React.createElement('li', {}, 'LokiJs - persisting API calls to indexedDb'), React.createElement('li', {}, 'Webpack - hot mode developing and app bundling'), React.createElement('li', {}, 'Babel - ES6 transpiler')), React.createElement('p', {}, 'The demo app consists of a dataset of 10 houses and 10 years of randomly generated power consumption and production at 15 minute intervals. You can toggle between different houses and time periods to compare and contrast the dataset.'), React.createElement('p', {}, 'Select a house below to get started.'))));
};

20
client/dashboard/energy/energy.rt.js
View File

@@ -1,20 +0,0 @@
import React from 'react';
import _ from 'lodash';
export default function () {
return React.createElement('div', { 'id': 'energy_view' }, this.state.loading_energy_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving energy data...\n ') : null, this.props.view === 'graph' ? React.createElement('div', {}, React.createElement('h4', {}, 'Select Data'), React.createElement('div', {
'className': 'btn-group',
'role': 'group'
}, React.createElement('button', {
'data-param': 'graph_attr',
'data-value': 'consumption',
'className': _.keys(_.pick({ active: this.state.graph_attr === 'consumption' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setAttr,
'type': 'button'
}, 'Consumption'), React.createElement('button', {
'data-param': 'graph_attr',
'data-value': 'production',
'className': _.keys(_.pick({ active: this.state.graph_attr === 'production' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setGraphAttr,
'type': 'button'
}, 'Production'))) : null, '\n ', this.props.children, '\n');
};

5
client/dashboard/energy/graph/graph.rt.js
View File

@@ -1,5 +0,0 @@
import React from 'react';
import _ from 'lodash';
export default function () {
return React.createElement('div', { 'id': 'energy_graph' });
};

12
client/dashboard/energy/table/table.rt.js
View File

@@ -1,12 +0,0 @@
import React from 'react';
import _ from 'lodash';
function repeatEnergy_datum1(energy_datum, energy_datumIndex) {
return React.createElement('tr', { 'key': energy_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, energy_datum.day_to_s), React.createElement('td', {}, energy_datum.consumption_to_s), React.createElement('td', {}, energy_datum.production_to_s));
}
export default function () {
return this.context.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [
'tbody',
{},
_.map(this.context.house.energy_data, repeatEnergy_datum1.bind(this))
])) : null;
};

48
client/dashboard/house/house.rt.js
View File

@@ -1,48 +0,0 @@
import React from 'react';
import _ from 'lodash';
function repeatYear1(year, yearIndex) {
return React.createElement('button', {
'data-param': 'year',
'data-value': year,
'key': 'data-year-' + year,
'className': 'btn-info btn btn-sm' + ' ' + _.keys(_.pick({ active: year == this.context.house.state.year }, _.identity)).join(' '),
'onClick': this.setParam.bind(this)
}, year);
}
export default function () {
return React.createElement('div', { 'id': 'house' }, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', {
'className': 'btn-group',
'role': 'group'
}, React.createElement('button', {
'data-param': 'dataset',
'data-value': 'energy',
'className': _.keys(_.pick({ active: this.energySelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setParam.bind(this),
'type': 'button'
}, 'Daily Energy Statistics'), React.createElement('button', {
'data-param': 'dataset',
'data-value': 'power',
'className': _.keys(_.pick({ active: this.powerSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setParam.bind(this),
'type': 'button'
}, '15-minute Power Statistics')), React.createElement('h4', {}, 'View as:'), React.createElement('div', {
'className': 'btn-group',
'role': 'group'
}, React.createElement('button', {
'data-param': 'view',
'data-value': 'graph',
'className': _.keys(_.pick({ active: this.graphSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setParam.bind(this),
'type': 'button'
}, 'Graph'), React.createElement('button', {
'data-param': 'view',
'data-value': 'table',
'className': _.keys(_.pick({ active: this.tableSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
'onClick': this.setParam.bind(this),
'type': 'button'
}, 'Table')), this.context.house ? React.createElement('div', {}, React.createElement('h4', {}, 'Select dates:'), React.createElement.apply(this, [
'div',
{ 'className': 'btn-group' },
_.map(this.context.house.years, repeatYear1.bind(this))
])) : null, React.createElement('br', {}), '\n\n ', this.props.children, '\n');
};

23
client/dashboard/layout/layout.rt.js
View File

@@ -1,23 +0,0 @@
import React from 'react';
import _ from 'lodash';
function repeatHouse1(house, houseIndex) {
return React.createElement('option', {
'value': house.data.id,
'key': house.scoped_id
}, house.data.name);
}
export default function () {
return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [
'select',
{
'id': 'houses_select',
'className': 'form-control',
'onChange': this.setHouse.bind(this),
'value': this.props.params.house_id
},
_.map(this.state.houses, repeatHouse1.bind(this))
]) : null, this.state.house ? React.createElement('button', {
'onClick': this.refreshData.bind(this),
'className': 'btn btn-xs btn-default'
}, 'Refresh House Data') : null, '\n\n ', this.props.children, '\n');
};

5
client/dashboard/power/graph/graph.rt.js
View File

@@ -1,5 +0,0 @@
import React from 'react';
import _ from 'lodash';
export default function () {
return React.createElement('div', { 'id': 'power_graph' });
};

18
client/dashboard/power/power.rt.js
View File

@@ -1,18 +0,0 @@
import React from 'react';
import _ from 'lodash';
function repeatMonth1(month, monthIndex) {
return React.createElement('button', {
'data-param': 'month',
'data-value': month,
'key': 'data-month-' + month,
'className': 'btn-warning btn btn-sm' + ' ' + _.keys(_.pick({ active: month === this.context.house.state.month }, _.identity)).join(' '),
'onClick': this.setParam.bind(this)
}, month);
}
export default function () {
return React.createElement('div', { 'id': 'power_view' }, React.createElement.apply(this, [
'div',
{ 'className': 'btn-group' },
this.context.house ? _.map(this.context.house.availableMonths(), repeatMonth1.bind(this)) : null
]), this.state.loading_power_data ? React.createElement('div', { 'className': 'alert alert-warning' }, '\n Retrieving power data...\n ') : null, React.createElement('div', { 'id': 'power_date_setter' }), '\n ', this.props.children, '\n');
};

12
client/dashboard/power/table/table.rt.js
View File

@@ -1,12 +0,0 @@
import React from 'react';
import _ from 'lodash';
function repeatPower_datum1(power_datum, power_datumIndex) {
return React.createElement('tr', { 'key': power_datum.scoped_id }, React.createElement('td', {}), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
}
export default function () {
return this.context.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [
'tbody',
{},
_.map(this.context.house.power_data, repeatPower_datum1.bind(this))
])) : null;
};

11
gulpfile.babel.js
View File

@@ -7,7 +7,6 @@ import FsHelper from './server/lib/fs_helper';
import ComponentMapWriter from './server/lib/tasks/component_map_writer';
import DB from './server/config/database';
import {PowerDataSeed, HouseSeed} from './server/lib/tasks/seed_data';
import rtCompile from './server/lib/tasks/react_template_compile';
gulp.task('generate_power_csv', function(done){
DB.sync().then(()=>{
@@ -27,16 +26,6 @@ gulp.task('save_house_csv', function(done){
});
});
gulp.task('compile_react_templates', function() {
gulp.src('./client/dashboard/**/*.rt')
.pipe(rtCompile({
modules: 'es6',
targetVersion: '0.14.0',
suffix: '.rt'
}))
.pipe(gulp.dest('./client/dashboard'));
});
// right now, build only available for design.
gulp.task('build', function(done) {
var config, env,

1
package.json
View File

@@ -37,6 +37,7 @@
"sass-loader": "3.1.2",
"style-loader": "^0.12.3",
"json-loader": "0.5.4",
"react-templates-loader": "0.4.0",
"node-sass": "3.4.2",
"moment-timezone": "0.5.0",
"yargs": "3.32.0",

58
server/lib/tasks/react_template_compile.js
View File

@@ -1,58 +0,0 @@
'use strict';
// through2 is a thin wrapper around node transform streams
import through from 'through2';
import gutil from 'gulp-util';
import rt from 'react-templates';
import path from 'path';
import extend from 'extend';
// Consts
const PLUGIN_NAME = 'gulp-react-templates';
var PluginError = gutil.PluginError;
function normalizeName(name) {
return name.replace(/-/g, '_');
}
export default function (opt) {
function replaceExtension(filePath) {
return filePath + '.js';
}
function transform(file, enc, cb) {
if (file.isNull()) {
return cb(null, file);
}
if (file.isStream()) {
return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
}
var filePath = file.path,
str = file.contents.toString('utf8'),
data;
var options = extend({
filename: file.path,
sourceFiles: [file.relative],
generatedFile: replaceExtension(file.relative)
}, opt);
if (options.modules === 'none' && !options.name) {
options.name = normalizeName(path.basename(filePath, path.extname(filePath)));
console.log('options.name ', options.name)
}
try {
data = rt.convertTemplateToReact(str, options);
} catch (err) {
return cb(new PluginError(PLUGIN_NAME, err));
}
file.contents = new Buffer(data);
file.path = replaceExtension(file.path);
cb(null, file);
}
return through.obj(transform);
};

1
spec/client/dashboard/models/house.test.js
View File

@@ -3,7 +3,6 @@
import moment from 'moment-timezone';
import House from './../../../../client/models/house.js';
describe('house#setMonthState', ()=>{
var data_until = 1456589922, // Sat, 27 Feb 2016 16:18:42 +0000