Skip to content

Commit

Permalink
Merge branch 'Mani-FrontEnd' of https://github.com/TheBeetles/PolliNa…
Browse files Browse the repository at this point in the history 
…tion into Mani-FrontEnd
  • Loading branch information
@manig0923
manig0923 committed Nov 19, 2024
2 parents 6731213 + 62737f1 commit 970d26a
Show file tree
Hide file tree
Showing 5 changed files with 487 additions and 406 deletions.
245 changes: 97 additions & 148 deletions client/app/saved-species/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,182 +1,131 @@
// app/saved-species/saved-species.js
'use client';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import placeholder from '../images/pollination.png';
import plantIcon from '../images/plant.png';
import insectIcon from '../images/dragonfly.png';
import verifyUser from '../components/verify';
import styles from '../components/Camera.module.css'
import styles from '../components/Camera.module.css';

export default function SavedSpeciesPage() {
export default function SavedSpeciesPage() {
const router = useRouter();
const [data, setData] = useState([]);
const [plantImage, setPlantImage] = useState([]);
const [insectImage, setInsectImage] = useState([]);
const [toggle, setToggle] = useState(false);
verifyUser();
const handleGoBackButton = () => {

// Back button handler
const handleGoBackButton = () => {
router.push('/scan-species');
};

useEffect(() => {
const res = async () => {
const val = await fetch('/api/image/all', {
method: 'GET'
}).then(
(r) => { return r.json(); }
);
setData(val);
}
res();
},[]);

useEffect(() => {
const response = async () => {
if (data['insect'] !== undefined) {
for (let i = 0; i < data['insect'].length; i++) {
const res = await fetch('/api/image/get/' + data['insect'][i], {
method: 'GET'
}).then((r) => {return r.blob();}).then(
(thing) => {
const objectURL = URL.createObjectURL(thing);
insectImage.push({ id: data['insect'][i], image: objectURL});
}
);
}
}
if (data['plant'] !== undefined) {
for (let i = 0; i < data['plant'].length; i++) {
const res = await fetch('/api/image/get/' + data['plant'][i], {
method: 'GET'
}).then((r) => {return r.blob();}).then(
(thing) => {
const objectURL = URL.createObjectURL(thing);
plantImage.push({ id: data['plant'][i], image: objectURL});
// setPlantImage([...plantImage, { id: data['plant'][i], image: objectURL}]);
}
);
}
}
// Click handlers for plant and insect buttons
const handlePlantClick = () => {
router.push('/saved-plant-info');
};

setInsectImage([...insectImage]);
};
response();
}, [data]);
const handleInsectClick = () => {
router.push('/saved-insect-info');
};

const toggleFalse = () => {
setToggle(false);
}

const toggleTrue = () => {
setToggle(true);
}
return (
<div style={{
position: 'relative',
height: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px',
}}>
<div
style={{
position: 'relative',
height: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px',
backgroundColor: '#FFFDD0',
fontFamily: 'Verdana, sans-serif',
}}
>
{/* Back Button */}
<button onClick={handleGoBackButton} style={{
position: 'absolute',
top: '20px',
right: '20px',
left: '20px',
padding: '10px',
fontSize: '16px',
cursor: 'pointer',
backgroundColor: '#B3E576',
backgroundColor: '#1B5E20',
color: 'white',
borderRadius: '20px',
border: 'none',
}}>
Back
</button>
{ toggle && <h1 style={{
marginBottom: '10px',
color: '#B3E576',
fontSize: '24px',
}}>
Plant List
</h1>}
{ !toggle && <h1 style={{
marginBottom: '10px',
color: '#B3E576',
fontSize: '24px',

{/* Page Title */}
<h1 style={{
marginBottom: '50px',
color: '#000',
fontSize: '45px',
}}>
Insect List
</h1>}
<div style={{ display: 'flex' }}>
<button className={styles.button} onClick={toggleTrue} style={{
}}>
Plants
</button>
<button className={styles.button} onClick={toggleFalse} style={{
}}>
Insects
</button>
</div>
Saved Species
</h1>

{/* Plant and Insect Categories */}
<div style={{
display: 'flex',
justifyContent: 'center',
width: '100%',
paddingBottom: '2em',
gap: '60px',
}}>
{ toggle &&
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '10px',
{/* Plant Button */}
<div onClick={handlePlantClick} style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
cursor: 'pointer',
width: '375px',
height: '375px',
backgroundColor: '#B3E576',
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
}}>
{plantImage.map(plant => (
<a href={("species-information/" + plant.id)}>
<div key={plant.id} style={{
width: '100px',
height: '100px',
border: '2px solid #000000',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundImage: placeholder,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
}}>
<img src={plant.image} alt="Insect" style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}/>
</div>
</a>
))}
</div> }
{ !toggle &&
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '10px',
<img src={plantIcon.src} alt="Plant Icon" style={{
width: '230px',
height: '230px',
marginBottom: '10px',
}}/>
<span style={{
color: '#000',
fontSize: '32px',
position: 'absolute',
bottom: '20px',
}}>
Plant
</span>
</div>

{/* Insect Button */}
<div onClick={handleInsectClick} style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
cursor: 'pointer',
width: '375px',
height: '375px',
backgroundColor: '#B3E576',
borderRadius: '50%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
}}>
{insectImage.map(insect => (
<a href={("species-information/" + insect.id)}>
<div key={insect.id} style={{
width: '100px',
height: '100px',
border: '2px solid #000000',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
}}>
<img src={insect.image} alt="Insect" style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}/>
</div>
</a>
))}
</div>}
<img src={insectIcon.src} alt="Insect Icon" style={{
width: '250px',
height: '250px',
marginBottom: '10px',
}}/>
<span style={{
color: '#000',
fontSize: '32px',
position: 'absolute',
bottom: '20px',
}}>
Insect
</span>
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 970d26a

Please sign in to comment.