Changeset bc20307 for sources/client/src/components/admin/ParkingZones/ParkingZoneCard

Timestamp:

02/14/22 01:41:41 (2 years ago)

Author:

Tasevski2 <39170279+Tasevski2@…>

Branches:

master

Children:

747e0ab

Parents:

e8b1076

Message:

Push before video

Location:

sources/client/src/components/admin/ParkingZones/ParkingZoneCard

Files:

• index.js (modified) (1 diff)
• styles.js (modified) (1 diff)

sources/client/src/components/admin/ParkingZones/ParkingZoneCard/index.js

@@ -2 +2 @@
 
 import {
-  ParkingZoneWrapper,
-  Container,
-  ZoneName,
-  InfoWrapper,
-  Label,
-  Value,
-  ProgressBar,
-  ProgressBarLabel,
+    ParkingZoneWrapper,
+    Container,
+    ZoneName,
+    InfoWrapper,
+    Label,
+    Value,
+    ProgressBar,
+    ProgressBarLabel,
 } from './styles';
 
+import DropdownViewer from '../../../DropdownViewer';
+
 const ParkingZoneCard = ({ info }) => {
-  let history = useHistory();
+    let history = useHistory();
+    const takenDividedByTotal = info.takenSpaces / info.capacity;
 
-  return (
-    <ParkingZoneWrapper item xs={11} sm={6} md={3}>
-      <Container onClick={() => history.push(`/zone/${info.id}`)}>
-        <ZoneName>{info.zoneName}</ZoneName>
-        <InfoWrapper>
-          <Label>Одговорни лица:</Label>
-          {info.responsiblePersons.slice(0, 1).map((person, index) => (
-            <Value key={index}>{person}</Value>
-          ))}
-          {info.responsiblePersons.length > 1 ? <Value>...</Value> : null}
-        </InfoWrapper>
-        <InfoWrapper>
-          <Label>Број на паркинг места:</Label>
-          <Value>{info.parkingSpaces}</Value>
-        </InfoWrapper>
-        <ProgressBar
-          percent={Math.floor(
-            (info.takenParkingSpaces / info.parkingSpaces) * 100
-          )}
-          label={() => (
-            <ProgressBarLabel>
-              {info.takenParkingSpaces}/{info.parkingSpaces}
-            </ProgressBarLabel>
-          )}
-        />
-      </Container>
-    </ParkingZoneWrapper>
-  );
+    return (
+        <ParkingZoneWrapper item xs={11} sm={6} md={3}>
+            <Container onClick={() => history.push(`/zone/${info.id}`)}>
+                <ZoneName>{info.pzName}</ZoneName>
+                <InfoWrapper>
+                    <Label>Одговорни лица:</Label>
+                    <DropdownViewer data={info?.responsibleWorkers ?? [] } />
+                </InfoWrapper>
+                <InfoWrapper style={{ marginTop: '30px' }}>
+                    <Label>Број на паркинг места:</Label>
+                    <Value>{info.capacity}</Value>
+                </InfoWrapper>
+                <ProgressBar
+                    percent={Math.floor(
+                        (isNaN(takenDividedByTotal) ? 0 : takenDividedByTotal) *
+                            100
+                    )}
+                    label={() => (
+                        <ProgressBarLabel>
+                            {info.takenSpaces}/{info.capacity}
+                        </ProgressBarLabel>
+                    )}
+                />
+            </Container>
+        </ParkingZoneWrapper>
+    );
 };
 

sources/client/src/components/admin/ParkingZones/ParkingZoneCard/styles.js

@@ -2 +2 @@
 import Grid from '@mui/material/Grid';
 import { Typography } from '@mui/material';
-
-import { LineProgressBar } from '@frogress/line'
-
+import { LineProgressBar } from '@frogress/line';
+import { mobile_max_width } from '../../../../config/utilities';
 
 export const ParkingZoneWrapper = styled(Grid)`
-    height: 350px;
+  height: 350px;
+
+  @media (max-width: ${mobile_max_width}px) {
+    padding-left: 15px !important;
+    padding-right: 15px;
+  }
 `;
 
 export const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
-    background-color: ${props => props.theme.palette.background.white};
-    :hover {
-        opacity: 0.8;
-        cursor: pointer;
-    }
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+  background-color: ${(props) => props.theme.palette.background.white};
+  :hover {
+    opacity: 0.8;
+    cursor: pointer;
+  }
+  position: relative;
 `;
 
 export const ZoneName = styled(Typography).attrs({
-    variant: 'h2'
+  variant: 'h2',
 })`
-    font-size: 2rem;
-    font-weight: 600;
-    margin-top: 30px;
-    text-align: center;
+  font-size: 2rem;
+  font-weight: 600;
+  margin-top: 30px;
+  text-align: center;
 `;
 
 export const InfoWrapper = styled.div`
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
 export const Label = styled(Typography).attrs({
-    variant: 'h4'
+  variant: 'h4',
 })`
-    font-size: 1rem;
-    margin-bottom: 5px;
+  font-size: 1rem;
+  margin-bottom: 5px;
 `;
 
 export const Value = styled(Typography).attrs({
-    variant: 'h3'
+  variant: 'h3',
 })`
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-top: 5px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 5px;
 `;
 
-export const ProgressBar = styled(LineProgressBar).attrs(props => ({
-    stripe: true,
-    progressColor: props.theme.palette.primary.main,
-    height: '30px',
+export const ProgressBar = styled(LineProgressBar).attrs((props) => ({
+  stripe: true,
+  progressColor: props.theme.palette.primary.main,
+  height: '30px',
 }))`
-    position: absolute;
-    bottom: 5px;
+  position: absolute;
+  bottom: 5px;
 `;
 
 export const ProgressBarLabel = styled.p`
-    margin: 0 0 0 42.5%;
-    line-height: 30px;
-    position: absolute;
-    font-weight: 500;
+  margin: 0 0 0 42.5%;
+  line-height: 30px;
+  position: absolute;
+  font-weight: 500;
 `;