bike/workstand
1
0
Fork 0
mirror of https://github.com/fspc/workstand.git synced 2025-02-23 09:13:23 -05:00
Code Issues Projects Releases Wiki Activity

Support for adding a new bike.

Browse Source
This commit is contained in:
Drew Larson 2017-02-01 22:12:26 -06:00
parent 3f9e7faec6
commit 38b2b8c0a3
3 changed files with 113 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx
View File

@ -22,11 +22,17 @@ const styles = {
}; };
class BikeForm extends React.Component { class BikeForm extends React.Component {
constructor({ bike }) { constructor({ bike, editing = false }) {
super(); super();
this.state = { if (editing) {
bike, this.state = {
}; bike,
};
} else {
this.state = {
bike: {},
};
}
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.handleSizeChange = this.handleSizeChange.bind(this); this.handleSizeChange = this.handleSizeChange.bind(this);
@ -74,10 +80,11 @@ class BikeForm extends React.Component {
const id = this.state.bike.id; const id = this.state.bike.id;
const data = JSON.stringify(this.state.bike); const data = JSON.stringify(this.state.bike);
const csrfToken = Cookies.get('csrftoken'); const csrfToken = Cookies.get('csrftoken');
const url = this.props.editing ? `/api/v1/bikes/${id}/` : '/api/v1/bikes/';
fetch(`/api/v1/bikes/${id}/`, { fetch(url, {
credentials: 'same-origin', credentials: 'same-origin',
method: 'PUT', method: this.props.editing ? 'PUT' : 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-CSRFToken': csrfToken, 'X-CSRFToken': csrfToken,
@ -99,7 +106,8 @@ class BikeForm extends React.Component {
cpic_searched_at, cpic_searched_at,
created_at, created_at,
stolen, stolen,
} = this.state.bike; } = this.props.bike;
const editing = this.props.editing;
const createdAtFormatted = (moment(created_at).isValid()) ? moment(created_at).tz(timezone).fromNow() : ''; const createdAtFormatted = (moment(created_at).isValid()) ? moment(created_at).tz(timezone).fromNow() : '';
const claimedAtFormatted = (moment(claimed_at).isValid()) ? moment(claimed_at).tz(timezone).fromNow() : ''; const claimedAtFormatted = (moment(claimed_at).isValid()) ? moment(claimed_at).tz(timezone).fromNow() : '';
const cpicSearchedAtFormatted = (moment(cpic_searched_at).isValid()) ? moment(cpic_searched_at).tz(timezone) const cpicSearchedAtFormatted = (moment(cpic_searched_at).isValid()) ? moment(cpic_searched_at).tz(timezone)
@ -159,53 +167,60 @@ class BikeForm extends React.Component {
required required
/> />
</div> </div>
<div className="mdl-cell mdl-cell--6-col"> {editing &&
<TextField <div className="mdl-cell mdl-cell--6-col">
floatingLabelText="Created at" <TextField
value={createdAtFormatted} floatingLabelText="Created at"
fullWidth value={createdAtFormatted}
readOnly fullWidth
disabled readOnly
/> disabled
</div> />
</div>
}
</div> </div>
<div className="mdl-grid"> {editing &&
<div className="mdl-cell mdl-cell--6-col"> <div className="mdl-grid">
<TextField <div className="mdl-cell mdl-cell--6-col">
floatingLabelText="Claimed on" <TextField
value={claimedAtFormatted} floatingLabelText="Claimed on"
fullWidth value={claimedAtFormatted}
disabled fullWidth
/> disabled
/>
</div>
<div className="mdl-cell mdl-cell--6-col">
<TextField
floatingLabelText="Claimed by"
value={claimed_by}
fullWidth
disabled
readonly
/>
</div>
</div> </div>
<div className="mdl-cell mdl-cell--6-col"> }
<TextField
floatingLabelText="Claimed by" {editing &&
value={claimed_by} <div className="content-grid mdl-grid" style={styles.bottom}>
fullWidth <div className="mdl-cell mdl-cell--6-col">
disabled <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} disabled />
readonly </div>
/> <div className="mdl-cell mdl-cell--4-col">
<Checkbox
name="stolen"
label="Stolen"
labelPosition="left"
style={styles.checkbox}
checked={stolen}
disabled
/>
</div>
<div className="mdl-cell mdl-cell--2-col">
<FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
</div>
</div> </div>
</div> }
<div className="content-grid mdl-grid" style={styles.bottom}>
<div className="mdl-cell mdl-cell--6-col">
<TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} />
</div>
<div className="mdl-cell mdl-cell--4-col">
<Checkbox
name="stolen"
label="Stolen"
labelPosition="left"
style={styles.checkbox}
checked={stolen}
disabled
/>
</div>
<div className="mdl-cell mdl-cell--2-col">
<FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
</div>
</div>
<div className="mdl-grid" style={styles.bottom}> <div className="mdl-grid" style={styles.bottom}>
<div className="mdl-cell mdl-cell--8-col"> <div className="mdl-cell mdl-cell--8-col">
<Source <Source
@ -213,18 +228,20 @@ class BikeForm extends React.Component {
onChange={this.handleSourceChange} onChange={this.handleSourceChange}
/> />
</div> </div>
<div className="mdl-cell mdl-cell--4-col"> {editing &&
<div style={styles.block}> <div className="mdl-cell mdl-cell--4-col">
<Checkbox <div style={styles.block}>
checked={this.state.bike.stripped} <Checkbox
name="stripped" checked={this.state.bike.stripped}
label="Stripped" name="stripped"
labelPosition="left" label="Stripped"
style={styles.checkbox} labelPosition="left"
onCheck={this.handleChange} style={styles.checkbox}
/> onCheck={this.handleChange}
/>
</div>
</div> </div>
</div> }
</div> </div>
<div className="mdl-grid"> <div className="mdl-grid">
<div className="mdl-cell right"> <div className="mdl-cell right">

15
bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx
View File

@ -9,6 +9,7 @@ import BikeForm from '../BikeForm';
export default class BikeModal extends React.Component { export default class BikeModal extends React.Component {
static propTypes = { static propTypes = {
open: PropTypes.bool, open: PropTypes.bool,
editing: PropTypes.bool,
} }
constructor(props) { constructor(props) {
@ -17,11 +18,17 @@ export default class BikeModal extends React.Component {
this.state = { this.state = {
open: props.open, open: props.open,
bike: undefined, bike: undefined,
editing: props.editing,
}; };
} }
componentWillReceiveProps(newProps) { componentWillReceiveProps = (newProps) => {
this.setState({ open: newProps.open || false, bike: newProps.bike || false }); this.setState({
...this.state,
open: newProps.open || false,
bike: newProps.bike || undefined,
editing: newProps.editing || false,
});
} }
handleClose = () => { handleClose = () => {
@ -45,7 +52,7 @@ export default class BikeModal extends React.Component {
const title = this.state.bike && this.state.bike.stolen ? const title = this.state.bike && this.state.bike.stolen ?
(<div> (<div>
<h3>Edit Bike</h3> <h3>{this.props.editing ? 'Edit Bike' : 'Add Bike'}</h3>
<h4>STOLEN</h4> <h4>STOLEN</h4>
</div>) : </div>) :
<h3>Edit Bike</h3>; <h3>Edit Bike</h3>;
@ -58,7 +65,7 @@ export default class BikeModal extends React.Component {
open={this.state.open} open={this.state.open}
autoScrollBodyContent autoScrollBodyContent
> >
{ this.state.bike ? <BikeForm bike={this.state.bike} /> : <div>Unable to edit bike.</div>} { this.state.bike ? <BikeForm bike={this.state.bike} editing={this.state.editing} /> : <div>Unable to edit bike.</div>}
</Dialog> </Dialog>
</div>); </div>);
} }

26
bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx
View File

@ -2,6 +2,8 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import fetch from 'isomorphic-fetch'; import fetch from 'isomorphic-fetch';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import React from 'react'; import React from 'react';
import { friendlySize } from '../Size'; import { friendlySize } from '../Size';
import BikeModal from '../BikeModal'; import BikeModal from '../BikeModal';
@ -28,6 +30,7 @@ export default class BikeTable extends React.Component {
bikeModal: { bikeModal: {
open: false, open: false,
bike: undefined, bike: undefined,
editing: false,
}, },
}; };
@ -35,7 +38,6 @@ export default class BikeTable extends React.Component {
} }
componentDidMount() { componentDidMount() {
fetch('/api/v1/bikes/', { fetch('/api/v1/bikes/', {
credentials: 'same-origin', credentials: 'same-origin',
}) })
@ -51,12 +53,23 @@ export default class BikeTable extends React.Component {
} }
handleEditBike(bike) { handleEditBike(bike) {
console.log('Bike edit!');
this.setState({ this.setState({
...this.state, ...this.state,
bikeModal: { bikeModal: {
open: true, open: true,
bike, bike,
editing: true,
},
});
}
handleAddBike = () => {
this.setState({
...this.state,
bikeModal: {
open: true,
bike: {},
editing: false,
}, },
}); });
} }
@ -78,6 +91,9 @@ export default class BikeTable extends React.Component {
<div className="mdl-grid"> <div className="mdl-grid">
<div className="mdl-cell mdl-cell--12-col"> <div className="mdl-cell mdl-cell--12-col">
<h3>Bikes</h3> <h3>Bikes</h3>
<FloatingActionButton onTouchTap={this.handleAddBike}>
<ContentAdd />
</FloatingActionButton>
<Table selectable={false}> <Table selectable={false}>
<TableHeader adjustForCheckbox={false} displaySelectAll={false}> <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
<TableRow> <TableRow>
@ -99,7 +115,11 @@ export default class BikeTable extends React.Component {
} }
</TableBody> </TableBody>
</Table> </Table>
<BikeModal bike={this.state.bikeModal.bike} open={this.state.bikeModal.open} /> <BikeModal
bike={this.state.bikeModal.bike}
open={this.state.bikeModal.open}
editing={this.state.bikeModal.editing}
/>
</div> </div>
</div> </div>
); );