diff --git a/src/assets/additem.png b/src/assets/additem.png
new file mode 100644
index 0000000000000000000000000000000000000000..6eed86737785b8a2425d33de3c613cfb7832b041
Binary files /dev/null and b/src/assets/additem.png differ
diff --git a/src/components/AddNewItem.vue b/src/components/AddNewItem.vue
index cfe5ea645bcbfd2cff19a9a68d46499547f45e4c..86e7cf484ee05781a2cac3ba36f5f7dd8aacde6d 100644
--- a/src/components/AddNewItem.vue
+++ b/src/components/AddNewItem.vue
@@ -68,6 +68,41 @@
</div>
</div>
+
+ <!-- Select Group -->
+ <div class="mb-6">
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ >Gruppe</label
+ >
+ <select
+ v-model="v$.item.selectGroup.$model"
+ class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ >
+ <option class="text-gray-400" value="" disabled selected>
+ Select a Group
+ </option>
+ <option
+ v-for="group in groups"
+ :key="group"
+ class="text-gray-900 text-sm"
+ >
+ {{ group }}
+ </option>
+ </select>
+
+ <!-- error message for select box -->
+ <div
+ class="text-red"
+ v-for="(error, index) of v$.item.selectGroup.$errors"
+ :key="index"
+ >
+ <div class="text-red-600 text-sm">
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
+
<!-- price -->
<div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
<label
@@ -122,6 +157,33 @@
</div>
</div>
+
+ <!-- Address -->
+ <div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
+ <label
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+ >Adresse</label>
+ <input
+ type="text"
+ class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ v-model="v$.item.address.$model"
+ id="adress"
+ required
+ />
+
+ <!-- error message for address-->
+ <div
+ class="text-red"
+ v-for="(error, index) of v$.item.address.$errors"
+ :key="index"
+ >
+ <div class="text-red-600 text-sm">
+ {{ error.$message }}
+ </div>
+ </div>
+ </div>
+
+
<!-- Images -->
<div>
<label
@@ -167,6 +229,9 @@
<script>
import useVuelidate from "@vuelidate/core";
+import { parseUserFromToken } from "@/utils/token-utils";
+import { postNewItem } from "@/utils/apiutil";
+
import {
required,
helpers,
@@ -186,14 +251,20 @@ export default {
return {
item: {
title: {
- required,
+ required: helpers.withMessage(
+ () => "Tittelen kan ikke være tom",
+ required
+ ),
max: helpers.withMessage(
() => `Tittelen kan inneholde max 50 tegn`,
maxLength(50)
),
},
description: {
- required,
+ required: helpers.withMessage(
+ () => "Beskrivelsen kan ikke være tom",
+ required
+ ),
max: helpers.withMessage(
() => `Beskrivelsen kan inneholde max 200 tegn`,
maxLength(200)
@@ -213,6 +284,19 @@ export default {
select: {
required: helpers.withMessage(() => `Velg en kategori`, required),
},
+ selectGroup: {
+ required: helpers.withMessage(() => `Velg en gruppe`, required),
+ },
+ address: {
+ required: helpers.withMessage(
+ () => "Addressen kan ikke være tom",
+ required
+ ),
+ max: helpers.withMessage(
+ () => `Addressen kan inneholde max 50 tegn`,
+ maxLength(50)
+ ),
+ },
},
};
},
@@ -222,14 +306,18 @@ export default {
item: {
title: "",
description: "",
+ address: "",
price: "",
category: "",
select: null,
type: "",
images: [],
+ userId: -1,
+ selectGroup: null,
},
//Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
+ groups: [4040, 4041],
};
},
methods: {
@@ -251,19 +339,47 @@ export default {
if (this.checkValidation()) {
console.log("validert, videre...");
+
+ this.checkUser();
+
console.log("Tittel: " + this.item.title);
console.log("Kategori: " + this.item.select);
console.log("Beskrivelse: " + this.item.description);
+ console.log("Addressen: " + this.item.address);
console.log("Pris: " + this.item.price);
console.log("bilder: " + this.item.images);
+ console.log("gruppe: " + this.item.selectGroup);
+
+ const itemInfo = {
+ title: this.item.title,
+ description: this.item.description,
+ pricePerDay: this.item.price,
+ address: this.item.address,
+ userID: this.item.userId,
+ categoryNames: [],
+ communityIDs: [this.item.selectGroup],
+ };
+
+ console.log(itemInfo);
+
+ const postRequest = await postNewItem(itemInfo);
+
+ console.log("posted: " + postRequest);
+
}
},
+ checkUser: async function (){
+ let user = parseUserFromToken(this.$store.state.user.token);
+ this.item.userId = parseInt(user.accountId);
+ console.log("id: " + this.item.userId);
+ },
+
addImage: function (event) {
console.log(event.target.files);
this.item.images.push(URL.createObjectURL(event.target.files[0]));
console.log("antall bilder: " + this.item.images.length);
},
- },
+ }
};
</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 69c304cbea1ad4ea1ba1d784fda380d43a71240e..507c2ab4f30dccb71032c8c0d94fffc34cef5b97 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -10,20 +10,10 @@
</div>
<ul class="flex">
<li>
- <img
- class="m-6 cursor-pointer h-8"
- src="../assets/messages.png"
- alt="Meldinger"
- @click="$router.push('/messages')"
- />
+ <img class="m-6 cursor-pointer h-8 " src="../assets/additem.png" alt="Legg til" @click="$router.push('/addNewItem')"/>
</li>
<li>
- <img
- class="m-6 cursor-pointer h-8"
- src="../assets/notifications.png"
- alt="Varlser"
- @click="$router.push('/notifications')"
- />
+ <img class="m-6 cursor-pointer h-8 " src="../assets/messages.png" alt="Meldinger" @click="$router.push('/messages')"/>
</li>
<li>
<img
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 86a32d21c659866fe184b9c3fd25db76da30cb46..94d14a9052f5b5e1b199a17b3acfc2d4d8803be3 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -82,3 +82,16 @@ export function doNewPassword() {
//.catch((error) => {console.log(error);return auth;});
return auth; //remove after axios is added
}
+
+export function postNewItem(itemInfo){
+ return axios
+ .post(API_URL + "listing", itemInfo)
+ .then((response) => {
+ console.log("prøver: " + response.data);
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
+}