Show students in visit on frontend

api/queue/routes.py

@@ -176,6 +176,7 @@ def get_active_visits():
             "ta_id": visit["ta_id"],
             "ta_name": ta_name
         })
+    return visits
 
 @blueprint.route("/visits/<id>", methods=["GET"])
 @min_level('instructor')

client/src/components/ManageTable.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+import TableEntry from "@/components/TableEntry.vue";
+
+const props = defineProps(["headings", "table_data"]);
+
+</script>
+
+<template>
+  <div id="enrollment-container">
+        <table id="enrollment-table">
+          <thead>
+            <tr>
+              <th v-for="heading in headings">{{ heading }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <TableEntry v-for="data in table_data"
+                              :data="data">
+              <slot></slot>
+            </TableEntry>
+          </tbody>
+        </table>
+      </div>
+</template>
+
+<style scoped>
+
+th {
+  padding: 8px;
+}
+
+#enrollment-container {
+  justify-content: center;
+  overflow-x: scroll;
+}
+
+#enrollment-table, tr, th, td {
+  border: 2px solid #D9D9D9;
+  border-collapse: collapse;
+}
+
+#enrollment-table {
+  width: 100%;
+  font-size: 1rem;
+}
+
+#actions {
+    display: flex;
+    gap: 4px;
+    margin: 4px;
+    justify-content: center;
+}
+
+
+</style>

client/src/components/TableEntry.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const props = defineProps(['data'])
+
+</script>
+
+<template>
+          <tr>
+            <td v-for="entry in data">{{ entry }}</td>
+            <slot/>
+          </tr>
+</template>
+
+<style scoped>
+
+
+  tr, th, td {
+    border: 2px solid #D9D9D9;
+    border-collapse: collapse;
+  }
+
+  td {
+    padding: 8px;
+  }
+
+  tr:nth-child(odd) {
+    background-color: #FAFAFA;
+  }
+
+
+</style>

client/src/components/EditInfo.vue → client/src/components/common/EditInfo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
 import {nextTick, ref} from "vue";
 
 const props = defineProps(["default_name", "is_instructor"]);

client/src/components/instructor/ActiveEntry.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
+
+defineProps(["student_name", "ubit", "ta_name", "visit_id"])
+defineEmits(["end-visit"])
+
+
+</script>
+
+<template>
+
+  <QueueControlEntry>
+    <template #info>{{ student_name }} ({{ ubit }}) is being helped by {{ ta_name }}</template>
+    <template #buttons>
+      <button class="danger" @click="$emit('end-visit', visit_id)">End Visit</button>
+    </template>
+    <template #dropdown-buttons>
+      <button class="danger" @click="$emit('end-visit', visit_id)">End Visit</button>
+    </template>
+  </QueueControlEntry>
+
+</template>
+
+<style scoped>
+
+</style>

client/src/components/OnSiteEntry.vue → client/src/components/instructor/OnSiteEntry.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import QueueControlEntry from "@/components/QueueControlEntry.vue";
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
 
 defineProps(["name", "ubit", "id"])
 defineEmits(["enqueue-student", "remove-student"])

client/src/components/QueueEntry.vue → client/src/components/instructor/QueueEntry.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import QueueControlEntry from "@/components/QueueControlEntry.vue";
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
 
 defineProps(["name", "ubit", "id"])
 defineEmits(["call-student", "remove-student", "move-to-end"])

client/src/components/Visit.vue → client/src/components/instructor/Visit.vue

@@ -112,6 +112,6 @@ const cancelVisit = () => {
 </template>
 
 <style scoped>
-@import "../assets/css/visit.css";
+@import "../../assets/css/visit.css";
 
 </style>

client/src/layouts/AppLayout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import githubLogo from "@/assets/github.svg";
-import Header from "@/components/Header.vue";
+import Header from "@/components/common/Header.vue";
 
 </script>
 

client/src/pages/InstructorQueue.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 
-import QueueEntry from "@/components/QueueEntry.vue";
+import QueueEntry from "@/components/instructor/QueueEntry.vue";
 import {nextTick, ref} from "vue";
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
-import Visit from "@/components/Visit.vue";
-import EditInfo from "@/components/EditInfo.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
+import Visit from "@/components/instructor/Visit.vue";
+import EditInfo from "@/components/common/EditInfo.vue";
 import {useRouter} from "vue-router";
-import Alert from "@/components/Alert.vue";
-import OnSiteEntry from "@/components/OnSiteEntry.vue";
+import Alert from "@/components/common/Alert.vue";
+import OnSiteEntry from "@/components/instructor/OnSiteEntry.vue";
+import ActiveEntry from "@/components/instructor/ActiveEntry.vue";
 
 const students = ref([])
 const onSite = ref([])
+const inVisit = ref([])
 
 const router = useRouter()
 
@@ -43,12 +45,20 @@ function getQueue() {
     onSite.value = data
   })
 
