| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import * as mdl from 'react-mdl' | ||
|
|
||
|
|
||
| export default class Option extends React.Component { | ||
| render() { | ||
| let { name, label, value, disabled, | ||
| onChange, onBlur } = this.props | ||
|
|
||
| return ( | ||
| <mdl.RadioGroup | ||
| name={name} | ||
| value={value || ''} | ||
| onBlur={(e) => onBlur(e.target.value)} | ||
| onChange={e => onChange(e.target.value)}> | ||
|
|
||
| { | ||
| _.map(options, | ||
| (value, name) => ( | ||
| <mdl.Radio | ||
| key={name} | ||
| disabled={disabled} | ||
| name={name} | ||
| value={name} | ||
| ripple> | ||
| {value} | ||
| </mdl.Radio> | ||
| ) | ||
| ) | ||
| } | ||
| </mdl.RadioGroup> | ||
| ); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import * as mdl from 'react-mdl' | ||
|
|
||
|
|
||
| export default class Text extends React.Component { | ||
| render() { | ||
| let { name, label, value, disabled, | ||
| onChange, onBlur } = this.props | ||
|
|
||
| return ( | ||
| <div className='textfield'> | ||
| <div className='auto-size'>{value || label}</div> | ||
| <mdl.Textfield | ||
| className={['field-' + name, (value !== undefined) ? 'is-dirty' : ''].join(' ')} | ||
| label={label} | ||
| name={name} | ||
| value={value} | ||
| disabled={disabled} | ||
| onBlur={(e) => onBlur(e.target.value)} | ||
| onChange={e => onChange(e.target.value)} | ||
| floatingLabel/> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
| @@ -1,22 +1,8 @@ | ||
| import Field from './field' | ||
| import ItemEdit from './itemEdit' | ||
| import List from './list' | ||
|
|
||
| export { | ||
| Field, | ||
| ItemEdit | ||
| } |
| @@ -3,7 +3,8 @@ import React from 'react' | ||
| import { connect } from 'react-redux' | ||
|
|
||
| import actions from 'actions' | ||
|
|
||
| import { ItemEdit } from 'components' | ||
|
|
||
|
|
||
| class FieldsEdit extends React.Component { | ||
| @@ -5,7 +5,7 @@ import * as mdl from 'react-mdl' | ||
|
|
||
| import { connect } from 'react-redux'; | ||
|
|
||
| import {ItemEdit} from 'components'; | ||
|
|
||
| import actions from 'actions' | ||
|
|
||
| @@ -2,7 +2,7 @@ | ||
| import React from 'react' | ||
| import * as mdl from 'react-mdl' | ||
|
|
||
| import {List, Head, Row} from 'components/list' | ||
| import {Link} from 'react-router' | ||
|
|
||
| import { connect } from 'react-redux' | ||
| @@ -0,0 +1,33 @@ | ||
|
|
||
| import React from 'react'; | ||
| import * as mdl from 'react-mdl'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| class HeaderBar extends React.Component { | ||
| render() { | ||
| let {members, groups, fields} = this.props | ||
|
|
||
| let changed = !_.isEmpty(members.updates) || !_.isEmpty(groups.updates) || !_.isEmpty(fields.updates) | ||
|
|
||
| return ( | ||
| <div className='headerBar'> | ||
| { changed && ( | ||
| <mdl.Button ripple> | ||
| Save | ||
| <mdl.Icon name='more_vert' /> | ||
| </mdl.Button> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| function mapStateToProps(state) { | ||
| return { | ||
| ...state | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| export default connect(mapStateToProps)(HeaderBar); |
| @@ -0,0 +1,19 @@ | ||
| import fields from './fields' | ||
| import group from './group' | ||
| import member from './member' | ||
| import permissions from './permissions' | ||
| import HeaderBar from './headerBar' | ||
|
|
||
| import App from './app' | ||
| import Auth from './auth' | ||
|
|
||
| export { | ||
| fields, | ||
| group, | ||
| member, | ||
| HeaderBar, | ||
| permissions, | ||
|
|
||
| App, | ||
| Auth | ||
| } |
| @@ -3,7 +3,7 @@ import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import * as mdl from 'react-mdl' | ||
|
|
||
| import {ItemEdit} from 'components'; | ||
|
|
||
| import { connect } from 'react-redux'; | ||
|
|
||
| @@ -0,0 +1,7 @@ | ||
| import Edit from './edit' | ||
| import View from './view' | ||
|
|
||
| export default { | ||
| Edit, | ||
| View | ||
| } |
| @@ -0,0 +1,33 @@ | ||
| var path = require('path'); | ||
| var express = require('express'); | ||
| var webpack = require('webpack'); | ||
| var proxy = require('express-http-proxy'); | ||
| var config = require('./webpack.config.dev'); | ||
|
|
||
| var app = express(); | ||
| var compiler = webpack(config); | ||
|
|
||
| app.use(require('webpack-dev-middleware')(compiler, { | ||
| noInfo: true, | ||
| publicPath: config.output.publicPath, | ||
| stats: { | ||
| colors: true | ||
| } | ||
| })); | ||
|
|
||
| app.use(require('webpack-hot-middleware')(compiler)); | ||
|
|
||
| app.use('/api', proxy('localhost:4242')); | ||
|
|
||
| app.get('*', function(req, res) { | ||
| res.sendFile(path.join(__dirname, 'index.html')); | ||
| }); | ||
|
|
||
| app.listen(3000, 'localhost', function(err) { | ||
| if (err) { | ||
| console.log(err); | ||
| return; | ||
| } | ||
|
|
||
| console.log('Listening at http://localhost:3000'); | ||
| }); |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "4e9ae9995ec3e2f6b9cbaca845707bdb.ttf"; |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "72bdc1d57a7ac33df5f8e8bbeae2db6a.ttf"; |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "e7ad421525fdd80f74880440c4dae08d.woff"; |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "e2f35f2d8bb12d4d3407ebe3683adaa1.woff"; |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "1050ce7c9422d070887dbdb04b24c30b.woff"; |
| @@ -0,0 +1 @@ | ||
| module.exports = __webpack_public_path__ + "9ac46d2eb22f2f00090a73ed943b9522.ttf"; |
| @@ -0,0 +1,21 @@ | ||
|
|
||
| <!doctype html> | ||
| <html> | ||
| <title>Wolbodo:ledenlijst</title> | ||
| <link rel="icon" type="image/png" href="favicon.png" sizes="256x256"> | ||
|
|
||
|
|
||
| <link href="/styles.css" rel="stylesheet"></link> | ||
|
|
||
|
|
||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <body> | ||
| <div id="app"></div> | ||
| </body> | ||
|
|
||
|
|
||
| <script src="/bundle.js"></script> | ||
|
|
||
| </html> |
| @@ -0,0 +1,65 @@ | ||
| var path = require('path'); | ||
| var webpack = require('webpack'); | ||
| var ExtractTextPlugin = require('extract-text-webpack-plugin'); | ||
| var HtmlWebpackPlugin = require('html-webpack-plugin') | ||
| var srcPath = path.join(__dirname, 'app'); | ||
|
|
||
| module.exports = { | ||
| devtool: 'cheap-module-eval-source-map', | ||
| entry: [ | ||
| 'eventsource-polyfill', // necessary for hot reloading with IE | ||
| 'webpack-hot-middleware/client', | ||
| './app/index.jsx' | ||
| ], | ||
| resolve: { | ||
| root: srcPath, | ||
| extensions: ['', '.js', '.jsx'], | ||
| modulesDirectories: ['node_modules', 'src'], | ||
|
|
||
| alias: { | ||
| 'material' : "../node_modules/react-mdl/extra/material.js", | ||
| 'material.css' : "../node_modules/react-mdl/extra/material.css" | ||
| // 'material-icons': "../" | ||
| } | ||
| }, | ||
| output: { | ||
| path: path.join(__dirname, 'dist'), | ||
| filename: 'bundle.js', | ||
| publicPath: '' | ||
| }, | ||
| plugins: [ | ||
| new webpack.HotModuleReplacementPlugin(), | ||
| new webpack.NoErrorsPlugin(), | ||
| new ExtractTextPlugin('styles.css'), | ||
| new HtmlWebpackPlugin({ | ||
| inject: false, | ||
| template: 'index.html', | ||
| favicon: 'app/favicon.png' | ||
| }) | ||
| ], | ||
| module: { | ||
| loaders: [{ | ||
| test: /\.jsx?/, | ||
| loaders: ['babel'], | ||
| include: srcPath | ||
| },{ | ||
| test: /\.json$/, | ||
| loader: "json-loader" | ||
| }, { | ||
| test: /\.less$/, | ||
| loader: ExtractTextPlugin.extract('css?sourceMap!' + 'less?sourceMap') | ||
| }, { | ||
| test: /\.css$/, | ||
| loader: ExtractTextPlugin.extract('css?sourceMap') | ||
| }, { | ||
| test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, | ||
| loader: "file" | ||
| }, { | ||
| test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | ||
| loader: "url-loader?limit=10000&mimetype=application/font-woff" | ||
| }, { | ||
| test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, | ||
| loader: "file-loader" | ||
| }] | ||
| } | ||
| }; |
| @@ -0,0 +1,64 @@ | ||
| var path = require('path'); | ||
| var webpack = require('webpack'); | ||
| var srcPath = path.join(__dirname, 'app'); | ||
|
|
||
| module.exports = { | ||
| devtool: 'source-map', | ||
| entry: [ | ||
| './app/index.jsx' | ||
| ], | ||
| resolve: { | ||
| root: srcPath, | ||
| extensions: ['', '.js', '.jsx'], | ||
| modulesDirectories: ['node_modules', 'src'], | ||
|
|
||
| alias: { | ||
| 'material' : "../node_modules/react-mdl/extra/material.js", | ||
| 'material.css' : "../node_modules/react-mdl/extra/material.css" | ||
| // 'material-icons': "../" | ||
| } | ||
| }, | ||
| output: { | ||
| path: path.join(__dirname, 'dist'), | ||
| filename: 'bundle.js', | ||
| publicPath: '' | ||
| }, | ||
| plugins: [ | ||
| new webpack.optimize.OccurenceOrderPlugin(), | ||
| new webpack.DefinePlugin({ | ||
| 'process.env': { | ||
| 'NODE_ENV': JSON.stringify('production') | ||
| } | ||
| }), | ||
| new webpack.optimize.UglifyJsPlugin({ | ||
| compressor: { | ||
| warnings: false | ||
| } | ||
| }) | ||
| ], | ||
| module: { | ||
| loaders: [{ | ||
| test: /\.jsx?/, | ||
| loaders: ['babel'], | ||
| include: srcPath | ||
| },{ | ||
| test: /\.json$/, | ||
| loader: "json-loader" | ||
| }, { | ||
| test: /\.less$/, | ||
| loader: 'css?sourceMap!less?sourceMap' | ||
| }, { | ||
| test: /\.css$/, | ||
| loader: 'css?sourceMap' | ||
| }, { | ||
| test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, | ||
| loader: "file" | ||
| }, { | ||
| test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, | ||
| loader: "url-loader?limit=10000&mimetype=application/font-woff" | ||
| }, { | ||
| test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, | ||
| loader: "file-loader" | ||
| }] | ||
| } | ||
| }; |
