andrew
/
teacher-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added whiteboard view.
Build and Test App / Build-and-test-App (push) Successful in 33s Details

This commit is contained in:
Andrew Lalis 2025-01-24 07:56:58 -05:00
parent 3e6f91185e
commit 49a167fb68
1 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/src/apps/classroom_compliance/EntriesTable.vue
View File

@ -19,9 +19,15 @@ const props = defineProps<{
}>() }>()
const apiClient = new ClassroomComplianceAPIClient(authStore) const apiClient = new ClassroomComplianceAPIClient(authStore)
enum TableView {
FULL = "Full",
GRADING = "Grading",
WHITEBOARD = "Whiteboard"
}
const students: Ref<EntriesResponseStudent[]> = ref([]) const students: Ref<EntriesResponseStudent[]> = ref([])
const sortingChoice: Ref<string> = ref('name') 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 lastSaveState: Ref<string | null> = ref(null)
const lastSaveStateTimestamp: Ref<number> = ref(0) const lastSaveStateTimestamp: Ref<number> = ref(0)
@ -207,32 +213,39 @@ function addAllEntriesForDate(dateStr: string) {
<option value="desk">Sort by Desk</option> <option value="desk">Sort by Desk</option>
</select> </select>
<input type="checkbox" id="grading-view-checkbox" v-model="gradingView" /> <select v-model="selectedView">
<label for="grading-view-checkbox" style="display: inline">Grading View</label> <option :value="TableView.FULL">Full View</option>
<option :value="TableView.GRADING">Grading View</option>
<option :value="TableView.WHITEBOARD">Whiteboard View</option>
</select>
</div> </div>
<table class="entries-table" :class="{ 'entries-table-grading-view': gradingView }"> <table class="entries-table" :class="{ 'entries-table-reduced-view': selectedView !== TableView.FULL }">
<thead> <thead>
<tr> <tr>
<th>Student</th> <th>Student</th>
<th v-if="assignedDesks">Desk</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)" /> @add-all-entries-clicked="addAllEntriesForDate(date)" />
<th>Score</th> <th v-if="selectedView !== TableView.WHITEBOARD">Score</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="student in students" :key="student.id"> <tr v-for="student in students" :key="student.id">
<!-- Student's name: -->
<td :class="{ 'student-removed': student.removed }"> <td :class="{ 'student-removed': student.removed }">
<RouterLink :to="'/classroom-compliance/classes/' + classId + '/students/' + student.id" <RouterLink :to="'/classroom-compliance/classes/' + classId + '/students/' + student.id"
class="student-link"> class="student-link">
<span v-text="student.name"></span> <span v-text="student.name"></span>
</RouterLink> </RouterLink>
</td> </td>
<!-- Desk Number: -->
<td v-if="assignedDesks" v-text="student.deskNumber"></td> <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" /> 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> </tr>
</tbody> </tbody>
</table> </table>
@ -245,7 +258,7 @@ function addAllEntriesForDate(dateStr: string) {
width: 100%; width: 100%;
} }
.entries-table-grading-view { .entries-table-reduced-view {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
} }