+  fetch("/api/active-visits").then(res => {
+    return res.json();
+  }).then(data => {
+    inVisit.value = data;
+  })
+
 }
 
+
 let pollTimeout = -1
 
 function poll() {
   getQueue();
+  getInProgressVisit();
   pollTimeout = setTimeout(poll, 2000);
 }
 
@@ -216,11 +226,11 @@ function getInProgressVisit() {
   }).then(data => {
     visitInfo.value = data
     visitDialog.value?.show()
-  }).catch(() => {})
+  }).catch(() => {
+    visitDialog.value?.hide()
+  })
 }
 
-getInProgressVisit()
-
 function signOut() {
   fetch("/api/signout", { method: "POST" }).then(res => {
     if (res.ok) {
@@ -248,13 +258,30 @@ router.beforeEach((to, from, next) => {
   next();
 })
 
+const endVisitDialog = ref<typeof ConfirmationDialog>();
+let endVisitID = 0;
+const endVisitTAName = ref<string>("");
 
+function endOtherTAsVisit(id: number) {
+  fetch("/api/end-visit", {
+    method: "POST",
+    body: JSON.stringify({"id": id, "reason": `[Visit canceled by ${taName}]`}),
+    headers: {"Content-Type": "application/json"}
+  }).then(res => {
+    if (res.ok) {
+      endVisitDialog.value?.hide();
+    } else {
+      error.value?.setError("Failed to end visit");
+      endVisitDialog.value?.hide();
+    }
+  })
+}
 
 </script>
 
 <template>
 
-  <Visit ref="visitDialog" :visit_info="visitInfo" @open="getQueue" @close="() => { getQueue(); getInProgressVisit(); } "/>
+  <Visit ref="visitDialog" :visit_info="visitInfo" @open="getQueue" @close="() => { getQueue(); } "/>
 
   <ConfirmationDialog @open="() => { resetForceEnqueueDialog(); nextTick(() => forceEnqueueMessageBox?.focus())}" @enter="submitForceEnqueue" ref="forceEnqueueDialog">
     <label for="force-enqueue">Student Identifier (UBITName or Person Number)</label><br/>
@@ -299,7 +326,19 @@ router.beforeEach((to, from, next) => {
       <button @click="deactivateStudentDialog?.hide()">Keep this student on-site.</button>
       <button @click="deactivateStudent" class="danger">Deactivate this student.</button>
     </div>
+  </ConfirmationDialog>
 
+  <ConfirmationDialog ref="endVisitDialog">
+    <p>
+      <strong>Are you sure?</strong>
+    </p>
+
+    <p>This is not your visit. You should only do this if {{ endVisitTAName }} cannot.</p>
+
+    <div class="input-modal-container">
+      <button @click="endVisitDialog?.hide()">Cancel</button>
+      <button @click="endOtherTAsVisit(endVisitID)" class="danger">End this visit.</button>
+    </div>
   </ConfirmationDialog>
 
   <EditInfo is_instructor="true" @name-change="(name) => { taName = name }" :default_name="taName" ref="editInfo"/>
@@ -324,6 +363,20 @@ router.beforeEach((to, from, next) => {
       </div>
     </div>
     <br/>
+    <div v-if="inVisit.length > 0">
+      <h2>In Visit</h2>
+      <div class="queue-container queue-section">
+        <ActiveEntry v-for="visit in inVisit"
+                     :student_name="visit['student_name']"
+                     :ubit="visit['student_username']"
+                     :ta_name="visit['ta_name']"
+                     :visit_id="visit['visitID']"
+                     @end-visit="() => { endVisitTAName = visit['ta_name']; endVisitID = visit['visitID']; endVisitDialog?.show(); }"
+        />
+      </div>
+    </div>
+
+
     <div v-if="students.length > 0">
       <h2>Queue</h2>
       <div class="queue-container queue-section">