From adfc280df2bbadf2959206382bc22c92eb9ea457 Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 13:28:22 +0200 Subject: [PATCH 1/7] Added alert for LoginView.vue --- FullstackProsjekt/src/frontend/src/views/LoginView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue index 0edf3e3..c3b25c5 100644 --- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue +++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue @@ -22,6 +22,7 @@ export default { username: this.username, password: this.password }).then(response => { + alert(this.username + " is now logged in!") setToken(response.data.jwt); //TODO: check token name }); } catch (error) { -- GitLab From 9303bcfdc7f6a4bbc9d1d541065ac7800774d28e Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 13:46:21 +0200 Subject: [PATCH 2/7] Change layout for SignupView.vue --- .../src/frontend/src/assets/main.css | 4 +++- .../src/frontend/src/views/SignupView.vue | 17 ++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css index f650802..0fdbc41 100644 --- a/FullstackProsjekt/src/frontend/src/assets/main.css +++ b/FullstackProsjekt/src/frontend/src/assets/main.css @@ -141,10 +141,12 @@ select{ padding: 10px; border-radius: 5px; border-color: transparent; - min-width: 160px; font-family: monospace; transition: 0.4s; cursor: pointer; + width: 120px; + height: 50px; + } .submit-btn:hover{ background-color: #a67d0e; diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue index 6137c56..e5d314d 100644 --- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue +++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue @@ -73,9 +73,11 @@ </div> </div> + <div class="submit-section"> <input class="submit-btn" type="submit"/> </div> + </form> </div> </body> @@ -84,7 +86,7 @@ <style> .signupPage { - padding-top: 85px; + padding-top: 10vh; display: flex; justify-content: center; align-items: center; @@ -96,33 +98,30 @@ border-radius: 15px; align-items: center; border-style: solid; - margin: 20px; } .signupBox { - padding: 40px; - min-width: 400px; + padding: 20px; } .password-input { position: relative; display: inline-block; + min-width: 300px; } .showPasswordIcon { position: absolute; top: 50%; - right: 5px; /* Adjust positioning as needed */ + right: 0; transform: translateY(-50%); border: none; background: none; cursor: pointer; } -.submit-section { - display: flex; - justify-content: center; - align-items: center; +.submit-section{ + margin-top: 5vh; } </style> -- GitLab From fffa441ee6a645b9dd8b8094985410fac7d85f1d Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 14:23:02 +0200 Subject: [PATCH 3/7] Change layout for FeedbackView.vue --- .../src/frontend/src/views/FeedbackView.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue index eecbdde..14b3647 100644 --- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue +++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue @@ -72,9 +72,8 @@ export default { <br> <label>Title</label> - <input type="text" required v-model="title" ref="title"/> <br> - <textarea id="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea> + <textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea> </div> </div> <div class="submit-section"> @@ -109,16 +108,16 @@ export default { } -textarea { - margin: 5px; +.comment { padding: 8px; border-radius: 5px; border: none; - min-width: 400px; + min-width: 40vh; height: 100px; background-color: #E5E5E5; } + .submit-section { display: flex; justify-content: center; -- GitLab From b26e12fdcd5b363c2d5b9870adc3ea61037b486f Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 14:40:04 +0200 Subject: [PATCH 4/7] Change layout for FeedbackView.vue --- .../src/frontend/src/views/FeedbackView.vue | 32 ++++++++++++------- .../src/frontend/src/views/LoginView.vue | 1 + 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue index 14b3647..5e3935d 100644 --- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue +++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue @@ -46,6 +46,7 @@ export default { if (formData) { this.name = formData.name; this.email = formData.email; + this.title = formData.title; this.comment = formData.comment; } } @@ -61,24 +62,26 @@ export default { <h1>Feedback</h1> <p>Is there anything you would like to tell us? Comment below!</p> <div class="contactBox"> - <label>Name</label> - <input type="text" required v-model="name" ref="nameInput"/> <br> - <label>Email</label> - <input type="email" required v-model="email" ref="emailInput"/> + <label>Name</label> <br> + <input class="feedback-input" type="text" required v-model="name" ref="nameInput"/> <br> + <label>Email</label> <br> + <input class="feedback-input" type="email" required v-model="email" ref="emailInput"/> <br> <br> <br> <br> - <label>Title</label> - <input type="text" required v-model="title" ref="title"/> <br> + <label>Title</label> <br> + <input class="feedback-input" type="text" required v-model="title" ref="title"/> <br> <textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea> </div> </div> + <div class="submit-section"> <input class="submit-btn" type="submit"/> </div> + </form> </div> </body> @@ -97,7 +100,6 @@ export default { text-align: center; color: #242F40; border-color: transparent; - padding: 20px; border-radius: 15px; align-items: center; border-style: solid; @@ -106,22 +108,30 @@ export default { .contactBox { padding: 30px; } - +.feedback-input{ + width: 50vh; +} .comment { padding: 8px; border-radius: 5px; border: none; - min-width: 40vh; - height: 100px; + width: 50vh; + height: 15vh; background-color: #E5E5E5; } - .submit-section { display: flex; justify-content: center; align-items: center; } + @media (max-width: 700px){ + .feedback-input, + .comment { + width: 90%; /* Adjust the width to fit smaller screens */ + } + } + </style> diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue index c3b25c5..43e1568 100644 --- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue +++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue @@ -96,6 +96,7 @@ export default { .password-input { position: relative; display: inline-block; + min-width: 300px; } -- GitLab From 06d37d02c987e620a690123fe66039bbf2c81518 Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 15:21:24 +0200 Subject: [PATCH 5/7] Change minor layout in edit --- .../components/shared/EditQuestionModel.vue | 2 + .../shared/create-quiz/EditQuizView.vue | 72 ------------------- 2 files changed, 2 insertions(+), 72 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue index 858f0e0..7e6fcbe 100644 --- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue +++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue @@ -42,11 +42,13 @@ export default { <template> <div class="modal-overlay" @click="closeModal"> <div @click.stop class="modal-mask"> + <div class="modal-container"> <div class="question-title"> <h3>Question: </h3> <input v-model="questionText" placeholder="Type your question here"> </div> + <div class="modal-body"> <table class="table"> <thead> diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue index 0d3e916..140a288 100644 --- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue +++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/EditQuizView.vue @@ -162,79 +162,7 @@ async function submitQuestion() { :key="question.id"/> </div> <NewQuestionModel v-if="showNewQuestion" @close="hideNewQuestion" quiz-id="this.quizId"/> - <!-- - <div class="question-table"> - <table class="table"> - <thead> - <tr> - <th scope="col">#</th> - <th scope="col">Question</th> - <th scope="col">Action</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">1</th> - <td>What is Vue?</td> - <td> - <button class="play-btn">View</button> - <button class="edit-btn">Edit</button> - <button class="delete-btn"> Delete</button> - </td> - </tr> - </tbody> - </table> - --> - <!-- - - - <Teleport to="body"> - <NewQuestionModel :show="showNewQuestionModal" @close="destroyModal"> - - <template #header> - <h5> Add New Question</h5> - </template> - - <template #body> - <form> - <div class="mb-3"> - <label for="question" class="form-label">Question</label> <br> - <input type="text" v-model="createdQuestion" class="form-control" id="questionInput"> - </div> - <table class="table"> - <thead> - <tr> - <th scope="col">#</th> - <th scope="col">Answer</th> - <th scope="col">Correct ?</th> - </tr> - </thead> - <tbody> - <tr v-for="(answer, index) in newAnswers"> - <th scope="row">{{answer.id}}</th> - <td> - <input type="text" v-model="answer.answer" id="questionInput"> - </td> - <td> - <input :checked="answer.correct_answer === 1" class="form-check-input" :value="answer.id" @change="handleRadioToggle(answer.id)" type="radio"> - </td> - </tr> - </tbody> - </table> - </form> - </template> - - <template #footer> - <button @click="addNewAnswers" class="add-Btn" v-if="newAnswers.length<4" >+</button> - <button @click="destroyModal" class="close-btn"> Close</button> - <button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button> - </template> - - </NewQuestionModel> - </Teleport> - </div> - --> <div class="footer"> <button @click="newQuestion" class="add-Btn"> Add Question </button> <button class="delete-btn"> DELETE QUIZ </button> -- GitLab From ae9529383f2353b60d658a8aa12de73b235fe2a3 Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 16:02:41 +0200 Subject: [PATCH 6/7] Add new layout to DashboardView.vue quizzes --- .../frontend/src/components/TheWelcome.vue | 2 +- .../src/frontend/src/views/DashboardView.vue | 99 ++++++++++++++----- 2 files changed, 75 insertions(+), 26 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue index d70d363..9b3049b 100644 --- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue +++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue @@ -44,7 +44,7 @@ export default { <div class="space"> </div> <section class="cta"> - <h1> Enroll For Our Various Online Quizzes Anywhere You Are </h1> + <h1> Enroll For Our Various Online Quizzes </h1> <router-link to="/about" class="hero-btn"> About us</router-link> </section> diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue index 7bdb31b..1c4aa56 100644 --- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue +++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue @@ -1,6 +1,59 @@ <script > + import { apiClient } from "@/api.js"; + import router from "@/router/index.js"; + import Svg from "@/assets/Svg.vue"; + import { categoryEnums } from "@/data/categories.js"; + + export default { + components: { Svg }, + props: { + quizId: { + type: Number, + required: true, +}, +}, + data() { + return { + quizTitle: null, + quizDifficulty: null, + quizCategory: null, +}; +}, + mounted() { + this.getQuiz(); +}, + methods: { + async getQuiz() { + console.log('Fetching data for quiz: ', this.quizId); + + try { + const response = await apiClient.get('/quiz/quiz/' + this.quizId); + this.quizTitle = JSON.parse(response.data.title); + this.quizCategory = JSON.parse(response.data.category); + this.quizDifficulty = JSON.parse(response.data.difficulty); +} catch (error) { + // TODO: Proper error handling + console.error('Error retrieving quiz:', error); +} +}, + getIcon(category) { + // Check if the category exists in the enum + if (categoryEnums.includes(category)) { + // Retrieve the icon name from the mapping + return categoryIcons[category] || categoryIcons.Default; +} else { + // If category not found, return the default icon + return categoryIcons.Default; +} +}, + playQuiz() { + router.push({ name: 'playQuiz', params: { quizId: this.quizId } }); +}, +}, +}; </script> + <template> <body class="dashboard"> <div class="top-bar"> @@ -14,32 +67,19 @@ </div> <div class="row"> - <div class="course-col"> - <h3>Quiz 1</h3> - <p>Insert photo </p> - </div> - <div class="course-col"> - <h3>Quiz 2</h3> - <p>Insert photo </p> - </div> - <div class="course-col"> - <h3>Quiz 3</h3> - <p>Insert photo</p> - </div> - </div> + <div class="quiz-col"> + <div class="quiz-header"> + <h3>{{ quizTitle }} Fake quiz name</h3> + <Svg :name="quizCategory" /> - <div class="row"> - <div class="course-col"> - <h3>Quiz 4</h3> - <p>Insert photo </p> - </div> - <div class="course-col"> - <h3>Quiz 5</h3> - <p>Insert photo </p> - </div> - <div class="course-col"> - <h3>Quiz 6</h3> - <p>Insert photo</p> + </div> + <div class="quiz-body"> + <p>Difficulty level: {{ quizDifficulty }}</p> + <p>Category: {{ quizCategory }}</p> + </div> + <div class="quiz-footer"> + <button @click="playQuiz" class="play-btn">Play</button> + </div> </div> </div> @@ -73,6 +113,15 @@ text-align: center; } +.quiz-col{ + flex-basis: 31%; + background: #d7d7d7; + border-radius: 10px; + margin-bottom: 5%; + padding: 20px; + box-sizing: border-box; + transition: 0.5s;} + .create-btn{ text-decoration: none; color: #E5E5E5; -- GitLab From 7da7fd4e07a9ee644cc7690896065f15d1638951 Mon Sep 17 00:00:00 2001 From: Maddy <113420588+MaddyPaddy2001@users.noreply.github.com> Date: Sat, 6 Apr 2024 16:10:50 +0200 Subject: [PATCH 7/7] Add new layout to the quizzes in OverviewQuizView.vue --- FullstackProsjekt/src/frontend/src/assets/main.css | 9 ++++++++- .../src/components/shared/create-quiz/QuizCard.vue | 8 +++++--- .../src/frontend/src/views/OverviewQuizView.vue | 3 --- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css index 0fdbc41..690e042 100644 --- a/FullstackProsjekt/src/frontend/src/assets/main.css +++ b/FullstackProsjekt/src/frontend/src/assets/main.css @@ -4,7 +4,6 @@ body { background-color: #F2F2F2; } - input { padding: 5px; border-radius: 5px; @@ -76,6 +75,14 @@ select{ color: #FFFFFF; border-radius: 10px; } +.play-btn:hover { + background-color: #425575; + transition: 0.4s ; +} +.play-btn:active{ + background-color: #425575; + transition: 0.2s ; +} .edit-btn{ padding: 10px; text-decoration: none; diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue index a56765a..bb4ef37 100644 --- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue +++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/QuizCard.vue @@ -68,9 +68,7 @@ export default { </template> <style> -.overViewQuestion-page{ - padding: 50px; -} + .quiz-header{ display: flex; @@ -89,4 +87,8 @@ export default { padding-left: 25px; padding-right: 25px; } + +.play-btn { + margin-right: 10px; +} </style> \ No newline at end of file diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue index 3ce325d..a72fd5f 100644 --- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue +++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue @@ -79,8 +79,5 @@ export default { justify-content: space-between; } -#quizCard { - width: calc(50% - 10px); -} </style> \ No newline at end of file -- GitLab