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; |
---|