1
0

Refactor application structure and components

- Moved components to a new layout directory for better organization.
- Updated App component to include GroupView and adjust routing.
- Removed unused components (App.jsx, Card.jsx, CardContainer.jsx, Header.jsx, MenuButton.jsx, SideMenu.jsx, ThemeButton.jsx).
- Introduced LoadingIcon component for loading states.
- Updated PollutionMap, SummaryCards, and HistoryCharts components to accept groupId as a prop.
- Modified API endpoint configurations in settings.prod.json for better clarity and consistency.
- Enhanced chart options in historyChartConfig for improved visual representation.
- Updated favicon and logo images.
This commit is contained in:
Jose
2025-05-09 22:47:13 +02:00
parent 02a2a2ce07
commit 0ce48c18e2
18 changed files with 297 additions and 268 deletions

45
frontend/src/App.jsx Normal file
View File

@@ -0,0 +1,45 @@
import '@/css/App.css'
import 'leaflet/dist/leaflet.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import Home from '@/pages/Home.jsx'
import Dashboard from '@/pages/Dashboard.jsx'
import MenuButton from '@/components/layout/MenuButton.jsx'
import SideMenu from '@/components/layout/SideMenu.jsx'
import ThemeButton from '@/components/layout/ThemeButton.jsx'
import Header from '@/components/layout/Header.jsx'
import GroupView from '@/pages/GroupView.jsx'
import { Routes, Route } from 'react-router-dom'
import { useState } from 'react'
const App = () => {
const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
const toggleSideMenu = () => {
setIsSideMenuOpen(!isSideMenuOpen);
};
const closeSideMenu = () => {
setIsSideMenuOpen(false);
}
return (
<>
<MenuButton onClick={toggleSideMenu} />
<SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />
<ThemeButton />
<div className={isSideMenuOpen ? 'blur m-0 p-0' : 'm-0 p-0'} onClick={closeSideMenu}>
<Header subtitle='Midiendo la calidad del aire y las calles en Sevilla 🌿🚛' />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/groups/:groupId" element={<GroupView />} />
<Route path="/groups/:groupId/devices/:deviceId" element={<Dashboard />} />
</Routes>
</div>
</>
);
}
export default App;