From 4978499c661d76048eacabafef23acf7059660dc Mon Sep 17 00:00:00 2001
From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com>
Date: Fri, 5 Apr 2024 13:59:50 +0200
Subject: [PATCH] Added user profile in /profile
---
.../src/components/icons/default-avatar.svg | 7 +
.../src/frontend/src/router/index.js | 5 +
.../src/frontend/src/views/ProfileView.vue | 169 ++++++++++++++++++
3 files changed, 181 insertions(+)
create mode 100644 FullstackProsjekt/src/frontend/src/components/icons/default-avatar.svg
create mode 100644 FullstackProsjekt/src/frontend/src/views/ProfileView.vue
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/default-avatar.svg b/FullstackProsjekt/src/frontend/src/components/icons/default-avatar.svg
new file mode 100644
index 0000000..21494c0
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/icons/default-avatar.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <circle cx="12" cy="6" r="4" fill="#242F40"/> <path d="M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z" fill="#242F40"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 80e8d92..8db72f9 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -57,6 +57,11 @@ const router = createRouter({
component: EditQuizView,
params: true
},
+ {
+ path: '/profile',
+ name: 'profile',
+ component: () => import('../views/ProfileView.vue')
+ },
]
})
diff --git a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
new file mode 100644
index 0000000..37a24ae
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
@@ -0,0 +1,169 @@
+<template>
+ <body>
+ <div class="profile">
+ <!-- User information section -->
+ <section class="user-info">
+ <h2>User Profile</h2>
+ <div class="user-details">
+ <Svg class="profile-pic" name="default-avatar"/>
+ <!-- <img :src="user.avatar" alt="User Avatar"> -->
+ <div>
+ <h3>{{ user.username }}</h3>
+ <p>{{ user.email }}</p>
+ <p>Member since {{ user.memberSince }}</p>
+ </div>
+ </div>
+ </section>
+
+ <!-- Quizzes created by the user -->
+ <section class="user-quizzes">
+ <h2>My Quizzes</h2>
+ <div v-if="userQuizzes.length === 0">
+ <p>No quizzes created yet.</p>
+ </div>
+ <div v-else>
+ <div class="quiz" v-for="quiz in userQuizzes" :key="quiz.id">
+ <h3>{{ quiz.title }}</h3>
+ <p>{{ quiz.description }}</p>
+ <!-- Add more details about each quiz as needed -->
+ </div>
+ </div>
+ </section>
+
+ <section class="progress-tracking">
+ <h2>Progress Tracking</h2>
+ <div v-if="quizAttempts.length === 0">
+ <p>No quiz attempts yet.</p>
+ </div>
+ <div v-else>
+ <div class="quiz-attempt" v-for="attempt in quizAttempts" :key="attempt.id">
+ <h3>{{ attempt.quizTitle }}</h3>
+ <p>Score: {{ attempt.score }}</p>
+ <p>Date: {{ attempt.date }}</p>
+ <!-- Add more details about each quiz attempt as needed -->
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Other profile-related features -->
+ <section class="profile-options">
+ <h2>Profile Options</h2>
+ <ul>
+ <li><router-link to="/edit-profile">Edit Profile</router-link></li>
+ <li><router-link to="/change-password">Change Password</router-link></li>
+ <li><router-link to="/overviewQuiz">Create quiz</router-link></li>
+ </ul>
+ </section>
+ </div>
+ </body>
+</template>
+
+<script>
+import Svg from "@/assets/Svg.vue";
+
+export default {
+ components: {Svg},
+ data() {
+ return {
+ user: {
+ username: 'JohnDoe',
+ email: 'johndoe@example.com',
+ avatar: '@/components/photos/developers/MadJon.png',
+ memberSince: 'May 2024'
+ },
+ userQuizzes: [
+ {
+ id: 1,
+ title: 'Math Quiz',
+ description: 'Test your math skills with this quiz'
+ },
+ {
+ id: 2,
+ title: 'Science Quiz',
+ description: 'Explore various science topics in this quiz'
+ }
+ ]
+ }
+ },
+ computed: {
+ quizAttempts() {
+ // Mock data for quiz attempts (replace with actual data)
+ return [
+ { id: 1, quizTitle: 'Math Quiz', score: '80%', date: '2024-04-05' },
+ { id: 2, quizTitle: 'Science Quiz', score: '90%', date: '2024-04-04' }
+ // Add more quiz attempt objects as needed
+ ];
+ }
+ }
+};
+</script>
+
+<style scoped>
+.profile {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 30px;
+}
+
+.profile-pic{
+ height: 150px;
+ width: 150px;
+ margin-right: 5vh;
+}
+
+.user-info, .user-quizzes, .profile-options {
+ margin-bottom: 40px;
+}
+
+.user-details {
+ display: flex;
+ align-items: center;
+}
+
+.user-details img {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ margin-right: 20px;
+}
+
+.user-details div {
+ flex: 1;
+}
+
+.user-quizzes .quiz {
+ border: 1px solid #ccc;
+ background-color: #d7d7d7 ;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 10px;
+ cursor: pointer;
+}
+
+.profile-options ul {
+ list-style: none;
+ padding: 0;
+}
+
+.profile-options ul li {
+ margin-bottom: 10px;
+}
+
+.profile-options ul li a {
+ text-decoration: none;
+ color: #CCA43B;
+}
+
+.progress-tracking {
+ margin-bottom: 40px;
+}
+
+.progress-tracking .quiz-attempt {
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 10px;
+}
+
+</style>
--
GitLab