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