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

feat: submit knop om de code in te versturen

Browse source
This commit is contained in:
laurejablonski 2025-03-29 10:23:34 +01:00
parent 729c3f6972
commit 87974bbfe5
1 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
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 } from "vue";
import { validate, version } from "uuid"; import { validate, version } from "uuid";
const { t } = useI18n(); const { t } = useI18n();
const role: String = authState.authState.activeRole!; const role: String = authState.authState.activeRole!;
// TODO : temp data until frontend controllers are ready
type Teacher = { type Teacher = {
username: string; username: string;
firstName: string; firstName: string;
@ -44,19 +45,24 @@
const classes: Array<Class> = [class01, class02, class03]; const classes: Array<Class> = [class01, class02, class03];
const valid = ref(false); // handle the class join requests
const code = ref<string>(""); const code = ref<string>("");
// the code needs to be formatted as v4 to be valid
// these rules are used to display a message to the user if they use a code that has an invalid format
const codeRules = [ const codeRules = [
(value: string | undefined) => { (value: string | undefined) => {
if (value !== undefined && validate(value) && version(value) === 4) return true; if (value !== undefined && validate(value) && version(value) === 4) return true;
return "Invalid format."; return "Invalid format.";
}, },
]; ];
watch(code, (newValue) => { // submitting a code will send a request if the code is valid
const submitCode = () => {
if (code.value !== undefined && validate(code.value) && version(code.value) == 4) { if (code.value !== undefined && validate(code.value) && version(code.value) == 4) {
console.log("Code changed:", newValue); // TODO: temp function until frontend controllers are ready
console.log("Code submitted:", code.value);
} }
}); }
// handle dialog for showing members of a class // handle dialog for showing members of a class
const dialog = ref(false); const dialog = ref(false);
@ -126,15 +132,25 @@
<div class="join"> <div class="join">
<h1>{{ t("joinClass") }}</h1> <h1>{{ t("joinClass") }}</h1>
<p>{{ t("JoinClassExplanation") }}</p> <p>{{ t("JoinClassExplanation") }}</p>
<v-form v-model="valid"> <v-sheet width="400">
<v-text-field <v-form @submit.prevent>
label="CODE" <v-text-field
v-model="code" label="CODE"
:rules="codeRules" v-model="code"
variant="outlined" placeholder="XXXXXXXX-XXXX-4XXX-XXXX-XXXXXXXXXXXX"
max-width="400px" :rules="codeRules"
></v-text-field> variant="outlined"
</v-form> ></v-text-field>
<v-btn
class="mt-4"
style="background-color: #f6faf2"
type="submit"
@click="submitCode"
block
>Submit</v-btn
>
</v-form>
</v-sheet>
</div> </div>
</div> </div>
</main> </main>