Skip to content

Commit

Permalink
uploading image now works from form, some updates on uploading pictur…
Browse files Browse the repository at this point in the history 
…e from playground page
  • Loading branch information
@Dannysht
Dannysht committed Jul 19, 2024
1 parent b9d5ce0 commit a36267a
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 25 deletions.
14 changes: 10 additions & 4 deletions frontend/src/Components/Common/AddImage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
import { ReactComponent as WarningIcon } from '../../static/icons/warning-sign.svg'
import Cookies from "js-cookie"

export const AddImage = ({onChangeImage}) => {
export const AddImage = ({onChangeImage, confirmation, sendPhotos, noButtonEvent}) => {

if(Cookies.get("user")) {
return (
<div id="input-upload-wrapper">
<div id="upload-wrapper">
<label className="upload-btn-wrapper">
{!confirmation && <label className="upload-btn-wrapper">
<button className="btn">+</button>
<p className="btn-label">Добави снимки</p>
</label>
<input onChange={onChangeImage} id='input-wrapper' type="file" name="myfile" accept="image/*" multiple/>
<input onChange={onChangeImage} id='input-wrapper' type="file" name="myfile" accept="image/*" multiple/>
</label>}
{confirmation && <label className="upload-btn-wrapper">
<button className="btn">?</button>
<p className="btn-label">Сигурни ли сте че искате да качите тези снимки?</p>
<button onClick={sendPhotos}>Да</button>
<button onClick={noButtonEvent}>Не</button>
</label>}
</div>
</div>
)
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/Components/Common/InfoCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const InfoCard = (props) => {
<div id="info-card">
<div className="playground-text">
<h1>{props.name}</h1>
<div>{props.description}</div>
<div id="age" className="card">
<span><ChildIcon className="icon"/>Деца между {ageGroups[props.ageGroup]} години.</span>
</div>
Expand Down Expand Up @@ -120,9 +121,14 @@ export const InfoCard = (props) => {
default: {
<></>
}
}
}
})
}
{props.facilities && props.facilities.map((facility) => {
<ul>
<li>{facility}</li>
</ul>
})}
</div>
</div>
</div>
Expand Down
33 changes: 20 additions & 13 deletions frontend/src/Components/Pages/PlaygroundFormPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,31 +209,33 @@ export const PlaygroundFormPage = () => {
setIsOtherFacilityFocused(false);
setFacilities(newFacilities);
}
console.log(facilities)
}

const onChangeImage = (event) => {
for(let i = 0; i < event.target.files; ++i) {
setPhotos([...photos, event.target.files[i]]);
}
event.preventDefault();
setPhotos(event.target.files)
}

const createPlayground = async (event) => {
event.preventDefault();
let playgroundName = name;
if(name === "") {
await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${coordinates[0]},${coordinates[1]}?language=bg&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`).then((response) => {
await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${coordinates.lat},${coordinates.lng}&language=bg&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`).then((response) => {
if(response.status === 200) {
setName(response.body.formatted_address);
return response.json()
} else {
setName(`${coordinates[0]}, ${coordinates[1]}`);
playgroundName = `${coordinates.lat}, ${coordinates.lng}`;
}

}).then((response) => {
playgroundName = response.results[0].formatted_address;
})

}

