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

feat: thema's worden gefetched van de api

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-20 11:27:55 +01:00
parent 03a9e513a8
commit 0d1ed55001
3 changed files with 60 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/components/BrowseThemes.vue
View file

@ -1,54 +1,39 @@
<script setup lang="ts">
// This component contains a list with all themes and will be shown on a student's and teacher's homepage.
import ThemeCard from "@/components/ThemeCard.vue";
const cards = [
{
key: "1",
title: "Card 1",
description: "This is card 1",
image: "https://via.placeholder.com/150",
},
{
key: "2",
title: "Card 2",
description: "This is card 2",
image: "https://via.placeholder.com/150",
},
{
key: "3",
title: "Card 3",
description: "This is card 3",
image: "https://via.placeholder.com/150",
},
{
key: "4",
title: "Card 4",
description: "This is card 4",
image: "https://via.placeholder.com/150",
},
];
import {onMounted, ref} from "vue";
const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
const fetchThemes = async () => {
try {
const response = await fetch("http://localhost:3000/api/theme");
cards.value = await response.json();
} catch (error) {
console.error("Error fetching themes:", error);
}
};
onMounted(fetchThemes);
</script>
<template>
<v-container>
<v-row>
<v-col
v-for="(card, index) in cards"
:key="index"
v-for="card in cards"
:key="card.key"
cols="12"
sm="6"
md="4"
lg="3"
lg="4"
class="d-flex"
>
<ThemeCard
:path="card.key"
:title="card.title"
:description="card.description"
:image="card.image"
/>
<ThemeCard
:path="card.key"
:title="card.title"
:description="card.description"
:image="card.image"
class="fill-height"
/>
</v-col>
</v-row>
</v-container>