Skip to content
Snippets Groups Projects
Commit a2c13c81 authored by Titus Netland's avatar Titus Netland
Browse files

Merge branch 'image-community' into 'main'

Image community

See merge request !104
parents 6f378129 ac6aa683
No related branches found
No related tags found
1 merge request!104Image community
Pipeline #180684 passed
<template> <template>
<div <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 --> <!-- Component heading -->
<div <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 Opprett ny gruppe
</div> </div>
...@@ -18,7 +36,25 @@ ...@@ -18,7 +36,25 @@
> >
<div class="form-check"> <div class="form-check">
<input <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" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
id="flexRadioOpen" id="flexRadioOpen"
...@@ -36,7 +72,25 @@ ...@@ -36,7 +72,25 @@
</div> </div>
<div class="form-check"> <div class="form-check">
<input <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" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
id="flexRadioPrivate" id="flexRadioPrivate"
...@@ -63,7 +117,25 @@ ...@@ -63,7 +117,25 @@
<input <input
type="text" type="text"
id="title" 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" v-model="v$.group.name.$model"
required required
/> />
...@@ -89,7 +161,25 @@ ...@@ -89,7 +161,25 @@
> >
<input <input
type="text" 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" v-model="v$.group.place.$model"
required required
/> />
...@@ -117,7 +207,25 @@ ...@@ -117,7 +207,25 @@
id="description" id="description"
rows="4" rows="4"
v-model="v$.group.description.$model" 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 required
></textarea> ></textarea>
...@@ -153,14 +261,28 @@ ...@@ -153,14 +261,28 @@
<!-- Button for adding an image --> <!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm"> <div class="inline-flex rounded-md shadow-sm">
<div class="text-error uppercase text-center">midlertidig fjernet</div> <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
<!-- <button <button
@click="$refs.file.click()" @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" :disabled="imageAdded"
> >
Velg bilde Velg bilde
</button> --> </button>
<!-- Button for removing an image --> <!-- Button for removing an image -->
</div> </div>
...@@ -176,12 +298,14 @@ ...@@ -176,12 +298,14 @@
<Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button> <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
</div> </div>
</div> </div>
<!--<img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" />-->
</template> </template>
<script> <script>
import useVuelidate from "@vuelidate/core"; import useVuelidate from "@vuelidate/core";
import { required, helpers, maxLength } from "@vuelidate/validators"; import { required, helpers, maxLength } from "@vuelidate/validators";
import { postNewgroup } from "@/utils/apiutil"; import { postNewgroup, postNewImageCommunity } from "@/utils/apiutil";
import Button from "@/components/BaseComponents/ColoredButton"; import Button from "@/components/BaseComponents/ColoredButton";
export default { export default {
...@@ -239,8 +363,11 @@ export default { ...@@ -239,8 +363,11 @@ export default {
radio: null, radio: null,
place: "", place: "",
visibility: 1, visibility: 1,
image: "",
}, },
imageThere: false, imageThere: false,
imageId: -1,
imageStringURL: "",
}; };
}, },
computed: { computed: {
...@@ -276,20 +403,38 @@ export default { ...@@ -276,20 +403,38 @@ export default {
async saveClicked() { async saveClicked() {
if (this.checkValidation()) { if (this.checkValidation()) {
//this.group.image = "https://image.shutterstock.com/image-photo/distribution-delivery-concept-global-business-600w-1650964204.jpg";
const groupInfo = { const groupInfo = {
name: this.group.name, name: this.group.name,
description: this.group.description, description: this.group.description,
visibility: this.group.visibility, visibility: this.group.visibility,
location: this.group.place, location: this.group.place,
picture: "", picture: this.group.image,
}; };
console.log(this.group.image);
await postNewgroup(groupInfo); await postNewgroup(groupInfo);
} }
}, },
addImage: function (event) { addImage: async function (event) {
this.group.images.push(URL.createObjectURL(event.target.files[0])); 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; this.imageThere = true;
}, },
}, },
......
...@@ -325,3 +325,18 @@ export function postNewRating(ratingInfo) { ...@@ -325,3 +325,18 @@ export function postNewRating(ratingInfo) {
return error; 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;
});
}
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CreateNewGroup elements rendering renders correctly 1`] = ` exports[`CreateNewGroup elements rendering renders correctly 1`] = `
<div
data-v-app=""
>
<div <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 --> <!-- Component heading -->
<div <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 Opprett ny gruppe
</div> </div>
...@@ -136,18 +140,12 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` ...@@ -136,18 +140,12 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
<div <div
class="inline-flex rounded-md shadow-sm" class="inline-flex rounded-md shadow-sm"
> >
<div <!--&lt;div class="text-error uppercase text-center"&gt;Midlertidig fjernet&lt;/div&gt; -->
class="text-error uppercase text-center" <button
>
midlertidig fjernet
</div>
<!-- &lt;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" >
&gt;
Velg bilde Velg bilde
&lt;/button&gt; --> </button>
<!-- Button for removing an image --> <!-- Button for removing an image -->
</div> </div>
<!-- Div box for showing all chosen images --> <!-- Div box for showing all chosen images -->
...@@ -164,4 +162,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = ` ...@@ -164,4 +162,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
/> />
</div> </div>
</div> </div>
<!--&lt;img :src="group.image" class="w-1/2 inline" alt="Bilde av gjenstanden" /&gt;-->
</div>
`; `;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment