InstructorQueue.vue

<script setup lang="ts">

import QueueEntry from "@/components/instructor/QueueEntry.vue";
import {nextTick, ref} from "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/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()

const taName = ref<string>("");

const courseManager = ref<boolean>(false);

const error = ref<typeof Alert>();

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() {
  fetch("/api/get-queue").then(res => {
    return res.json()
  }).then(data => {
    students.value = data
  })

  fetch("/api/on-site").then(res => {
    return res.json()
  }).then(data => {
    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);
}

poll();

const forceEnqueueDialog = ref<typeof ConfirmationDialog>();
const forceEnqueueEntry = ref('');
const forceEnqueueErrorMessage = ref('');


function submitForceEnqueue() {
  fetch("/api/enqueue-ta-override", {
    method: "POST",
    body: JSON.stringify({"identifier": forceEnqueueEntry.value}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (!res.ok) {
      return res.json().then(json => {
        throw new Error(json["message"]);
      })
    }
    forceEnqueueDialog.value?.hide();
    getQueue();
    return res.json()
  }).then(data => {
    forceEnqueueErrorMessage.value = data["message"]
  }).catch(e => {
    error.value?.setError(e.message)
    forceEnqueueDialog.value?.hide();
  })
}

function enqueueStudent(student: number) {
  console.log("Student: ", student)
  fetch("/api/enqueue-ta-override", {
    method: "POST",
    body: JSON.stringify({"identifier": student}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (!res.ok) {
      return res.json().then(json => {
        throw new Error(json["message"])
      })
    }
    getQueue();
  }).catch(e => {
    error.value?.setError(e.message);
  })
}

const forceEnqueueMessageBox = ref<HTMLInputElement>();

function resetForceEnqueueDialog() {
  forceEnqueueEntry.value = "";
  forceEnqueueErrorMessage.value = ``;
}

const visitInfo = ref({})
const visitDialog = ref<typeof Visit>();

function callStudent(id: number) {

  fetch("/api/help-a-student", {
    method: "POST",
    body: JSON.stringify({"id": id}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (!res.ok) {
      return res.json().then(json => {
        throw new Error(json["message"]);
      })
    }
    return res.json()
  }).then(data => {
    visitInfo.value = data;
    visitDialog.value?.show();
  }).catch(e => {
    error.value?.setError(e.message);
  })
}

const clearQueueDialog = ref<typeof ConfirmationDialog>();

function clearQueue() {
  fetch("/api/clear-queue", {
    method: "DELETE"
  }).then(res => {
    if (!res.ok) {
      return res.json().then(json => {
        throw new Error(json["message"])
      })
    }
    error.value?.setMessage("Cleared the queue.")
    clearQueueDialog.value?.hide();
    getQueue();
  }).catch(e => {
    clearQueueDialog.value?.hide();
    error.value?.setError(e.message)
  })
}


const removeStudentDialog = ref<typeof ConfirmationDialog>();
let removeStudentId: number | undefined = undefined;
const removeStudentReason = ref("");

function showRemoveStudentDialog(id: number) {
  removeStudentId = id;
  removeStudentDialog.value?.show();
}

function removeStudent() {
  fetch("/api/remove-from-queue", {
    method: "POST",
    body: JSON.stringify({"reason": removeStudentReason.value, "user_id": removeStudentId}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (res.ok) {
      removeStudentDialog.value?.hide();
      removeStudentReason.value = "";
      removeStudentId = undefined;
      getQueue();
    } else {
      throw new Error("failed to remove student from queue")
    }
  }).catch(e => {
    error.value?.setError("Failed to remove student from queue.")
  })
}

const deactivateStudentDialog = ref<typeof ConfirmationDialog>();
let deactivateStudentId: number | undefined = undefined;

function showDeactivateStudentDialog(id: number) {
  deactivateStudentId = id;
  deactivateStudentDialog.value?.show()
}

function deactivateStudent() {
  fetch("/api/deactivate", {
    method: "PATCH",
    body: JSON.stringify({"user_id": deactivateStudentId}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (res.ok) {
      deactivateStudentDialog.value?.hide();
      deactivateStudentId = undefined;
      getQueue();
    } else {
      throw new Error("failed to deactivate student")
    }
  }).catch(e => {
    error.value?.setError("Failed to deactivate student")
  })
}

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(() => {
    visitDialog.value?.hide()
  })
}

function signOut() {
  fetch("/api/signout", { method: "POST" }).then(res => {
    if (res.ok) {
      router.push("/")
    }
  })
}

function moveToEnd(id: number) {
  fetch("/api/move-to-end", {
    method: "PATCH",
    body: JSON.stringify({"user_id": id}),
    headers: {"Content-Type": "application/json"}
  }).then(res => {
    if (res.ok) {
      getQueue()
    }
  })
}

// stop timeout when leaving queue so requests don't get spammed
router.beforeEach((to, from, next) => {
  clearTimeout(pollTimeout);

  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(); } "/>

  <ConfirmationDialog @open="() => { resetForceEnqueueDialog(); nextTick(() => forceEnqueueMessageBox?.focus())}" @enter="submitForceEnqueue" ref="forceEnqueueDialog">
    <label for="force-enqueue">Student Identifier (UBITName or Person Number)</label><br/>
    <input v-model="forceEnqueueEntry" autofocus ref="forceEnqueueMessageBox" type="text" id="force-enqueue" class="flex" name="force-enqueue">

    <div class="input-modal-container">
      <button id="close-enqueue-dialog" @click="forceEnqueueDialog?.hide()" class="no-grow">Cancel</button>
      <button id="submit-force-enqueue" @click="submitForceEnqueue" class="no-grow important">Submit</button>
    </div>

    <p id="enqueue-error-message">{{ forceEnqueueErrorMessage }}</p>
  </ConfirmationDialog>

  <ConfirmationDialog ref="clearQueueDialog">
    <p><strong>Are you sure?</strong></p>
    <p>If you clear the queue, <strong>all students</strong> will permanently lose their position.</p>
    <div class="input-modal-container">
      <button @click="clearQueueDialog?.hide()" id="clear-queue-cancel">No, keep everyone's position in the queue.
      </button>
      <button @click="clearQueue" id="clear-queue-confirm" class="danger">Yes, clear the queue.</button>
    </div>
    <p id="clear-queue-error-message"></p>
  </ConfirmationDialog>

  <ConfirmationDialog ref="removeStudentDialog">
      <p><strong>Are you sure?</strong> This student will permanently lose their position in the queue.</p>
      <br/>
      <label for="remove-student-reason">Reason</label>
      <textarea v-model="removeStudentReason" class="modal-big-text" id="remove-student-reason" placeholder="Why is this student being removed?" required></textarea>
      <div class="input-modal-container">
        <button @click="removeStudentDialog?.hide()" id="remove-student-cancel">No, keep this student in the queue.</button>
        <button @click="removeStudent" id="remove-student-confirm" class="danger">Yes, remove this student.</button>
      </div>
  </ConfirmationDialog>

  <ConfirmationDialog ref="deactivateStudentDialog">
    <p>
      <strong>Are you sure?</strong>
    </p>
    <p>This student will not be able to rejoin the queue on their own until they swipe.</p>
    <div class="input-modal-container">
      <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"/>

  <Alert ref="error"/>

  <div id="instructor-queue">
    <div class="queue-section">
      <h2 id="welcome-text">Hello, {{ taName }}!</h2>
      <h2 id="student-count-text">{{ students?.length }} student{{ students?.length !== 1 ? "s" : "" }} in the queue.</h2>
    </div>
    <div id="queue-buttons" class="queue-section">
      <div id="buttons-l">
        <button @click="router.push('/manage')" v-show="courseManager" id="manage-course-button">Manage Course</button>
        <button @click="editInfo?.show()">Edit My Info</button>
        <button id="signout" @click="signOut">Sign Out</button>
      </div>
      <div id="buttons-r">
        <button @click="error?.setError('Not Implemented')" >Clock In</button>
        <button @click="forceEnqueueDialog?.show()" id="enqueue-dialog-button" class="important">Enqueue Student</button>
        <button @click="clearQueueDialog?.show()" id="clear-queue-dialog-button" class="danger">Clear Queue</button>
      </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">
        <QueueEntry v-for="student in students" :name="student['preferred_name']" :ubit="student['ubit']"
                    :id="student['id']"
                    @call-student="callStudent"
                    @remove-student="showRemoveStudentDialog"
                    @move-to-end="moveToEnd"
        />
      </div>
    </div>
    <div v-if="onSite.length > 0">
      <h2>On Site</h2>
      <div class="queue-container queue-section">
        <OnSiteEntry v-for="student in onSite" :name="student['preferred_name']" :ubit="student['ubit']"
                    :id="student['id']"
                    @enqueue-student="enqueueStudent"
                    @remove-student="showDeactivateStudentDialog"
        />
      </div>
    </div>

  </div>
</template>

<style scoped>
@import "../assets/css/instructor-queue.css";
</style>