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