diff --git a/frontend/src/components/submission_notes/AnnotatedSubmission.vue b/frontend/src/components/submission_notes/AnnotatedSubmission.vue index 5ecb1262ff79b556198cd85e4464c788a1c6c2a5..ca41a23114eb5514c1c1937b42bcdd80079ca8a3 100644 --- a/frontend/src/components/submission_notes/AnnotatedSubmission.vue +++ b/frontend/src/components/submission_notes/AnnotatedSubmission.vue @@ -18,6 +18,7 @@ <script> + import {mapGetters, mapState} from 'vuex' import CommentForm from '@/components/submission_notes/FeedbackForm.vue' import FeedbackComment from '@/components/submission_notes/FeedbackComment.vue' @@ -26,46 +27,18 @@ FeedbackComment, CommentForm}, name: 'annotated-submission', + beforeCreate () { + this.$store.dispatch('getFeedback', 0) + this.$store.dispatch('getSubmission', 0) + }, computed: { - submission () { - return this.source.split('\n').reduce((acc, cur, index) => { - acc[index + 1] = cur - return acc - }, {}) - } + ...mapState({ + feedback: state => state.submissionNotes.feedback + }), + ...mapGetters(['submission']) }, data: function () { return { - source: '//Procedural Programming technique shows creation of Pascal\'s Triangl\n' + - '#include <iostream>\n' + - '#include <iomanip>\n' + - 'using namespace std;\n' + - 'int** comb(int** a , int row , int col)\n' + - '{\n' + - ' int mid = col/2;\n' + - ' //clear matrix\n' + - ' for( int i = 0 ; i < row ; i++)\n' + - ' for( int j = 0 ; j < col ; j++)\n' + - ' a[i][j] = 0;\n' + - ' a[0][mid] = 1; //put 1 in the middle of first row\n' + - ' //build up Pascal\'s Triangle matrix\n' + - ' for( int i = 1 ; i < row ; i++)\n' + - ' {\n' + - ' for( int j = 1 ; j < col - 1 ; j++)\n' + - ' a[i][j] = a[i-1][j-1] + a[i-1][j+1];\n' + - ' }\n' + - ' return a;\n' + - '}\n' + - 'void disp(int** ptr, int row, int col)\n' + - '{\n' + - ' cout << endl << endl;\n' + - ' for ( int i = 0 ; i < row ; i++)\n' + - ' {\n' + - ' for ( int j = 0 ; j < col ; j++)\n', - feedback: { - '1': 'Youre STUPID', - '4': 'Very much so' - }, showEditorOnLine: { } } }, diff --git a/frontend/src/components/submission_notes/FeedbackForm.vue b/frontend/src/components/submission_notes/FeedbackForm.vue index bd4ed906fae7d11f1c3dfc3dd101b4c37b5318b3..f5daf4f71dec1316dea76463d6668abe740a0479 100644 --- a/frontend/src/components/submission_notes/FeedbackForm.vue +++ b/frontend/src/components/submission_notes/FeedbackForm.vue @@ -11,7 +11,7 @@ hide-details ></v-text-field> <v-btn color="success" @click="submitFeedback()">Submit</v-btn> - <v-btn>Cancel</v-btn> + <v-btn>Discard</v-btn> </div> </template> diff --git a/frontend/src/main.js b/frontend/src/main.js index 10e17e6a151e5d3b6de33be243b86dd08950cbb6..2181166f03cba804c434612faeae486d6d520b73 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -7,10 +7,9 @@ import store from './store/store' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' - +import 'font-awesome/css/font-awesome.min.css' import 'google-code-prettify/bin/prettify.min' import 'google-code-prettify/bin/prettify.min.css' -import 'font-awesome/css/font-awesome.min.css' Vue.use(Vuetify) diff --git a/frontend/src/store/modules/submission-notes.js b/frontend/src/store/modules/submission-notes.js new file mode 100644 index 0000000000000000000000000000000000000000..3c1e7633ed7d64bf1fa9e1ea18da749d44d92dca --- /dev/null +++ b/frontend/src/store/modules/submission-notes.js @@ -0,0 +1,76 @@ +import Vue from 'vue' + +const mockSubmission = '//Procedural Programming technique shows creation of Pascal\'s Triangl\n' + + '#include <iostream>\n' + + '#include <iomanip>\n' + + 'using namespace std;\n' + + 'int** comb(int** a , int row , int col)\n' + + '{\n' + + ' int mid = col/2;\n' + + ' //clear matrix\n' + + ' for( int i = 0 ; i < row ; i++)\n' + + ' for( int j = 0 ; j < col ; j++)\n' + + ' a[i][j] = 0;\n' + + ' a[0][mid] = 1; //put 1 in the middle of first row\n' + + ' //build up Pascal\'s Triangle matrix\n' + + ' for( int i = 1 ; i < row ; i++)\n' + + ' {\n' + + ' for( int j = 1 ; j < col - 1 ; j++)\n' + + ' a[i][j] = a[i-1][j-1] + a[i-1][j+1];\n' + + ' }\n' + + ' return a;\n' + + '}\n' + + 'void disp(int** ptr, int row, int col)\n' + + '{\n' + + ' cout << endl << endl;\n' + + ' for ( int i = 0 ; i < row ; i++)\n' + + ' {\n' + + ' for ( int j = 0 ; j < col ; j++)\n' + +const mockFeedback = { + '1': 'Youre STUPID', + '4': 'Very much so' +} + +const submissionNotes = { + state: { + rawSubmission: '', + feedback: {} + }, + getters: { + // reduce the string rawSubmission into an object where the keys are the + // line indexes starting at one and the values the corresponding submission line + // this makes iterating over the submission much more pleasant + submission: state => { + return state.rawSubmission.split('\n').reduce((acc, cur, index) => { + acc[index + 1] = cur + return acc + }, {}) + } + }, + mutations: { + 'SET_RAW_SUBMISSION': function (state, submission) { + state.rawSubmission = mockSubmission + }, + 'SET_FEEDBACK': function (state, feedback) { + state.feedback = feedback + }, + 'UPDATE_FEEDBACK': function (state, lineIndex, feedbackContent) { + Vue.set(state.feedback, lineIndex, feedbackContent) + } + }, + actions: { + // TODO remove mock data + getSubmission (context, submissionId) { + context.commit('SET_RAW_SUBMISSION', mockSubmission) + }, + getFeedback (context, feedbackId) { + context.commit('SET_FEEDBACK', mockFeedback) + }, + updateFeedback (context, lineIndex, feedbackContent) { + context.commit('UPDATE_FEEDBACK', lineIndex, feedbackContent) + } + } +} + +export default submissionNotes diff --git a/frontend/src/store/modules/submission_notes.js b/frontend/src/store/modules/submission_notes.js deleted file mode 100644 index 3212a56ab804f3134fe078dd2ebfb0ed549244de..0000000000000000000000000000000000000000 --- a/frontend/src/store/modules/submission_notes.js +++ /dev/null @@ -1,7 +0,0 @@ -const submission = { - state: { - submission: '' - } -} - -export default submission diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js index d2119b940ede05f02f5841ea73901155acff6ef3..9e1e6c4396d1ef49ea7e4dcce68422067acab48a 100644 --- a/frontend/src/store/store.js +++ b/frontend/src/store/store.js @@ -2,9 +2,14 @@ import Vuex from 'vuex' import Vue from 'vue' import ax from './api' +import submissionNotes from './modules/submission-notes' + Vue.use(Vuex) const store = new Vuex.Store({ + modules: { + submissionNotes: submissionNotes + }, state: { token: '', loggedIn: false,