-
-
-
+
+
+
+
+
Redescoperă magia vieții!
-
+
-
Activități și experiențe pentru vârstnici
-
+
+
{
// React States
@@ -27,6 +30,7 @@ const Navbar = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [activeLink, setActiveLink] = useState("");
const location = useLocation();
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
useEffect(() => {
const token = localStorage.getItem("token") ? setIsLoggedIn(true) : setIsLoggedIn(false);
@@ -64,6 +68,10 @@ const Navbar = () => {
setVerticalMenu(false);
};
+ const toggleMenu = () => {
+ setIsMenuOpen(prevState => !prevState)
+ };
+
// Use useEffect to set the active link when the route changes
useEffect(() => {
@@ -258,159 +266,315 @@ const Navbar = () => {
//
// )}
//
-
-
-
-
-
-
-
-
-
- 
-
-
- {/*
-
-
- Cauta o experienta
+
+
+
+
+ const participantsMapper = {'o persoana' : 1,
+ 'doua persoane': 2,
+ 'trei persoane': 3,
+ 'patru persoane': 4,
+ 'cinci persoane': 5};
+ const participants_options = Object.keys(participantsMapper);
+ const [strNumberOfParticipants, setStrNumberOfParticipants] = useState('o persoana');
+ const [numberOfParticipants, setNumberOfParticipants] = useState(1);
+ const [selectedOption, setSelectedOption] = useState(null);
+
+ const handleParticipantsOptionChange = (event) => {
+ setNumberOfParticipants(participantsMapper[event.target.value]);
+ setStrNumberOfParticipants(event.target.value);
+ handleScroll();
+
+ setTimeout(() => {
+ setIsSticky(true);
+ cartRef.current.style.position = 'fixed';
+ cartRef.current.style.top = '0px';
+ }, 1);
+ };
+
+ const handleOptionChange = (event) => {
+ setSelectedOption(parseInt(event.target.value));
+ handleScroll();
+ setIsSticky(true);
+
+ setTimeout(() => {
+ setIsSticky(true);
+ cartRef.current.style.position = 'fixed';
+ cartRef.current.style.top = '0px';
+ }, 1);
+ };
+
+ const markerIcon = new L.Icon({
+ iconUrl: marker_icon_png,
+ iconRetinaUrl: marker_icon_png,
+ popupAnchor: [-0, -0],
+ iconSize: [25,25],
+ });
+
+
+ const MapSection = (e) => {
+ const map_e = {
+ lat: e.e[0],
+ lng: e.e[1]
+ };
+
+ return (
+
+
-
+
+
-
-
-
-
-
- {isLoggedIn ? (
-
-
+
+
*/}
- {/*
+
+ 
+
-
+
-
-
- RO/EN
-
-
*/}
-
-
-
-
-
-
-
-
- rezerva acum
-
-
-
-
-
- 
-
-
- CONTACT
-
-
+
+ {visibleCartPanel &&
+
+
+
+
+ EXPERIENTE
+
+
+
+ {/*
+ LOCATIE
+ */}
+
+
+
+ OCAZIE
+
+
+
+
+
+ CADOU
+
+
+
+
-
);
};
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..bad0abb
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import left_arrow from '../styles/icons/left_pagination_arrow.svg';
+import right_arrow from '../styles/icons/right_pagination_arrow.svg';
+
+function Pagination({ currentPage, pageSize, numberOfProducts, onPageChange }) {
+ const totalPages = Math.ceil(numberOfProducts / pageSize);
+
+ const generatePageNumbers = () => {
+ const pages = [];
+
+ for (let i = 1; i <= totalPages; i++) {
+ if (i === 1 && currentPage > 4) {
+ pages.push('...');
+ }
+
+ if (i === currentPage || (i >= currentPage - 2 && i <= currentPage + 2)) {
+ pages.push(i);
+ }
+
+ if (i === totalPages && currentPage < totalPages - 3) {
+ pages.push('...');
+ }
+ }
+ return pages;
+ };
+
+ function handlePageChange(newPage) {
+ if (newPage !== '...') {
+ onPageChange(newPage);
+ }
+ };
+
+ function handleRightArrow() {
+ if (currentPage < totalPages) {
+ onPageChange(currentPage + 1);
+ }
+ };
+
+ function handleLeftArrow() {
+ if (currentPage > 1 ) {
+ onPageChange(currentPage - 1);
+ }
+ };
+
+ return (
+
-
- {visibleCartPanel &&
-
-
-
- EXPERIENTE
-
-
-
- {/*
- LOCATIE
- */}
-
-
-
- OCAZIE
-
-
-
-
-
- CADOU
-
-
-
+
+
+
+
+
+
+
+
+
+ {isMenuOpen && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ rezerva acum
+
+
+
+
+
+
+ {isLoggedIn ? (
+
+
+ ) : (
+
+
+
+
+
+ CONTACT
+
+
+
+ )}
+
+
+ 
+
+
+ Autentifică-te
+
+
+
+
+
+
+
+
+
+
+
+
+ EXPERIENTE
+
+
+
+ {/*
+ LOCATIE
+
*/}
+
+
+
+ OCAZIE
+
+
+
+
+
+ CADOU
+
+
+
+ {currentPage > 1 && }
+
+ );
+}
+
+export default Pagination;
\ No newline at end of file
diff --git a/src/components/ProductDetails.js b/src/components/ProductDetails.js
index cb56a97..1985e27 100644
--- a/src/components/ProductDetails.js
+++ b/src/components/ProductDetails.js
@@ -3,13 +3,34 @@ import '../styles/styles.css';
import axios_api from '../api/axios_api';
import { useEffect, useRef, useState } from "react";
import RegistrationService from "./RegistrationService";
+import product_page_location_icon from '../images/product_page_location_icon.svg';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from "react-leaflet";
+import L from 'leaflet';
+import marker_icon_png from '../images/marker_icon.png';
const ProductDetails = () => {
const { state: product } = useLocation();
const [visibleRegistrationService, setVisibleRegistrationService] = useState(false);
- const { img_path, name, description, category, rating, price, organiser } = product;
+ const { city, county, common_location, options_common_city, img_path, name, description, category, organiser, sections, options, location, map_location } = product;
var final_img_path = `${process.env.REACT_APP_SERVER_IMAGE_PATH}${img_path}`;
+ const main_option = options.length === 1 ? options[0] : null;
+
+ const monthNumberToAbbreviationMap = {
+ 1: 'ian',
+ 2: 'feb',
+ 3: 'mar',
+ 4: 'apr',
+ 5: 'mai',
+ 6: 'iun',
+ 7: 'iul',
+ 8: 'aug',
+ 9: 'sep',
+ 10: 'oct',
+ 11: 'nov',
+ 12: 'dec'
+ };
+
const handleAddCart = async (event) => {
//Prevent page reload
event.preventDefault();
@@ -39,114 +60,559 @@ const ProductDetails = () => {
});
};
+ const parentRef = useRef(null);
+ const cartRef = useRef(null);
+ const [isSticky, setIsSticky] = useState(false);
+
+ const handleScroll = () => {
+ if (parentRef.current && cartRef.current) {
+ const parentRect = parentRef.current.getBoundingClientRect();
+ const cartRect = cartRef.current.getBoundingClientRect();
+
+ var pos_cond = parentRect.top <= 0 && parentRect.bottom >= cartRect.height;
+
+ setIsSticky(pos_cond);
+
+ if (pos_cond) {
+ cartRef.current.style.position = 'fixed';
+ cartRef.current.style.top = '0px';
+ } else {
+ cartRef.current.style.position = 'relative';
+ }
+ }
+ };
+
+ useEffect(() => {
+
+
+ window.addEventListener('scroll', handleScroll);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
const toggleRegistrationService = () => {
setVisibleRegistrationService(prevState => !prevState);
};
const closeRegistrationService = () => {
setVisibleRegistrationService(false);
- console.log("Function" + visibleRegistrationService)
};
- return (
-
+ {generatePageNumbers().map((page, index) => (
+
+ ))}
+
+ {currentPage < totalPages && }
+
+
+
+ Selected Location
+
+
+
+ );
+ };
- {/* Desktop view */}
-
-
-
- 
+ const ExtraDetailsBlock = ({ sections }) => {
+ return (
+
+ {sections.map((section, index) => (
+
+ );
+ };
+
+ const ConvertDurationToHoursAndMinutes = ({ durationString }) => {
+ // Extract hours and minutes
+ const hours = parseInt(durationString.match(/(\d+)H/)[1] || 0);
+ const minutes = parseInt(durationString.match(/(\d+)M/)[1] || 0);
+
+ // Format the duration
+ if (hours === 0) return `${minutes}min`;
+ if (minutes === 0) return `${hours}h`;
+ return`${hours}h ${minutes}min`;
+ };
+
+ const ExtractOptionDate = ({ option }) => {
+ const dateString = option.date;
+ const date = new Date(dateString);
+
+ const day = date.getDate();
+ const month = date.getMonth() + 1;
+ const year = date.getFullYear();
+ const hour = ('0' + date.getHours()).slice(-2);
+ const minutes = ('0' + date.getMinutes()).slice(-2);
+
+ const dateArray = dateString === "" ? null : [day, month, year, hour, minutes];
+ return dateArray;
+ };
+
+ const OneOptionBlock = ({ option }) => {
+ const dateArray = ExtractOptionDate({ option });
+
+ return (
+
+
+ ))}
+
+ {section.question}
+
+
+ {section.answer}
+
+ {index != sections.length - 1 ? : }
+
+
+ {name}
+
+ {dateArray != null &&
+
+
- {`Data: `}
+ {dateArray[0]} {monthNumberToAbbreviationMap[dateArray[1]]} {dateArray[2]}
-
- {"Home/"} - {product} - {`/${name}`} -
-{name}
- - Preț: {price === "free" ? "Gratis" : price} {price === "free" ? "" : "Ron"} - - Organizator: {organiser} -
-
}
+ Descriere
-{description}
+
+
+ {`Ora: `}
+
+ {dateArray[3]}:{dateArray[4]}
- - Categorie: {category} - - Rating:{" "} - - {rating.toString().slice(0, 3)} - - {rating.toString().slice(3)} - -
-
+ {option.details}
-
-
- ← Întoarce-te la pagina de servicii
-
+
+
+
+
- {visibleRegistrationService &&
+ {option.map_location != "" && option.map_location != null &&
-
+
}
+ LOCAȚIE
+
+
+ {option.location}
+
+
-
-
-
-
-
-
{name}
-
-
- Preț: {price} Ron
-
- Categorie: {category}
- Organizator: {organiser}
+
+ );
+ };
+
+ const MoreOptionsBlock = ({ options }) => {
+ var dateArray, duration;
+
+ return (
+
+
+ Experiența aceasta este disponibilă în mai multe variante
+
+
+ {options.map((option, index) => (
+ dateArray = ExtractOptionDate({ option }),
+ duration = option.duration != "" ? ConvertDurationToHoursAndMinutes({ durationString: option.duration }) : null,
+
+ );
+ };
+
+ const CommonLocationBlock = () => {
+ return (
+
+
+
+ {option.name != "" &&
-
+ {option.name} {duration && - {duration}} | {option.price === 0 ? Gratis: {option.price} RON}
+
}
+
+
+ {dateArray != null &&
+
}
+ {option.city != "" &&
+
+ {`Data: `}
+ {dateArray[0]} {monthNumberToAbbreviationMap[dateArray[1]]} {dateArray[2]}
+
+
+ {`Ora: `}
+
+ {dateArray[3]}:{dateArray[4]}
+
+ Oraș: {option.city}, {option.county}
}
+ {option.location != "" && Locație: {option.location}
}
+
-
- Descriere
-{description}
+ +
+ {option.details}
+
+
+
+ {!common_location && option.map_location != "" && option.map_location != null &&
+ {index != options.length - 1 ? : }
+
}
+ - - Rating:{" "} - - {rating.toString().slice(0, 3)} - - {rating.toString().slice(3)} - -
- + ))} +
+ {common_location && map_location != "" && (main_option === null || (main_option != null && main_option.map_location == "")) &&
+ );
+ };
+
+ const DetailsBlock = () => {
+ return (
+
+
+
+
}
+
+ LOCAȚIE
+
+
+ {location}
+
+
+
+ );
+ }
+
+ const RatingStarsBlock = () => {
+ return (
+
+
-
- ← Întoarce-te la pagina de servicii
-
+
+ {options.length === 1 &&
+ {description}
+
+
+ {/*
+ );
+ };
+
+ const HeroSection = () => {
+ return (
+
+ 
+
+
+
+
+
*/}
+
+
+
+
+
+
+
+ );
+ };
+
+ const HeaderSection = () => {
+ return (
+
+
+
+ {/* */}
+ 
*/}
+
+
+
+ {/* 
*/}
+
+ {/* */}
+ */}
+
+
-
+
+ );
+ };
+
+ const CartSectionMoreOptions = ({ options, selectedOption, handleOptionChange }) => {
+ return (
+
+ {`ORGANIZATOR: `}
+
+ {(main_option != null || options_common_city) &&
+
+ {organiser}
+
+
+ 
+
}
+ {city != null && options_common_city ? city : ""}
+ {main_option != null ? main_option.city : ""}
+
+ {county != null && county != city && options_common_city ? ", " + county : ""}
+ {main_option != null && main_option.city != main_option.county ? ", " + main_option.county : ""}
+
+
+
+ );
+ }
+
+ const CartSectionOneOption = ({ option }) => {
+ const dateString = option.date;
+ const date = new Date(dateString);
+ const day = date.getDate();
+ const month = date.getMonth() + 1;
+ const year = date.getFullYear();
+ const hour = ('0' + date.getHours()).slice(-2);
+ const minutes = ('0' + date.getMinutes()).slice(-2);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {name}
+ {common_location && Locație: {location}
}
+
+
+
+
+ Alege varianta dorită:
+
+
+ {options.map((option) => (
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ Număr de participanti
+
+
+
+
+
+
+
+ {`Preț : `}
+
+ {selectedOption ? {numberOfParticipants * options.find(option => option.id === selectedOption).price} RON : 0 RON}
+
+
+
+
+
+ ADAUGĂ IN COS
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+ {option.location != "" &&
+
+ {`Data: `}
+ {day} {monthNumberToAbbreviationMap[month]} {year}
+
+
+ {`Ora: `}
+
+ {hour}:{minutes}
+
+ Locație: {option.location}
}
+
+
+
+
+ {`Preț : `}
+
+ {option.price === 0 ? Gratis: option.price + " RON"}
+
+
+
+
+
+ ADAUGĂ IN COS
+
+
+
+
);
+
};
-export default ProductDetails;
+export default ProductDetails;
\ No newline at end of file
diff --git a/src/components/ScrollOnTopOnRefresh.js b/src/components/ScrollOnTopOnRefresh.js
new file mode 100644
index 0000000..a6ec9cf
--- /dev/null
+++ b/src/components/ScrollOnTopOnRefresh.js
@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const ScrollToTopOnNavigation = () => {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [pathname]);
+
+ return null;
+};
+
+export default ScrollToTopOnNavigation;
diff --git a/src/components/SingleProduct.js b/src/components/SingleProduct.js
index 7027177..edce15a 100644
--- a/src/components/SingleProduct.js
+++ b/src/components/SingleProduct.js
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from "react";
const SingleProduct = ({ product }) => {
- const { img_path, name, price } = product;
+ const { img_path, name } = product;
const url = "/" + name;
const [visibleRegistrationService, setVisibleRegistrationService] = useState(false);
const baseUrl = window.location.origin;
@@ -13,7 +13,23 @@ const SingleProduct = ({ product }) => {
// var final_img_path = `${process.env.REACT_APP_SERVER_IMAGE_PATH}${img_path}`;
// console.log(final_img_path);
+ const DisplayPriceText = () => {
+ var min = product.options[0].price;
+ for (let i = 1; i < product.options.length; i++) {
+ if (product.options[i].price < min) {
+ min = product.options[i].price;
+ }
+ }
+
+ if (min == "0") {
+ return (Gratis);
+ } else if (product.options.length == 1) {
+ return ({min} RON);
+ } else {
+ return (De la {min} RON);
+ }
+ };
const handleAddCart = async (event) => {
//Prevent page reload
@@ -53,56 +69,52 @@ const SingleProduct = ({ product }) => {
};
return (
-
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
-
- {/* {dev &&
- } */}
- {/* {!dev && */}
+
- );
+ );
};
export default SingleProduct;
diff --git a/src/images/6abd844e-2380-4d24-9d81-1091368cd811.jpg b/src/images/6abd844e-2380-4d24-9d81-1091368cd811.jpg
new file mode 100644
index 0000000..5c20986
Binary files /dev/null and b/src/images/6abd844e-2380-4d24-9d81-1091368cd811.jpg differ
diff --git a/src/images/b1d9bc1e-031c-47b3-8724-4c96fd755ab1.jpg b/src/images/b1d9bc1e-031c-47b3-8724-4c96fd755ab1.jpg
new file mode 100644
index 0000000..c928ecd
Binary files /dev/null and b/src/images/b1d9bc1e-031c-47b3-8724-4c96fd755ab1.jpg differ
diff --git a/src/images/category_hero.png b/src/images/category_hero.png
new file mode 100644
index 0000000..ee57031
Binary files /dev/null and b/src/images/category_hero.png differ
diff --git a/src/images/findmore_arta_mare.png b/src/images/findmore_arta_mare.png
new file mode 100644
index 0000000..b3d10d1
Binary files /dev/null and b/src/images/findmore_arta_mare.png differ
diff --git a/src/images/findmore_cursuri_mare.png b/src/images/findmore_cursuri_mare.png
new file mode 100644
index 0000000..e7316a5
Binary files /dev/null and b/src/images/findmore_cursuri_mare.png differ
diff --git a/src/images/findmore_evenimente_mare.png b/src/images/findmore_evenimente_mare.png
new file mode 100644
index 0000000..e0c54c4
Binary files /dev/null and b/src/images/findmore_evenimente_mare.png differ
diff --git a/src/images/findmore_excursii_mare.png b/src/images/findmore_excursii_mare.png
new file mode 100644
index 0000000..5301fdb
Binary files /dev/null and b/src/images/findmore_excursii_mare.png differ
diff --git a/src/images/findmore_hobby_mare.png b/src/images/findmore_hobby_mare.png
new file mode 100644
index 0000000..fdc43e5
Binary files /dev/null and b/src/images/findmore_hobby_mare.png differ
diff --git a/src/images/findmore_sanatate_mare.png b/src/images/findmore_sanatate_mare.png
new file mode 100644
index 0000000..aa8787c
Binary files /dev/null and b/src/images/findmore_sanatate_mare.png differ
diff --git a/src/images/findmore_spiritualitate_mare.png b/src/images/findmore_spiritualitate_mare.png
new file mode 100644
index 0000000..c950822
Binary files /dev/null and b/src/images/findmore_spiritualitate_mare.png differ
diff --git a/src/images/findmore_sport_mare.png b/src/images/findmore_sport_mare.png
new file mode 100644
index 0000000..15a2710
Binary files /dev/null and b/src/images/findmore_sport_mare.png differ
diff --git a/src/images/marker_icon.png b/src/images/marker_icon.png
new file mode 100644
index 0000000..413a763
Binary files /dev/null and b/src/images/marker_icon.png differ
diff --git a/src/images/product_page_location_icon.svg b/src/images/product_page_location_icon.svg
new file mode 100644
index 0000000..1096284
--- /dev/null
+++ b/src/images/product_page_location_icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/pages/AdminAddService.js b/src/pages/AdminAddService.js
index e9600d2..d1cea53 100644
--- a/src/pages/AdminAddService.js
+++ b/src/pages/AdminAddService.js
@@ -1,38 +1,202 @@
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
+import React, { useState, useEffect, useRef } from "react";
import axios_api from '../api/axios_api';
import useAuthentication from '../api/permissions';
import '../styles/styles.css';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from "react-leaflet";
+import L from 'leaflet';
+import marker_icon_png from '../images/marker_icon.png';
function AdminAddService() {
- // React States
- const [errorMessages, setErrorMessages] = useState({});
- const [isSubmitted, setIsSubmitted] = useState(false);
+ const initialQuestions = [
+ "Ce include?",
+ "Ce presupune?",
+ "Ce face?",
+ "De ce ai alege aceasta experienta?",
+ "Beneficiile alegerii acestei experiente",
+ ];
+
+ const categories = [
+ 'Spiritualitate',
+ 'Excursii',
+ 'Sănătate',
+ 'Sport',
+ 'Divertisment',
+ 'Artă',
+ 'Cursuri de limbi străine',
+ 'Hobby',
+ ];
+
+ const [formData, setFormData] = useState({
+ name: '',
+ description: '',
+ image: '',
+ // ... Other fields from the Service model
+ has_more_options: false,
+ options_common_city: false,
+ common_location: false,
+ location: '',
+ map_location: '',
+ city: '',
+ county: '',
+ category: '',
+ iban: '',
+ });
+ const [options, setOptions] = useState([]);
const [selectedImage, setSelectedImage] = useState(null);
- const [refreshToken, setRefreshToken] = useState('');
+ const [isSubmitted, setIsSubmitted] = useState(false);
const navigate = useNavigate();
- const FormData = require('form-data');
const userRole = useAuthentication();
+ const [mapLocation, setMapLocation] = useState([44.43, 27.34]); // Default location
+ const [formMarkerPosition, setFormMarkerPosition] = useState([44.43, 26.09]); // Default marker position for form data
+ const [optionMarkerPositions, setOptionMarkerPositions] = useState([]); // Default marker position
+ const [sections, setSections] = useState(initialQuestions);
+ const [sectionText, setSectionText] = useState({});
+ const [selectedSection, setSelectedSection] = useState("");
- const handleAddService = async (event) => {
- //Prevent page reload
- event.preventDefault();
+ const handleSectionSelect = (section) => {
+ setSelectedSection(section);
+ if (!sectionText[section]) {
+ setSectionText({
+ ...sectionText,
+ [section]: "",
+ });
+ }
+ };
- const formData = new FormData();
- var { name, category, price, description, organiser } = document.forms[0];
- formData.append("name", name.value);
- formData.append('category', category.value);
- formData.append('price', price.value);
- formData.append('description', description.value);
- formData.append('organiser', organiser.value);
+ const handleSectionRemove = (section) => {
+ const updatedSectionText = { ...sectionText };
+ delete updatedSectionText[section];
+ setSectionText(updatedSectionText);
+ setSelectedSection("");
+ };
- var imagefile = document.querySelector('#upload-input');
- formData.append("file", imagefile.files[0]);
- console.log(Array.from(formData.entries()));
+ const handleTextChange = (section, text) => {
+ setSectionText({
+ ...sectionText,
+ [section]: text,
+ });
+ };
+ const markerIcon = new L.Icon({
+ iconUrl: marker_icon_png,
+ iconRetinaUrl: marker_icon_png,
+ popupAnchor: [-0, -0],
+ iconSize: [25,25],
+});
+
+ // Function to update the map location when the user selects a location
+ const handleMapLocationChange = (e) => {
+ setMapLocation([e.latlng.lat, e.latlng.lng]);
+ setFormMarkerPosition([e.latlng.lat, e.latlng.lng]);
+ setFormData({ ...formData, map_location: `${e.latlng.lat}, ${e.latlng.lng}` });
+ };
+
+ const handleMarkerClick = (e) => {
+ setFormMarkerPosition([e.latlng.lat, e.latlng.lng]);
+ setFormData({ ...formData, map_location: `${e.latlng.lat}, ${e.latlng.lng}` });
+ };
+
+ function MapEventsHandler({ handleMarkerClick }) {
+ useMapEvents({
+ click: handleMarkerClick,
+ });
+
+ return null;
+ }
+
+ const handleInputChange = (e) => {
+ const { name, value, type, checked } = e.target;
+ setFormData({
+ ...formData,
+ [name]: type === "checkbox" ? checked : value,
+ });
+ console.log(e);
+ };
+
+ const handleAddServiceOption = () => {
+ const newOption = {
+ name: "",
+ price: 0,
+ duration: "",
+ date: "",
+ location: "",
+ map_location: "",
+ details: "",
+ option_has_location: false,
+ city: "",
+ county: "",
+ };
+ setOptions([...options, newOption]);
+ };
+
+ const handleOptionMarkerClick = (e, index) => {
+ // Create a copy of the existing marker positions for options
+ const updatedOptionMarkerPositions = [...optionMarkerPositions];
+ updatedOptionMarkerPositions[index] = [e.latlng.lat, e.latlng.lng];
+ setOptionMarkerPositions(updatedOptionMarkerPositions);
+
+ // Update the general marker position for the form data to match the last clicked option's position
+ setFormMarkerPosition([e.latlng.lat, e.latlng.lng]);
+
+ // Update the map_location field in the specific option's data
+ const updatedOptions = [...options];
+ updatedOptions[index].map_location = `${e.latlng.lat}, ${e.latlng.lng}`;
+ setOptions(updatedOptions);
+ };
+
+ const handleOptionChange = (index, name, value) => {
+ if (name === "date_time") {
+ // Parse the date string into a JavaScript Date object
+ const selectedDate = new Date(value);
+
+ // Adjust the date to the desired timezone (Bucharest)
+ const bucharestTimezoneOffset = -120; // Bucharest timezone offset in minutes (UTC+2)
+ selectedDate.setMinutes(selectedDate.getMinutes() - bucharestTimezoneOffset);
+
+ // Format the date with the timezone offset
+ const formattedDate = selectedDate.toISOString().slice(0, 16);
+
+ const updatedOptions = [...options];
+ updatedOptions[index][name] = formattedDate;
+ setOptions(updatedOptions);
+ } else {
+ const updatedOptions = [...options];
+ updatedOptions[index][name] = value;
+ setOptions(updatedOptions);
+ }
+ }
+
+ const handleRemoveOption = (index) => {
+ const updatedOptions = [...options];
+ updatedOptions.splice(index, 1);
+ setOptions(updatedOptions);
+ };
+
+ const handleAddService = async (event) => {
+ event.preventDefault();
+
+ const formDataToSubmit = new FormData();
+
+ // Append all fields from formData
+ Object.keys(formData).forEach((key) => {
+ formDataToSubmit.append(key, formData[key]);
+ });
+
+ // Append the image
+ formDataToSubmit.append('image', selectedImage);
+
+ // Append other fields
+ formDataToSubmit.append('options', JSON.stringify(options));
+
+ const sect = [];
+ Object.keys(sectionText).forEach((section) => {
+ sect.push({ question: section, answer: sectionText[section] });
+ });
+ formDataToSubmit.append('sections', JSON.stringify({sections: sect}));
+
axios_api.post("/create_service/",
- formData
+ formDataToSubmit
, {withCredentials: true,
headers: {
// 'X-CSRFToken': `${localStorage.getItem('csrftoken')}`, // Set the CSRF token in the request headers
@@ -54,63 +218,497 @@ function AdminAddService() {
});
};
- const handleImageUpload = async (event) => {
- // Handle image upload logic
+ const handleImageUpload = (event) => {
const file = event.target.files[0];
setSelectedImage(file);
};
- // JSX code for login form
- const renderForm = (
- {
+ e.currentTarget.style.transform = "scale(1.03)";
+ e.currentTarget.style.boxShadow = "0px 16px 32px rgba(0, 0, 0, 0.1)"; // Adjust the shadow on hover
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = "scale(1)";
+ e.currentTarget.style.boxShadow = "0px 8px 16px rgba(0, 0, 0, 0)";
+ }}>
+
+
+
+
- {/* } */}
-
-
-
- {visibleRegistrationService && - {product.name} -
- -
-
+
+
+ - Preț: {price === "free" ? "Gratis" : price} -
-
-
-
-
-
-
+ className="absolute h-full w-full top-[0%] right-[0%] bottom-[0%] left-[0%] max-w-full overflow-hidden max-h-full object-cover"
+ alt=""
+ src={final_img_path}
+ />
+
+
+
+
+
+
+
+
+
+ {product.name}
+
+
+
+
+ {product.organiser}
+
+
+
+
-