bike
/
workstand
mirror of https://github.com/fspc/workstand.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Big refactor and I should have done this better.

feature/python-error-tracking
Drew Larson 7 years ago
parent
883cebac74
commit
aa2a96b906
3 changed files with 130 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      bikeshop_project/assets/js/components/Member.jsx
  2. 1
      bikeshop_project/assets/js/components/Purpose.jsx
  3. 241
      bikeshop_project/assets/js/components/SignIn.jsx

1
bikeshop_project/assets/js/components/Member.jsx
View File

@ -15,6 +15,7 @@ export default class Member extends React.Component {
searchText={this.props.searchText}
fullWidth={true}
textFieldStyle={{textAlign: 'center', fontSize: '32px', lineHeight: '48px'}}
tabIndex={this.props.tabIndex}
/>
);
}

1
bikeshop_project/assets/js/components/Purpose.jsx
View File

@ -9,6 +9,7 @@ export default class Purpose extends React.Component {
value={this.props.default}
onChange={this.props.handleChange.bind(this)}
fullWidth={true}
tabIndex={this.props.tabIndex}
>
<MenuItem value={'VOLUNTEER'} primaryText="Volunteer" />
<MenuItem value={'FIX'} primaryText="Fix" />

241
bikeshop_project/assets/js/components/SignIn.jsx
View File

@ -1,135 +1,150 @@
import fetch from 'isomorphic-fetch';
import moment from 'moment';
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { polyFill } from 'es6-promise';
import fetch from 'isomorphic-fetch';
import Purpose from './Purpose';
import Member from './Member';
import SignedInList from './SignedInList';
import moment from 'moment';
export default class SignIn extends React.Component {
constructor (props) {
super(props);
this.state = {
members: [],
signOn: {purpose: 'FIX', member: undefined},
error: '',
signedIn: [],
searchText: ''
};
this.handleUpdate = this.handleUpdate.bind(this);
this.signIn = this.signIn.bind(this);
this.chooseMember = this.chooseMember.bind(this);
this.handlePurposeChoice = this.handlePurposeChoice.bind(this);
}
constructor(props) {
super(props);
componentDidMount () {
fetch('/members/signin/')
.then((response) => {
return response.json()
})
.then((data) => {
const visits = JSON.parse(data);
this.setState({signedIn: visits.map((visit) => {
return {
id: visit.member.id,
purpose: visit.purpose,
text: visit.member.full_name,
value: `${visit.member.full_name} <${visit.member.email}>`,
at: moment(visit.created_at)
}
})})
})
}
this.state = {
members: [],
signOn: { purpose: 'FIX', member: undefined },
error: '',
signedIn: [],
searchText: '',
};
handlePurposeChoice (event, index, value) {
this.setState({...this.state, signOn: {...this.state.signOn, purpose: value}});
}
this.handleUpdate = this.handleUpdate.bind(this);
this.signIn = this.signIn.bind(this);
this.chooseMember = this.chooseMember.bind(this);
this.handlePurposeChoice = this.handlePurposeChoice.bind(this);
}
handleUpdate (text, dataSource) {
const self = this;
self.setState({searchText: text})
fetch(`/members/search/${text}/`)
componentDidMount() {
fetch('/members/signin/')
.then(response => response.json())
.then((data) => {
const visits = JSON.parse(data);
this.setState({ signedIn: visits.map(visit => ({
id: visit.member.id,
purpose: visit.purpose,
text: `${visit.member.first_name} ${visit.member.last_name}`,
value: `${visit.member.first_name} ${visit.member.last_name} <${visit.member.email}>`,
at: moment(visit.created_at),
})) });
});
}
handleUpdate(text, dataSource) {
const self = this;
self.setState({ searchText: text });
fetch(`/members/search/${text}/`)
.then((response) => {
if (response.status === 200)
return response.json();
if (response.status === 200) {
return response.json();
}
})
.then((data) => {
if (data.results.length > 0) {
self.setState({
...this.state,
error: '',
members: data.results.map((result) => {
return {text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id}
})
});
} else {
self.setState({...this.state, error: 'Member not found.'})
}
})
}
if (data.results.length > 0) {
self.setState({
...this.state,
error: '',
members: data.results.map(result => ({ text: `${result.name}`, value: `${result.name} <${result.email}>`, id: result.id })),
});
} else {
self.setState({ ...this.state, error: 'Member not found.' });
}
});
}
signIn() {
const purpose = this.state.signOn.purpose;
const member = this.state.signOn.member;
signIn () {
const purpose = this.state.signOn.purpose;
const member = this.state.signOn.member;
if (!this.state.signedIn.find(signedInMember => signedInMember.id === member.id)) {
fetch('/members/signin/', {
method: 'post',
body: `id=${member.id}&purpose=${purpose}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
} })
.then((response) => {
if (response.status === 201) {
return response.json();
}
})
.then((data) => {
const signedIn = this.state.signedIn;
const parsedData = JSON.parse(data);
if (!this.state.signedIn.find((signedInMember) => {return signedInMember.id === member.id})) {
fetch('/members/signin/', {
method: 'post',
body: `id=${member.id}&purpose=${purpose}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((response) => {
if (response.status === 201)
return response.json();
}).then((data) => {
const now = moment();
const signedIn = this.state.signedIn;
signedIn.push({...member, purpose, at: now});
this.setState({
...this.state,
signedIn: signedIn,
signOn: {purpose: 'FIX', member: undefined},
searchText: '',
members: []
})
signedIn.push({ ...member, purpose, at: moment(parsedData.results.created_at) });
this.setState({
...this.state,
signedIn,
signOn: { purpose: 'FIX', member: undefined },
searchText: '',
members: [],
});
} else {
this.setState({...this.state, error: 'Member already signed in.'})
}
});
} else {
this.setState({ ...this.state, error: 'Member already signed in.' });
}
}
chooseMember (chosenRequest, index) {
console.log(index);
const member = this.state.members[index];
const purpose = this.state.signOn.purpose;
chooseMember(chosenRequest, index) {
const member = this.state.members[index];
const purpose = this.state.signOn.purpose;
this.setState({...this.state, signOn: {member, purpose}});
}
this.setState({ ...this.state, signOn: { member, purpose } });
}
onUpdateSearchText(searchText, dataSource) {
this.setState({searchText: searchText})
}
onUpdateSearchText(searchText) {
this.setState({ searchText });
}
render () {
return (
<div>
<Member
handleUpdate={this.handleUpdate}
signIn={this.chooseMember}
error={this.state.error}
members={this.state.members}
searchText={this.state.searchText}
/>
<br />
<Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose} />
<div>
<RaisedButton onClick={this.signIn} label="Sign-in" />
</div>
<br />
<SignedInList members={this.state.signedIn} />
</div>
);
}
}
handlePurposeChoice(event, index, value) {
this.setState({ ...this.state, signOn: { ...this.state.signOn, purpose: value } });
}
render() {
return (
<div>
<div className="mdl-grid">
<div className="mdl-cell--12-col mdl-cell">
<h1 className="mdl-typography--display-4">Sign-in</h1>
<h2 className="mdl-typography--display-3">{moment().format('MMM DD, YYYY')}</h2>
</div>
</div>
<div className="mdl-grid">
<div className="mdl-cell--8-col mdl-cell">
<Member
handleUpdate={this.handleUpdate}
signIn={this.chooseMember}
error={this.state.error}
members={this.state.members}
searchText={this.state.searchText}
tabIndex={1}
/>
</div>
<div className="mdl-cell mdl-cell--4-col">
<Purpose handleChange={this.handlePurposeChoice} default={this.state.signOn.purpose} tabIndex={2} />
</div>
</div>
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--2-col mdl-cell--10-offset">
<RaisedButton onClick={this.signIn} label="Sign-in" tabIndex={3} />
</div>
</div>
<div className="mdl-grid">
<SignedInList members={this.state.signedIn} />
</div>
</div>
);
}
}

Write Preview
Loading…
Cancel
Save