tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: validatie voor de code die een student stuurt in de frontend

Browse source
This commit is contained in:
laurejablonski 2025-03-29 09:55:36 +01:00
parent f8cdde7d30
commit 729c3f6972
1 changed files with 50 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

101
frontend/src/views/classes/UserClasses.vue
View file

@ -2,6 +2,8 @@
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import authState from "@/services/auth/auth-service.ts"; import authState from "@/services/auth/auth-service.ts";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { validate, version } from "uuid";
const { t } = useI18n(); const { t } = useI18n();
const role: String = authState.authState.activeRole!; const role: String = authState.authState.activeRole!;
@ -42,17 +44,25 @@
const classes: Array<Class> = [class01, class02, class03]; const classes: Array<Class> = [class01, class02, class03];
const code = ref(""); const valid = ref(false);
console.log(code); const code = ref<string>("");
const codeRules = [
(value: string | undefined) => {
if (value !== undefined && validate(value) && version(value) === 4) return true;
return "Invalid format.";
},
];
watch(code, (newValue) => { watch(code, (newValue) => {
console.log("Code changed:", newValue); if (code.value !== undefined && validate(code.value) && version(code.value) == 4) {
console.log("Code changed:", newValue);
}
}); });
// handle dialog for showing members of a class // handle dialog for showing members of a class
const dialog = ref(false); const dialog = ref(false);
const students = ref<Array<string>>([]); const students = ref<Array<string>>([]);
const selectedClass = ref<Class | null>(null); const selectedClass = ref<Class | null>(null);
const openDialog = (c: Class) => { const openDialog = (c: Class) => {
selectedClass.value = c; selectedClass.value = c;
if (selectedClass !== undefined) { if (selectedClass !== undefined) {
@ -64,44 +74,29 @@
<template> <template>
<main> <main>
<h class="title">{{ t("classes") }}</h> <h class="title">{{ t("classes") }}</h>
<div v-if="role === 'student'">
<v-table class="table"> <v-table class="table">
<thead> <thead>
<tr> <tr>
<th class="header">{{ t("classes") }}</th> <th class="header">{{ t("classes") }}</th>
<th class="header">{{ t("members") }}</th> <th class="header">{{ t("members") }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="c in classes" v-for="c in classes"
:key="c.id" :key="c.id"
>
<td>{{ c.displayName }}</td>
<td
class="link"
@click="openDialog(c)"
> >
<td>{{ c.displayName }}</td> {{ c.students.length }}
<td class="link" @click="openDialog(c)">{{ c.students.length }}</td> </td>
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
</div>
<div v-else>
<v-table class="table">
<thead>
<tr>
<th class="header">{{ t("classes") }}</th>
<th class="header">{{ t("members") }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="c in classes"
:key="c.id"
>
<td>{{ c.displayName }}</td>
<td>{{ c.students.length }}</td>
</tr>
</tbody>
</v-table>
</div>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"
width="400" width="400"
@ -127,16 +122,20 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<div class="join"> <div v-if="role === 'student'">
<h1>{{ t("joinClass") }}</h1> <div class="join">
<p>{{ t("JoinClassExplanation") }}</p> <h1>{{ t("joinClass") }}</h1>
<p>{{ t("JoinClassExplanation") }}</p>
<v-text-field <v-form v-model="valid">
label="CODE" <v-text-field
v-model="code" label="CODE"
variant="outlined" v-model="code"
max-width="300px" :rules="codeRules"
></v-text-field> variant="outlined"
max-width="400px"
></v-text-field>
</v-form>
</div>
</div> </div>
</main> </main>
</template> </template>