diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue index 348e60a278d44a882a535860aa6976314846a5b3..80a3cfd1ef8c30d6eeeca137f47baa4bc7f2b0a1 100644 --- a/src/components/CommunityComponents/CommunityHamburger.vue +++ b/src/components/CommunityComponents/CommunityHamburger.vue @@ -1,4 +1,7 @@ <template> + <!-- Hamburger menu for community header, contains options for adding a new listing, + seeing all members in the community, administrating the community if admin and + leaving the community --> <div id="dropdown" class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue index d5d55e2c09c7b5c8e329444d11a3a35eb5fcd1dd..c4303c3225413382bd65ca5a20e56c64eb9028a1 100644 --- a/src/components/CommunityComponents/CommunityHeader.vue +++ b/src/components/CommunityComponents/CommunityHeader.vue @@ -1,5 +1,10 @@ <template> + <!-- Community header contains the community's name and address, a join button if + the user is not in the community and community hamburger menu if the user is + in the community --> <div> + <!-- A warning asking user is it is sure it wants to leave the community when leave community + from hamburger menu is clicked --> <CustomFooterModal :title="'Er du sikker på at du vil forlate felleskapet?'" :message="'Dersom felleskapet er låst er du nødt til å spørre om å bli med på nytt.'" @@ -20,9 +25,13 @@ /> </div> </CustomFooterModal> + + <!-- The load spinner will show while community and it's members are being loaded from the db --> <div v-if="loading" class="flex place-content-center mx-4"> <LoaderSpinner /> </div> + + <!-- After loaded the community header shows --> <div v-else class="flex items-center justify-between mx-4"> <router-link :to="'/community/' + community.communityId" @@ -97,7 +106,6 @@ :community-i-d="community.communityId" :admin="admin" /> - <!-- class="absolute" --> </div> </div> </div> diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue index 49103a9a86db563b3d2efd6dc733b4ef7efc7f40..2e09b5104951dba94cbb936cb63c1a5f9e4d70ff 100644 --- a/src/components/CommunityComponents/CommunityHome.vue +++ b/src/components/CommunityComponents/CommunityHome.vue @@ -1,8 +1,12 @@ <template> + <!-- The community home page, shows all the items in the community with the possibility of + clicking on an item to be redirected to the item info page --> <div> + <!-- Shows loading component while loading the content for the page --> <div v-if="loading" class="flex place-content-center"> <LoaderSpinner /> </div> + <!-- When finish loading the home page for community is shown --> <section v-else class="w-full px-5 py-4 mx-auto rounded-md"> <CommunityHeader :admin="false" class="mb-5" /> @@ -27,7 +31,7 @@ <input type="text" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring" - placeholder="Search" + placeholder="Søk" v-model="search" @change="searchWritten" /> diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue index b6641f92549da76ed1f956e600842d9b07615eb5..8354bd25ce4cd34d3644522768e19a6298e89ad6 100644 --- a/src/components/CommunityComponents/CommunityList.vue +++ b/src/components/CommunityComponents/CommunityList.vue @@ -1,4 +1,5 @@ <template> + <!-- A list conatining all the communities --> <p v-if="!communities.length" class="flex place-content-center text-gray-400"> Ingen grupper </p> diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue index 40d90645e430cd49f104c91c7def3e125b9721fb..8001e01a3aaba188a781c75428ecfa28a02bbd72 100644 --- a/src/components/CommunityComponents/CommunityListItem.vue +++ b/src/components/CommunityComponents/CommunityListItem.vue @@ -39,7 +39,7 @@ /> </div> - <!-- If a user is not logges in and tries to join a community, this message shows --> + <!-- If a user is not logged in and tries to join a community, this message shows --> <div class="flex justify-center p-2"> <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> {{ responseToUser }} diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue index 8508efd202f46350266f1c198b5f7419aca8aac3..f00a8bf6b473e75353fae3ca159d5e1d6ef98e9e 100644 --- a/src/components/CommunityComponents/CommunityRequestForm.vue +++ b/src/components/CommunityComponents/CommunityRequestForm.vue @@ -1,4 +1,5 @@ <template> + <!-- A request form for joining a private community --> <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > @@ -99,7 +100,6 @@ export default { routeToHome() { this.$router.push("/"); }, - //TODO fix so that community id is set (not null) async saveClicked() { this.communityID = await this.$router.currentRoute.value.params .communityID; diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue index 3818146ff63024c1dab742805231a0e0baa582c9..c832615512e4f260e990c7e2d3deed9e6e54de82 100644 --- a/src/components/CommunityComponents/MemberList.vue +++ b/src/components/CommunityComponents/MemberList.vue @@ -1,4 +1,5 @@ <template> + <!-- Shows all members in a community --> <ul> <li v-for="member in members" :key="member.userId"> <UserListItemCard :buttons="buttons" :user="member" /> diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue index a088cd5d4f487b4e5cf2d36d7d81c7a823be802e..9776ad8c614bc84c27b5d601a502e1131e059b08 100644 --- a/src/components/CommunityComponents/NewCommunityForm.vue +++ b/src/components/CommunityComponents/NewCommunityForm.vue @@ -1,4 +1,5 @@ <template> + <!-- A form for creating a new community --> <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > diff --git a/src/components/ItemComponents/EditItemForm.vue b/src/components/ItemComponents/EditItemForm.vue index b5fed83d4c3eac9073d1a09ca34ae95e40599163..0283428444580fbf70c6aa9fb6ee525cffbedbf9 100644 --- a/src/components/ItemComponents/EditItemForm.vue +++ b/src/components/ItemComponents/EditItemForm.vue @@ -228,6 +228,7 @@ <script> import useVuelidate from "@vuelidate/core"; import ColoredButton from "@/components/BaseComponents/ColoredButton"; +import FormImageDisplay from "@/components/BaseComponents/FormImageDisplay.vue"; import ListingService from "@/services/listing.service"; import CommunityService from "@/services/community.service"; import ImageService from "@/services/image.service"; @@ -246,6 +247,7 @@ export default { components: { ColoredButton, + FormImageDisplay, }, setup() { @@ -313,10 +315,10 @@ export default { category: "", selectedCategory: "", selectedCategories: [], - images: [], userId: -1, selectedCommunityId: -1, selectedCommunities: [], + images: [], }, categories: [ "Antikviteter og kunst", @@ -366,7 +368,10 @@ export default { communityIDs: this.updatedItem.selectedCommunities, }; await ListingService.putItem(itemInfo); - await ImageService.putListingImages(this.images); + await ImageService.putListingImages( + this.initialItem.listingID, + this.updatedItem.images + ); this.$router.push("/itempage/" + this.initialItem.listingID); } }, @@ -380,7 +385,7 @@ export default { const id = await ImageService.postNewImage(res); const API_URL = process.env.VUE_APP_BASEURL; - that.item.images.push(API_URL + "images/" + id); + that.updatedItem.images.push(API_URL + "images/" + id); }; fileReader.readAsArrayBuffer(image); }, @@ -425,18 +430,18 @@ export default { } return false; }, - removeImage(image) { + async removeImage(image) { let newImages = []; - for (let i in this.item.images) { - if (this.item.images[i] != image) { - newImages.push(this.item.images[i]); + for (let i in this.updatedItem.images) { + if (this.updatedItem.images[i] != image) { + newImages.push(this.images[i]); } } - this.item.images = newImages; + this.updatedItem.images = newImages; }, }, - async beforeMount() { + async beforeCreate() { let itemID = await this.$router.currentRoute.value.params.id; let item = await ListingService.getItem(itemID); @@ -448,7 +453,12 @@ export default { this.initialItem = item; this.communities = await CommunityService.getUserCommunities(); + this.images = await ListingService.getItemPictures(itemID); + let imageURLS = []; + for (let i in this.images) { + imageURLS.push(this.images[i].picture); + } let initialCategories = []; for (let i in this.initialItem.categoryNames) { @@ -469,7 +479,7 @@ export default { price: this.initialItem.pricePerDay, selectedCategories: initialCategories, selectedCategory: selectedCategory, - images: this.images, + images: imageURLS, userId: this.initialItem.userID, selectedCommunityId: 0, selectedCommunities: initialCommunities, diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue index 9850b9bbec00f6d7ebef0968d02527254f766953..36c84f664967cbb685a593cf64b237d49f30e9af 100644 --- a/src/components/ItemComponents/NewItemForm.vue +++ b/src/components/ItemComponents/NewItemForm.vue @@ -352,9 +352,9 @@ export default { }; await ListingService.postNewItem(itemInfo); - await ImageService.PostImagesArrayToListing(this.item.images); + await ImageService.postImagesArrayToListing(this.item.images); - this.$router.push("/"); + this.$router.go(-1); } }, @@ -397,7 +397,7 @@ export default { } }, - removeImage(image) { + async removeImage(image) { let newImages = []; for (let i in this.item.images) { if (this.item.images[i] != image) { diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue index 33e0d6595225af5e34e503feac89000bd408d2ca..beee721738d6feb6896c2c15cbb65ab6f9dda62f 100644 --- a/src/components/RentingComponents/ItemInfo.vue +++ b/src/components/RentingComponents/ItemInfo.vue @@ -161,6 +161,7 @@ export default { this.pushItem.toTime = this.rentingEndDate; this.pushItem.title = this.item.title; this.pushItem.price = this.totPrice; + this.pushItem.renterId = this.item.userID; }, async getItem() { let id = this.$router.currentRoute.value.params.id; diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue index 7ced0d6da6b8575e6fa37f287ddc3ae464fa0072..f0609f0ccaa7515c53d4839578ae77dca6bd510b 100644 --- a/src/components/RentingComponents/NewRent.vue +++ b/src/components/RentingComponents/NewRent.vue @@ -42,7 +42,7 @@ </div> <div> <notification-modal - @click="routeToHome" + @click="routeToChat" :visible="confirmed" :title="'Vellykket'" :message="'Forespørsel sendt!'" @@ -150,8 +150,8 @@ export default { cancelRent() { this.$router.go(0); }, - routeToHome() { - this.$router.push("/"); + routeToChat() { + this.$router.push("/messages?userID=" + this.newRentBox.renterId); }, sendRent: async function () { const rent = { diff --git a/src/services/image.service.js b/src/services/image.service.js index 7ebc1fa786bdf0a79c9c193b662777a1bcabfc7f..3104f1b6be3627b9a6c1a2b72c9957f513c89d54 100644 --- a/src/services/image.service.js +++ b/src/services/image.service.js @@ -42,6 +42,19 @@ class ImageService { console.error(error.response); }); } + + deleteImage(image) { + return axios + .delete(image, { + headers: tokenHeader(), + }) + .then((response) => { + return response; + }) + .catch((error) => { + console.error(error.response); + }); + } } export default new ImageService(); diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap index 30bc58a9142e8e5b02ef7f595d25c6b495848ea0..6389c542acb08f641164d126f05565082d3b9cc4 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap @@ -2,34 +2,46 @@ exports[`CommunityHeader component renders correctly 1`] = ` <div - adminstatus="true" - community="[object Object]" + data-v-app="" > - <!-- Main modal --> - <!--v-if--> - + <!-- Community header contains the community's name and address, a join button if + the user is not in the community and community hamburger menu if the user is + in the community --> <div - class="flex place-content-center mx-4" + adminstatus="true" + community="[object Object]" > + <!-- A warning asking user is it is sure it wants to leave the community when leave community + from hamburger menu is clicked --> + + <!-- Main modal --> + <!--v-if--> + + <!-- The load spinner will show while community and it's members are being loaded from the db --> <div - class="loadingio-spinner-bean-eater-o5tefvffeqm" + class="flex place-content-center mx-4" > <div - class="ldio-sweozsnwol" + class="loadingio-spinner-bean-eater-o5tefvffeqm" > - <div> - <div /> - <div /> - <div /> - </div> - <div> - <div /> - <div /> - <div /> + <div + class="ldio-sweozsnwol" + > + <div> + <div /> + <div /> + <div /> + </div> + <div> + <div /> + <div /> + <div /> + </div> </div> </div> </div> </div> + </div> `; diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap index a385829acb32b11671e1d9788b5b401b95c4d892..fc8d4f6d97bfaa6bc5e459e517c0a2cd8b490e1e 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap @@ -1,110 +1,117 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CommunityList component renders correctly 1`] = ` -<ul> +<div + data-v-app="" +> - <li> - <div - class="border-black" - > - - <!-- Main modal --> - <!--v-if--> - + <!-- A list conatining all the communities --> + <ul> + + <li> <div - class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2" + class="border-black" > + + <!-- Main modal --> + <!--v-if--> + <div - class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2" - > - <img - alt="Fellsekaps bilde" - class="rounded-md" - src="string" - /> - </div> - <div - class="flex-1 pl-1 overflow-hidden" + class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2" > <div - class="font-medium text-gray-800 dark:text-white truncate" + class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2" > - string + <img + alt="Fellsekaps bilde" + class="rounded-md" + src="string" + /> </div> - </div> - <div - class="flex flex-row justify-center items-center" - > - <svg - aria-hidden="true" - class="max-h-6 max-w-6 shrink m-2" - fill="none" - stroke="currentColor" - stroke-width="2" - viewBox="0 0 24 24" - xmlns="http://www.w3.org/2000/svg" + <div + class="flex-1 pl-1 overflow-hidden" > - <path - d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" - stroke-linecap="round" - stroke-linejoin="round" - /> - </svg> + <div + class="font-medium text-gray-800 dark:text-white truncate" + > + string + </div> + </div> + <div + class="flex flex-row justify-center items-center" + > + <svg + aria-hidden="true" + class="max-h-6 max-w-6 shrink m-2" + fill="none" + stroke="currentColor" + stroke-width="2" + viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" + stroke-linecap="round" + stroke-linejoin="round" + /> + </svg> + </div> </div> </div> - </div> - </li> - <li> - <div - class="border-black" - > - - <!-- Main modal --> - <!--v-if--> - + </li> + <li> <div - class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2" + class="border-black" > + + <!-- Main modal --> + <!--v-if--> + <div - class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2" - > - <img - alt="Fellsekaps bilde" - class="rounded-md" - src="string" - /> - </div> - <div - class="flex-1 pl-1 overflow-hidden" + class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-2" > <div - class="font-medium text-gray-800 dark:text-white truncate" + class="h-3 w-14 flex flex-col justify-center items-center ml-2 mt-4 mb-4 mr-2" > - string + <img + alt="Fellsekaps bilde" + class="rounded-md" + src="string" + /> </div> - </div> - <div - class="flex flex-row justify-center items-center" - > - <svg - aria-hidden="true" - class="max-h-6 max-w-6 shrink m-2" - fill="none" - stroke="currentColor" - stroke-width="2" - viewBox="0 0 24 24" - xmlns="http://www.w3.org/2000/svg" + <div + class="flex-1 pl-1 overflow-hidden" > - <path - d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" - stroke-linecap="round" - stroke-linejoin="round" - /> - </svg> + <div + class="font-medium text-gray-800 dark:text-white truncate" + > + string + </div> + </div> + <div + class="flex flex-row justify-center items-center" + > + <svg + aria-hidden="true" + class="max-h-6 max-w-6 shrink m-2" + fill="none" + stroke="currentColor" + stroke-width="2" + viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" + stroke-linecap="round" + stroke-linejoin="round" + /> + </svg> + </div> </div> </div> - </div> - </li> + </li> + + </ul> -</ul> +</div> `; diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap index 9888519e7bc965cf1feeadf34dc0c6053e58a2fc..e44c8fc5aa31e9ace1a4f5430d4b37cd0265bd48 100644 --- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap @@ -2,160 +2,167 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` <div - class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" + data-v-app="" > - <!-- Component heading --> + + <!-- A form for creating a new community --> <div - class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10" + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" > - Opprett ny gruppe - </div> - <!-- Radio boxes --> - <div - class="mt-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="radioBoxLabel" + <!-- Component heading --> + <div + class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10" > - Synlighet - </label> + Opprett ny gruppe + </div> + <!-- Radio boxes --> <div - class="form-check" + class="mt-6" > - <input - class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" - id="flexRadioOpen" - name="flexRadioDefault" - type="radio" - value="Åpen" - /> <label - class="form-check-label inline-block text-gray-800" - for="flexRadioOpen" - id="radioBoxOpenLabel" + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="radioBoxLabel" > - Åpen + Synlighet </label> + <div + class="form-check" + > + <input + class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + id="flexRadioOpen" + name="flexRadioDefault" + type="radio" + value="Åpen" + /> + <label + class="form-check-label inline-block text-gray-800" + for="flexRadioOpen" + id="radioBoxOpenLabel" + > + Åpen + </label> + </div> + <div + class="form-check" + > + <input + class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + id="flexRadioPrivate" + name="flexRadioDefault" + type="radio" + value="Privat" + /> + <label + class="form-check-label inline-block text-gray-800" + for="flexRadioPrivate" + id="radioBoxPrivateLabel" + > + Privat + </label> + </div> </div> + <!-- Title --> <div - class="form-check" + class="mt-6" > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="titleLabel" + > + Gruppenavn + </label> <input - class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" - id="flexRadioPrivate" - name="flexRadioDefault" - type="radio" - value="Privat" + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="title" + required="" + type="text" /> + <!-- error message for title--> + + + </div> + <!-- Place --> + <div + class="mt-6" + > <label - class="form-check-label inline-block text-gray-800" - for="flexRadioPrivate" - id="radioBoxPrivateLabel" + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="positionLabel" > - Privat + By/Sted </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + required="" + type="text" + /> + <!-- error message for place--> + + </div> - </div> - <!-- Title --> - <div - class="mt-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="titleLabel" - > - Gruppenavn - </label> - <input - class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" - id="title" - required="" - type="text" - /> - <!-- error message for title--> - - - </div> - <!-- Place --> - <div - class="mt-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" - id="positionLabel" - > - By/Sted - </label> - <input - class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" - required="" - type="text" - /> - <!-- error message for place--> - - - </div> - <!-- Description --> - <div - class="mt-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" - id="descriptionLabel" - > - Beskrivelse - </label> - <textarea - class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" - id="description" - required="" - rows="4" - /> - <!-- error message for description --> - - - </div> - <!-- Images --> - <div - class="mt-6" - > - <label - class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" - id="imageLabel" + <!-- Description --> + <div + class="mt-6" > - Bilde (bildet må være .png) - </label> - <input - accept="image/png" - multiple="" - style="display: none;" - type="file" - /> - <!-- Button for adding an image --> + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="descriptionLabel" + > + Beskrivelse + </label> + <textarea + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="description" + required="" + rows="4" + /> + <!-- error message for description --> + + + </div> + <!-- Images --> <div - class="inline-flex rounded-md shadow-sm" + class="mt-6" > - <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> --> - <button - class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50" + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="imageLabel" + > + Bilde (bildet må være .png) + </label> + <input + accept="image/png" + multiple="" + style="display: none;" + type="file" + /> + <!-- Button for adding an image --> + <div + class="inline-flex rounded-md shadow-sm" > - Velg bilde - </button> + <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> --> + <button + class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50" + > + Velg bilde + </button> + </div> + <!-- Div box for showing all chosen images --> + + + </div> + <!-- Save item button --> + <div + class="flex justify-center mt-10 float-right" + > + <button-stub + buttoncolor="blue" + id="saveButton" + text="Lagre" + /> </div> - <!-- Div box for showing all chosen images --> - - - </div> - <!-- Save item button --> - <div - class="flex justify-center mt-10 float-right" - > - <button-stub - buttoncolor="blue" - id="saveButton" - text="Lagre" - /> </div> + </div> `;