diff --git a/package-lock.json b/package-lock.json
index 7204860453587a47cf0ccdc69d8af18e5f94e94d..7c4ac423cf43268ce48510841a9bdcd4477e08dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "trivio",
"version": "0.0.0",
"dependencies": {
+ "axios": "^1.6.8",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
@@ -2471,8 +2472,7 @@
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
- "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
- "dev": true
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
@@ -2502,7 +2502,6 @@
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
- "dev": true,
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
@@ -2513,7 +2512,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
- "dev": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
@@ -2526,8 +2524,7 @@
"node_modules/axios/node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
- "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
- "dev": true
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/balanced-match": {
"version": "1.0.2",
@@ -2897,7 +2894,6 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
- "dev": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
@@ -3280,7 +3276,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
- "dev": true,
"engines": {
"node": ">=0.4.0"
}
@@ -4190,7 +4185,6 @@
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
- "dev": true,
"funding": [
{
"type": "individual",
@@ -5487,7 +5481,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"engines": {
"node": ">= 0.6"
}
@@ -5496,7 +5489,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
diff --git a/package.json b/package.json
index d6ecaae445254dd78beb022e85e072431b5e5270..4d5b3b003f0ebb28d921b92667a4d8f5a94250b8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"format": "prettier --write src/"
},
"dependencies": {
+ "axios": "^1.6.8",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
diff --git a/src/components/TrivioCard.vue b/src/components/TrivioCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d66273868b8a970e4576848e90b80829b48c135
--- /dev/null
+++ b/src/components/TrivioCard.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+const props = defineProps({
+ title: String,
+ image: String,
+ numberOfQuestion: Number,
+ username: String,
+});
+</script>
+
+<template>
+
+
+ <div class="box">
+ <div class="quiz-img">
+ <img src="/src/components/icons/cat.png" alt="Quiz picture">
+ </div>
+ <div class="quiz-info">
+ <div class="title">{{ title }}</div>
+ <div class="under-title">
+ <div class="question">{{ numberOfQuestion }} questions</div>
+ <div class="difficulty">HARD</div>
+ </div>
+ <div class="user-info">
+ <img src="/src/assets/user.svg" alt="Profile picture">
+ <div class="user">{{ username }}</div>
+ <div class="rating">4.3</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+.box {
+ margin-top: 1em;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ width: 14em;
+ height: 18em;
+ background-color: white;
+ border-radius: 10%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #343C6A;
+}
+.quiz-img {
+ width: 100%;
+ max-height: auto;
+ overflow: hidden;
+}
+
+.quiz-img img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ border-top-left-radius: 10%;
+ border-top-right-radius: 10%;
+}
+
+.quiz-info {
+ padding: 0.5em;
+ margin-bottom: auto;
+}
+
+.quiz-info img {
+ width: 1.5em;
+ border-radius: 50%;
+}
+
+.title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 16px;
+}
+
+.question {
+ font-size: 13px;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+}
+
+.under-title {
+ display: flex;
+ align-items: center;
+}
+
+.rating {
+ width: 30px;
+ height: 30px;
+ background-color: #5E5CE5;
+ color: white;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 30px;
+ font-size: 10px;
+ margin-left: auto;
+}
+
+.difficulty {
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ color: #5E5CE5;
+ font-size: 14px;
+ margin-left: auto;
+}
+</style>
diff --git a/src/views/mainpage/MyTriviosView.vue b/src/views/mainpage/MyTriviosView.vue
index 925650177203559ffb6e05bb1c34f65872952414..6d8d88b1913296ec358fda377307a3d39068d5d5 100644
--- a/src/views/mainpage/MyTriviosView.vue
+++ b/src/views/mainpage/MyTriviosView.vue
@@ -1,11 +1,52 @@
<script setup lang="ts">
+import axios from 'axios';
+import { ref, onMounted } from 'vue';
+import TrivioCard from "@/components/TrivioCard.vue";
+
+
+const trivios = ref(null);
+const fetchTrivios = async () => {
+ try {
+ const response = await axios.get('http://localhost:8080/trivios'); // Adjust the API endpoint URL as needed
+ trivios.value = response.data;
+ console.log(response)// Assign the fetched data to the trivios variable
+ console.log(trivios.value)
+ } catch (error) {
+ console.error('Error fetching trivios:', error);
+ }
+};
+
+onMounted(fetchTrivios);
+
</script>
<template>
- <div>This is the MyTrivios-View</div>
+<!--<TrivioCard-->
+<!--title="dogers" image="/src/assets/trivio.svg"></TrivioCard>-->
+
+ <div class="card-container">
+ <TrivioCard
+ v-for="(trivio, index) in trivios"
+ :key="index"
+ :title="trivio.title"
+ :image="trivio.image"
+ :username="trivio.user.username"
+ :number-of-question="trivio.questionList.length"
+ ></TrivioCard>
+ </div>
</template>
<style scoped>
+h1 {
+ color: #5E5CE5;
+ margin-top: 0.5em;
+}
+.card-container {
+ display: flex;
+ flex-wrap: wrap;
+ max-height: 400px; /* Adjust as needed */
+ column-gap: 20px;
+}
-</style>
\ No newline at end of file
+</style>