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

feat: leerling kan progress van groep zien

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-04 15:12:09 +02:00
parent 195e192598
commit d7688bc54c
5 changed files with 50 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/GroupProgressRow.vue
View file

@ -2,7 +2,7 @@
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import { computed } from "vue";
import type { Language } from "@/data-objects/language.ts";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import {calculateProgress} from "@/utils/assignment-utils.ts";
const props = defineProps<{
groupNumber: number;
@ -12,10 +12,6 @@ const props = defineProps<{
classId: string;
}>();
function calculateProgress(lp: LearningPath): number {
return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
}
const query = useGetLearningPathQuery(
() => props.learningPath,
() => props.language,
@ -30,12 +26,18 @@ const progress = computed(() => {
if (!query.data.value) return 0;
return calculateProgress(query.data.value);
});
const progressColor = computed(() => {
if (progress.value < 50) return "error";
if (progress.value < 80) return "warning";
return "success";
});
</script>
<template>
<v-progress-linear
:model-value="progress"
color="blue-grey"
:color="progressColor"
height="25"
>
<template v-slot:default="{ value }">