diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7710716f0ad69f69663b859c165a5455153cb8d7
--- /dev/null
+++ b/src/components/BaseComponents/RatingModal.vue
@@ -0,0 +1,157 @@
+<template>
+ <!-- Main modal -->
+ <div
+ v-if="visible"
+ class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
+ >
+ <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
+ <!-- Modal content -->
+ <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+ <!-- Modal header -->
+ <div
+ class="flex p-4 border-b rounded-t dark:border-gray-600"
+ >
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+ {{ name }}
+ </h3>
+ <button
+ @click="close()"
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ <svg
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+ clip-rule="evenodd"
+ ></path>
+ </svg>
+ </button>
+ </div>
+ <!-- Modal body -->
+ <div class="p-6 space-y-6">
+ <p class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ {{ title }}
+ </p>
+ </div>
+
+ <div class="ml-6 mt-4">
+ <p class=" text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="renterIsReceiverOfRating">
+ Gi en vurdering til utleieren
+ </p>
+ <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="!renterIsReceiverOfRating">
+ Gi en vurdering til leietakeren
+ </p>
+ </div>
+
+ <div class= "flex justify-center px-4">
+ <textarea class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"/>
+ </div>
+
+ <div class="flex items-center justify-center mb-8">
+ <svg class="w-10 h-10 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-10 h-10 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-10 h-10 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-10 h-10 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-10 h-10 text-warn 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>
+
+ <div class="flex justify-center mb-4">
+ <Button
+ :text="'Send en vurdering'"
+ @click="sendRating"></Button>
+ </div>
+
+ <!-- Modal footer -->
+ <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
+ <!-- Slot: Add any html you want here -->
+ <slot />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Button from "@/components/BaseComponents/ColoredButton";
+import { postNewRating} from "@/utils/apiutil";
+
+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,
+
+ },
+
+ components: {
+ Button,
+ },
+ methods: {
+ setRating(ratingNumber){
+ this.score = ratingNumber;
+ for(let i = 0; i < 5; i++ ){
+ if(i < ratingNumber) {
+ this.rating[i] = "text-warn"
+ }
+ else {
+ this.rating[i] = "text-gray-300"
+ }
+ }
+ },
+ close() {
+ this.$emit("close");
+ },
+ async sendRating(){
+
+ const ratingInfo = {
+ score: this.score,
+ comment: this.comment,
+ renterIsReceiverOfRating: this.renterIsReceiverOfRating,
+ rentID: this.rentID
+ }
+
+ const postResponse = await postNewRating(ratingInfo);
+
+ console.log("posted: " + postResponse);
+
+ this.$router.push("/");
+
+ },
+ },
+};
+</script>
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 53e9d04c235b0c05b302e14b03d089f5990ee4f6..2653cc8b833b74c08385b1cc65e2e6f03b1e1304 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -301,3 +301,18 @@ export async function LeaveCommunity(communityID) {
return error;
});
}
+
+export function postNewRating(ratingInfo) {
+ return axios
+ .post(API_URL + "rating/save", ratingInfo, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ console.log("poster: " + response.data);
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}
\ No newline at end of file
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 7537e2d18769293327ccda2e2357aefe9973c58e..a4c11f01199994126da3586bf0d81ab23903d053 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,5 +1,7 @@
<template>
- <div />
+ <div >
+
+ </div>
</template>
<script>
@@ -9,7 +11,8 @@ export default {
show: false,
};
},
- components: {},
+ components: {
+ },
methods: {
toggleModal() {
this.show = !this.show;