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 button to select snapshot interval

Browse Source
This commit is contained in:
sosokker 2024-05-13 00:44:01 +07:00
parent 8e155eedd3
commit fcb485c7fc
1 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/pages/Snapshot.tsx
View File

@ -5,10 +5,11 @@ import DefaultLayout from '../layout/DefaultLayout';
const Snapshot: React.FC = () => {
const [imageUrls, setImageUrls] = useState<string[]>([]);
const [selectedInterval, setSelectedInterval] = useState<string>('week');
useEffect(() => {
const fetchUrls = async () => {
const urls = await fetchCameraSnapshotUrls('week');
const urls = await fetchCameraSnapshotUrls(selectedInterval);
if (urls) {
setImageUrls(urls);
} else {
@ -17,12 +18,58 @@ const Snapshot: React.FC = () => {
};
fetchUrls();
}, []);
}, [selectedInterval]);
const handleIntervalChange = (interval: string) => {
setSelectedInterval(interval);
};
return (
<DefaultLayout>
<Breadcrumb pageName="Snapshot" />
<div>
<div className="flex space-x-4 mb-4">
<button
className={`${
selectedInterval === 'today'
? 'bg-blue-500 text-white'
: 'bg-gray-300'
} px-4 py-2 rounded`}
onClick={() => handleIntervalChange('today')}
>
Today
</button>
<button
className={`${
selectedInterval === 'week'
? 'bg-blue-500 text-white'
: 'bg-gray-300'
} px-4 py-2 rounded`}
onClick={() => handleIntervalChange('week')}
>
Week
</button>
<button
className={`${
selectedInterval === 'month'
? 'bg-blue-500 text-white'
: 'bg-gray-300'
} px-4 py-2 rounded`}
onClick={() => handleIntervalChange('month')}
>
Month
</button>
<button
className={`${
selectedInterval === 'all'
? 'bg-blue-500 text-white'
: 'bg-gray-300'
} px-4 py-2 rounded`}
onClick={() => handleIntervalChange('all')}
>
All
</button>
</div>
<div className="grid grid-cols-3 gap-4">
{imageUrls.map((url, index) => (
<img