Merge pull request #120 (Client updates)

from Cappuccino-Projects/dev-ovl

client/src/Components/AllPlacesWrapper/styles.module.css

@@ -144,6 +144,7 @@
   background-color: #f3f3f3;
   padding: 2px 10px 1px 10px;
   border-radius: 15px;
+  border: none;
   cursor: pointer;
   user-select: none;
   font-size: 13px;

client/src/Components/LocationsWrapper/index.jsx

@@ -9,6 +9,7 @@ import { useSelector } from 'react-redux'
 import styles from './styles.module.css'
 
 export const LocationsWrapper = () => {
+
 	const [currentList, setCurrentList] = useState([])
 	const user = useSelector((state) => state.user.user)
 

client/src/Components/interactiveMap/AddMarker.jsx

@@ -9,9 +9,11 @@ import styles from './styles.module.css'
 const AddMarker = ({onClose}) => {
   const dispatch = useDispatch();
 
-  const [title, setTitle] = useState('new place');
+  const [title, setTitle] = useState('Новое место');
   const [latitude, setLatitude] = useState('54.240908');
-  const [longitude, setLongitude] = useState('49.557214');
+    const [longitude, setLongitude] = useState('49.557214');
+    const [type, setType] = useState();
+    const [typeId, setTypeId] = useState(1);
 
 
   const places = useSelector((state) => state.places) || []; // Access places from the store and default to an empty array if it's not an array
@@ -22,7 +24,7 @@ const AddMarker = ({onClose}) => {
     const newMarker = { 
       id: places.length + 1, // Generate a new id based on the length of the places array
       title: title, // Use the title from the state
-      typeId: 1,
+      typeId: typeId,
       address: '',
       latitude: latitude, // Use the latitude from the state
       longitude: longitude, // Use the longitude from the state
@@ -61,6 +63,10 @@ const AddMarker = ({onClose}) => {
         Долгота:
         <input type="number" value={longitude} onChange={(e) => setLongitude(e.target.value)} className={styles.input} />
       </label><br />
+      <label className={styles.label}>
+        Тип места:
+        <input type="text" value={typeId} onChange={(e) => setTypeId(e.target.value)} className={styles.input}/>
+      </label><br />
       <button type="submit" className={styles.button}>Сохранить</button>
       <button type="button" onClick={onClose} className={styles.button}>Отменить</button>
     </form>

client/src/Components/interactiveMap/EditMarker.jsx

@@ -71,7 +71,7 @@ const handleSubmit = (e) => {
       </label><br />
       <label className={styles.label}>
         Тип места:
-        <input type="text" value={type} onChange={(e) => setType(e.target.value)} className={styles.input}/>
+        <input type="text" value={typeId} onChange={(e) => setTypeId(e.target.value)} className={styles.input}/>
       </label><br />
 
       <button type="submit" className={styles.button}>Сохранить</button>

client/src/Components/interactiveMap/interactiveMap.jsx

@@ -1,4 +1,4 @@
-import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import { useSelector, useDispatch } from 'react-redux'
@@ -74,7 +74,12 @@ const InteractiveMap = (props) => {
 						position={[place.latitude, place.longitude]}
 						eventHandlers={{ click: () => handleMarkerClick(place) }}
 					>
-						<Popup>{place.title}</Popup>
+						<Popup>
+							<b>{place.title ?? placeTypes.find((placeType) => placeType.id === place.typeId).name} {place.rank ? `★ ${place.rank}` : null}</b>
+							{place.title !== null ? <p>{placeTypes.find((placeType) => placeType.id === place.typeId).name}</p> : null}
+							{place.address ? <p>{place.address}</p>
+								: <p>Координаты: {place.latitude ? place.latitude : ''},{place.longitude ? place.longitude : ''}</p>}
+						</Popup>
 					</Marker>
 				))}
 

client/src/app/App.jsx

@@ -1,5 +1,5 @@
 import { Modal } from '@components'
-import { AllPlaces, Chat, DailyTasksPage, Favourite, Inventory, Login, MainMenu, Map, MapEditMenu, Profile, Registration, Settings, Shop, UserSuggestions } from '@pages'
+import { AllPlaces, Chat, DailyTasksPage, Favourite, Favourite1, Inventory, Login, MainMenu, Map, MapEditMenu, Profile, Registration, Settings, Shop, UserSuggestions } from '@pages'
 import { InfoPDF } from '@pages/InfoPDF'
 import { setChanges } from '@redux/slices/changesSlice'
 import { setPlaces } from '@redux/slices/placesSlice'
@@ -54,6 +54,7 @@ const AuthenticatedRoute = () => {
 				<Route path="/mapeditmenu" element={<MapEditMenu />} />
 				<Route path="/allplaces" element={<AllPlaces />} />
 				<Route path="/favourite" element={<Favourite />} />
+				<Route path="/starred" element={<Favourite1 />} />
 				<Route path="/profile" element={<Profile />} />
 				<Route path="/profile/settings" element={<Settings />} />
 				<Route path="/dailytasks" element={<DailyTasksPage />} />

client/src/pages/Favourite1/index.jsx

@@ -0,0 +1,23 @@
+import {
+	BackToMainMenu,
+	AllPlacesWrapper,
+	UserCard
+} from '@components'
+import { useSelector } from 'react-redux'
+import styles from './styles.module.css'
+
+export const Favourite1 = () => {
+	const places = useSelector((state) => state.places.places)
+	//places.filter((place) => )
+
+	return (
+		<>
+			<BackToMainMenu />
+
+			<p className={styles.TitleText}>Избранное</p>
+
+			<AllPlacesWrapper className={styles.CardsWrapper} places={places} WrapperText={'Места (' + places.length + ')'} WrapperButtonEnabled={false} />
+			<UserCard ShowLvl={false} ShowBalance={false} IsItProfilePage={false} />
+		</>
+	)
+}

client/src/pages/Favourite1/styles.module.css

@@ -0,0 +1 @@
+@import url('./../pages.module.css');

client/src/pages/MainMenu/ui/MainMenuContainer.jsx

@@ -1,16 +1,19 @@
 import { MainMenuItem } from './MainMenuItem'
 import styles from './../styles.module.css'
+import { useSelector } from 'react-redux'
 
 export const MainMenuContainer = () => {
+	const user = useSelector((state) => state.user.user)
 	return (
 		<div className={styles.MainMenuButtonsWrapper}>
-			<MainMenuItem link="/favourite" label="Избранное" icon="fi fi-sr-heart" />
+			{user.isAdmin ? <MainMenuItem link="/adminpanel" label="Админ-панель" icon="fi fi-sr-shield" /> : null}
+			<MainMenuItem link="/starred" label="Избранное" icon="fi fi-sr-heart" />
 			<MainMenuItem
 				link="/favourite"
 				label="Ваши впечатления"
 				icon="fi fi-sr-star"
 			/>
-			<MainMenuItem link="/favourite" label="Маршруты" icon="fi fi-sr-road" />
+			{/*<MainMenuItem link="/favourite" label="Маршруты" icon="fi fi-sr-road" />*/}
 			<MainMenuItem
 				link="/mapeditmenu"
 				label="Редактировать карту"

client/src/pages/Map/index.jsx

@@ -5,11 +5,11 @@ import InteractiveMap from '../../Components/interactiveMap/interactiveMap'
 import styles from './styles.module.css'
 
 export const Map = () => {
-	const [zoom, setZoom] = useState(20)
+	const [zoom, setZoom] = useState(17)
 	const [isShowMenu, setShowMenu] = useState(true)
 
 	const handleZoomIn = () => {
-		setZoom((prevZoom) => prevZoom + 1)
+		setZoom((prevZoom) => prevZoom < 18 ? prevZoom + 1 : 18)
 	}
 
 	const handleZoomOut = () => {

client/src/pages/index.js

@@ -1,6 +1,7 @@
 export { AllPlaces } from './AllPlaces'
 export { Chat } from './Chat'
 export { Favourite } from './Favourite'
+export { Favourite1 } from './Favourite1'
 export { Login } from './Login'
 export { MainMenu } from './MainMenu'
 export { Map } from './Map'