diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 54f3ba8e608a6a9041f97406552ffb82f08604f9..bfa39aaa8d7c3b3136319565e476ea82d2751191 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,10 +1,28 @@
<template>
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ class="
+ md:ring-1
+ ring-gray-300
+ rounded-xl
+ overflow-hidden
+ mx-auto
+ mb-auto
+ max-w-md
+ w-full
+ p-4
+ "
>
<!-- Component heading -->
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-10"
+ class="
+ text-xl
+ md:text-2xl
+ font-medium
+ text-center text-gray-600
+ dark:text-gray-200
+ mt-4
+ mb-10
+ "
>
Opprett ny gruppe
</div>
@@ -18,7 +36,25 @@
>
<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"
+ 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
+ "
type="radio"
name="flexRadioDefault"
id="flexRadioOpen"
@@ -36,7 +72,25 @@
</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"
+ 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
+ "
type="radio"
name="flexRadioDefault"
id="flexRadioPrivate"
@@ -63,7 +117,25 @@
<input
type="text"
id="title"
- 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"
+ 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
+ "
v-model="v$.group.name.$model"
required
/>
@@ -89,7 +161,25 @@
>
<input
type="text"
- 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"
+ 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
+ "
v-model="v$.group.place.$model"
required
/>
@@ -117,7 +207,25 @@
id="description"
rows="4"
v-model="v$.group.description.$model"
- 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"
+ 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
></textarea>
@@ -153,14 +261,28 @@
<!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm">
- <div class="text-error uppercase text-center">midlertidig fjernet</div>
- <!-- <button
+ <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
+ <button
@click="$refs.file.click()"
- 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"
+ 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
+ "
:disabled="imageAdded"
>
Velg bilde
- </button> -->
+ </button>
<!-- Button for removing an image -->
</div>
@@ -176,12 +298,14 @@
<Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
</div>
</div>
+
+ <!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
</template>
<script>
import useVuelidate from "@vuelidate/core";
import { required, helpers, maxLength } from "@vuelidate/validators";
-import { postNewgroup } from "@/utils/apiutil";
+import { postNewgroup, postNewImageCommunity } from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton";
export default {
@@ -239,8 +363,11 @@ export default {
radio: null,
place: "",
visibility: 1,
+ image: "",
},
imageThere: false,
+ imageId: -1,
+ imageStringURL: "",
};
},
computed: {
@@ -276,20 +403,38 @@ export default {
async saveClicked() {
if (this.checkValidation()) {
+ //this.group.image = "https://image.shutterstock.com/image-photo/distribution-delivery-concept-global-business-600w-1650964204.jpg";
const groupInfo = {
name: this.group.name,
description: this.group.description,
visibility: this.group.visibility,
location: this.group.place,
- picture: "",
+ picture: this.group.image,
};
+ console.log(this.group.image);
+
await postNewgroup(groupInfo);
}
},
- addImage: function (event) {
+ addImage: async function (event) {
this.group.images.push(URL.createObjectURL(event.target.files[0]));
+
+ var that = this;
+ let image = event.target.files[0];
+ let fileReader = new FileReader();
+ fileReader.onloadend = async function () {
+ const res = fileReader.result;
+ const id = await postNewImageCommunity(res);
+
+ const API_URL = process.env.VUE_APP_BASEURL;
+ console.log(id);
+ console.log(API_URL + "images/" + id);
+ that.group.image = API_URL + "images/" + id;
+
+ };
+ fileReader.readAsArrayBuffer(image);
this.imageThere = true;
},
},
diff --git a/src/router/index.js b/src/router/index.js
index 9aaaf0cb3196f21a9558bdb91bd22ef2a20c5476..b0a701a8e3e72570a55bb60873802b88f200adfd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
import store from "@/store";
import { createRouter, createWebHistory } from "vue-router";
+import NotFound from "@/views/NotFound.vue";
/**
* Guards routes. If token is null, no user is logged in and only the
@@ -133,6 +134,8 @@ const routes = [
name: "UserItems",
component: () => import("../views/UserProfileViews/UserItemsView.vue"),
},
+ // Make sure it's your last route definition
+ { path: "/:pathMatch(.*)*", name: "not-found", component: NotFound },
];
const router = createRouter({
@@ -140,4 +143,9 @@ const router = createRouter({
routes,
});
+router.resolve({
+ name: "not-found",
+ params: { pathMatch: ["not", "found"] },
+}).href;
+
export default router;
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 2f8fabcb74dc13da2e74888291ee8b581c721b16..f33d6db9f3ce03cac2a5b9d6dc149c41b1949912 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -325,3 +325,18 @@ export function postNewRating(ratingInfo) {
return error;
});
}
+
+export function postNewImageCommunity(image) {
+ return axios
+ .post(API_URL + "images", image, {
+ headers: {...tokenHeader(), "Content-Type": "image/png"},
+ })
+ .then((response) => {
+ console.log(response.data);
+ return response.data;
+ })
+ .catch((error) => {
+ console.log(error);
+ return error;
+ });
+}
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 7870d1e63ba55975d46634b639797c751b1a3d75..56f7e0e267f102c5493e80579c7c9c11cf9aed45 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -106,11 +106,23 @@ export default {
toggle: false,
},
{
- question: "Hvordan kan jeg bli med i en gruppe?",
+ question: "Hvordan kan jeg opprette en ny gruppe?",
answer:
"Fra hovedsiden kan man trykke på pluss-person-ikonet ved siden av mine grupper som vil ta deg til skjemaet for å lage en ny gruppe.",
toggle: false,
},
+ {
+ question: "Hvordan kan jeg bli med i en gruppe?",
+ answer:
+ "På hovedsiden vil alle offentlige og lukkede grupper vises. Når du trykker på ønsket gruppe vil du få muligheten til å bli med/sende medlemsforespørsel.",
+ toggle: false,
+ },
+ {
+ question: "Hva vil jeg ha tilgang til ved å logge inn/opprette en bruker?",
+ answer:
+ "Uten å være logget inn vil du kunne se alle grupper, og også se gjenstander som ligger ute til lån i offentlige grupper. For å kunne låne en gjenstand må du være med i gruppen gjenstanden ligger i, og for dette må du være innlogget. Du må også være innlogget for å sende medlemsforespørsel i lukkede grupper.",
+ toggle: false,
+ },
],
};
},
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1051e31dded6de02a0c51f96a3994c47f7033598
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="flex place-content-center h-full p-8">
+ <div class="bg-gray-300 p-8 rounded-2xl drop-shadow-xl">
+ <h1 class="text-primary-medium text-4xl">Oisann!</h1>
+ <p>Her skjedde det visst en feil...</p>
+ <p>
+ Lyst å gå tilbake til
+ <router-link to="/" class="underline">start?</router-link>
+ </p>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
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 1b82d99ed9de0f8bcd2c9cc9ed86ec7b30886061..19e292101b012b95058ea454f90fb0bdb96fe700 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,166 +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 -->
+
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light 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-xl font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ <!-- Description -->
+ <div
+ class="mt-6"
>
- Bilde
- </label>
- <input
- accept="image/png, image/jpeg"
- 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"
>
+ <label
+ class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
+ >
+ Bilde
+ </label>
+ <input
+ accept="image/png, image/jpeg"
+ multiple=""
+ style="display: none;"
+ type="file"
+ />
+ <!-- Button for adding an image -->
<div
- class="text-error uppercase text-center"
+ class="inline-flex rounded-md shadow-sm"
>
- midlertidig fjernet
- </div>
- <!-- <button
- @click="$refs.file.click()"
+ <!--<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"
- :disabled="imageAdded"
- >
- Velg bilde
- </button> -->
- <!-- Button for removing an image -->
+ >
+ Velg bilde
+ </button>
+ <!-- Button for removing an image -->
+ </div>
+ <!-- Div box for showing all chosen images -->
+
+
+ </div>
+ <!-- Save item button -->
+ <div
+ class="flex justify-center mt-10 float-right"
+ >
+ <button-stub
+ 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
- id="saveButton"
- text="Lagre"
- />
</div>
+ <!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
+
</div>
`;