|
|
|
@ -32,6 +32,7 @@ class App extends Component { |
|
|
|
|
toolStatus: null, |
|
|
|
|
connected: false, |
|
|
|
|
network: true, |
|
|
|
|
selectedCourses: null, |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -60,7 +61,10 @@ class App extends Component { |
|
|
|
|
fetch(AUTH_SERVER_URL + '/tooldata/') |
|
|
|
|
.then(response => { |
|
|
|
|
if (response.ok) { |
|
|
|
|
response.json().then(data => this.setState({ toolData: data })); |
|
|
|
|
response.json().then(data => this.setState({ |
|
|
|
|
toolData: data, |
|
|
|
|
selectedCourses: data.courses.map(() => false), |
|
|
|
|
})); |
|
|
|
|
} else { |
|
|
|
|
this.noNetwork(); |
|
|
|
|
} |
|
|
|
@ -154,6 +158,34 @@ class App extends Component { |
|
|
|
|
window.location.reload(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
toggleCourse = (i, data) => { |
|
|
|
|
let selectedCourses = this.state.selectedCourses; |
|
|
|
|
selectedCourses[i] = data.checked; |
|
|
|
|
this.setState({ selectedCourses: selectedCourses }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
submitCourses = () => { |
|
|
|
|
const toolData = this.state.toolData; |
|
|
|
|
const selectedCourses = this.state.selectedCourses; |
|
|
|
|
|
|
|
|
|
fetch(AUTH_SERVER_URL + '/select-courses/', { |
|
|
|
|
method: 'PUT', |
|
|
|
|
headers: {'Authorization': 'Token ' + this.state.login.token, 'Content-Type': 'application/json; charset=utf-8'}, |
|
|
|
|
body: JSON.stringify({'courses': toolData.courses.map(x => x.slug).filter((x, i) => selectedCourses[i]) }) |
|
|
|
|
}) |
|
|
|
|
.then(response => { |
|
|
|
|
if (response.ok) { |
|
|
|
|
this.getUser(); |
|
|
|
|
} else { |
|
|
|
|
this.noNetwork(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(error => { |
|
|
|
|
console.log(error) |
|
|
|
|
this.handleLogout(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const login = this.state.login; |
|
|
|
|
const user = this.state.user; |
|
|
|
@ -161,6 +193,9 @@ class App extends Component { |
|
|
|
|
const toolStatus = this.state.toolStatus; |
|
|
|
|
const connected = this.state.connected; |
|
|
|
|
const network = this.state.network; |
|
|
|
|
const selectedCourses = this.state.selectedCourses; |
|
|
|
|
|
|
|
|
|
console.log(this.state); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
network ? |
|
|
|
@ -189,24 +224,45 @@ class App extends Component { |
|
|
|
|
{login.token ? |
|
|
|
|
<div> |
|
|
|
|
{toolData && user ? |
|
|
|
|
<div> |
|
|
|
|
<Route exact path='/' render={props => |
|
|
|
|
<Categories {...props} data={toolData} /> |
|
|
|
|
} /> |
|
|
|
|
|
|
|
|
|
<Route exact path='/:category' render={props => |
|
|
|
|
<Category {...props} data={toolData} user={user} /> |
|
|
|
|
} /> |
|
|
|
|
|
|
|
|
|
<Route exact path='/:category/:slug' render={props => |
|
|
|
|
<Tool {...props} |
|
|
|
|
data={toolData} |
|
|
|
|
user={user} |
|
|
|
|
toolStatus={toolStatus} |
|
|
|
|
requestInterlock={this.requestInterlock} |
|
|
|
|
/> |
|
|
|
|
} /> |
|
|
|
|
</div> |
|
|
|
|
<Container> |
|
|
|
|
{user.profile.selected_courses ? |
|
|
|
|
<div> |
|
|
|
|
<Route exact path='/' render={props => |
|
|
|
|
<Categories {...props} data={toolData} /> |
|
|
|
|
} /> |
|
|
|
|
|
|
|
|
|
<Route exact path='/:category' render={props => |
|
|
|
|
<Category {...props} data={toolData} user={user} /> |
|
|
|
|
} /> |
|
|
|
|
|
|
|
|
|
<Route exact path='/:category/:slug' render={props => |
|
|
|
|
<Tool {...props} |
|
|
|
|
data={toolData} |
|
|
|
|
user={user} |
|
|
|
|
toolStatus={toolStatus} |
|
|
|
|
requestInterlock={this.requestInterlock} |
|
|
|
|
/> |
|
|
|
|
} /> |
|
|
|
|
</div> |
|
|
|
|
: |
|
|
|
|
<div> |
|
|
|
|
<Message visible warning header='Please select which courses you’ve taken:' /> |
|
|
|
|
<Form size='massive' onSubmit={this.submitCourses}> |
|
|
|
|
{toolData.courses.map((x, i) => |
|
|
|
|
<Form.Checkbox |
|
|
|
|
checked={selectedCourses[i]} |
|
|
|
|
onChange={(e, data) => this.toggleCourse(i, data)} |
|
|
|
|
label={x.name} |
|
|
|
|
key={i} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
<br /> |
|
|
|
|
<Button type='submit'>Submit</Button> |
|
|
|
|
</Form> |
|
|
|
|
<br />Note: your selection will be reviewed by a lockout admin |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
</Container> |
|
|
|
|
: |
|
|
|
|
<Dimmer active> |
|
|
|
|
<Loader>Loading</Loader> |
|
|
|
|