Fixed #1 and #2

app/src/apps/classroom_compliance/DateHeaderCell.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  dateStr: string
+}>()
+
+defineEmits<{
+  (e: 'addAllEntriesClicked'): void
+}>()
+
+const date = computed(() => getDate(props.dateStr))
+const weekday = computed(() => getWeekday(date.value))
+
+function getDate(dateStr: string): Date {
+  const year = parseInt(dateStr.substring(0, 4), 10)
+  const month = parseInt(dateStr.substring(5, 7), 10)
+  const day = parseInt(dateStr.substring(8, 10), 10)
+  return new Date(year, month - 1, day)
+}
+
+function getWeekday(date: Date): string {
+  const names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  return names[date.getDay()]
+}
+</script>
+<template>
+  <th>
+    <div class="date-header-container">
+      <div class="date-header-button">
+        <span title="Add All Entries" @click="$emit('addAllEntriesClicked')">+</span>
+      </div>
+      <div>
+        <span>{{ weekday }}</span>
+        <br>
+        <span>{{ date.toLocaleDateString() }}</span>
+      </div>
+    </div>
+  </th>
+</template>
+<style scoped>
+.date-header-container {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+.date-header-button {
+  float: right;
+}
+
+.date-header-button:hover {
+  cursor: pointer;
+}
+</style>

app/src/apps/classroom_compliance/EntriesTable.vue

@@ -8,8 +8,10 @@ import {
 } from '@/api/classroom_compliance'
 import { useAuthStore } from '@/stores/auth'
 import { computed, onMounted, ref, type Ref } from 'vue'
-import EntryTableCell from './EntryTableCell.vue'
+import EntryTableCell from '@/apps/classroom_compliance/EntryTableCell.vue'
 import { RouterLink } from 'vue-router'
+import StudentScoreCell from '@/apps/classroom_compliance/StudentScoreCell.vue'
+import DateHeaderCell from '@/apps/classroom_compliance/DateHeaderCell.vue'
 
 const authStore = useAuthStore()
 const props = defineProps<{
@@ -65,16 +67,28 @@ async function showPreviousWeek() {
 }
 
 async function showThisWeek() {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
   // First set the to-date to the next upcoming end-of-week (Friday).
   toDate.value = new Date()
   toDate.value.setHours(0, 0, 0, 0)
-  while (toDate.value.getDay() < 5) {
-    toDate.value.setDate(toDate.value.getDate() + 1)
+  if (today.getDay() >= 1 && today.getDay() <= 5) {
+    // If we're anywhere in the week, shift up to Friday.
+    const dayDiff = 5 - today.getDay()
+    toDate.value.setDate(today.getDate() + dayDiff)
+  } else {
+    // If it's Saturday or Sunday, shift back to the previous Friday.
+    if (today.getDay() === 6) {
+      toDate.value.setDate(today.getDate() - 1)
+    } else {
+      toDate.value.setDate(today.getDate() - 2)
+    }
   }
+
   // Then set the from-date to the Monday of that week.
   fromDate.value = new Date()
   fromDate.value.setHours(0, 0, 0, 0)
-  fromDate.value.setDate(fromDate.value.getDate() - 4)
+  fromDate.value.setDate(toDate.value.getDate() - 4)
   await loadEntries()
 }
 
@@ -118,18 +132,6 @@ async function discardEdits() {
   }
 }
 
-function getDate(dateStr: string): Date {
-  const year = parseInt(dateStr.substring(0, 4), 10)
-  const month = parseInt(dateStr.substring(5, 7), 10)
-  const day = parseInt(dateStr.substring(8, 10), 10)
-  return new Date(year, month - 1, day)
-}
-
-function getWeekday(date: Date): string {
-  const names = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-  return names[date.getDay()]
-}
-
 function addAllEntriesForDate(dateStr: string) {
   for (let i = 0; i < students.value.length; i++) {
     const student = students.value[i]
@@ -159,12 +161,8 @@ function addAllEntriesForDate(dateStr: string) {
         <tr>
           <th>Student</th>
           <th v-if="assignedDesks">Desk</th>
-          <th v-for="date in dates" :key="date">
-            <span>{{ getDate(date).toLocaleDateString() }}</span>
-            <span @click="addAllEntriesForDate(date)">➕</span>
-            <br />
-            <span>{{ getWeekday(getDate(date)) }}</span>
-          </th>
+          <DateHeaderCell v-for="date in dates" :key="date" :date-str="date"
+            @add-all-entries-clicked="addAllEntriesForDate(date)" />
           <th>Score</th>
         </tr>
       </thead>
@@ -178,12 +176,7 @@ function addAllEntriesForDate(dateStr: string) {
           <td v-if="assignedDesks" v-text="student.deskNumber"></td>
           <EntryTableCell v-for="(entry, date) in student.entries" :key="date" v-model="student.entries[date]"
             :date-str="date" :last-save-state-timestamp="lastSaveStateTimestamp" />
-          <td style="text-align: right; padding-right: 0.25em;">
-            <span v-if="student.score" style="font-family: monospace; font-size: large;">
-              {{ (student.score * 100).toFixed(1) }}%
-            </span>
-            <span v-if="!student.score" style="font-size: small; font-style: italic;">No score</span>
-          </td>
+          <StudentScoreCell :score="student.score" />
         </tr>
       </tbody>
     </table>

app/src/apps/classroom_compliance/StudentScoreCell.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  score: number | null
+}>()
+</script>
+<template>
+  <td style="text-align: right; padding-right: 0.25em;">
+    <span v-if="score !== null" style="font-family: monospace; font-size: large;">
+      {{ (score * 100).toFixed(1) }}%
+    </span>
+    <span v-if="score === null" style="font-size: small; font-style: italic;">No score</span>
+  </td>
+</template>