Ignore:
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/ParkingZoneSessions
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js

    re8b1076 rbc20307  
     1import { useState } from 'react';
     2import moment from 'moment';
     3
    14import {
    2   Wrapper,
    3   SessionChildWrapper,
    4   SessionChildTitle,
    5   SeessionChildData,
    6   InputAndCheckIconWrapper,
    7   ParkingSpaceNumberInput,
    8   CheckIcon,
    9   DeleteButton,
    10   ContinueButton,
     5    Wrapper,
     6    SessionChildWrapper,
     7    SessionChildTitle,
     8    SeessionChildData,
     9    InputAndCheckIconWrapper,
     10    ParkingSpaceNumberInput,
     11    CheckIcon,
     12    DeleteButton,
    1113} from './styles';
    1214
    1315import { sessionStatus } from '../../../../config/enums';
     16import { dateFormatString } from '../../../../config/utilities';
    1417import { IconButton } from '@mui/material';
    15 import { useState } from 'react';
     18import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
     19import useDeleteSession from '../../../../hooks/useDeleteSession';
     20
    1621
    1722const 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   }
     23    active: '#389e0d',
     24    idle: '#ffa940',
     25    over: '#cf1322',
     26};
     27
     28const ActiveCard = ({
     29    pssId,
     30    timeStart,
     31    zone,
     32    plate,
     33    status,
     34    parkingSpace,
     35    onDeleteSession,
     36}) => {
     37    const { isLoading: isLoadingDeleteSession, deleteSession } =
     38        useDeleteSession();
     39    const formatedTimeStart = moment(timeStart).format(dateFormatString);
     40    return (
     41        <Wrapper style={{ backgroundColor: sessionCardColors.active }}>
     42            <SessionChildWrapper>
     43                <SessionChildTitle>Почеток</SessionChildTitle>
     44                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
     45            </SessionChildWrapper>
     46
     47            <SessionChildWrapper>
     48                <SessionChildTitle>Број на место</SessionChildTitle>
     49                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
     50            </SessionChildWrapper>
     51
     52            <SessionChildWrapper>
     53                <SessionChildTitle>Регистрација</SessionChildTitle>
     54                <SeessionChildData>{plate.plate}</SeessionChildData>
     55            </SessionChildWrapper>
     56
     57            <SessionChildWrapper>
     58                {isLoadingDeleteSession ? (
     59                    <div style={{ width: '104px', textAlign: 'center' }}>
     60                        <AbsoluteLoader
     61                            containerStyle={{
     62                                width: '40px',
     63                                height: '40px',
     64                                display: 'inline-block',
     65                            }}
     66                        />
     67                    </div>
     68                ) : (
     69                    <DeleteButton
     70                        onClick={() => {
     71                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
     72                            deleteSession({ pssId, onDeleteSession });
     73                        }}
     74                    >
     75                        ИЗБРИШИ
     76                    </DeleteButton>
     77                )}
     78            </SessionChildWrapper>
     79        </Wrapper>
     80    );
     81};
     82
     83const IdleCard = ({
     84    pssId,
     85    timeStart,
     86    zone,
     87    plate,
     88    status,
     89    handleActivateSession,
     90    isLoadingActivateSession,
     91    onDeleteSession,
     92}) => {
     93    const { isLoading: isLoadingDeleteSession, deleteSession } =
     94        useDeleteSession();
     95    const [parkingSpaceName, setParkingSpaceName] = useState('');
     96    const formatedTimeStart = moment(timeStart).format(dateFormatString);
     97    return (
     98        <Wrapper style={{ backgroundColor: sessionCardColors.idle }}>
     99            <SessionChildWrapper>
     100                <SessionChildTitle>Почеток</SessionChildTitle>
     101                <SeessionChildData>{formatedTimeStart}</SeessionChildData>
     102            </SessionChildWrapper>
     103
     104            <SessionChildWrapper>
     105                <SessionChildTitle>Број на место</SessionChildTitle>
     106                <InputAndCheckIconWrapper>
     107                    <ParkingSpaceNumberInput
     108                        value={parkingSpaceName}
     109                        onChange={(event) =>
     110                            setParkingSpaceName(event.target.value.trim())
     111                        }
     112                    />
     113                    {parkingSpaceName !== '' ? (
     114                        <>
     115                            {isLoadingActivateSession ? (
     116                                <AbsoluteLoader
     117                                    containerStyle={{
     118                                        width: '2rem',
     119                                        height: '2rem',
     120                                        display: 'inline-block',
     121                                    }}
     122                                />
     123                            ) : (
     124                                <IconButton
     125                                    onClick={() =>
     126                                        handleActivateSession({
     127                                            pssId,
     128                                            parkingSpaceName,
     129                                        })
     130                                    }
     131                                >
     132                                    <CheckIcon />
     133                                </IconButton>
     134                            )}
     135                        </>
     136                    ) : null}
     137                </InputAndCheckIconWrapper>
     138            </SessionChildWrapper>
     139
     140            <SessionChildWrapper>
     141                <SessionChildTitle>Регистрација</SessionChildTitle>
     142                <SeessionChildData>{plate.plate}</SeessionChildData>
     143            </SessionChildWrapper>
     144
     145            <SessionChildWrapper>
     146                {isLoadingDeleteSession ? (
     147                    <div style={{ width: '104px', textAlign: 'center' }}>
     148                        <AbsoluteLoader
     149                            containerStyle={{
     150                                width: '40px',
     151                                height: '40px',
     152                                display: 'inline-block',
     153                            }}
     154                        />
     155                    </div>
     156                ) : (
     157                    <DeleteButton
     158                        onClick={() => {
     159                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
     160                            deleteSession({ pssId, onDeleteSession });
     161                        }}
     162                    >
     163                        ИЗБРИШИ
     164                    </DeleteButton>
     165                )}
     166            </SessionChildWrapper>
     167        </Wrapper>
     168    );
     169};
     170
     171const OverCard = ({
     172    pssId,
     173    timeStart,
     174    timeEnd,
     175    zone,
     176    plate,
     177    status,
     178    parkingSpace,
     179    onDeleteSession,
     180}) => {
     181    const { isLoading: isLoadingDeleteSession, deleteSession } =
     182        useDeleteSession();
     183    const formatedTimeStart = moment(timeStart).format(dateFormatString);
     184    const formatedTimeEnd = moment(timeEnd).format(dateFormatString);
     185    return (
     186        <Wrapper style={{ backgroundColor: sessionCardColors.over }}>
     187            <SessionChildWrapper>
     188                <SessionChildWrapper style={{ margin: 0 }}>
     189                    <SessionChildTitle>Почеток</SessionChildTitle>
     190                    <SeessionChildData>{formatedTimeStart}</SeessionChildData>
     191                </SessionChildWrapper>
     192                <SessionChildWrapper style={{ marginTop: '5px' }}>
     193                    <SessionChildTitle>Крај</SessionChildTitle>
     194                    <SeessionChildData>{formatedTimeEnd}</SeessionChildData>
     195                </SessionChildWrapper>
     196            </SessionChildWrapper>
     197
     198            <SessionChildWrapper>
     199                <SessionChildTitle>Број на место</SessionChildTitle>
     200                <SeessionChildData>{parkingSpace.psName}</SeessionChildData>
     201            </SessionChildWrapper>
     202
     203            <SessionChildWrapper>
     204                <SessionChildTitle>Регистрација</SessionChildTitle>
     205                <SeessionChildData>{plate.plate}</SeessionChildData>
     206            </SessionChildWrapper>
     207
     208            <SessionChildWrapper>
     209                {isLoadingDeleteSession ? (
     210                    <div style={{ width: '104px', textAlign: 'center' }}>
     211                        <AbsoluteLoader
     212                            containerStyle={{
     213                                width: '40px',
     214                                height: '40px',
     215                                display: 'inline-block',
     216                            }}
     217                        />
     218                    </div>
     219                ) : (
     220                    <DeleteButton
     221                        onClick={() => {
     222                            console.log(`CLICKED DELETE BUTTON ${pssId}`);
     223                            deleteSession({ pssId, onDeleteSession });
     224                        }}
     225                    >
     226                        ИЗБРИШИ
     227                    </DeleteButton>
     228                )}
     229            </SessionChildWrapper>
     230        </Wrapper>
     231    );
     232};
     233
     234const SessionCard = ({
     235    handleActivateSession,
     236    isLoadingActivateSession,
     237    ...commponProps
     238}) => {
     239    switch (commponProps.status) {
     240        case sessionStatus.active:
     241            return <ActiveCard {...commponProps} />;
     242        case sessionStatus.idle:
     243            return (
     244                <IdleCard
     245                    {...commponProps}
     246                    handleActivateSession={handleActivateSession}
     247                    isLoadingActivateSession={isLoadingActivateSession}
     248                />
     249            );
     250        case sessionStatus.over:
     251            return <OverCard {...commponProps} />;
     252        default:
     253            return null;
     254    }
    127255};
    128256

  • sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js

    re8b1076 rbc20307  
    22import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
    33import Button from '@mui/material/Button';
     4import { mobile_max_width } from '../../../../config/utilities';
    45
    56export const Wrapper = styled.div`
    … …  
    1516  font-size: 1rem;
    1617  box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow};
     18
     19  @media (max-width: ${mobile_max_width}px) {
     20    height: 350px;
     21    border-radius: 100px;
     22    flex-direction: column;
     23  }
    1724`;
    1825
    … …  
    2027  display: flex;
    2128  flex-direction: column;
     29
     30  @media (max-width: ${mobile_max_width}px) {
     31    margin-top: 15px;
     32    :last-of-type {
     33      margin-top: 30px;
     34    }
     35  }
    2236`;
    2337
    … …  
    3852  position: relative;
    3953
    40   button {
     54  button,
     55  > div {
    4156    padding: 0;
    4257    position: absolute;
    … …  
    6984  }
    7085`;
    71 
    72 export const ContinueButton = styled(Button).attrs((props) => ({
    73   variant: 'contained',
    74   size: 'small',
    75   sx: {
    76     backgroundColor: `${props.theme.palette.primary.main}`,
    77   },
    78 }))`
    79   margin-top: 20px;
    80 
    81   :hover {
    82     background-color: ${(props) => props.theme.palette.primary.dark};
    83   }
    84 `;

  • sources/client/src/components/admin/ParkingZoneSessions/index.js

    re8b1076 rbc20307  
    1 import { useEffect, useState } from 'react';
     1import { useEffect, useMemo, useRef, useState } from 'react';
    22import {
    33  Wrapper,
    … …  
    99  StatsKey,
    1010  StatsValue,
     11  SearchField,
     12  SearchIcon,
    1113} from './styles';
    1214import SessionCard from './SessionCard';
    1315import { sessionStatus } from '../../../config/enums';
    14 import { sessionsData } from './mockData';
     16import useGetSessions from '../../../hooks/useGetSessions';
     17import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
     18
     19import useActivateSession from '../../../hooks/useActivateSession';
     20
     21const sortSessions = (a, b) => {
     22  // first - yellow/idle, second - red/finished, third - green/active
     23  switch (a.status) {
     24    case sessionStatus.active:
     25      switch (b.status) {
     26        case sessionStatus.active:
     27          return -1;
     28        case sessionStatus.over:
     29        case sessionStatus.idle:
     30          return 1;
     31        default:
     32          return 1;
     33      }
     34    case sessionStatus.over:
     35      switch (b.status) {
     36        case sessionStatus.active:
     37        case sessionStatus.over:
     38          return -1;
     39        case sessionStatus.idle:
     40          return 1;
     41        default:
     42          return 1;
     43      }
     44    case sessionStatus.idle:
     45      switch (b.status) {
     46        case sessionStatus.active:
     47        case sessionStatus.over:
     48        case sessionStatus.idle:
     49          return -1;
     50        default:
     51          return 1;
     52      }
     53    default:
     54      return -1;
     55  }
     56};
    1557
    1658const ParkingZoneSessions = ({ zone }) => {
    17   const [sessions, setSession] = useState(sessionsData);
     59  const { isLoading: isLoadingActivateSession, activateSession } =
     60    useActivateSession();
     61  const { data: sessions, isLoading: isLoadingSessions, setData: setSessions } = useGetSessions(zone.pzId);
     62  const [search, setSearch] = useState('');
    1863  const [stats, setStats] = useState({
    1964    activeSessions: 0,
    … …  
    2166    overSessions: 0,
    2267  });
     68
    2369  const setSessionsStats = () => {
    2470    let aS = 0;
    … …  
    2672    let oS = 0;
    2773    sessions.forEach((s) => {
    28       switch (s.status) {
    29         case sessionStatus.active:
    30           aS += 1;
    31           break;
    32         case sessionStatus.idle:
    33           iS += 1;
    34           break;
    35         case sessionStatus.over:
    36           oS += 1;
    37           break;
    38         default:
    39           break;
    40       }
     74        switch (s.status) {
     75            case sessionStatus.active:
     76                aS += 1;
     77                break;
     78            case sessionStatus.idle:
     79                iS += 1;
     80                break;
     81            case sessionStatus.over:
     82                oS += 1;
     83                break;
     84            default:
     85                break;
     86        }
    4187    });
    4288    setStats({
    … …  
    4793  };
    4894
     95  const onActivateSession = ({ updatedSession  }) => {
     96    const updatedSessions = sessions.filter(
     97        (s) => s.pssId !== updatedSession.pssId
     98    );
     99    setSessions([...updatedSessions, updatedSession]); 
     100  };
     101
     102  const handleActivateSession = ({ pssId, parkingSpaceName }) => {
     103    activateSession({ pssId, parkingSpaceName, onActivateSession });
     104  };
     105
     106  const onDeleteSession = ({ pssId }) => {
     107    setSessions((prevState) => prevState.filter((s) => s.pssId !== pssId));
     108  };
     109
     110  const freeParkingSpaces = useMemo(() => {
     111    if(!zone) return 0;
     112    return zone.parkingSpaces.length - stats.activeSessions
     113  }, [zone?.parkingSpaces, stats])
     114
    49115  useEffect(() => {
    50116    setSessionsStats();
    … …  
    52118
    53119  return (
    54     <Wrapper>
    55       <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
    56       <StatsWrapper>
    57         <Stats>
    58           {/* PARKING SPACES STATS*/}
    59           <KeyValueWrapper>
    60             <StatsKey>Вкупно паркинг места:</StatsKey>
    61             <StatsValue>{zone.parkingSpaces}</StatsValue>
    62           </KeyValueWrapper>
    63           <KeyValueWrapper>
    64             <StatsKey>Слободни паркинг места:</StatsKey>
    65             <StatsValue>
    66               {zone.parkingSpaces - zone.takenParkingSpaces}
    67             </StatsValue>
    68           </KeyValueWrapper>
    69           <KeyValueWrapper>
    70             <StatsKey>Зафатени паркинг места:</StatsKey>
    71             <StatsValue>{zone.takenParkingSpaces}</StatsValue>
    72           </KeyValueWrapper>
    73         </Stats>
    74         {/* SESSIONS STATS*/}
    75         <Stats>
    76           <KeyValueWrapper>
    77             <StatsKey>Активни паркинг сесии:</StatsKey>
    78             <StatsValue>{stats.activeSessions}</StatsValue>
    79           </KeyValueWrapper>
    80           <KeyValueWrapper>
    81             <StatsKey>Завршени паркинг сесии:</StatsKey>
    82             <StatsValue>{stats.overSessions}</StatsValue>
    83           </KeyValueWrapper>
    84           <KeyValueWrapper>
    85             <StatsKey>Неактивни паркинг сесии:</StatsKey>
    86             <StatsValue>{stats.idleSessions}</StatsValue>
    87           </KeyValueWrapper>
    88         </Stats>
    89       </StatsWrapper>
    90       <SessionsWrapper>
    91         {sessions.map((session) => (
    92           <SessionCard key={session.id} {...session} />
    93         ))}
    94       </SessionsWrapper>
    95     </Wrapper>
     120      <Wrapper>
     121          <Title>ОТВОРЕНИ ПАРКИНГ СЕСИИ</Title>
     122          <StatsWrapper>
     123              <Stats>
     124                  {/* PARKING SPACES STATS*/}
     125                  <KeyValueWrapper>
     126                      <StatsKey>Вкупно паркинг места:</StatsKey>
     127                      <StatsValue>{zone.parkingSpaces.length}</StatsValue>
     128                  </KeyValueWrapper>
     129                  <KeyValueWrapper>
     130                      <StatsKey>Слободни паркинг места:</StatsKey>
     131                      <StatsValue>{freeParkingSpaces}</StatsValue>
     132                  </KeyValueWrapper>
     133                  <KeyValueWrapper>
     134                      <StatsKey>Зафатени паркинг места:</StatsKey>
     135                      <StatsValue>
     136                          {zone.parkingSpaces.length - freeParkingSpaces}
     137                      </StatsValue>
     138                  </KeyValueWrapper>
     139              </Stats>
     140              {/* SESSIONS STATS*/}
     141              <Stats>
     142                  <KeyValueWrapper>
     143                      <StatsKey>Активни паркинг сесии:</StatsKey>
     144                      <StatsValue>{stats.activeSessions}</StatsValue>
     145                  </KeyValueWrapper>
     146                  <KeyValueWrapper>
     147                      <StatsKey>Завршени паркинг сесии:</StatsKey>
     148                      <StatsValue>{stats.overSessions}</StatsValue>
     149                  </KeyValueWrapper>
     150                  <KeyValueWrapper>
     151                      <StatsKey>Неактивни паркинг сесии:</StatsKey>
     152                      <StatsValue>{stats.idleSessions}</StatsValue>
     153                  </KeyValueWrapper>
     154              </Stats>
     155          </StatsWrapper>
     156          <SearchField
     157              value={search}
     158              onChange={(e) => setSearch(e.target.value)}
     159              InputProps={{
     160                  startAdornment: <SearchIcon />,
     161              }}
     162          />
     163          <SessionsWrapper>
     164              {isLoadingSessions ? (
     165                  <AbsoluteLoader
     166                      containerStyle={{
     167                          width: '150px',
     168                          height: '150px',
     169                          margin: 'auto',
     170                          marginTop: '50px',
     171                      }}
     172                  />
     173              ) : (
     174                  <>
     175                      {sessions
     176                          .filter((session) =>
     177                              session.plate.plate
     178                                  .concat(
     179                                      ` ${session.parkingSpace?.psName ?? ''}`
     180                                  )
     181                                  .toLowerCase()
     182                                  .includes(search.trim().toLowerCase())
     183                          )
     184                          .sort(sortSessions)
     185                          .map((session) => (
     186                              <SessionCard
     187                                  key={session.pssId}
     188                                  {...session}
     189                                  handleActivateSession={handleActivateSession}
     190                                  isLoadingActivateSession={
     191                                      isLoadingActivateSession
     192                                  }
     193                                  onDeleteSession={onDeleteSession}
     194                              />
     195                          ))}
     196                  </>
     197              )}
     198          </SessionsWrapper>
     199      </Wrapper>
    96200  );
    97201};

  • sources/client/src/components/admin/ParkingZoneSessions/mockData.js

    re8b1076 rbc20307  
    55    id: 1,
    66    start: moment().format('hh:mm - DD.MM.yyyy'),
     7    zone: 'Zona 1',
    78    plate: 'SK-8190-AV',
    89    status: 'active',
    … …  
    1213    id: 2,
    1314    start: moment().format('hh:mm - DD.MM.yyyy'),
     15    zone: 'Zona 2',
    1416    plate: 'ST-9312-OK',
    1517    status: 'idle',
    … …  
    2022    start: moment().format('hh:mm - DD.MM.yyyy'),
    2123    end: moment().format('hh:mm - DD.MM.yyyy'),
     24    zone: 'Zona 1',
    2225    plate: 'SK-6511-OS',
    2326    status: 'over',

  • sources/client/src/components/admin/ParkingZoneSessions/styles.js

    re8b1076 rbc20307  
    11import styled from 'styled-components';
    22import { Typography } from '@mui/material';
     3import TextField from '@mui/material/TextField';
     4import SIcon from '@mui/icons-material/Search';
     5
     6import { mobile_max_width } from '../../../config/utilities';
    37
    48export const Wrapper = styled.div`
    … …  
    610  flex-direction: column;
    711  align-items: center;
    8   margin: 0;
    9   padding: 30px 175px 0 175px;
     12  padding: 30px 12% 0 12%;
    1013  width: 100%;
     14  max-width: 1440px;
     15  margin: auto;
    1116  height: 100%;
    1217`;
    … …  
    2025  -webkit-background-clip: text;
    2126  -webkit-text-fill-color: transparent;
     27  text-align: center;
    2228`;
    2329
    … …  
    2834  justify-content: space-between;
    2935  margin: 30px 0 10px 0;
     36
     37  @media (max-width: ${mobile_max_width}px) {
     38    flex-direction: column;
     39  }
    3040`;
    3141
    … …  
    3343  display: flex;
    3444  flex-direction: column;
     45  align-items: center;
    3546`;
    3647
    … …  
    3849  display: flex;
    3950  flex-direction: row;
    40   width: 220px;
     51  width: 280px;
    4152  justify-content: space-between;
    4253`;
    … …  
    4758  -webkit-background-clip: text;
    4859  -webkit-text-fill-color: transparent;
     60  font-size: 1.2rem;
    4961`;
    5062
    … …  
    5264  margin: 0;
    5365  font-weight: 600;
    54   font-size: 1.2rem;
     66  font-size: 1.4rem;
    5567  background: -webkit-linear-gradient(#333333, #4cc5a3);
    5668  -webkit-background-clip: text;
    … …  
    5870`;
    5971
     72export const SearchField = styled(TextField).attrs({
     73  width: '150px',
     74  sx: {
     75    marginTop: '10px',
     76    marginBottom: '20px',
     77  },
     78})`
     79  border: 1px solid ${(props) => props.theme.palette.primary.main};
     80  border-radius: 5px;
     81  fieldset {
     82    border: 0;
     83  }
     84  input {
     85    font-size: 1.1rem;
     86    font-weight: 500;
     87    padding: 15px 10px;
     88    color: ${(props) => props.theme.palette.primary.main};
     89  }
     90`;
     91
     92export const SearchIcon = styled(SIcon).attrs((props) => ({
     93  sx: {
     94    fontSize: '2rem',
     95    color: `rgba(0,173,124, 0.4)`, // primary.main in rgb with opacity 0.4
     96  },
     97}))``;
     98
    6099export const SessionsWrapper = styled.div`
    61   height: 45vh;
     100  height: auto;
     101  min-height: 240px;
     102  max-height: 380px;
    62103  width: 100%;
    63104  overflow: auto;
    64   padding-top: 20px;
    65 
    66105  > div:not(div:first-of-type) {
    67106    margin-top: 24px;
    68107  }
     108
     109  @media (max-width: ${mobile_max_width}px) {
     110    max-height: 75vh;
     111    padding-bottom: 10px;
     112  }
    69113`;
Note: See TracChangeset for help on using the changeset viewer.