[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import {Container, Row, Modal, Image, FormGroup, FormLabel, FormControl, Button} from "react-bootstrap";
|
---|
| 3 | import {useState} from "react";
|
---|
| 4 | import {AiOutlinePlusCircle} from "react-icons/ai"
|
---|
| 5 | import AddHotelForm from "../Forms/AddHotelForm";
|
---|
| 6 | import AddRoomForm from "../Forms/AddRoomForm";
|
---|
| 7 | import AddRestaurantForm from "../Forms/AddRestaurantForm";
|
---|
| 8 | import AddTransportForm from "../Forms/AddTransportForm";
|
---|
| 9 | import AddItemMenuForm from "../Forms/AddItemMenuForm";
|
---|
| 10 | import AddRoomAvailablityForm from "../Forms/AddRoomAvailablityForm";
|
---|
| 11 | import AddTableAvailablityForm from "../Forms/AddTableAvailabilityForm";
|
---|
| 12 | import {FaImage} from "react-icons/fa";
|
---|
| 13 | import useGet from "../Hooks/useGet";
|
---|
| 14 | import useFileChange from "../Hooks/FilesUpload/useFileChange";
|
---|
| 15 |
|
---|
| 16 |
|
---|
| 17 | const AddImages = (props) => {
|
---|
| 18 |
|
---|
| 19 | const [show, setShow] = useState(false);
|
---|
| 20 | const {data, isLoading, getData, setData, setChanged} = useGet(`/${props.type}/${props.Id}/images`)
|
---|
| 21 | const { onFileChangeHandler } = useFileChange();
|
---|
| 22 | const [selectedFiles, setSelectedFiles] = useState([]);
|
---|
| 23 |
|
---|
| 24 | console.log(props.Id)
|
---|
| 25 |
|
---|
| 26 | const handleClose = () => setShow(false);
|
---|
| 27 | const handleShow = (e) => {
|
---|
| 28 | e.preventDefault();
|
---|
| 29 | setShow(true);
|
---|
| 30 |
|
---|
| 31 | };
|
---|
| 32 |
|
---|
| 33 | !isLoading && console.log(data)
|
---|
| 34 |
|
---|
| 35 |
|
---|
| 36 | return (<>
|
---|
| 37 | <Container onClick={handleShow}>
|
---|
| 38 | <h5>Слики</h5>
|
---|
| 39 | <div className="d-flex justify-content-center align-content-center"><FaImage size={50}
|
---|
| 40 | color="#159895"></FaImage>
|
---|
| 41 | </div>
|
---|
| 42 |
|
---|
| 43 | </Container>
|
---|
| 44 |
|
---|
| 45 | {handleShow && <Modal size={'xl'} show={show} onHide={handleClose}>
|
---|
| 46 | <Modal.Header closeButton>
|
---|
| 47 | <Modal.Title style={{color: "#159895"}}>
|
---|
| 48 | Слики за ресурс
|
---|
| 49 | </Modal.Title>
|
---|
| 50 | </Modal.Header>
|
---|
| 51 | <Modal.Body>
|
---|
| 52 | <Container>
|
---|
| 53 | {!isLoading && data.map((image) => {
|
---|
| 54 | let link = image.url;
|
---|
| 55 | if (image.url.includes('Desktop')) {
|
---|
| 56 | link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
|
---|
| 57 | }
|
---|
| 58 | console.log(link)
|
---|
| 59 | return (
|
---|
| 60 | <Image src={link} thumbnail width={171} height={180}/>
|
---|
| 61 | )
|
---|
| 62 | })}
|
---|
| 63 | </Container>
|
---|
| 64 | <Container>
|
---|
| 65 | <FormGroup className="mb-3">
|
---|
| 66 | <FormLabel>Upload Images:</FormLabel>
|
---|
| 67 | <FormControl
|
---|
| 68 | type="file"
|
---|
| 69 | multiple
|
---|
| 70 | onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
|
---|
| 71 | />
|
---|
| 72 | </FormGroup>
|
---|
| 73 | <Button onClick={() => {
|
---|
| 74 | // setChanged((prev) => ++prev)
|
---|
| 75 | onFileChangeHandler(selectedFiles, props.type, props.Id, setChanged)
|
---|
| 76 | // setChanged((prev) => ++prev)
|
---|
| 77 | }}>
|
---|
| 78 | Upload Files
|
---|
| 79 | </Button>
|
---|
| 80 | <Container>
|
---|
| 81 | {selectedFiles.map((file, index) => (
|
---|
| 82 | <Image
|
---|
| 83 | key={index}
|
---|
| 84 | onClick={() => {
|
---|
| 85 | }}
|
---|
| 86 | fluid
|
---|
| 87 | src={URL.createObjectURL(file)}
|
---|
| 88 | alt={`Uploaded Image ${index + 1}`}
|
---|
| 89 | />
|
---|
| 90 | ))}
|
---|
| 91 | </Container>
|
---|
| 92 | </Container>
|
---|
| 93 | </Modal.Body>
|
---|
| 94 | </Modal>}
|
---|
| 95 | </>)
|
---|
| 96 | }
|
---|
| 97 |
|
---|
| 98 | export default AddImages; |
---|