From acbb26a2212e9c5c373c64e4d0c0cadab6cfb875 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Tue, 3 May 2022 13:06:18 +0200
Subject: [PATCH] Added a star system
---
src/components/BaseComponents/RatingModal.vue | 66 ++++++++++++++++++-
src/views/TestView.vue | 3 +
2 files changed, 67 insertions(+), 2 deletions(-)
diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
index 2a441eb..3308389 100644
--- a/src/components/BaseComponents/RatingModal.vue
+++ b/src/components/BaseComponents/RatingModal.vue
@@ -12,7 +12,7 @@
class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
- {{ title }}
+ {{ name }}
</h3>
<button
@click="close()"
@@ -35,9 +35,45 @@
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
- {{ message }}
+ {{ title }}
+ </p>
+ </div>
+ <div class="p-6 space-y-6" >
+ <p class="flex justify-center text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="renterIsReceiverOfRating">
+ Gi en rating til utleieren
+ </p>
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="!renterIsReceiverOfRating">
+ Gi en rating til leieren
</p>
</div>
+
+ <div class="flex items-center justify-center m-8">
+ <svg class="w-5 h-5 text-warn cursor-pointer" :class="rating[0]" @click="setRating(1)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-5 h-5 text-warn cursor-pointer" :class="rating[1]" @click="setRating(2)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-5 h-5 text-warn cursor-pointer" :class="rating[2]" @click="setRating(3)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-5 h-5 text-warn cursor-pointer" :class="rating[3]" @click="setRating(4)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ <svg class="w-5 h-5 cursor-pointer" :class="rating[4]" @click="setRating(5)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
+ </path>
+ </svg>
+ </div>
<!-- Modal footer -->
<div class="rounded-b border-t border-gray-200 dark:border-gray-600">
<!-- Slot: Add any html you want here -->
@@ -51,13 +87,39 @@
<script>
export default {
name: "RatingModal",
+ data(){
+ return{
+ score: 3,
+ comment: "",
+ rating:[
+ "text-warn",
+ "text-warn",
+ "text-warn",
+ "text-gray-300",
+ "text-gray-300"
+ ],
+ };
+ },
props: {
visible: Boolean,
name: String,
title: String,
+ rentID: Number,
+ renterIsReceiverOfRating: Boolean,
},
methods: {
+ setRating(ratingNumber){
+ this.score = ratingNumber;
+ for(let i = 0; i < 6; i++ ){
+ if(i < ratingNumber) {
+ this.rating[i] = "text-warn"
+ }
+ else {
+ this.rating[i] = "text-gray-300"
+ }
+ }
+ },
close() {
this.$emit("close");
},
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index cfb7a5d..708bcb0 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -6,6 +6,9 @@
:visible=show
:name="'Test Testesnes'"
:title="'Hammer '"
+ :renter-is-receiver-of-rating="true"
+ :rent-i-d="123"
+
></RatingModal>
</div>
</template>
--
GitLab