From f0ff74a6a289a890e6a7395aa0410080eb1d883d Mon Sep 17 00:00:00 2001 From: "kristian.aars" <kristian@aars.me> Date: Mon, 4 Apr 2022 15:44:02 +0200 Subject: [PATCH] Updates QueuePosition design --- src/components/Queue.vue | 15 ++++-- src/components/QueuePositionControl.vue | 2 +- src/components/Student.vue | 70 ++++++++++++++++++++++--- src/views/StudentAssistantQueueView.vue | 6 ++- 4 files changed, 79 insertions(+), 14 deletions(-) diff --git a/src/components/Queue.vue b/src/components/Queue.vue index 36fef66..9f4eb81 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 6438964..4f57fce 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/Student.vue b/src/components/Student.vue index b7630cb..1bdacf1 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/views/StudentAssistantQueueView.vue b/src/views/StudentAssistantQueueView.vue index aa7df06..549ad31 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; - } } -- GitLab