| 1 | import {
|
|---|
| 2 | Wrapper,
|
|---|
| 3 | SessionChildWrapper,
|
|---|
| 4 | SessionChildTitle,
|
|---|
| 5 | SeessionChildData,
|
|---|
| 6 | InputAndCheckIconWrapper,
|
|---|
| 7 | ParkingSpaceNumberInput,
|
|---|
| 8 | CheckIcon,
|
|---|
| 9 | DeleteButton,
|
|---|
| 10 | ContinueButton,
|
|---|
| 11 | } from './styles';
|
|---|
| 12 |
|
|---|
| 13 | import { sessionStatus } from '../../../../config/enums';
|
|---|
| 14 | import { IconButton } from '@mui/material';
|
|---|
| 15 | import { useState } from 'react';
|
|---|
| 16 |
|
|---|
| 17 | const sessionCardColors = {
|
|---|
| 18 | active: '#389e0d',
|
|---|
| 19 | idle: '#ffa940',
|
|---|
| 20 | over: '#cf1322',
|
|---|
| 21 | };
|
|---|
| 22 |
|
|---|
| 23 | const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
|
|---|
| 24 | return (
|
|---|
| 25 | <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
|
|---|
| 26 | <SessionChildWrapper>
|
|---|
| 27 | <SessionChildTitle>Почеток</SessionChildTitle>
|
|---|
| 28 | <SeessionChildData>{start}</SeessionChildData>
|
|---|
| 29 | </SessionChildWrapper>
|
|---|
| 30 |
|
|---|
| 31 | <SessionChildWrapper>
|
|---|
| 32 | <SessionChildTitle>Број на место</SessionChildTitle>
|
|---|
| 33 | <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
|
|---|
| 34 | </SessionChildWrapper>
|
|---|
| 35 |
|
|---|
| 36 | <SessionChildWrapper>
|
|---|
| 37 | <SessionChildTitle>Регистрација</SessionChildTitle>
|
|---|
| 38 | <SeessionChildData>{plate}</SeessionChildData>
|
|---|
| 39 | </SessionChildWrapper>
|
|---|
| 40 |
|
|---|
| 41 | <SessionChildWrapper>
|
|---|
| 42 | <DeleteButton>ИЗБРИШИ</DeleteButton>
|
|---|
| 43 | </SessionChildWrapper>
|
|---|
| 44 | </Wrapper>
|
|---|
| 45 | );
|
|---|
| 46 | };
|
|---|
| 47 |
|
|---|
| 48 | const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => {
|
|---|
| 49 | const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? '');
|
|---|
| 50 | return (
|
|---|
| 51 | <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
|
|---|
| 52 | <SessionChildWrapper>
|
|---|
| 53 | <SessionChildTitle>Почеток</SessionChildTitle>
|
|---|
| 54 | <SeessionChildData>{start}</SeessionChildData>
|
|---|
| 55 | </SessionChildWrapper>
|
|---|
| 56 |
|
|---|
| 57 | <SessionChildWrapper>
|
|---|
| 58 | <SessionChildTitle>Број на место</SessionChildTitle>
|
|---|
| 59 | <InputAndCheckIconWrapper>
|
|---|
| 60 | <ParkingSpaceNumberInput
|
|---|
| 61 | value={parkingSpace}
|
|---|
| 62 | onChange={(event) => setParkingSpace(event.target.value)}
|
|---|
| 63 | />
|
|---|
| 64 | {parkingSpace !== '' ? (
|
|---|
| 65 | <IconButton>
|
|---|
| 66 | <CheckIcon />
|
|---|
| 67 | </IconButton>
|
|---|
| 68 | ) : null}
|
|---|
| 69 | </InputAndCheckIconWrapper>
|
|---|
| 70 | </SessionChildWrapper>
|
|---|
| 71 |
|
|---|
| 72 | <SessionChildWrapper>
|
|---|
| 73 | <SessionChildTitle>Регистрација</SessionChildTitle>
|
|---|
| 74 | <SeessionChildData>{plate}</SeessionChildData>
|
|---|
| 75 | </SessionChildWrapper>
|
|---|
| 76 |
|
|---|
| 77 | <SessionChildWrapper>
|
|---|
| 78 | <DeleteButton>ИЗБРИШИ</DeleteButton>
|
|---|
| 79 | </SessionChildWrapper>
|
|---|
| 80 | </Wrapper>
|
|---|
| 81 | );
|
|---|
| 82 | };
|
|---|
| 83 |
|
|---|
| 84 | const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => {
|
|---|
| 85 | return (
|
|---|
| 86 | <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
|
|---|
| 87 | <SessionChildWrapper>
|
|---|
| 88 | <SessionChildWrapper>
|
|---|
| 89 | <SessionChildTitle>Почеток</SessionChildTitle>
|
|---|
| 90 | <SeessionChildData>{start}</SeessionChildData>
|
|---|
| 91 | </SessionChildWrapper>
|
|---|
| 92 | <SessionChildWrapper>
|
|---|
| 93 | <SessionChildTitle>Крај</SessionChildTitle>
|
|---|
| 94 | <SeessionChildData>{end}</SeessionChildData>
|
|---|
| 95 | </SessionChildWrapper>
|
|---|
| 96 | </SessionChildWrapper>
|
|---|
| 97 |
|
|---|
| 98 | <SessionChildWrapper>
|
|---|
| 99 | <SessionChildTitle>Број на место</SessionChildTitle>
|
|---|
| 100 | <SeessionChildData>{parkingSpaceNumber}</SeessionChildData>
|
|---|
| 101 | </SessionChildWrapper>
|
|---|
| 102 |
|
|---|
| 103 | <SessionChildWrapper>
|
|---|
| 104 | <SessionChildTitle>Регистрација</SessionChildTitle>
|
|---|
| 105 | <SeessionChildData>{plate}</SeessionChildData>
|
|---|
| 106 | </SessionChildWrapper>
|
|---|
| 107 |
|
|---|
| 108 | <SessionChildWrapper>
|
|---|
| 109 | <DeleteButton>ИЗБРИШИ</DeleteButton>
|
|---|
| 110 | <ContinueButton>ПРОДОЛЖИ</ContinueButton>
|
|---|
| 111 | </SessionChildWrapper>
|
|---|
| 112 | </Wrapper>
|
|---|
| 113 | );
|
|---|
| 114 | };
|
|---|
| 115 |
|
|---|
| 116 | const SessionCard = (props) => {
|
|---|
| 117 | switch (props.status) {
|
|---|
| 118 | case sessionStatus.active:
|
|---|
| 119 | return <ActiveCard {...props} />;
|
|---|
| 120 | case sessionStatus.idle:
|
|---|
| 121 | return <IdleCard {...props} />;
|
|---|
| 122 | case sessionStatus.over:
|
|---|
| 123 | return <OverCard {...props} />;
|
|---|
| 124 | default:
|
|---|
| 125 | return null;
|
|---|
| 126 | }
|
|---|
| 127 | };
|
|---|
| 128 |
|
|---|
| 129 | export default SessionCard;
|
|---|
