diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1b79bfe..6b958ba 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,9 +4,8 @@ import { Route, Routes, useLocation } from 'react-router-dom'; import Loader from './common/Loader'; import PageTitle from './components/PageTitle'; import Statistic from './pages/Dashboard/Statistic'; -import Alerts from './pages/UiElements/Alerts'; -import Buttons from './pages/UiElements/Buttons'; import Camera from './pages/Camera'; +import Snapshot from './pages/Snapshot'; function App() { const [loading, setLoading] = useState(true); @@ -48,7 +47,7 @@ function App() { element={ <> - + } /> diff --git a/frontend/src/api/PredictionData.tsx b/frontend/src/api/PredictionData.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/api/SnapshotData.tsx b/frontend/src/api/SnapshotData.tsx new file mode 100644 index 0000000..630479b --- /dev/null +++ b/frontend/src/api/SnapshotData.tsx @@ -0,0 +1,17 @@ +import axios from 'axios'; + +const fetchCameraSnapshotUrls = async ( + interval: string, +): Promise => { + try { + const response = await axios.get( + `http://127.0.0.1:8000/api/v1/camera/snapshot/${interval}`, + ); + return response.data; + } catch (error) { + console.error('Error fetching camera snapshot URLs:', error); + return null; + } +}; + +export { fetchCameraSnapshotUrls }; diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx index bf19082..eb78559 100644 --- a/frontend/src/components/Sidebar/index.tsx +++ b/frontend/src/components/Sidebar/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { NavLink, useLocation } from 'react-router-dom'; import SidebarLinkGroup from './SidebarLinkGroup'; import Logo from '../../images/logo/logo.svg'; +import { FaCamera } from 'react-icons/fa'; interface SidebarProps { sidebarOpen: boolean; @@ -228,275 +229,21 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { {/* */} - - - {/* */} -
-

- OTHERS -

- -
    - {/* */} + {/* */}
  • - - - - - - - - - - - - Chart + + Snapshot
    • - {/* */} - - {/* */} - - {(handleClick, open) => { - return ( - - { - e.preventDefault(); - sidebarExpanded - ? handleClick() - : setSidebarExpanded(true); - }} - > - - - - - - - - - - - - - UI Elements - - - - - {/* */} -
    -
      -
    • - - 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + - (isActive && '!text-white') - } - > - Alerts - -
      • -
    • - - 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + - (isActive && '!text-white') - } - > - Buttons - -
      • -
    -
    - {/* */} -     - ); - }} -     - {/* */} - - {/* */} - - {(handleClick, open) => { - return ( - - { - e.preventDefault(); - sidebarExpanded - ? handleClick() - : setSidebarExpanded(true); - }} - > - - - - - - - - - - - - Authentication - - - - - {/* */} -
    -
      -
    • - - 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + - (isActive && '!text-white') - } - > - Sign In - -
      • -
    • - - 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + - (isActive && '!text-white') - } - > - Sign Up - -
      • -
    -
    - {/* */} -     - ); - }} -     - {/* */} + {/* */}
diff --git a/frontend/src/pages/Snapshot.tsx b/frontend/src/pages/Snapshot.tsx new file mode 100644 index 0000000..1fc8c25 --- /dev/null +++ b/frontend/src/pages/Snapshot.tsx @@ -0,0 +1,41 @@ +import React, { useEffect, useState } from 'react'; +import { fetchCameraSnapshotUrls } from '../api/SnapshotData'; +import Breadcrumb from '../components/Breadcrumbs/Breadcrumb'; +import DefaultLayout from '../layout/DefaultLayout'; + +const Snapshot: React.FC = () => { + const [imageUrls, setImageUrls] = useState([]); + + useEffect(() => { + const fetchUrls = async () => { + const urls = await fetchCameraSnapshotUrls('week'); + if (urls) { + setImageUrls(urls); + } else { + console.error('Failed to fetch image URLs'); + } + }; + + fetchUrls(); + }, []); + + return ( + + +
+
+ {imageUrls.map((url, index) => ( + {`Image + ))} +
+
+ + ); +}; + +export default Snapshot;