Skip to content

Commit d73f942

Browse files
Frnn4268Frnn4268
authored
Merge pull request #166 from Frnn4268/Frnn
Creating new Dashboard.jsx components
2 parents 5b297d4 + 37ae0bc commit d73f942

File tree

4 files changed

+153
-120
lines changed

4 files changed

+153
-120
lines changed

‎frontend/components/dashboard/DashboardAlert.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { Alert } from 'antd';
3+
import Marquee from 'react-fast-marquee';
4+
5+
const DashboardAlert = () => (
6+
<Alert
7+
banner
8+
type="info"
9+
className='alert-layout'
10+
message={
11+
<Marquee pauseOnHover gradient={false}>
12+
Bienvenido a Easy Park - Restaurante y Pastelería Florencia © {new Date().getFullYear()}
13+
</Marquee>
14+
}
15+
/>
16+
);
17+
18+
export default DashboardAlert;

‎frontend/components/dashboard/ParkingStatistics.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { Row, Col } from 'antd';
3+
import ParkingStatisticsCard from './ParkingStatisticsCard';
4+
5+
const ParkingStatistics = ({ parkingStatistics }) => (
6+
<>
7+
<div className='top-right-container'>
8+
<Row gutter={20}>
9+
<Col span={40}>
10+
<div>
11+
<div>
12+
<ParkingStatisticsCard
13+
title="Porcentaje de parqueo disponible"
14+
value={parkingStatistics.unusedPercentage}
15+
valueStyle={{ color: "#3f8600" }}
16+
suffix="%"
17+
/>
18+
</div>
19+
<div style={{ marginTop: -40 }}>
20+
<ParkingStatisticsCard
21+
title="Porcentaje de parqueo ocupado"
22+
value={parkingStatistics.usagePercentage}
23+
valueStyle={{ color: "#cf1322" }}
24+
suffix="%"
25+
/>
26+
</div>
27+
</div>
28+
</Col>
29+
</Row>
30+
</div>
31+
<div className='bottom-right-container'>
32+
<Row gutter={20}>
33+
<Col span={40}>
34+
<div>
35+
<div>
36+
<ParkingStatisticsCard
37+
title="Espacios de parqueo libres"
38+
value={parkingStatistics.freeSpaces}
39+
valueStyle={{ color: "#3f8600" }}
40+
/>
41+
</div>
42+
<div style={{ marginTop: -40 }}>
43+
<ParkingStatisticsCard
44+
title="Espacios de parqueo ocupados"
45+
value={parkingStatistics.occupiedSpaces}
46+
valueStyle={{ color: "#cf1322" }}
47+
/>
48+
</div>
49+
</div>
50+
</Col>
51+
</Row>
52+
</div>
53+
</>
54+
);
55+
56+
export default ParkingStatistics;

‎frontend/components/dashboard/ParkingStatisticsCard.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Card, Statistic } from 'antd';
3+
4+
const ParkingStatisticsCard = ({ title, value, valueStyle, suffix }) => (
5+
<Card bordered={false}>
6+
<Statistic
7+
title={title}
8+
value={value}
9+
valueStyle={valueStyle}
10+
suffix={suffix}
11+
style={{ marginBottom: 10, marginTop: 10 }}
12+
/>
13+
</Card>
14+
);
15+
16+
export default ParkingStatisticsCard;

‎frontend/src/pages/dashboard/Dashboard.jsx

Lines changed: 63 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,77 @@
1-
import { useState, useEffect} from 'react';
2-
import { Layout, Alert, Row, Statistic, Col, Card } from 'antd';
3-
import Marquee from 'react-fast-marquee';
1+
import { useState, useEffect } from 'react';
2+
import { Layout } from 'antd';
43

54
import TopMenu from './TopMenu.jsx';
65
import LeftMenu from './LeftMenu.jsx';
6+
import DashboardAlert from '../../../components/dashboard/DashboardAlert';
7+
import ParkingStatistics from '../../../components/dashboard/ParkingStatistics';
78

89
import '../../css/DashboardMenu.css';
910

1011
const { Header } = Layout;
1112

