sosokker/HomieCare
1
0
Fork 0
mirror of https://github.com/Sosokker/HomieCare.git synced 2025-12-18 17:54:04 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add camera snapshot page

Browse Source
This commit is contained in:
sosokker 2024-05-13 00:38:41 +07:00
parent 85380d056f
commit 8e155eedd3
5 changed files with 68 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.tsx
View File

@ -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<boolean>(true);
@ -48,7 +47,7 @@ function App() {
element={
<>
<PageTitle title="Snapshot" />
<Alerts />
<Snapshot />
</>
}
/>

0
frontend/src/api/PredictionData.tsx
View File

17
frontend/src/api/SnapshotData.tsx Normal file
View File

@ -0,0 +1,17 @@
import axios from 'axios';
const fetchCameraSnapshotUrls = async (
interval: string,
): Promise<string[] | null> => {
try {
const response = await axios.get<string[]>(
`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 };

269
frontend/src/components/Sidebar/index.tsx
View File

@ -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) => {
</NavLink>
</li>
{/* <!-- Menu Item Profile --> */}
</ul>
</div>
{/* <!-- Others Group --> */}
<div>
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
OTHERS
</h3>
<ul className="mb-6 flex flex-col gap-1.5">
{/* <!-- Menu Item Chart --> */}
{/* <!-- Snapshot --> */}
<li>
<NavLink
to="/chart"
to="/snapshot"
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
pathname.includes('chart') && 'bg-graydark dark:bg-meta-4'
pathname.includes('snapshot') &&
'bg-graydark dark:bg-meta-4'
}`}
>
<svg
className="fill-current"
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_130_9801)">
<path
d="M10.8563 0.55835C10.5188 0.55835 10.2095 0.8396 10.2095 1.20522V6.83022C10.2095 7.16773 10.4907 7.4771 10.8563 7.4771H16.8751C17.0438 7.4771 17.2126 7.39272 17.3251 7.28022C17.4376 7.1396 17.4938 6.97085 17.4938 6.8021C17.2688 3.28647 14.3438 0.55835 10.8563 0.55835ZM11.4751 6.15522V1.8521C13.8095 2.13335 15.6938 3.8771 16.1438 6.18335H11.4751V6.15522Z"
fill=""
/>
<path
d="M15.3845 8.7427H9.1126V2.69582C9.1126 2.35832 8.83135 2.07707 8.49385 2.07707C8.40947 2.07707 8.3251 2.07707 8.24072 2.07707C3.96572 2.04895 0.506348 5.53645 0.506348 9.81145C0.506348 14.0864 3.99385 17.5739 8.26885 17.5739C12.5438 17.5739 16.0313 14.0864 16.0313 9.81145C16.0313 9.6427 16.0313 9.47395 16.0032 9.33332C16.0032 8.99582 15.722 8.7427 15.3845 8.7427ZM8.26885 16.3083C4.66885 16.3083 1.77197 13.4114 1.77197 9.81145C1.77197 6.3802 4.47197 3.53957 7.8751 3.3427V9.36145C7.8751 9.69895 8.15635 10.0083 8.52197 10.0083H14.7938C14.6813 13.4958 11.7845 16.3083 8.26885 16.3083Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_130_9801">
<rect
width="18"
height="18"
fill="white"
transform="translate(0 0.052124)"
/>
</clipPath>
</defs>
</svg>
Chart
<FaCamera />
Snapshot
</NavLink>
</li>
{/* <!-- Menu Item Chart --> */}
{/* <!-- Menu Item Ui Elements --> */}
<SidebarLinkGroup
activeCondition={pathname === '/ui' || pathname.includes('ui')}
>
{(handleClick, open) => {
return (
<React.Fragment>
<NavLink
to="#"
className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/ui' || pathname.includes('ui')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
>
<svg
className="fill-current"
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_130_9807)">
<path
d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"
fill=""
/>
<path
d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"
fill=""
/>
<path
d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_130_9807">
<rect
width="18"
height="18"
fill="white"
transform="translate(0 0.052124)"
/>
</clipPath>
</defs>
</svg>
UI Elements
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
>
<ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/ui/alerts"
className={({ isActive }) =>
'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
</NavLink>
</li>
<li>
<NavLink
to="/ui/buttons"
className={({ isActive }) =>
'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
</NavLink>
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* <!-- Menu Item Ui Elements --> */}
{/* <!-- Menu Item Auth Pages --> */}
<SidebarLinkGroup
activeCondition={
pathname === '/auth' || pathname.includes('auth')
}
>
{(handleClick, open) => {
return (
<React.Fragment>
<NavLink
to="#"
className={`group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/auth' || pathname.includes('auth')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
>
<svg
className="fill-current"
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_130_9814)">
<path
d="M12.7127 0.55835H9.53457C8.80332 0.55835 8.18457 1.1771 8.18457 1.90835V3.84897C8.18457 4.18647 8.46582 4.46772 8.80332 4.46772C9.14082 4.46772 9.45019 4.18647 9.45019 3.84897V1.88022C9.45019 1.82397 9.47832 1.79585 9.53457 1.79585H12.7127C13.3877 1.79585 13.9221 2.33022 13.9221 3.00522V15.0709C13.9221 15.7459 13.3877 16.2802 12.7127 16.2802H9.53457C9.47832 16.2802 9.45019 16.2521 9.45019 16.1959V14.2552C9.45019 13.9177 9.16894 13.6365 8.80332 13.6365C8.43769 13.6365 8.18457 13.9177 8.18457 14.2552V16.1959C8.18457 16.9271 8.80332 17.5459 9.53457 17.5459H12.7127C14.0908 17.5459 15.1877 16.4209 15.1877 15.0709V3.03335C15.1877 1.65522 14.0627 0.55835 12.7127 0.55835Z"
fill=""
/>
<path
d="M10.4346 8.60205L7.62207 5.7333C7.36895 5.48018 6.97519 5.48018 6.72207 5.7333C6.46895 5.98643 6.46895 6.38018 6.72207 6.6333L8.46582 8.40518H3.45957C3.12207 8.40518 2.84082 8.68643 2.84082 9.02393C2.84082 9.36143 3.12207 9.64268 3.45957 9.64268H8.49395L6.72207 11.4427C6.46895 11.6958 6.46895 12.0896 6.72207 12.3427C6.83457 12.4552 7.00332 12.5114 7.17207 12.5114C7.34082 12.5114 7.50957 12.4552 7.62207 12.3145L10.4346 9.4458C10.6877 9.24893 10.6877 8.85518 10.4346 8.60205Z"
fill=""
/>
</g>
<defs>
<clipPath id="clip0_130_9814">
<rect
width="18"
height="18"
fill="white"
transform="translate(0 0.052124)"
/>
</clipPath>
</defs>
</svg>
Authentication
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.41107 6.9107C4.73651 6.58527 5.26414 6.58527 5.58958 6.9107L10.0003 11.3214L14.4111 6.91071C14.7365 6.58527 15.2641 6.58527 15.5896 6.91071C15.915 7.23614 15.915 7.76378 15.5896 8.08922L10.5896 13.0892C10.2641 13.4147 9.73651 13.4147 9.41107 13.0892L4.41107 8.08922C4.08563 7.76378 4.08563 7.23614 4.41107 6.9107Z"
fill=""
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
>
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/auth/signin"
className={({ isActive }) =>
'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
</NavLink>
</li>
<li>
<NavLink
to="/auth/signup"
className={({ isActive }) =>
'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
</NavLink>
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* <!-- Menu Item Auth Pages --> */}
{/* <!-- Menu Item Profile --> */}
</ul>
</div>
</nav>

41
frontend/src/pages/Snapshot.tsx Normal file
View File

@ -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<string[]>([]);
useEffect(() => {
const fetchUrls = async () => {
const urls = await fetchCameraSnapshotUrls('week');
if (urls) {
setImageUrls(urls);
} else {
console.error('Failed to fetch image URLs');
}
};
fetchUrls();
}, []);
return (
<DefaultLayout>
<Breadcrumb pageName="Snapshot" />
<div>
<div className="grid grid-cols-3 gap-4">
{imageUrls.map((url, index) => (
<img
key={index}
src={url}
alt={`Image ${index}`}
className="w-full h-auto"
/>
))}
</div>
</div>
</DefaultLayout>
);
};
export default Snapshot;