1 | import { useEffect, useState } from 'react';
|
---|
2 | import {
|
---|
3 | Wrapper,
|
---|
4 | Title,
|
---|
5 | SessionsWrapper,
|
---|
6 | StatsWrapper,
|
---|
7 | Stats,
|
---|
8 | KeyValueWrapper,
|
---|
9 | StatsKey,
|
---|
10 | StatsValue,
|
---|
11 | } from './styles';
|
---|
12 | import SessionCard from './SessionCard';
|
---|
13 | import { sessionStatus } from '../../../config/enums';
|
---|
14 | import { sessionsData } from './mockData';
|
---|
15 |
|
---|
16 | const ParkingZoneSessions = ({ zone }) => {
|
---|
17 | const [sessions, setSession] = useState(sessionsData);
|
---|
18 | const [stats, setStats] = useState({
|
---|
19 | activeSessions: 0,
|
---|
20 | idleSessions: 0,
|
---|
21 | overSessions: 0,
|
---|
22 | });
|
---|
23 | const setSessionsStats = () => {
|
---|
24 | let aS = 0;
|
---|
25 | let iS = 0;
|
---|
26 | let oS = 0;
|
---|
27 | 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 | }
|
---|
41 | });
|
---|
42 | setStats({
|
---|
43 | activeSessions: aS,
|
---|
44 | idleSessions: iS,
|
---|
45 | overSessions: oS,
|
---|
46 | });
|
---|
47 | };
|
---|
48 |
|
---|
49 | useEffect(() => {
|
---|
50 | setSessionsStats();
|
---|
51 | }, [sessions]);
|
---|
52 |
|
---|
53 | 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>
|
---|
96 | );
|
---|
97 | };
|
---|
98 |
|
---|
99 | export default ParkingZoneSessions;
|
---|