From 49a167fb6862abda24830827adecd0cb17a14920 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Fri, 24 Jan 2025 07:56:58 -0500
Subject: [PATCH] Added whiteboard view.

---
 .../classroom_compliance/EntriesTable.vue     | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/src/apps/classroom_compliance/EntriesTable.vue b/app/src/apps/classroom_compliance/EntriesTable.vue
index 18c9e1c..49ee342 100644
--- a/app/src/apps/classroom_compliance/EntriesTable.vue
+++ b/app/src/apps/classroom_compliance/EntriesTable.vue
@@ -19,9 +19,15 @@ const props = defineProps<{
 }>()
 const apiClient = new ClassroomComplianceAPIClient(authStore)
 
+enum TableView {
+  FULL = "Full",
+  GRADING = "Grading",
+  WHITEBOARD = "Whiteboard"
+}
+
 const students: Ref<EntriesResponseStudent[]> = ref([])
 const sortingChoice: Ref<string> = ref('name')
-const gradingView = ref(false)
+const selectedView: Ref<TableView> = ref(TableView.FULL)
 
 const lastSaveState: Ref<string | null> = ref(null)
 const lastSaveStateTimestamp: Ref<number> = ref(0)
@@ -207,32 +213,39 @@ function addAllEntriesForDate(dateStr: string) {
         <option value="desk">Sort by Desk</option>
       </select>
 
-      <input type="checkbox" id="grading-view-checkbox" v-model="gradingView" />
-      <label for="grading-view-checkbox" style="display: inline">Grading View</label>
+      <select v-model="selectedView">
+        <option :value="TableView.FULL">Full View</option>
+        <option :value="TableView.GRADING">Grading View</option>
+        <option :value="TableView.WHITEBOARD">Whiteboard View</option>
+      </select>
     </div>
 
-    <table class="entries-table" :class="{ 'entries-table-grading-view': gradingView }">
+    <table class="entries-table" :class="{ 'entries-table-reduced-view': selectedView !== TableView.FULL }">
       <thead>
         <tr>
           <th>Student</th>
           <th v-if="assignedDesks">Desk</th>
-          <DateHeaderCell v-for="date in gradingView ? [] : dates" :key="date" :date-str="date"
+          <DateHeaderCell v-for="date in selectedView === TableView.FULL ? dates : []" :key="date" :date-str="date"
             @add-all-entries-clicked="addAllEntriesForDate(date)" />
-          <th>Score</th>
+          <th v-if="selectedView !== TableView.WHITEBOARD">Score</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="student in students" :key="student.id">
+          <!-- Student's name: -->
           <td :class="{ 'student-removed': student.removed }">
             <RouterLink :to="'/classroom-compliance/classes/' + classId + '/students/' + student.id"
               class="student-link">
               <span v-text="student.name"></span>
             </RouterLink>
           </td>
+          <!-- Desk Number: -->
           <td v-if="assignedDesks" v-text="student.deskNumber"></td>
-          <EntryTableCell v-for="(entry, date) in gradingView ? [] : student.entries" :key="date"
+          <!-- A cell for each entry in the table's date range: -->
+          <EntryTableCell v-for="(entry, date) in selectedView === TableView.FULL ? student.entries : []" :key="date"
             v-model="student.entries[date]" :date-str="date" :last-save-state-timestamp="lastSaveStateTimestamp" />
-          <StudentScoreCell :score="student.score" />
+          <!-- Score cell: -->
+          <StudentScoreCell :score="student.score" v-if="selectedView !== TableView.WHITEBOARD" />
         </tr>
       </tbody>
     </table>
@@ -245,7 +258,7 @@ function addAllEntriesForDate(dateStr: string) {
   width: 100%;
 }
 
-.entries-table-grading-view {
+.entries-table-reduced-view {
   width: auto;
   max-width: 100%;
 }