Show in progress visit after leaving and returning, styling

Author: jbcarras

api/auth/routes.py

@@ -2,8 +2,9 @@
 
 import json
 import urllib.parse
+import requests
 
-from flask import Blueprint, request, make_response, redirect
+from flask import Blueprint, request, make_response
 from api.database.db import db
 from api.auth.controller import AUTOLAB_ID, AUTOLAB_SECRET, REDIRECT_URI
 
@@ -94,21 +95,6 @@ def signout():
 
     return res
 
-@blueprint.route("/authorize")
-def authorize_al():
-
-    params = {
-        "response_type": "code",
-        "client_id": AUTOLAB_ID,
-        "redirect_uri": REDIRECT_URI,
-        "scope": "user_info"
-    }
-
-    return redirect(
-        f"https://autolab.cse.buffalo.edu/oauth/authorize?{urllib.parse.urlencode(params)}"
-    )
-
-
 
 # TODO: update preferred name
 

api/database/idb_visits.py

@@ -30,4 +30,14 @@ def end_visit(self, visit_id, reason):
         :param visit_id: The numeric ID representing the specific visit
         :param reason:   The resolution of the visit
         """
+        raise NotImplementedError()
+
+    @abstractmethod
+    def get_in_progress_visits(self):
+        """ Return all database entries for visits that have
+        not ended.
+
+
+        :return:
+        """
         raise NotImplementedError()

api/database/relational_db/relational_db_visits.py

@@ -31,3 +31,25 @@ def end_visit(self, visit_id, reason):
                 WHERE visit_id = ? AND session_end is null
             """, (now, reason, visit_id))
 
+
+    def get_in_progress_visits(self):
+        with self.cursor() as cursor:
+            result = cursor.execute("""
+                SELECT visit_id, student_id, student_visit_reason, ta_id, enqueue_time, session_start FROM visits
+                WHERE session_end IS NULL
+            """).fetchall()
+
+        visits = []
+        for row in result:
+            visits.append({
+                "visit_id": row[0],
+                "student_id": row[1],
+                "student_visit_reason": row[2],
+                "ta_id": row[3],
+                "enqueue_time": row[4],
+                "session_start": row[5]
+            })
+        return visits
+
+
+

api/queue/routes.py

@@ -81,6 +81,53 @@ def enqueue_ta_override():
 
     return {"message": "No student matching provided identifier"}, 404
 
+@blueprint.route("/restore-visit", methods=["GET"])
+@min_level("ta")
+def restore_visit():
+    """
+    Returns a visit in the database involving the user that hasn't
+    ended yet, if such a visit exists.
+
+    i.e. if a TA refreshes the queue before ending the visit
+
+
+    Returns:
+        200 OK - visit found
+        {
+            "id": <int>,
+            "username": <string>,
+            "pn": <string>,
+            "preferred_name: <string>,
+            "visitID": <string>,
+            "visit_reason": <string>
+        }
+
+        404 Not Found - no such visit exists
+    """
+    user = get_user(request.cookies)
+
+    if user is None:
+        return {"message": "You are not authenticated!"}, 403
+
+    user_id = user["user_id"]
+
+    in_progress = db.get_in_progress_visits()
+    in_progress = list(filter(lambda v: v["ta_id"] == user_id, in_progress))
+
+    if len(in_progress) == 0:
+        return {"message": "You have no in-progress visits."}, 404
+
+    visit = in_progress[0]
+    student = db.lookup_identifier(visit["student_id"])
+
+    return {
+        "id": visit["student_id"],
+        "username": student["ubit"],
+        "pn": student["person_num"],
+        "preferred_name": student["preferred_name"],
+        "visitID": visit["visit_id"],
+        "visit_reason": visit["student_visit_reason"]
+    }
 
 @blueprint.route("/help-a-student", methods=["POST"])
 @min_level("ta")

client/src/assets/css/base.css

@@ -1,5 +1,5 @@
 :root {
-    --accent-color: #6155F5;
+    --accent-color: #0461cf;
     --bg-color: #FFFFFF;
 }
 
