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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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};
Note: See TracChangeset for help on using the changeset viewer.