Changeset bc20307 for sources/client/src/components/admin/ParkingZones
- Timestamp:
- 02/14/22 01:41:41 (2 years ago)
- Branches:
- master
- Children:
- 747e0ab
- Parents:
- e8b1076
- Location:
- sources/client/src/components/admin/ParkingZones
- Files:
-
- 5 edited
-
ParkingZoneCard/index.js (modified) (1 diff)
-
ParkingZoneCard/styles.js (modified) (1 diff)
-
index.js (modified) (1 diff)
-
mockData.js (modified) (1 diff)
-
styles.js (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
sources/client/src/components/admin/ParkingZones/ParkingZoneCard/index.js
re8b1076 rbc20307 2 2 3 3 import { 4 ParkingZoneWrapper,5 Container,6 ZoneName,7 InfoWrapper,8 Label,9 Value,10 ProgressBar,11 ProgressBarLabel,4 ParkingZoneWrapper, 5 Container, 6 ZoneName, 7 InfoWrapper, 8 Label, 9 Value, 10 ProgressBar, 11 ProgressBarLabel, 12 12 } from './styles'; 13 13 14 import DropdownViewer from '../../../DropdownViewer'; 15 14 16 const ParkingZoneCard = ({ info }) => { 15 let history = useHistory(); 17 let history = useHistory(); 18 const takenDividedByTotal = info.takenSpaces / info.capacity; 16 19 17 return ( 18 <ParkingZoneWrapper item xs={11} sm={6} md={3}> 19 <Container onClick={() => history.push(`/zone/${info.id}`)}> 20 <ZoneName>{info.zoneName}</ZoneName> 21 <InfoWrapper> 22 <Label>Одговорни лица:</Label> 23 {info.responsiblePersons.slice(0, 1).map((person, index) => ( 24 <Value key={index}>{person}</Value> 25 ))} 26 {info.responsiblePersons.length > 1 ? <Value>...</Value> : null} 27 </InfoWrapper> 28 <InfoWrapper> 29 <Label>Број на паркинг места:</Label> 30 <Value>{info.parkingSpaces}</Value> 31 </InfoWrapper> 32 <ProgressBar 33 percent={Math.floor( 34 (info.takenParkingSpaces / info.parkingSpaces) * 100 35 )} 36 label={() => ( 37 <ProgressBarLabel> 38 {info.takenParkingSpaces}/{info.parkingSpaces} 39 </ProgressBarLabel> 40 )} 41 /> 42 </Container> 43 </ParkingZoneWrapper> 44 ); 20 return ( 21 <ParkingZoneWrapper item xs={11} sm={6} md={3}> 22 <Container onClick={() => history.push(`/zone/${info.id}`)}> 23 <ZoneName>{info.pzName}</ZoneName> 24 <InfoWrapper> 25 <Label>Одговорни лица:</Label> 26 <DropdownViewer data={info?.responsibleWorkers ?? [] } /> 27 </InfoWrapper> 28 <InfoWrapper style={{ marginTop: '30px' }}> 29 <Label>Број на паркинг места:</Label> 30 <Value>{info.capacity}</Value> 31 </InfoWrapper> 32 <ProgressBar 33 percent={Math.floor( 34 (isNaN(takenDividedByTotal) ? 0 : takenDividedByTotal) * 35 100 36 )} 37 label={() => ( 38 <ProgressBarLabel> 39 {info.takenSpaces}/{info.capacity} 40 </ProgressBarLabel> 41 )} 42 /> 43 </Container> 44 </ParkingZoneWrapper> 45 ); 45 46 }; 46 47 -
sources/client/src/components/admin/ParkingZones/ParkingZoneCard/styles.js
re8b1076 rbc20307 2 2 import Grid from '@mui/material/Grid'; 3 3 import { Typography } from '@mui/material'; 4 5 import { LineProgressBar } from '@frogress/line' 6 4 import { LineProgressBar } from '@frogress/line'; 5 import { mobile_max_width } from '../../../../config/utilities'; 7 6 8 7 export const ParkingZoneWrapper = styled(Grid)` 9 height: 350px; 8 height: 350px; 9 10 @media (max-width: ${mobile_max_width}px) { 11 padding-left: 15px !important; 12 padding-right: 15px; 13 } 10 14 `; 11 15 12 16 export const Container = styled.div` 13 14 15 16 17 18 box-shadow: 15px 15px 10px ${props=> props.theme.palette.background.shadow};19 background-color: ${props=> props.theme.palette.background.white};20 21 22 23 24 17 display: flex; 18 flex-direction: column; 19 align-items: center; 20 width: 100%; 21 height: 100%; 22 box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow}; 23 background-color: ${(props) => props.theme.palette.background.white}; 24 :hover { 25 opacity: 0.8; 26 cursor: pointer; 27 } 28 position: relative; 25 29 `; 26 30 27 31 export const ZoneName = styled(Typography).attrs({ 28 variant: 'h2'32 variant: 'h2', 29 33 })` 30 31 32 33 34 font-size: 2rem; 35 font-weight: 600; 36 margin-top: 30px; 37 text-align: center; 34 38 `; 35 39 36 40 export const InfoWrapper = styled.div` 37 margin-top: 20px;38 display: flex;39 flex-direction: column;40 align-items: center;41 41 width: 100%; 42 margin-top: 20px; 43 display: flex; 44 flex-direction: column; 45 align-items: center; 42 46 `; 43 47 44 48 export const Label = styled(Typography).attrs({ 45 variant: 'h4'49 variant: 'h4', 46 50 })` 47 48 51 font-size: 1rem; 52 margin-bottom: 5px; 49 53 `; 50 54 51 55 export const Value = styled(Typography).attrs({ 52 variant: 'h3'56 variant: 'h3', 53 57 })` 54 55 56 58 font-size: 1.25rem; 59 font-weight: 600; 60 margin-top: 5px; 57 61 `; 58 62 59 export const ProgressBar = styled(LineProgressBar).attrs( props=> ({60 61 62 63 export const ProgressBar = styled(LineProgressBar).attrs((props) => ({ 64 stripe: true, 65 progressColor: props.theme.palette.primary.main, 66 height: '30px', 63 67 }))` 64 65 68 position: absolute; 69 bottom: 5px; 66 70 `; 67 71 68 72 export const ProgressBarLabel = styled.p` 69 70 71 72 73 margin: 0 0 0 42.5%; 74 line-height: 30px; 75 position: absolute; 76 font-weight: 500; 73 77 `; -
sources/client/src/components/admin/ParkingZones/index.js
re8b1076 rbc20307 1 import { useState } from 'react';1 import { useState, useContext } from 'react'; 2 2 import { 3 FiltersWrapper, 4 SortingArrowsWrapper, 5 SortByTitle, 6 ArrowDown, 7 ArrowUp, 8 ClearSortIcon, 9 ParkingZonesWrapper, 10 AddParkingZoneCard, 11 AddIcon, 12 AddItem, 13 ParkingName, 14 DividerUnderFilters, 3 FiltersWrapper, 4 SortingArrowsWrapper, 5 SortByTitle, 6 ArrowDown, 7 ArrowUp, 8 ClearSortIcon, 9 ParkingZonesWrapper, 10 AddParkingZoneCard, 11 AddIcon, 12 AddItem, 13 ParkingName, 14 DividerUnderFilters, 15 ModalContainer, 16 ModalTitle, 17 ModalInputAndLabelWrapper, 18 ModalInput, 19 ModalInputLabel, 20 ModalButton, 21 ButtonWrapper, 22 CloseIcon, 15 23 } from './styles'; 16 24 25 import AbsoluteLoader from '../../Loaders/AbsoluteLoader'; 26 import Modal from '@mui/material/Modal'; 27 import Backdrop from '@mui/material/Backdrop'; 28 import { IconButton, Slide } from '@mui/material'; 17 29 import ParkingZoneCard from './ParkingZoneCard'; 18 30 19 31 import { roles } from '../../../config/enums'; 32 import { UserContext } from '../../../context/UserContext'; 33 import useGetData from '../../../hooks/useGetData'; 34 import useCreateZone from '../../../hooks/useCreateZone'; 20 35 21 36 import { parkingZones } from './mockData'; 22 37 23 38 const sortDownUp = (a, b) => { 24 const aPercent = a.takenParkingSpaces / a.parkingSpaces; 25 const bPercent = b.takenParkingSpaces / b.parkingSpaces; 26 if (aPercent > bPercent) { 27 return 1; 28 } else { 29 if (aPercent < bPercent) { 30 return -1; 39 const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber; 40 const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber; 41 if (aPercent > bPercent) { 42 return 1; 43 } else { 44 if (aPercent < bPercent) { 45 return -1; 46 } 47 return a.zoneName - b.zoneName; 31 48 } 32 return a.zoneName - b.zoneName;33 }34 49 }; 35 50 36 51 const sortUpDown = (a, b) => { 37 const aPercent = a.takenParkingSpaces / a.parkingSpaces; 38 const bPercent = b.takenParkingSpaces / b.parkingSpaces; 39 if (aPercent > bPercent) { 52 const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber; 53 const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber; 54 if (aPercent > bPercent) { 55 return -1; 56 } else { 57 if (aPercent < bPercent) { 58 return 1; 59 } 60 return a.zoneName - b.zoneName; 61 } 62 }; 63 64 const sortByName = (a, b) => { 65 if (a.zoneName >= b.zoneName) { 66 return 1; 67 } 40 68 return -1; 41 } else {42 if (aPercent < bPercent) {43 return 1;44 }45 return a.zoneName - b.zoneName;46 }47 };48 49 const sortByName = (a, b) => {50 if (a.zoneName >= b.zoneName) {51 return 1;52 }53 return -1;54 69 }; 55 70 56 71 const ParkingZones = () => { 57 const [isArrowUpUp, setIsArrowUpUp] = useState(false); 58 const [isArrowDownUp, setIsArrowDownUp] = useState(false); 59 60 const user = { 61 role: 'ROLE_ADMIN', 62 }; 63 const sortFunc = isArrowUpUp 64 ? sortDownUp 65 : isArrowDownUp 66 ? sortUpDown 67 : sortByName; 68 69 return ( 70 <> 71 <FiltersWrapper> 72 <ParkingName>Паркинг - Дебар Маало</ParkingName> 73 <SortingArrowsWrapper> 74 <SortByTitle>Сортирај:</SortByTitle> 75 <ArrowUp 76 onClick={() => { 77 if (!isArrowUpUp) { 78 setIsArrowUpUp(true); 79 setIsArrowDownUp(false); 80 } 81 }} 82 selected={isArrowUpUp} 83 /> 84 <ArrowDown 85 onClick={() => { 86 if (!isArrowDownUp) { 87 setIsArrowDownUp(true); 88 setIsArrowUpUp(false); 89 } 90 }} 91 selected={isArrowDownUp} 92 /> 93 {isArrowUpUp || isArrowDownUp ? ( 94 <ClearSortIcon 95 onClick={() => { 96 setIsArrowUpUp(false); 97 setIsArrowDownUp(false); 98 }} 99 /> 100 ) : null} 101 </SortingArrowsWrapper> 102 </FiltersWrapper> 103 104 <DividerUnderFilters /> 105 106 <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}> 107 {user.role === roles.admin ? ( 108 <AddParkingZoneCard item xs={11} sm={6} md={3}> 109 <AddItem> 110 <AddIcon /> 111 </AddItem> 112 </AddParkingZoneCard> 113 ) : null} 114 115 {parkingZones.sort(sortFunc).map((parkingZone) => ( 116 <ParkingZoneCard key={parkingZone.id} info={parkingZone} /> 117 ))} 118 </ParkingZonesWrapper> 119 </> 120 ); 72 const { user } = useContext(UserContext); 73 const { 74 data: zones, 75 setData: setZones, 76 isLoading: isLoadingZones, 77 } = useGetData({ 78 url: '/parkingZone', 79 }); 80 const { createZone, isLoading: isCreateZoneLoading } = useCreateZone(); 81 const [isArrowUpUp, setIsArrowUpUp] = useState(false); 82 const [isArrowDownUp, setIsArrowDownUp] = useState(false); 83 const [isModalOpen, setModalOpen] = useState(false); 84 const [modalInput, setModalInput] = useState(''); 85 const sortFunc = isArrowUpUp 86 ? sortDownUp 87 : isArrowDownUp 88 ? sortUpDown 89 : sortByName; 90 91 const addNewZoneToData = (newZone) => { 92 setZones([...zones, newZone]); 93 }; 94 const handleCreateZone = () => { 95 createZone({ 96 zoneName: modalInput, 97 setModalInput, 98 setModalOpen, 99 addNewZoneToData, 100 }); 101 }; 102 103 return ( 104 <> 105 <Modal 106 open={isModalOpen} 107 onClose={() => { 108 setModalInput(''); 109 setModalOpen(false); 110 }} 111 closeAfterTransition 112 BackdropComponent={Backdrop} 113 BackdropProps={{ 114 timeout: 500, 115 }} 116 style={{ 117 display: 'flex', 118 alignItems: 'center', 119 justifyContent: 'center', 120 }} 121 > 122 <Slide in={isModalOpen}> 123 <ModalContainer> 124 <IconButton 125 style={{ 126 marginLeft: 345, 127 }} 128 onClick={() => { 129 setModalInput(''); 130 setModalOpen(false); 131 }} 132 > 133 <CloseIcon /> 134 </IconButton> 135 {isCreateZoneLoading ? ( 136 <AbsoluteLoader 137 containerStyle={{ 138 width: '200px', 139 height: '200px', 140 margin: 'auto', 141 marginTop: '30px', 142 }} 143 /> 144 ) : ( 145 <> 146 <ModalTitle>НОВА ЗОНА</ModalTitle> 147 <ModalInputAndLabelWrapper> 148 <ModalInputLabel> 149 Назив на Зона 150 </ModalInputLabel> 151 <ModalInput 152 value={modalInput} 153 onChange={(event) => 154 setModalInput(event.target.value) 155 } 156 /> 157 </ModalInputAndLabelWrapper> 158 <ButtonWrapper> 159 <ModalButton onClick={handleCreateZone}> 160 Креирај Зона 161 </ModalButton> 162 </ButtonWrapper> 163 </> 164 )} 165 </ModalContainer> 166 </Slide> 167 </Modal> 168 <FiltersWrapper> 169 <ParkingName>Паркинг - Дебар Маало</ParkingName> 170 <SortingArrowsWrapper> 171 <SortByTitle>Сортирај:</SortByTitle> 172 <ArrowUp 173 onClick={() => { 174 if (!isArrowUpUp) { 175 setIsArrowUpUp(true); 176 setIsArrowDownUp(false); 177 } 178 }} 179 selected={isArrowUpUp} 180 /> 181 <ArrowDown 182 onClick={() => { 183 if (!isArrowDownUp) { 184 setIsArrowDownUp(true); 185 setIsArrowUpUp(false); 186 } 187 }} 188 selected={isArrowDownUp} 189 /> 190 {isArrowUpUp || isArrowDownUp ? ( 191 <ClearSortIcon 192 onClick={() => { 193 setIsArrowUpUp(false); 194 setIsArrowDownUp(false); 195 }} 196 /> 197 ) : null} 198 </SortingArrowsWrapper> 199 </FiltersWrapper> 200 201 <DividerUnderFilters /> 202 203 <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}> 204 {isLoadingZones ? ( 205 <AbsoluteLoader 206 containerStyle={{ 207 width: '250px', 208 height: '250px', 209 margin: 'auto', 210 marginTop: '12vw', 211 }} 212 /> 213 ) : ( 214 <> 215 {user.role === roles.admin ? ( 216 <AddParkingZoneCard 217 item 218 xs={11} 219 sm={6} 220 md={3} 221 onClick={() => setModalOpen(true)} 222 > 223 <AddItem> 224 <AddIcon /> 225 </AddItem> 226 </AddParkingZoneCard> 227 ) : null} 228 229 {zones.sort(sortFunc).map((parkingZone) => ( 230 <ParkingZoneCard 231 key={parkingZone.id} 232 info={parkingZone} 233 /> 234 ))} 235 </> 236 )} 237 </ParkingZonesWrapper> 238 </> 239 ); 121 240 }; 122 241 -
sources/client/src/components/admin/ParkingZones/mockData.js
re8b1076 rbc20307 1 1 export const parkingZones = [ 2 { 3 id: 1, 4 zoneName: 'Zona 1', 5 responsiblePersons: ['Viktor Tasevski', 'Dracevcanec'], 6 parkingSpaces: 69, 7 takenParkingSpaces: 34, 8 areaColor: '#FFD700', 9 location: { 10 center: { 11 lat: 41.937907, 12 lng: 21.51213, 13 }, 14 coords: [ 15 { lat: 41.937749, lng: 21.511095 }, 16 { lat: 41.936971, lng: 21.511534 }, 17 { lat: 41.93834, lng: 21.51407 }, 18 { lat: 41.939031, lng: 21.511914 }, 19 ], 2 { 3 id: 1, 4 zoneName: 'Zona 1', 5 responsiblePersons: ['Viktor Tasevski', 'David Trajkovski'], // THIS SHOULD BE IN THE ParkingZones Call Only for the Card. For the ZoneInfo We need More Data for The Employees. This should be array of employee objects. 6 parkingSpacesNumber: 79, 7 takenParkingSpaces: 34, 8 hourlyRate: 30, 9 workingHours: { 10 from: 5, 11 to: 24, 12 }, 13 zoneColor: '#FFD700', 14 location: { 15 center: { 16 lat: 42.000389, 17 lng: 21.423084, 18 }, 19 coords: [ 20 { lat: 42.00060867305611, lng: 21.424473984198578 }, 21 { lat: 42.001509615969574, lng: 21.421609384939654 }, 22 { lat: 41.99886654813535, lng: 21.42293439620515 }, 23 ], 24 }, 25 parkingSpaces: [ 26 { 27 lat: '42.00043725326595', 28 lng: '21.42263398879119', 29 parkingSpaceNumber: 'A21', 30 isTaken: true, 31 }, 32 { 33 lat: '42.00028576562848', 34 lng: '21.423680050318325', 35 parkingSpaceNumber: 'A1', 36 isTaken: false, 37 }, 38 { 39 lat: '41.99959609366812', 40 lng: '21.423374278487316', 41 parkingSpaceNumber: 'B55', 42 isTaken: true, 43 }, 44 { 45 lat: '41.99962798617793', 46 lng: '21.42275200598912', 47 parkingSpaceNumber: 'C20', 48 isTaken: false, 49 }, 50 ], 20 51 }, 21 parkingSpacesLocation: [ 22 { 23 lat: '41.938271', 24 lng: '21.512380', 25 parkingSpaceNumber: 'A21', 26 free: true, 27 }, 28 { 29 lat: '41.938284', 30 lng: '21.512387', 31 parkingSpaceNumber: 'A1', 32 free: false, 33 }, 34 { 35 lat: '41.938292', 36 lng: '21.512365', 37 parkingSpaceNumber: 'B55', 38 free: true, 39 }, 40 { 41 lat: '41.938279', 42 lng: '21.512359', 43 parkingSpaceNumber: 'C20', 44 free: false, 45 }, 46 ], 47 }, 48 { 49 id: 2, 50 zoneName: 'Zona 2', 51 responsiblePersons: ['Andrej Tavcioski', 'Vlaevec', 'Skopjaniste'], 52 parkingSpaces: 100, 53 takenParkingSpaces: 99, 54 }, 55 { 56 id: 3, 57 zoneName: 'Zona 3', 58 responsiblePersons: ['David Trajkovski', 'Kumanovecot'], 59 parkingSpaces: 36, 60 takenParkingSpaces: 5, 61 }, 62 { 63 id: 4, 64 zoneName: 'Zona 4', 65 responsiblePersons: [ 66 'Nekoj od POC', 67 'Nekoj drug od POC', 68 'Nekoj tret od POC', 69 'Nekoj cetvrt od POC', 70 ], 71 parkingSpaces: 150, 72 takenParkingSpaces: 130, 73 }, 74 { 75 id: 5, 76 zoneName: 'Zona 5', 77 responsiblePersons: ['Nekoj od Silbo'], 78 parkingSpaces: 360, 79 takenParkingSpaces: 250, 80 }, 52 { 53 id: 2, 54 zoneName: 'Zona 2', 55 responsiblePersons: ['Andrej Tavcioski', 'David Trajkovski'], // THIS SHOULD BE IN THE ParkingZones Call Only for the Card. For the ZoneInfo We need More Data for The Employees. This should be array of employee objects. 56 parkingSpacesNumber: 29, 57 takenParkingSpaces: 14, 58 hourlyRate: 30, 59 workingHours: { 60 from: 5, 61 to: 24, 62 }, 63 zoneColor: '#FF0000', 64 location: { 65 center: { 66 lat: 42.001097017606455, 67 lng: 21.421317024169447, 68 }, 69 coords: [ 70 { lat: 42.00048708466677, lng: 21.42135993951415 }, 71 { lat: 42.0006784368066, lng: 21.421837372723967 }, 72 { lat: 42.00149765665009, lng: 21.42148332113017 }, 73 { lat: 42.00134218508192, lng: 21.42078862898779 }, 74 ], 75 }, 76 parkingSpaces: [ 77 { 78 lat: '42.00043725326595', 79 lng: '21.42263398879119', 80 parkingSpaceNumber: 'A21', 81 isTaken: true, 82 }, 83 { 84 lat: '42.00028576562848', 85 lng: '21.423680050318325', 86 parkingSpaceNumber: 'A1', 87 isTaken: false, 88 }, 89 { 90 lat: '41.99959609366812', 91 lng: '21.423374278487316', 92 parkingSpaceNumber: 'B55', 93 isTaken: true, 94 }, 95 { 96 lat: '41.99962798617793', 97 lng: '21.42275200598912', 98 parkingSpaceNumber: 'C20', 99 isTaken: false, 100 }, 101 ], 102 }, 103 { 104 id: 3, 105 zoneName: 'Zona 3', 106 responsiblePersons: ['David Trajkovski', 'Kumanovecot'], 107 parkingSpacesNumber: 36, 108 takenParkingSpaces: 5, 109 hourlyRate: 10, 110 workingHours: '12:00 - 17:00', 111 }, 112 { 113 id: 4, 114 zoneName: 'Zona 4', 115 responsiblePersons: ['Nekoj od POC'], 116 parkingSpacesNumber: 150, 117 takenParkingSpaces: 130, 118 hourlyRate: 100, 119 workingHours: { 120 from: '5', 121 to: '24', 122 }, 123 }, 124 { 125 id: 5, 126 zoneName: 'Zona 5', 127 responsiblePersons: [], 128 parkingSpacesNumber: 360, 129 takenParkingSpaces: 250, 130 hourlyRate: 30, 131 workingHours: { 132 from: '5', 133 to: '24', 134 }, 135 }, 81 136 ]; -
sources/client/src/components/admin/ParkingZones/styles.js
re8b1076 rbc20307 7 7 import ClearIcon from '@mui/icons-material/Clear'; 8 8 import { ParkingZoneWrapper, Container } from './ParkingZoneCard/styles'; 9 import Box from '@mui/material/Box'; 10 import Button from '@mui/material/Button'; 11 import TextField from '@mui/material/TextField'; 12 import CIcon from '@mui/icons-material/Close'; 13 import { mobile_max_width } from '../../../config/utilities'; 9 14 10 15 export const FiltersWrapper = styled.div` 11 margin-bottom: 10px; 12 text-align: center; 13 display: flex; 14 flex-direction: row; 15 justify-content: space-between; 16 align-items: center; 17 padding: 10px 175px; 16 margin-bottom: 10px; 17 text-align: center; 18 display: flex; 19 flex-direction: row; 20 justify-content: space-between; 21 align-items: center; 22 padding: 10px 10%; 23 24 @media (max-width: ${mobile_max_width}px) { 25 flex-direction: column; 26 } 18 27 `; 19 28 20 29 export const SortingArrowsWrapper = styled.div` 21 display: flex; 22 flex-direction: row; 23 align-items: center; 24 position: relative; 30 display: flex; 31 flex-direction: row; 32 align-items: center; 33 position: relative; 34 35 @media (max-width: ${mobile_max_width}px) { 36 margin-top: 30px; 37 } 25 38 `; 26 39 27 40 export const ArrowDown = styled(ArrowDownwardIcon).attrs({})` 28 font-size: 2rem; 29 color: ${(props) => (props.selected ? props.theme.palette.primary.main : '')}; 30 :hover { 31 cursor: pointer; 32 color: ${(props) => props.theme.palette.primary.main}; 33 } 41 font-size: 2rem; 42 color: ${(props) => 43 props.selected ? props.theme.palette.primary.main : ''}; 44 :hover { 45 cursor: pointer; 46 color: ${(props) => props.theme.palette.primary.main}; 47 } 34 48 `; 35 49 36 50 export const ArrowUp = styled(ArrowUpwardIcon).attrs({})` 37 margin: 0 10px 0 15px; 38 font-size: 2rem; 39 color: ${(props) => (props.selected ? props.theme.palette.primary.main : '')}; 40 :hover { 41 cursor: pointer; 42 color: ${(props) => props.theme.palette.primary.main}; 43 } 51 margin: 0 10px 0 15px; 52 font-size: 2rem; 53 color: ${(props) => 54 props.selected ? props.theme.palette.primary.main : ''}; 55 :hover { 56 cursor: pointer; 57 color: ${(props) => props.theme.palette.primary.main}; 58 } 44 59 `; 45 60 46 61 export const ClearSortIcon = styled(ClearIcon).attrs({})` 47 color: ${(props) => props.theme.palette.error.main};48 position: absolute;49 right: 0;50 font-size: 2rem;51 right: -50px;52 :hover {53 cursor: pointer;54 }62 color: ${(props) => props.theme.palette.error.main}; 63 position: absolute; 64 right: 0; 65 font-size: 2rem; 66 right: -50px; 67 :hover { 68 cursor: pointer; 69 } 55 70 `; 56 71 57 72 export const DividerUnderFilters = styled(Divider).attrs({ 58 variant: 'middle',59 sx: {60 margin: '0 160px',61 borderWidth: '2px',62 borderBottomWidth: 'thin',63 },73 variant: 'middle', 74 sx: { 75 margin: '0 9%', 76 borderWidth: '2px', 77 borderBottomWidth: 'thin', 78 }, 64 79 })``; 65 80 66 81 export const SortByTitle = styled(Typography).attrs((props) => ({ 67 fontSize: '1rem',68 fontWeight: '600',69 margin: 0,70 color: `${props.theme.palette.primary.main}`,82 fontSize: '1rem', 83 fontWeight: '600', 84 margin: 0, 85 color: `${props.theme.palette.primary.main}`, 71 86 }))``; 72 87 73 88 export const ParkingName = styled(Typography).attrs((props) => ({ 74 fontSize: '2rem',75 fontWeight: '600',76 margin: 0,77 color: `${props.theme.palette.primary.main}`,89 fontSize: '2rem', 90 fontWeight: '600', 91 margin: 0, 92 color: `${props.theme.palette.primary.main}`, 78 93 }))``; 79 94 80 95 export const ParkingZonesWrapper = styled(Grid)` 81 margin: 0; 82 height: 100%; 83 width: 100%; 84 padding: 0 40px 0 0; 96 margin: 0; 97 height: 100%; 98 width: 100%; 99 padding: 0 40px 30px 0; 100 101 @media (max-width: ${mobile_max_width}px) { 102 padding-right: 0; 103 justify-content: center; 104 } 85 105 `; 86 106 … … 88 108 89 109 export const AddItem = styled(Container)` 90 display: flex;91 align-items: center;92 justify-content: middle;110 display: flex; 111 align-items: center; 112 justify-content: middle; 93 113 `; 94 114 95 115 export const AddIcon = styled(Add).attrs({ 96 sx: {97 fontWeight: 500,98 },116 sx: { 117 fontWeight: 500, 118 }, 99 119 })` 100 width: 100%;101 height: 100%;102 color: ${(props) => props.theme.palette.primary.main};120 width: 100%; 121 height: 100%; 122 color: ${(props) => props.theme.palette.primary.main}; 103 123 `; 124 125 export const ModalContainer = styled(Box).attrs({ 126 width: 400, 127 height: 366, 128 bgcolor: 'background.paper', 129 boxShadow: 24, 130 zIndex: 1000, 131 marginBottom: '10%', 132 })` 133 padding-bottom: 16px; 134 `; 135 136 export const ModalTitle = styled(Typography).attrs({ 137 variant: 'h4', 138 fontWeight: 600, 139 textAlign: 'center', 140 })``; 141 142 export const ModalInputAndLabelWrapper = styled.div` 143 text-align: center; 144 padding: 0 20px; 145 margin-top: 40px; 146 margin-bottom: 70px; 147 `; 148 149 export const ModalInputLabel = styled(Typography).attrs({ 150 variant: 'h6', 151 })``; 152 153 export const ModalInput = styled(TextField).attrs({ 154 fullWidth: true, 155 sx: { 156 marginTop: '10px', 157 }, 158 })` 159 fieldset { 160 border: 0; 161 } 162 input { 163 text-align: center; 164 font-size: 1.1rem; 165 font-weight: 500; 166 padding: 15px 10px; 167 border: 2px solid ${(props) => props.theme.palette.primary.main}; 168 169 :focus { 170 border: 2px dashed ${(props) => props.theme.palette.primary.main}; 171 } 172 } 173 `; 174 175 export const ButtonWrapper = styled.div` 176 width: 100%; 177 text-align: center; 178 `; 179 180 export const ModalButton = styled(Button).attrs((props) => ({ 181 variant: 'contained', 182 size: 'large', 183 sx: { 184 backgroundColor: `${props.theme.palette.primary.main}`, 185 }, 186 }))` 187 :hover { 188 background-color: ${(props) => props.theme.palette.primary.dark}; 189 } 190 `; 191 192 export const CloseIcon = styled(CIcon).attrs({ 193 sx: { 194 color: 'red', 195 fontSize: '2.5rem', 196 }, 197 })``;
Note:
See TracChangeset
for help on using the changeset viewer.