@@ -63,7 +63,7 @@ html {
 }
 
 h1 {
-    font-size: 3.2rem;
+    font-size: 2.2rem;
 }
 
 header {
@@ -98,7 +98,7 @@ header {
 }
 
 #site-header {
-    height: 14vh;
+    height: 10vh;
     background-color: var(--accent-color);
     color: white;
     box-shadow: 1px 1px 4px gray;
@@ -163,7 +163,7 @@ input {
 
 .modal, .small-modal {
     margin: auto;
-    padding: 64px;
+    padding: 6%;
     border: 2px solid #B9B9B9;
     border-radius: 10px;
     flex-direction: column;
@@ -178,4 +178,9 @@ input {
     border-radius: 10px;
     border: 2px solid #D9D9D9;
     padding: 8px;
+}
+
+.button-container {
+    display: flex;
+    gap: 4px;
 }

client/src/assets/css/student-queue.css

@@ -30,8 +30,8 @@
     margin-bottom: 8px;
 }
 
-#exit-queue {
-    width: 30%;
+.wide-button {
+    width: 20rem;
 }
 
 #student-visit-reason {

client/src/components/ConfirmationDialog.vue

@@ -36,12 +36,19 @@ defineExpose({show: show, hide: hide})
 
 dialog {
   margin: auto;
-  padding: 64px;
+  padding: 3%;
   border: 2px solid #B9B9B9;
   border-radius: 10px;
   flex-direction: column;
   gap: 8px;
   display: flex;
 }
 
+@media screen and (max-width: 992px) {
+    dialog {
+        transform: scale(90%);
+        padding: 6%;
+    }
+}
+
 </style>

client/src/pages/Home.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 
 import {useRouter} from "vue-router";
+import {ref} from "vue";
 
 const dev: boolean = import.meta.env.DEV
 
 const router = useRouter()
 
+const autolabLink = ref<HTMLAnchorElement>();
+
 </script>
 
 <template>
   <div id="login-buttons">
-
-    <button class="login-button" id="autolab-login">Login with Autolab</button>
+    <a ref="autolabLink" href="/api/authorize" hidden>Login with Autolab</a>
+    <button class="login-button" id="autolab-login" @click="autolabLink?.click()">Login with Autolab</button>
 
     <button v-if="dev" class="login-button" id="dev-login" @click="router.push('/dev-login')">Dev Login</button>
   </div>

client/src/pages/InstructorQueue.vue

@@ -13,13 +13,16 @@ const router = useRouter()
 
 const taName = ref<string>("");
 
+const courseManager = ref<boolean>(false);
+
 fetch("/api/me").then(res => {
   if (!res.ok) {
     router.push("/")
   }
   return res.json()
 }).then(data => {
   taName.value = data["preferred_name"]
+  courseManager.value = data["course_role"] == 'instructor' || data["course_role"] == 'admin'
 })
 
 function getQueue() {
@@ -123,11 +126,33 @@ function removeStudent() {
 
 const editInfo = ref<typeof EditInfo>();
 
+function getInProgressVisit() {
+  fetch("/api/restore-visit").then(res => {
+    if (!res.ok) {
+      throw new Error("No in-progress visit found.")
+    }
+    return res.json()
+  }).then(data => {
+    visitInfo.value = data
+    visitDialog.value?.show()
+  }).catch(() => {})
+}
+
+getInProgressVisit()
+
+function signOut() {
+  fetch("/api/signout", { method: "POST" }).then(res => {
+    if (res.ok) {
+      router.push("/")
+    }
+  })
+}
+
 </script>
 
 <template>
 
-  <Visit ref="visitDialog" :visit_info="visitInfo"/>
+  <Visit ref="visitDialog" :visit_info="visitInfo" @close="getInProgressVisit"/>
 
   <ConfirmationDialog @open="resetForceEnqueueDialog" ref="forceEnqueueDialog">
     <label for="force-enqueue">Student Identifier (UBITName or Person Number)</label><br/>
@@ -175,9 +200,10 @@ const editInfo = ref<typeof EditInfo>();
       <div id="buttons-l">
         <button @click="editInfo?.show()">Edit My Info</button>
         <button>Clock In</button>
+        <button id="signout" @click="signOut">Sign Out</button>
       </div>
       <div id="buttons-r">
-        <button id="manage-course-button">Manage Course</button>
+        <button v-show="courseManager" id="manage-course-button">Manage Course</button>
         <button @click="forceEnqueueDialog?.show()" id="enqueue-dialog-button">Enqueue Student</button>
         <button @click="clearQueueDialog?.show()" id="clear-queue-dialog-button" class="danger">Clear Queue</button>
       </div>

client/src/pages/StudentQueue.vue

@@ -88,6 +88,14 @@ function updateReason() {
 
 const preferredNameUpdate = ref<typeof ConfirmationDialog>();
 
+function signOut() {
+  fetch("/api/signout", { method: "POST" }).then(res => {
+    if (res.ok) {
+      router.push("/")
+    }
+  })
+}
+
 </script>
 
 <template>
@@ -102,7 +110,7 @@ const preferredNameUpdate = ref<typeof ConfirmationDialog>();
       <label for="self-dequeue-reason">Why are you leaving the queue?</label>
       <textarea ref="selfDequeueReason" id="self-dequeue-reason" class="modal-big-text" required></textarea>
     </div>
-    <div>
+    <div class="button-container">
       <button @click="leaveQueueDialog?.hide()" id="close-dequeue-dialog">Nevermind, return to queue.</button>
       <button @click="leaveQueue" id="submit-self-dequeue" class="important">End Visit</button>
     </div>
@@ -139,7 +147,8 @@ const preferredNameUpdate = ref<typeof ConfirmationDialog>();
       </div>
     </div>
     <div class="queue-section columns all-centered">
-      <button :disabled="!enqueued" @click="leaveQueueDialog?.show()" id="exit-queue" class="danger">Exit Queue</button>
+      <button :disabled="!enqueued" @click="leaveQueueDialog?.show()" class="wide-button danger">Exit Queue</button>
+      <button class="wide-button">Sign Out {{ enqueued ? "(will not remove you from queue)" : "" }}</button>
     </div>
   </div>