Added a star system

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");
     },

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>