diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 64fcd76cf6a10610db451677e80912d837ffaeae..5b8aa4f3057eac1a514b79a64f2946f994971fcc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,9 +1,9 @@
<template>
- <div id="app">
- <v-app>
+ <v-app>
+ <div id="app">
<router-view/>
- </v-app>
- </div>
+ </div>
+ </v-app>
</template>
<script>
@@ -11,11 +11,11 @@
name: 'app',
components: {
}
-}
+ }
</script>
<style>
-#app {
+ #app {
-}
+ }
</style>
diff --git a/frontend/src/components/submission_notes/AnnotatedSubmission.vue b/frontend/src/components/submission_notes/AnnotatedSubmission.vue
index 6a6cffea78f90598f08eef64b66c0b2d9bf5b471..5add915ab64a7c9dc3f2fbe680bcda1d6f01c04c 100644
--- a/frontend/src/components/submission_notes/AnnotatedSubmission.vue
+++ b/frontend/src/components/submission_notes/AnnotatedSubmission.vue
@@ -1,24 +1,36 @@
<template>
- <div>
- <table class="submission-table">
- <tr class="submission-row" v-for="line in submission">
- <td class="label-column">___________</td>
- <td class="line-number-column">
- <v-tooltip left close-delay="20">
- <v-btn block class="line-number-btn" slot="activator">{{ line[1] }}</v-btn>
- <v-icon small color="indigo accent-3">fa-comment</v-icon>
- </v-tooltip>
- </td>
- <td><pre class="prettyprint"><code class="lang-c"> {{ line[0] }}</code></pre></td>
- </tr>
- </table>
- </div>
+ <table>
+ <tr v-for="line in submission">
+ <td class="line-number-cell">
+ <v-tooltip left close-delay="20" color="transparent" content-class="comment-icon">
+ <v-btn block class="line-number-btn" slot="activator" @click="toggleEditorOnLine(line[1])">{{ line[1] }}</v-btn>
+ <v-icon small color="indigo accent-3" class="comment-icon">fa-comment</v-icon>
+ </v-tooltip>
+ </td>
+ <td>
+ <pre class="prettyprint"><code class="lang-c"> {{ line[0] }}</code></pre>
+ <feedback-comment v-if="feedback[line[1]]" :feedback="feedback[line[1]]"></feedback-comment>
+ <comment-form v-if="showEditorOnLine[line[1]]"></comment-form>
+ </td>
+ </tr>
+ </table>
</template>
<script>
+ import CommentForm from '@/components/submission_notes/FeedbackForm.vue'
+ import FeedbackComment from '@/components/submission_notes/FeedbackComment.vue'
+
export default {
+ components: {
+ FeedbackComment,
+ CommentForm},
name: 'annotated-submission',
+ computed: {
+ submission () {
+ return this.source.split('\n').map((line, i) => { return [line, i + 1] })
+ }
+ },
data: function () {
return {
source: '//Procedural Programming technique shows creation of Pascal\'s Triangl\n' +
@@ -46,12 +58,17 @@
' cout << endl << endl;\n' +
' for ( int i = 0 ; i < row ; i++)\n' +
' {\n' +
- ' for ( int j = 0 ; j < col ; j++)\n'
+ ' for ( int j = 0 ; j < col ; j++)\n',
+ feedback: {
+ '1': 'Youre STUPID',
+ '4': 'Very much so'
+ },
+ showEditorOnLine: { }
}
},
- computed: {
- submission () {
- return this.source.split('\n').map((line, i) => { return [line, i + 1] })
+ methods: {
+ toggleEditorOnLine (lineIndex) {
+ this.$set(this.showEditorOnLine, lineIndex, !this.showEditorOnLine[lineIndex])
}
},
mounted () {
@@ -62,24 +79,32 @@
<style scoped>
+
+ table {
+ table-layout: auto;
+ border-collapse: collapse;
+ border-width: 0px;
+ }
+
+ td {
+ /*white-space: nowrap;*/
+ /*border: 1px solid green;*/
+ }
+
+ .line-number-cell {
+ padding-left: 50px;
+ vertical-align: top;
+ }
+
pre.prettyprint {
padding: 0px;
border: 0px;
}
- .line-number-column {
- background-color: #AEAEAE;
- width: min-content;
- }
- .submission-table {
- border-spacing: 0;
- border-collapse: collapse;
+ code {
+ width: 100%;
}
- .label-column {
- padding-right: 20px;
- /*max-height: initial;*/
- }
.line-number-btn {
height: fit-content;
@@ -87,8 +112,8 @@
margin: 0;
}
- td {
- padding: 0;
+ .comment-icon {
+ border: 0px;
}
</style>
diff --git a/frontend/src/components/submission_notes/FeedbackComment.vue b/frontend/src/components/submission_notes/FeedbackComment.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7190124000afa403f3e1cfc09e607a87b7776632
--- /dev/null
+++ b/frontend/src/components/submission_notes/FeedbackComment.vue
@@ -0,0 +1,55 @@
+<template>
+ <div class="dialogbox">
+ <div class="body">
+ <span class="tip tip-up"></span>
+ <div class="message">
+ <span>{{ feedback }}</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+
+<script>
+ export default {
+ name: 'feedback-comment',
+ props: ['feedback']
+ }
+</script>
+
+
+<style scoped>
+ .tip {
+ width: 0px;
+ height: 0px;
+ position: absolute;
+ background: transparent;
+ border: 10px solid #3D8FC1;
+ }
+
+ .tip-up {
+ top: -25px; /* Same as body margin top + border */
+ left: 10px;
+ border-right-color: transparent;
+ border-left-color: transparent;
+ border-top-color: transparent;
+ }
+
+ .dialogbox .body {
+ position: relative;
+ height: auto;
+ margin: 20px 10px 0px 10px;
+ padding: 5px;
+ background-color: #F3F3F3;
+ border-radius: 5px;
+ border: 5px solid #3D8FC1;
+ }
+
+ .body .message {
+ font-family: Roboto, sans-serif;
+ min-height: 30px;
+ border-radius: 3px;
+ font-size: 14px;
+ line-height: 1.5;
+ }
+</style>
diff --git a/frontend/src/components/submission_notes/FeedbackForm.vue b/frontend/src/components/submission_notes/FeedbackForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61c058853422b00d23797d212f4fc8d529848479
--- /dev/null
+++ b/frontend/src/components/submission_notes/FeedbackForm.vue
@@ -0,0 +1,34 @@
+<template>
+ <div>
+ <v-text-field
+ name="feedback-input"
+ label="Please provide your feedback here"
+ v-model="feedback"
+ rows="2"
+ textarea
+ autofocus
+ auto-grow
+ ></v-text-field>
+ <v-btn color="success">Submit</v-btn>
+ <v-btn>Cancel</v-btn>
+ </div>
+</template>
+
+
+<script>
+ export default {
+ name: 'comment-form',
+ data: function () {
+ return {
+ feedback: ''
+ }
+ }
+ }
+</script>
+
+
+<style scoped>
+ v-text-field {
+ padding-top: 0px;
+ }
+</style>
diff --git a/frontend/src/store/modules/submission_notes.js b/frontend/src/store/modules/submission_notes.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391