Skip to content

Instantly share code, notes, and snippets.

@bergstromcbb

bergstromcbb/EquipmentMetadata.js

Created August 24, 2018 20:56
Show Gist options
  • Save bergstromcbb/a9947b86706a6f2659fa208b4cffe743 to your computer and use it in GitHub Desktop.
Save bergstromcbb/a9947b86706a6f2659fa208b4cffe743 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
actions.js
import fetch from 'cross-fetch'
export const SET_NAME = 'SET_NAME'
export function setName (name) {
return {
type: SET_NAME,
name
}
}
export function setCampaignName(campaignName) {
return {
type: "setCampaignName",
campaignName
};
}
Raw
configureStore.js
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from './reducers'
const loggerMiddleware = createLogger()
export default function configureStore (preloadedState) {
return createStore(
rootReducer,
preloadedState,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
)
}
Raw
EquipmentMetadata.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Greeting from '../components/Greeting'
class EquipmentMetadata extends Component {
render () {
const { name } = this.props
return (
<Greeting name={name} />
)
}
}
EquipmentMetadata.propTypes = {
name: PropTypes.string.isRequired
}
function mapStateToProps (state) {
const { name } = state
return {
name
}
}
function mapDispatchToProps (dispatch) {
return {}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(EquipmentMetadata)
Raw
gistfile1.txt
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import { setName } from './actions'
import configureStore from './configureStore'
import { Provider } from 'react-redux'
const store = configureStore()
window.EquipmentMetadata = {
store,
setName
}
render(
<Provider store={store}>
<Root />
{/* <EquipmentMetadata /> */}
{/* <SimpleForm /> */}
</Provider>,
document.getElementById('equipment-metadata')
)
Raw
gistfile2.txt
import { combineReducers } from 'redux'
import { SET_NAME } from './actions'
import { reducer as formReducer } from 'redux-form'
function name (state = 'World', action) {
switch (action.type) {
case SET_NAME:
return action.name
default:
return state
}
}
const rootReducer = combineReducers({
name
})
const reducers = {
// ... your other reducers here ...
form: formReducer // <---- Mounted at 'form'
}
export default rootReducer
// const defaultState = {
// campaignName: "--",
// };
// export default function reducer(state = defaultState, action) {
// switch (action.type) {
// case "setCampaignName":
// return Object.assign({}, state, {
// campaignName: action.campaignName
// });
// default:
// return state;
// }
// }
// const reducers = {
// // ... your other reducers here ...
// form: formReducer // <---- Mounted at 'form'
// }
// const reducer = combineReducers(reducers)
// const store = createStore(reducer)
Raw
gistfile3.txt
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label>
<Field name="sex" component="input" type="radio" value="male" />
{' '}
Male
</label>
<label>
<Field name="sex" component="input" type="radio" value="female" />
{' '}
Female
</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option />
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field
name="employed"
id="employed"
component="input"
type="checkbox"
/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea" />
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);
Raw
gistfile4.txt
import React, { Component } from 'react'
// import { Provider } from 'react-redux'
import configureStore from '../configureStore'
import {
setName
} from '../actions'
import EquipmentMetadata from './EquipmentMetadata'
import SimpleForm from "./SimpleForm";
export default class Root extends Component {
render () {
return (<div>
{/* Provider store={store}> */}
<EquipmentMetadata />
<SimpleForm />
{/* </Provider> */}
</div>
)
}
}
Raw
gistfile5.txt
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Greeting from '../components/Greeting'
class EquipmentMetadata extends Component {
render () {
const { name } = this.props
return (
<Greeting name={name} />
)
}
}
EquipmentMetadata.propTypes = {
name: PropTypes.string.isRequired
}
function mapStateToProps (state) {
const { name } = state
return {
name
}
}
function mapDispatchToProps (dispatch) {
return {}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(EquipmentMetadata)
Raw
gistfile6.txt
import React from 'react';
import { Control, Form, actions } from 'react-redux-form';
class UserForm extends React.Component {
handleSubmit(user) {
// Do whatever you like in here.
// If you connect the UserForm to the Redux store,
// you can dispatch actions such as:
// dispatch(actions.submit('user', somePromise));
// etc.
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor="user.firstName">First name:</label>
<Control.text model="user.firstName" id="user.firstName" />
<label htmlFor="user.lastName">Last name:</label>
<Control.text model="user.lastName" id="user.lastName" />
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
export default UserForm;
Raw
gistfile7.txt
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from "react-redux";
import * as actions from "../actions";
import SimpleForm from "../containers/SimpleForm";
class Greeting extends Component {
constructor(props) {
super(props);
this.state = {};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleName = this.handleName.bind(this);
}
// componentDidMount() {
// $.getJSON("ddd").then(
// value => this.setState({loading: false, data: value}),
// error => this.setState({loading: false, error: error})
// );
// }
handleInputChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleName(event) {
this.props.setCampaignName(event.target.value);
}
renderNewCampaignForm() {
if (this.state.campaigntype === "1") {
return (
<div className="node-options">
<div className="node-container">
<input
className="radio-field"
type = "checkbox"
value = "" />
Packaged Rooftop
</div>
<br />
<div className="node-container">
<input
className = "radio-field"
type = "checkbox"
value = ""/>
Interior
</div>
<br />
<div className="node-container">
<input
className = "radio-field"
type = "checkbox"
value = ""/>
100 % Makeup Unit
</div>
<br />
<div>
<span> Heating Method</span>
<select id = "duct" >
<option value = "" > Choose... </option>
<option value = "elecHeat" > elecHeat </option>
<option value = "hotWaterHeat" > hotWaterHeat </option>
<option value = "hotWaterHeat" > steamHeat </option>
<option value = "hotWaterHeat" > gasHeat </option>
</select>
</div>
<br />
<div>
<span> Cooling Method </span>
<select id = "duct" >
<option value = "" > Choose... </option>
<option value = "dxcool" > dxcool </option>
<option value = "chilledWaterCool" > chilledWaterCool </option>
</select>
</div>
<br />
<div>
<div className="node-container">
<input
className="radio-field"
type = "radio"
name = "optionsRadios"
id = "optionsRadios1"
value = "option1"
checked = "" />
constantVolume
</div>
<div className="node-container">
<input
className = "radio-field"
type = "radio"
name = "optionsRadios"
id = "optionsRadios2"
value = "option2"
checked = "" />
variableVolume
</div>
</div>
<br />
<div>
<span> Zone Delivery </span>
<select>
<option value = "" > Choose... </option>
<option value = "directZone" > directZone: AHU supplies air directly to the zone </option>
<option value = "vavZone" > vavZone: AHU supplies air to VAV terminal units </option>
<option value = "chilledBeamZone" > chilledBeamZone: AHU supplies air to chilled beam terminal units </option>
<option value = "multiZone" > multiZone: Air is split into a duct per zone </option>
</select>
</div>
<br />
<div>
<span> Ductwork </span>
<select>
<option value = "" > Choose... </option>
<option value = "singleDuct" > singleDuct </option>
<option value = "dualDuct" > dualDuct </option>
<option value = "tripleDuct" > tripleDuct </option>
</select>
</div>
<br />
<div className="">
<p>
<button type = "submit"> Button submit </button>
</p>
</div>
</div>
)
} else if (this.state.campaigntype === "2") {
return (
<div className="node-options">
<div className="node-container">
<span> Ductwork Configuration </span>
<input
type="radio"
value="2"
checked={this.state.campaigntype === "2"}
name="campaigntype"
id="vav"
className="radio-field"
onChange={this.handleInputChange}
/>
<select>
<option value = "" > Choose... </option>
<option value = "single" > Single </option>
<option value = "dual"> Dual </option>
</select>
</div>
<br />
<div>
<span>
<input
className="radio-field"
type = "checkbox"
value = "coolOnly"/>
Cool Only
</span>
</div>
<br />
<div>
<span>
<input
className="radio-field"
type = "checkbox"
value = "coolWRepeat"/>
Cool Only with Reheat
</span>
</div>
<br />
<div>
<span> Fan Power Configuration </span>
<select>
<option value = ""> Choose... </option>
<option value = "seriesaFanPoweredElecReheat"> series fanPowered elecReheat </option>
<option value = "seriesFanPoweredHotWaterReheat"> series fanPowered hotWaterReheat </option>
<option value = "parrallelFanPoweredElecReheat"> parallel fanPowered elecReheat </option>
<option value = "parrallelFanPoweredHotWaterReheat"> parallel fanPowered hotWaterReheat </option>
</select>
</div>
<br />
<div className="">
<p>
<button type = "submit"> Button submit </button>
</p>
</div>
</div>
)
} else {
return null;
}
}
render () {
// const { name } = this.props
return (
<div>
<form role="form">
<div>
<SimpleForm />
</div>
<div className="form-group-attached">
<div className="form-group form-group-defaultx required">
<span className="">Display Name</span>
<input
onChange={this.handleName}
name="campaignName"
type="text"
className="form-control"
placeholder = "TUE04321"
required=""
/>
</div>
</div>
<div className="">
<div className="">
<span className="">Type</span>
<div className="radio radio-success">
<input
type="radio"
value="1"
checked={this.state.campaigntype === "1"}
name="campaigntype"
id="AHU"
className="radio-field"
onChange={this.handleInputChange}
/>
<span className="radio-text">A H U</span>
<input
type="radio"
value="2"
checked={this.state.campaigntype === "2"}
name="campaigntype"
id="vav"
className="radio-field"
onChange={this.handleInputChange}
/>
<span className="radio-text">
V A V</span>
</div>
</div>
</div>
</form>
{this.renderNewCampaignForm()}
</div>
);
}
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
setCampaignName: PropTypes.func
}
const mapDispatchToProps = {
setCampaignName: actions.setCampaignName
};
export default connect(
null,
mapDispatchToProps
)(Greeting);
// MailingWizard.propTypes = {
// setCampaignName: PropTypes.func
// };
Raw
Greeting.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from "react-redux";
import * as actions from "../actions";
import SimpleForm from "../containers/SimpleForm";
class Greeting extends Component {
constructor(props) {
super(props);
this.state = {};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleName = this.handleName.bind(this);
}
// componentDidMount() {
// $.getJSON("ddd").then(
// value => this.setState({loading: false, data: value}),
// error => this.setState({loading: false, error: error})
// );
// }
handleInputChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleName(event) {
this.props.setCampaignName(event.target.value);
}
renderNewCampaignForm() {
if (this.state.campaigntype === "1") {
return (
<div className="node-options">
<div className="node-container">
<input
className="radio-field"
type = "checkbox"
value = "" />
Packaged Rooftop
</div>
<br />
<div className="node-container">
<input
className = "radio-field"
type = "checkbox"
value = ""/>
Interior
</div>
<br />
<div className="node-container">
<input
className = "radio-field"
type = "checkbox"
value = ""/>
100 % Makeup Unit
</div>
<br />
<div>
<span> Heating Method</span>
<select id = "duct" >
<option value = "" > Choose... </option>
<option value = "elecHeat" > elecHeat </option>
<option value = "hotWaterHeat" > hotWaterHeat </option>
<option value = "hotWaterHeat" > steamHeat </option>
<option value = "hotWaterHeat" > gasHeat </option>
</select>
</div>
<br />
<div>
<span> Cooling Method </span>
<select id = "duct" >
<option value = "" > Choose... </option>
<option value = "dxcool" > dxcool </option>
<option value = "chilledWaterCool" > chilledWaterCool </option>
</select>
</div>
<br />
<div>
<div className="node-container">
<input
className="radio-field"
type = "radio"
name = "optionsRadios"
id = "optionsRadios1"
value = "option1"
checked = "" />
constantVolume
</div>
<div className="node-container">
<input
className = "radio-field"
type = "radio"
name = "optionsRadios"
id = "optionsRadios2"
value = "option2"
checked = "" />
variableVolume
</div>
</div>
<br />
<div>
<span> Zone Delivery </span>
<select>
<option value = "" > Choose... </option>
<option value = "directZone" > directZone: AHU supplies air directly to the zone </option>
<option value = "vavZone" > vavZone: AHU supplies air to VAV terminal units </option>
<option value = "chilledBeamZone" > chilledBeamZone: AHU supplies air to chilled beam terminal units </option>
<option value = "multiZone" > multiZone: Air is split into a duct per zone </option>
</select>
</div>
<br />
<div>
<span> Ductwork </span>
<select>
<option value = "" > Choose... </option>
<option value = "singleDuct" > singleDuct </option>
<option value = "dualDuct" > dualDuct </option>
<option value = "tripleDuct" > tripleDuct </option>
</select>
</div>
<br />
<div className="">
<p>
<button type = "submit"> Button submit </button>
</p>
</div>
</div>
)
} else if (this.state.campaigntype === "2") {
return (
<div className="node-options">
<div className="node-container">
<span> Ductwork Configuration </span>
<input
type="radio"
value="2"
checked={this.state.campaigntype === "2"}
name="campaigntype"
id="vav"
className="radio-field"
onChange={this.handleInputChange}
/>
<select>
<option value = "" > Choose... </option>
<option value = "single" > Single </option>
<option value = "dual"> Dual </option>
</select>
</div>
<br />
<div>
<span>
<input
className="radio-field"
type = "checkbox"
value = "coolOnly"/>
Cool Only
</span>
</div>
<br />
<div>
<span>
<input
className="radio-field"
type = "checkbox"
value = "coolWRepeat"/>
Cool Only with Reheat
</span>
</div>
<br />
<div>
<span> Fan Power Configuration </span>
<select>
<option value = ""> Choose... </option>
<option value = "seriesaFanPoweredElecReheat"> series fanPowered elecReheat </option>
<option value = "seriesFanPoweredHotWaterReheat"> series fanPowered hotWaterReheat </option>
<option value = "parrallelFanPoweredElecReheat"> parallel fanPowered elecReheat </option>
<option value = "parrallelFanPoweredHotWaterReheat"> parallel fanPowered hotWaterReheat </option>
</select>
</div>
<br />
<div className="">
<p>
<button type = "submit"> Button submit </button>
</p>
</div>
</div>
)
} else {
return null;
}
}
render () {
// const { name } = this.props
return (
<div>
<form role="form">
<div>
<SimpleForm />
</div>
<div className="form-group-attached">
<div className="form-group form-group-defaultx required">
<span className="">Display Name</span>
<input
onChange={this.handleName}
name="campaignName"
type="text"
className="form-control"
placeholder = "TUE04321"
required=""
/>
</div>
</div>
<div className="">
<div className="">
<span className="">Type</span>
<div className="radio radio-success">
<input
type="radio"
value="1"
checked={this.state.campaigntype === "1"}
name="campaigntype"
id="AHU"
className="radio-field"
onChange={this.handleInputChange}
/>
<span className="radio-text">A H U</span>
<input
type="radio"
value="2"
checked={this.state.campaigntype === "2"}
name="campaigntype"
id="vav"
className="radio-field"
onChange={this.handleInputChange}
/>
<span className="radio-text">
V A V</span>
</div>
</div>
</div>
</form>
{this.renderNewCampaignForm()}
</div>
);
}
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
setCampaignName: PropTypes.func
}
const mapDispatchToProps = {
setCampaignName: actions.setCampaignName
};
export default connect(
null,
mapDispatchToProps
)(Greeting);
// MailingWizard.propTypes = {
// setCampaignName: PropTypes.func
// };
Raw
index.js
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import { setName } from './actions'
import configureStore from './configureStore'
import { Provider } from 'react-redux'
const store = configureStore()
window.EquipmentMetadata = {
store,
setName
}
render(
<Provider store={store}>
<Root />
{/* <EquipmentMetadata /> */}
{/* <SimpleForm /> */}
</Provider>,
document.getElementById('equipment-metadata')
)
Raw
reducers.js
import { combineReducers } from 'redux'
import { SET_NAME } from './actions'
import { reducer as formReducer } from 'redux-form'
function name (state = 'World', action) {
switch (action.type) {
case SET_NAME:
return action.name
default:
return state
}
}
const rootReducer = combineReducers({
name
})
const reducers = {
// ... your other reducers here ...
form: formReducer // <---- Mounted at 'form'
}
export default rootReducer
// const defaultState = {
// campaignName: "--",
// };
// export default function reducer(state = defaultState, action) {
// switch (action.type) {
// case "setCampaignName":
// return Object.assign({}, state, {
// campaignName: action.campaignName
// });
// default:
// return state;
// }
// }
// const reducers = {
// // ... your other reducers here ...
// form: formReducer // <---- Mounted at 'form'
// }
// const reducer = combineReducers(reducers)
// const store = createStore(reducer)
Raw
Root.js
import React, { Component } from 'react'
// import { Provider } from 'react-redux'
import configureStore from '../configureStore'
import {
setName
} from '../actions'
import EquipmentMetadata from './EquipmentMetadata'
import SimpleForm from "./SimpleForm";
export default class Root extends Component {
render () {
return (<div>
{/* Provider store={store}> */}
<EquipmentMetadata />
<SimpleForm />
{/* </Provider> */}
</div>
)
}
}
Raw
SimpleForm.js
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label>
<Field name="sex" component="input" type="radio" value="male" />
{' '}
Male
</label>
<label>
<Field name="sex" component="input" type="radio" value="female" />
{' '}
Female
</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option />
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field
name="employed"
id="employed"
component="input"
type="checkbox"
/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea" />
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: 'simple', // a unique identifier for this form
})(SimpleForm);
Raw
UserForm.js
import React from 'react';
import { Control, Form, actions } from 'react-redux-form';
class UserForm extends React.Component {
handleSubmit(user) {
// Do whatever you like in here.
// If you connect the UserForm to the Redux store,
// you can dispatch actions such as:
// dispatch(actions.submit('user', somePromise));
// etc.
}
render() {
return (
<Form
model="user"
onSubmit={(user) => this.handleSubmit(user)}
>
<label htmlFor="user.firstName">First name:</label>
<Control.text model="user.firstName" id="user.firstName" />
<label htmlFor="user.lastName">Last name:</label>
<Control.text model="user.lastName" id="user.lastName" />
<button type="submit">
Finish registration!
</button>
</Form>
);
}
}
export default UserForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment