diff --git a/src/components/Queue.vue b/src/components/Queue.vue
index 36fef668d5b403c6fc08d0e59bec240846236a36..9f4eb8165be26e7b1fb6abd160de77fece82e880 100644
--- a/src/components/Queue.vue
+++ b/src/components/Queue.vue
@@ -1,9 +1,9 @@
<template>
- <div class="queue" v-if="studentQueue==null || studentQueue.length>0" >
+ <div class="queue" v-if="studentQueue!=null && studentQueue.length>0" >
<ul>
- <li v-for="student in this.studentQueue" :key="student.student_user_id">
- <Student :student="student" :show-remove-button="showToolButtons" :show-pick-button="showToolButtons" :on-pick-button-pressed="onPickButtonPressed" :on-remove-button-pressed="onRemoveButtonPressed"/>
+ <li v-for="(student, index) in this.sortedByTime" :key="index">
+ <Student :number="index+1" :student="student" :show-remove-button="showToolButtons" :show-pick-button="showToolButtons" :on-pick-button-pressed="onPickButtonPressed" :on-remove-button-pressed="onRemoveButtonPressed"/>
</li>
</ul>
</div>
@@ -37,6 +37,15 @@ export default {
default: ()=>{}
}
},
+
+ computed: {
+ sortedByTime() {
+ console.log(this.studentQueue)
+ return this.studentQueue.sort ((a, b) => {
+ return new Date(a.entry_time) - Date(b.entry_time)
+ });
+ }
+ }
}
</script>
diff --git a/src/components/QueuePositionControl.vue b/src/components/QueuePositionControl.vue
index 643896460930f194052218842c398d0199fb4c06..4f57fce771d74858c229d8ba341ca0307de92498 100644
--- a/src/components/QueuePositionControl.vue
+++ b/src/components/QueuePositionControl.vue
@@ -6,7 +6,7 @@
<h2>You are currently {{queuePositionVerb}}:</h2>
<h3><i>{{ studentName }}</i></h3>
<h3>{{ queuePositionHelper }}</h3>
- <h3><i>Assignment{{ assignmentNumber }}</i> </h3>
+ <h3><i>Assignment {{ assignmentNumber }}</i> </h3>
</div>
<div v-else>
<h3>Please pick a student from the queue to get started</h3>
diff --git a/src/components/SingleSubject.vue b/src/components/SingleSubject.vue
index 2b81401022eacf34ebde85249629e4511ef2cf45..2c29c02ef0af89cd3d7f8b57c74cfe0849887ec9 100644
--- a/src/components/SingleSubject.vue
+++ b/src/components/SingleSubject.vue
@@ -10,8 +10,10 @@
<div class="subjectOptions">
<button @click="pushToQueueScreen()">View Queue</button>
- <button @click="chatClick" v-if="subject.active && type==='student'">Chat</button>
- <button @click="" v-if="!subject.active && type==='studass'">Activate Queue</button>
+ <button @click="" v-if="subject.active && type==='student'">Chat</button>
+ <button @click="activateQueue" v-if="!subject.active && type==='studass'">Activate Queue</button>
+ <button @click="disableQueue" class="button-red" v-if="subject.active && type==='studass'">Close Queue</button>
+
</div>
</div>
@@ -20,6 +22,7 @@
<script>
import studAss from "@/components/StudAss";
+import SubjectService from "@/service/SubjectService";
export default {
props: {
@@ -42,6 +45,21 @@ export default {
} else if(this.type==='student') {
this.$router.push({name: 'StudentQueueView', params: {subject_code: this.subject.subject_code, semester: this.subject.semester }})
}
+ },
+ activateQueue() {
+ SubjectService.changeQueueStatus(this.subject.subject_code, this.subject.semester, true, this.$store.state.token).then(res => {
+ this.pushToQueueScreen();
+ }).catch(err => {
+ console.log(err)
+ })
+ },
+ disableQueue() {
+ SubjectService.changeQueueStatus(this.subject.subject_code, this.subject.semester, false, this.$store.state.token).then(res => {
+ //TODO: Add confirm message
+ this.subject.active = false;
+ }).catch(err => {
+ console.log(err)
+ })
}
}
}
diff --git a/src/components/Student.vue b/src/components/Student.vue
index b7630cbdcb71c609af3f2015f0c0962bd5572bc8..1bdacf145d3a13ba030157969d4c52f2db183b72 100644
--- a/src/components/Student.vue
+++ b/src/components/Student.vue
@@ -1,9 +1,13 @@
<template>
<div class="student box" :class="{ studentActive: student.active_student_assistant_id != -1 }">
- <h4>{{ student.student.first_name + " " + student.student.surname }}</h4>
- <p>{{ student.queue_type }}</p>
- <p>Assignment 1</p>
- <div>
+ <div class="student-info-content">
+ <h2><b>{{ "#" + number + " - " +student.student.first_name + " " + student.student.surname }}</b></h2>
+ <h3><i>Assignment {{ student.assignment_number }} - {{ student.queue_type }}</i></h3>
+ <p><i>Entered queue at {{new Date(student.entry_time).toLocaleTimeString()}}</i></p>
+ <p><i>Currently getting help from {{ student.active_student_assistant_id }}</i></p>
+ </div>
+
+ <div class="student-button-content">
<button v-if="showPickButton" @click="pickButtonPressed">Pick</button>
<button v-if="showRemoveButton" @click="removeButtonPressed">Remove</button>
</div>
@@ -13,6 +17,9 @@
<script>
export default {
props: {
+ number: {
+ required: true,
+ },
student : {
required: true,
type: Object
@@ -49,19 +56,66 @@ export default {
<style scoped>
+.student-info-content p, h3, h4 {
+ margin: 0;
+ padding: 0;
+}
+
+.student-info-content h4 {
+ padding-bottom: 16px;
+ margin-top: 8px;
+}
+
+.student-info-content {
+ text-align: left;
+}
+
+.student-button-content {
+ display: grid;
+ grid-auto-flow: row;
+}
+
.student {
margin: 20px auto;
background: white;
padding: 10px 20px 20px;
border-left: 6px solid #9f9f9f;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
+ display: grid;
+ grid-auto-flow: column;
+
}
.studentActive {
border-left: 8px solid #00e94e;
}
+@media only screen and (min-width: 768px) and (max-width: 1268px) {
+
+ .student {
+ grid-auto-flow: row;
+ grid-column-gap: 10px;
+ }
+
+ .student-button-content {
+ grid-auto-flow: column;
+ grid-column-gap: 10px;
+ }
+
+}
+
+@media only screen and (max-width: 768px) {
+
+ .student {
+ grid-auto-flow: row;
+ grid-column-gap: 10px;
+ }
+
+ .student-button-content {
+ grid-auto-flow: column;
+ grid-column-gap: 10px;
+
+ }
+
+}
+
</style>
diff --git a/src/service/SubjectService.js b/src/service/SubjectService.js
index 606a2217824c200ae23f877b8290ee793146d8d2..40257136876e28c277b877a41ca17f0974bb6e51 100644
--- a/src/service/SubjectService.js
+++ b/src/service/SubjectService.js
@@ -88,5 +88,12 @@ export default {
*/
updateQueuePosition(queuePosition, token) {
return apiService.getApiClient(token).post("/subjects/queues/positions", queuePosition)
+ },
+
+ changeQueueStatus(subject_code, semester, active, token) {
+ const json = {
+ 'active' : active
+ }
+ return apiService.getApiClient(token).post(`/subjects/queues/${subject_code}/${semester}/status`, json)
}
}
diff --git a/src/views/StudentAssistantQueueView.vue b/src/views/StudentAssistantQueueView.vue
index aa7df06ce0092215d1225c4128e7c8df87ad91c7..549ad31b87b6308419454d2b835ff95e111d0a7b 100644
--- a/src/views/StudentAssistantQueueView.vue
+++ b/src/views/StudentAssistantQueueView.vue
@@ -1,6 +1,6 @@
<template>
<h1>Student Assistant Queue-Panel</h1>
- <h2>{{subject_name}}</h2>
+ <h2>{{subject_name + " - " + subject_code}}</h2>
<div class="StudentAssistantQueueViewContainer">
@@ -31,6 +31,7 @@ export default {
subject: null,
queuePositions: null,
subject_name: null,
+ subject_code: null,
currentQueuePosition: null,
ownUserId: null
}
@@ -42,6 +43,7 @@ export default {
SubjectQueueService.getSubject(this.getSubjectCode, this.getSemester, this.$store.state.token).
then(ans => {
this.subject_name = ans.data.subjectInfo.name
+ this.subject_code = ans.data.subjectInfo.subject_code
this.subject = ans.data
this.timer = setInterval(this.updateQueueData, 500);
@@ -121,9 +123,9 @@ export default {
@media only screen and (max-width: 768px) {
.StudentAssistantQueueViewContainer {
+ grid-template-columns: none;
grid-auto-flow: row;
grid-column-gap: 10px;
-
}
}