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)
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%;
}