Beginning of grade page

client/index.jsx

@@ -111,7 +111,7 @@ class App extends React.Component {
                         <Route path="/students" render={() => 
                             <Students exam={exam} /> }/>
                         <Route path="/grade" render={() => (
-                            exam && exam.submissions ? <Grade /> : <Fail message="No exams uploaded. Please do not bookmark URLs" />
+                            exam && exam.submissions ? <Grade exam={exam}/> : <Fail message="No exams uploaded. Please do not bookmark URLs" />
                         )} />
                         <Route path="/statistics" render={() => (
                             exam && exam.submissions ? <Statistics /> : <Fail message="No exams uploaded. Please do not bookmark URLs" />

client/views/Grade.jsx

@@ -2,17 +2,132 @@ import React from 'react';
 
 import Hero from '../components/Hero.jsx';
 
-const Grade = () => {
-  return (
-      <div>
+import FeedbackPanel from './grade/FeedbackPanel.jsx';
+import ProblemSelector from './grade/ProblemSelector.jsx';
+import EditPanel from './grade/EditPanel.jsx';
+const ProgressBar = () => null;
 
-        <Hero title='Grade' subtitle='This is where the magic happens!' />
-        
-        <h1>React Router demo</h1>
-        Hoi dit de Grade
+class Grade extends React.Component {
 
-      </div>
-  )
+    state = {
+        editActive: false,
+        editFeedback: null,
+        problem: null,
+        submission: {
+            input: "",
+            imagePath: ""
+        },
+        solution: null
+    }
+
+    prev = () => {
+
+    }
+    next = () => {
+
+    }
+
+    prevUngraded = () => {
+
+    }
+    nextUngraded = () => {
+
+    }
+
+    toggleEdit = () => {
+        this.setState({
+            editActive: !this.state.editActive,
+            editFeedback: null
+        })
+    }
+    editFeedback = (event) => {
+        console.log(event);
+        this.setState({
+            editActive: true
+        })
+    }
+
+    setSubInput = (event) => {
+        this.setState({
+            submission: {
+                ...this.state.submission,
+                input: event.target.value
+            }
+        })
+    }
+    setSubmission = () => {
+
+    }
+    changeProblem = (id) => {
+        console.log(id);
+        this.setState({
+            problem: id
+        })
+    }
+
+
+    render() {
+
+
+
+        return (
+            <div>
+
+                <Hero title='Grade' subtitle='This is where the magic happens!' />
+
+                <section className="section">
+
+                    <div className="container">
+                        <div className="columns">
+                            <div className="column is-one-quarter-desktop is-one-third-tablet">
+                                <ProblemSelector examID={this.props.exam.id} changeProblem={this.changeProblem}/>
+                                {this.state.editActive ?
+                                    <EditPanel problem={this.state.problem} feedbackID={this.state.editFeedback} toggleEdit={this.toggleEdit}/>
+                                    :
+                                    <FeedbackPanel problem={this.state.problem} toggleEdit={this.toggleEdit} 
+                                        editFeedback={this.editFeedback}/>
+                                }
+                            </div>
+
+                            <div className="column">
+                                <div className="level">
+                                    <div className="level-item">
+                                        <div className="field has-addons is-mobile">
+                                            <div className="control">
+                                                <button type="submit" className="button is-info is-rounded is-hidden-mobile"
+                                                    onClick={this.prevUngraded}>ungraded</button>
+                                                <button type="submit" className="button is-link"
+                                                    onClick={this.prev}>Previous</button>
+                                            </div>
+                                            <div className="control">
+                                                <input className="input is-rounded has-text-centered is-link"
+                                                    value={this.state.submission.input} type="text"
+                                                    onChange={this.setSubInput} onSubmit={this.setSubmission}/>
+                                            </div>
+                                            <div className="control">
+                                                <button type="submit" className="button is-link"
+                                                    onClick={this.next}>Next</button>
+                                                <button type="submit" className="button is-info is-rounded is-hidden-mobile"
+                                                    onClick={this.nextUngraded}>ungraded</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <ProgressBar submissions={this.state.submission} />
+
+                                <p className="box">
+                                    <img src={this.state.submission.imagePath} alt="" />
+                                </p>
+
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+            </div>
+        )
+    }
 }
 
 export default Grade;
\ No newline at end of file

client/views/grade/EditPanel.jsx

+import React from 'react';
+
+import * as api from '../../api.jsx';
+import { startOfToday } from 'date-fns';
+
+
+const BackButton = (props) => (
+    <button className="button is-light is-fullwidth" onClick={props.onClick}>
+        <span className="icon is-small">
+            <i className="fa fa-chevron-left"></i>
+        </span>
+        <span>back</span>
+    </button>
+)
+
+const SaveButton = (props) => (
+    <button className="button is-link is-fullwidth" disabled={props.disabled} onClick={props.onClick}>
+        <span className="icon is-small">
+            <i className="fa fa-floppy-o"></i>
+        </span>
+        <span>{props.exists ? "edit" : "add"}</span>
+    </button>
+)
+
+class EditPanel extends React.Component {
+
+    state = {
+        name: "",
+        description: "",
+        score: ""
+    }
+
+    componentWillMount = () => {
+        if (this.props.feedback) {
+            const stud = this.props.editStud;
+            this.setState({
+                id: stud.id,
+                firstName: stud.firstName,
+                lastName: stud.lastName,
+                email: stud.email
+            })
+        }
+    }
+
+
+    changeName = (event) => {
+        this.setState({
+            name: event.target.value
+        })
+    }
+    changeDesc = (event) => {
+        this.setState({
+            description: event.target.value
+        })
+    }
+    changeScore = (event) => {
+        this.setState({
+            score: event.target.value
+        })
+    }
+
+
+    saveFeedback = () => {
+
+        if (this.props.feedback) {
+
+        } else {
+            api.post('feedback/' + this.props.problem, this.state)
+                .then(feedback => {
+                    console.log(feedback)
+                    this.props.toggleEdit();
+                })
+        }
+    }
+
+
+    render() {
+
+        return (
+            <nav className="panel">
+                <p className="panel-heading">
+                    Manage feedback
+                </p>
+
+                <div className="panel-block">
+                    <div className="field">
+                        <label className="label">Name</label>
+                        <div className="control has-icons-left">
+                            <input className="input" placeholder="Name"
+                                value={this.state.name} onChange={this.changeName} />
+                            <span className="icon is-small is-left">
+                                <i className="fa fa-quote-left"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="panel-block">
+                    <div className="field">
+                        <label className="label">Description</label>
+                        <div className="control has-icons-left">
+                            <input className="input" placeholder="Description"
+                                value={this.state.description} onChange={this.changeDesc} />
+                            <span className="icon is-small is-left">
+                                <i className="fa fa-quote-right"></i>
+                            </span>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div className="panel-block">
+                    <div className="field">
+                        <label className="label">Score</label>
+                        <div className="control has-icons-left has-icons-right">
+                            <input className="input" placeholder="Score"
+                                value={this.state.score} onChange={this.changeScore} />
+                            <span className="icon is-small is-left">
+                                <i className="fa fa-envelope"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="panel-block">
+                    <BackButton onClick={this.props.toggleEdit} />
+                    <SaveButton onClick={this.saveFeedback} disabled={!this.state.name} exists={this.props.feedback} />
+                </div>
+            </nav>
+        )
+    }
+}
+
+export default EditPanel;
+

client/views/grade/FeedbackPanel.jsx

+import React from 'react';
+
+import * as api from '../../api.jsx'
+
+const FeedbackBlock = (props) => (
+    <a className="panel-block is-active" onClick={props.onClick} >
+        <span className="panel-icon">
+            <i className={"fa fa-" + (props.checked ? "check-square-o" : "square-o")}></i>
+        </span>
+        {props.feedback.name}&nbsp;<i>- [{props.feedback.score}]</i>
+    </a>
+)
+
+
+class FeedbackPanel extends React.Component {
+
+    state = {
+        feedback: []
+    }
+
+    componentDidMount = () => {
+        if (this.props.problem) {
+            api.get('feedback/' + this.props.problem)
+                .then(feedback => {
+                    this.setState({
+                        feedback: feedback
+                    })
+                })
+        }
+    }
+
+    componentWillReceiveProps = (nextProps) => {
+        if (this.props.problem !== nextProps.problem) {
+            api.get('feedback/' + nextProps.problem)
+                .then(feedback => {
+                    this.setState({
+                        feedback: feedback
+                    })
+                })
+        }
+    }
+
+    render() {
+
+        return (
+            <nav className="panel">
+                <p className="panel-heading">
+                    Feedback
+                </p>
+                {this.state.feedback.map((feedback, i) =>
+                    <FeedbackBlock key={i} index={i} feedback={feedback} checked={true} onClick={this.props.editFeedback} />
+                )}
+                <div className="panel-block is-hidden-mobile">
+                    <button className="button is-link is-outlined is-fullwidth" onClick={this.props.toggleEdit}>
+                        <span className="icon is-small">
+                            <i className="fa fa-plus"></i>
+                        </span>
+                        <span>add option</span>
+                    </button>
+                </div>
+            </nav>
+        )
+    }
+
+}
+export default FeedbackPanel;
\ No newline at end of file

client/views/grade/ProblemSelector.jsx

+import React from 'react';
+
+import * as api from '../../api.jsx'
+
+class ProblemSelector extends React.Component {
+
+    state = {
+        problemList: []
+    }
+
+    componentDidMount = () => {
+        api.get('problems/' + this.props.examID)
+            .then(problems => {
+                this.setState({
+                    problemList: problems
+                }, this.props.changeProblem(problems[0].id))
+            })
+
+    }
+
+    render() {
+        return (
+            <div className="field">
+                <label className="label">Problem:</label>
+                <div className="control has-icons-left">
+                    <div className="select is-fullwidth">
+                        <select value={this.props.name}
+                            onChange={(event) => this.props.changeProblem(event.target.value)}>
+                            {this.state.problemList.map(problem =>
+                                <option key={problem.id} value={problem.id}>{problem.name}</option>
+                            )}
+
+                        </select>
+                    </div>
+                    <span className="icon is-left">
+                        <i className="fa fa-question"></i>
+                    </span>
+                    <br />
+                </div>
+            </div>
+        )
+    }
+
+
+}
+
+export default ProblemSelector;
\ No newline at end of file