1213
const Dashboard = () => {
13-
const [parkingStatistics, setParkingStatistics] = useState({
14-
usagePercentage: 0,
15-
unusedPercentage: 0,
16-
freeSpaces: 0,
17-
occupiedSpaces: 0
18-
});
14+
const [parkingStatistics, setParkingStatistics] = useState({
15+
usagePercentage: 0,
16+
unusedPercentage: 0,
17+
freeSpaces: 0,
18+
occupiedSpaces: 0
19+
});
1920

20-
useEffect(() => {
21-
fetchParkingStatistics();
22-
}, []);
21+
useEffect(() => {
22+
fetchParkingStatistics();
23+
}, []);
2324

24-
const fetchParkingStatistics = async () => {
25-
try {
26-
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-space/state`);
27-
const data = await response.json();
28-
const parkingSpaces = data.parkingSpaces;
29-
30-
let occupiedCount = 0;
31-
let availableCount = 0;
32-
33-
parkingSpaces.forEach(space => {
34-
if (space.state === 'Ocupado') {
35-
occupiedCount++;
36-
} else if (space.state === 'Disponible') {
37-
availableCount++;
38-
}
39-
});
40-
41-
const totalSpaces = occupiedCount + availableCount;
42-
43-
const usagePercentage = ((occupiedCount / totalSpaces) * 100).toFixed(2);
44-
const unusedPercentage = ((availableCount / totalSpaces) * 100).toFixed(2);
45-
46-
setParkingStatistics({
47-
usagePercentage: isNaN(usagePercentage) ? 0 : usagePercentage,
48-
unusedPercentage: isNaN(unusedPercentage) ? 0 : unusedPercentage,
49-
freeSpaces: availableCount,
50-
occupiedSpaces: occupiedCount
51-
});
52-
} catch (error) {
53-
console.error('Error al obtener las estadísticas del parqueo:', error);
25+
const fetchParkingStatistics = async () => {
26+
try {
27+
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/parking-space/state`);
28+
const data = await response.json();
29+
const parkingSpaces = data.parkingSpaces;
30+
31+
let occupiedCount = 0;
32+
let availableCount = 0;
33+
34+
parkingSpaces.forEach(space => {
35+
if (space.state === 'Ocupado') {
36+
occupiedCount++;
37+
} else if (space.state === 'Disponible') {
38+
availableCount++;
5439
}
55-
};
40+
});
41+
42+
const totalSpaces = occupiedCount + availableCount;
43+
44+
const usagePercentage = ((occupiedCount / totalSpaces) * 100).toFixed(2);
45+
const unusedPercentage = ((availableCount / totalSpaces) * 100).toFixed(2);
46+
47+
setParkingStatistics({
48+
usagePercentage: isNaN(usagePercentage) ? 0 : usagePercentage,
49+
unusedPercentage: isNaN(unusedPercentage) ? 0 : unusedPercentage,
50+
freeSpaces: availableCount,
51+
occupiedSpaces: occupiedCount
52+
});
53+
} catch (error) {
54+
console.error('Error al obtener las estadísticas del parqueo:', error);
55+
}
56+
};
5657

57-
return (
58-
<Layout>
59-
<Header className='home-header-dashboard'>
60-
<TopMenu />
61-
</Header>
62-
<Layout>
63-
<Layout.Sider>
64-
<LeftMenu />
65-
</Layout.Sider>
66-
<Layout.Content className='layout-content-dashboard'>
67-
<img src='https://i.postimg.cc/Y2X76XNq/logo-card.png' className='logo-dashboard' />
68-
<Alert
69-
banner
70-
type="info"
71-
className='alert-layout'
72-
message={
73-
<Marquee pauseOnHover gradient={false}>
74-
Bienvenido a Easy Park - Restaurante y Pastelería Florencia © {new Date().getFullYear()}
75-
</Marquee>
76-
}
77-
/>
78-
<div className="top-right-container">
79-
<Row gutter={20}>
80-
<Col span={40}>
81-
<Card bordered={false}>
82-
<Statistic
83-
title="Porcentaje de parqueo disponible"
84-
value={parkingStatistics.unusedPercentage}
85-
valueStyle={{
86-
color: '#3f8600',
87-
}}
88-
style={{ marginBottom: 20, marginTop: 20 }}
89-
suffix="%"
90-
/>
91-
<Statistic
92-
title="Porcentaje de parqueo ocupado"
93-
value={parkingStatistics.usagePercentage}
94-
valueStyle={{
95-
color: '#cf1322',
96-
}}
97-
suffix="%"
98-
style={{ marginBottom: 20, marginTop: 20 }}
99-
/>
100-
</Card>
101-
</Col>
102-
</Row>
103-
</div>
104-
<div className="bottom-right-container">
105-
<Row gutter={20}>
106-
<Col span={40}>
107-
<Card bordered={false}>
108-
<Statistic
109-
title="Espacios de parqueo libres"
110-
value={parkingStatistics.freeSpaces}
111-
valueStyle={{
112-
color: '#3f8600',
113-
}}
114-
style={{ marginBottom: 20, marginTop: 20 }}
115-
/>
116-
<Statistic
117-
title="Espacios de parqueo ocupados"
118-
value={parkingStatistics.occupiedSpaces}
119-
valueStyle={{
120-
color: '#cf1322',
121-
}}
122-
style={{ marginBottom: 20, marginTop: 20 }}
123-
/>
124-
</Card>
125-
</Col>
126-
</Row>
127-
</div>
128-
</Layout.Content>
129-
</Layout>
130-
</Layout>
131-
)
132-
}
58+
return (
59+
<Layout>
60+
<Header className='home-header-dashboard'>
61+
<TopMenu />
62+
</Header>
63+
<Layout>
64+
<Layout.Sider>
65+
<LeftMenu />
66+
</Layout.Sider>
67+
<Layout.Content className='layout-content-dashboard'>
68+
<img src='https://i.postimg.cc/Y2X76XNq/logo-card.png' className='logo-dashboard' alt='Logo' />
69+
<DashboardAlert />
70+
<ParkingStatistics parkingStatistics={parkingStatistics} />
71+
</Layout.Content>
72+
</Layout>
73+
</Layout>
74+
);
75+
};
13376

134-
export default Dashboard;
77+
export default Dashboard;

0 commit comments

Comments
 (0)