const imagePayload = new FormData();
let playgroundId;
const data = {name, age_group, environment, shade_type, floor_type, has_fence, facilities, transport, toys, coordinates}
const data = {name: playgroundName, age_group, environment, shade_type, floor_type, has_fence, facilities, transport, toys, coordinates}
await fetch("https://kidsground.bg:8009/v1/playgrounds/add", {
method: 'POST',
headers: {
Expand All @@ -242,16 +244,21 @@ export const PlaygroundFormPage = () => {
},
body: JSON.stringify(data)
}).then((response) => {
playgroundId = response.content
if(response.status === 200) {
setShowModal(true);
return response.text()
}
}).then((data) => {
playgroundId = data
})

for(let i = 0; i < photos.length; ++i) {
imagePayload.append(`image${i}`, photos[i]);
if(photos) {
Array.from(photos).forEach((photo) => {
imagePayload.append("file", photo);
})

}

if(imagePayload.entries()) {
await fetch (`https://kidsground.bg:8009/v1/playgrounds/${playgroundId}/uploadImages`, {
method:'POST',
Expand Down Expand Up @@ -547,7 +554,7 @@ export const PlaygroundFormPage = () => {
</div>
<br/>
</div>
<AddImage onChangeImage={onChangeImage}/>
<AddImage onChangeImage={onChangeImage} confirmation={false} sendPhotos={{}} noButtonEvent={{}}/>
<div className="question" id="description-question">
<label className="form-label" for="description">10. Допълнително описание:</label>
<br/>
Expand Down
37 changes: 32 additions & 5 deletions frontend/src/Components/Pages/PlaygroundPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import { useParams } from 'react-router-dom'
import { AddImage } from '../Common/AddImage'
import { InfoCard } from '../Common/InfoCard';
import { Rating } from '../Common/Rating';
import Cookies from 'js-cookie';

export const PlaygroundPage = () => {

const {id} = useParams();
const [photos, setPhotos] = useState([]);
const [placeholder, setPlaceholder] = useState([])
const [playgroundInfo, setPlaygroundInfo] = useState({})
const [imagesForGallery, setImagesForGallery] = useState([]);
const [confirmation, setConfirmation] = useState(false)

const fetchPlayground = async () => {

Expand All @@ -35,9 +36,35 @@ export const PlaygroundPage = () => {
}, [])

const onChangeImage = (event) => {
for(let i = 0; i < event.target.files.length; ++i) {
setPhotos([...photos, event.target.files[i]]);
event.preventDefault();
setConfirmation(true);
setPhotos(event.target.files)
}

const sendImages = async () => {

const imagePayload = new FormData();

if(photos) {
Array.from(photos).forEach((photo) => {
imagePayload.append("file", photo);
})

}

if(imagePayload.entries()) {
await fetch (`https://kidsground.bg:8009/v1/playgrounds/${id}/uploadImages`, {
method:'POST',
headers: {
'Authorization': `Bearer ${Cookies.get("user")}`
},
body: imagePayload
})
}
}

const noButtonEvent = () => {
setPhotos([])
}

return(
Expand All @@ -47,8 +74,8 @@ export const PlaygroundPage = () => {
</div>

<div className="playground-content">
<AddImage onChangeImage={onChangeImage}/>
<InfoCard ageGroup={playgroundInfo.age_group} transport={playgroundInfo.transport} name={playgroundInfo.name} toys={playgroundInfo.toys} facilities={playgroundInfo.facilities} hasFence={playgroundInfo.hasFence} shadeType={playgroundInfo.shade_type} environment={playgroundInfo.environment}/>
<AddImage onChangeImage={onChangeImage} confirmation={confirmation} sendPhotos={sendImages} noButtonEvent={noButtonEvent}/>
<InfoCard description={playgroundInfo.description} ageGroup={playgroundInfo.age_group} transport={playgroundInfo.transport} name={playgroundInfo.name} toys={playgroundInfo.toys} facilities={playgroundInfo.facilities} hasFence={playgroundInfo.hasFence} shadeType={playgroundInfo.shade_type} environment={playgroundInfo.environment} />
<div id="map" style={{marginBottom: "20px"}}>
<Map currentPlaygroundCords={playgroundInfo.coordinates} onCoordinatesChange={() => {}}/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/static/stylesheets/playground.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@
#input-wrapper {
opacity: 0;
position: absolute;
width: 4.7%;
height: 60%;
height: 100%;
border-radius: 12px;
cursor: pointer;
}
Expand Down Expand Up @@ -166,3 +165,4 @@ button {
.icon {
margin-right: 1vw;
}

0 comments on commit a36267a

Please sign in to comment.