Added Today View and show message with week info when in grading view.

app/src/apps/classroom_compliance/EntriesTable.vue

@@ -22,7 +22,8 @@ const apiClient = new ClassroomComplianceAPIClient(authStore)
 enum TableView {
   FULL = "Full",
   GRADING = "Grading",
-  WHITEBOARD = "Whiteboard"
+  WHITEBOARD = "Whiteboard",
+  TODAY = "Today"
 }
 
 const students: Ref<EntriesResponseStudent[]> = ref([])
@@ -55,6 +56,12 @@ onMounted(async () => {
     }
     saveSortPreference()
   })
+  // If the user selects "Today View", forcibly load the current week, so they'll only see today.
+  watch(selectedView, () => {
+    if (selectedView.value === TableView.TODAY) {
+      showThisWeek()
+    }
+  })
   attemptSortByStoredPreference()
 })
 
@@ -185,6 +192,19 @@ async function discardEdits() {
   }
 }
 
+function getVisibleDates(): string[] {
+  if (selectedView.value === TableView.FULL) return dates.value
+  if (selectedView.value === TableView.TODAY) {
+    const today = new Date()
+    today.setUTCHours(0, 0, 0, 0)
+    const todayStr = today.toISOString().substring(0, 10)
+    for (const date of dates.value) {
+      if (date === todayStr) return [date]
+    }
+  }
+  return []
+}
+
 function addAllEntriesForDate(dateStr: string) {
   for (let i = 0; i < students.value.length; i++) {
     const student = students.value[i]
@@ -198,9 +218,10 @@ function addAllEntriesForDate(dateStr: string) {
 <template>
   <div>
     <div class="button-bar">
-      <button type="button" @click="showPreviousWeek">Previous Week</button>
+      <button type="button" @click="showPreviousWeek" :disabled="selectedView === TableView.TODAY">Previous
-      <button type="button" @click="showThisWeek">This Week</button>
+        Week</button>
-      <button type="button" @click="showNextWeek">Next Week</button>
+      <button type="button" @click="showThisWeek" :disabled="selectedView === TableView.TODAY">This Week</button>
+      <button type="button" @click="showNextWeek" :disabled="selectedView === TableView.TODAY">Next Week</button>
       <button type="button" @click="saveEdits" :disabled="!entriesChangedSinceLastSave">
         Save
       </button>
@@ -217,15 +238,20 @@ function addAllEntriesForDate(dateStr: string) {
         <option :value="TableView.FULL">Full View</option>
         <option :value="TableView.GRADING">Grading View</option>
         <option :value="TableView.WHITEBOARD">Whiteboard View</option>
+        <option :value="TableView.TODAY">Today View</option>
       </select>
     </div>
 
+    <p v-if="selectedView === TableView.GRADING">
+      Grading for the week from {{ fromDate.toLocaleDateString() }} to {{ toDate.toLocaleDateString() }}.
+    </p>
+
     <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 selectedView === TableView.FULL ? dates : []" :key="date" :date-str="date"
+          <DateHeaderCell v-for="date in getVisibleDates()" :key="date" :date-str="date"
             @add-all-entries-clicked="addAllEntriesForDate(date)" />
           <th v-if="selectedView !== TableView.WHITEBOARD">Score</th>
         </tr>