diff options
Diffstat (limited to 'maps-frontend/src/components/UserCheckin.js')
| -rw-r--r-- | maps-frontend/src/components/UserCheckin.js | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/maps-frontend/src/components/UserCheckin.js b/maps-frontend/src/components/UserCheckin.js new file mode 100644 index 0000000..f85994b --- /dev/null +++ b/maps-frontend/src/components/UserCheckin.js @@ -0,0 +1,33 @@ +// React import +import { useState } from "react"; + +// CSS import +import '../css/UserCheckin.css'; + +/** + * Componenet for checkins. Has a toggle to show more info. + * @param {Object} props The props of the component. + * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. + */ +function UserCheckin(props) { + // State - toggled + const [isToggled, setIsToggled] = useState(false); + + return ( + <li className='Checkin'> + <div className="Img-flex"> + <span><span className="Clickable-name" onClick= {(e) => props.getUserCheckins(props.value.id, props.value.name)}>{props.value.name}</span> just checked in!</span> + <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> + <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> + </div> + <div hidden={!isToggled}> + <ul> + <li>Time: {new Date(props.value.ts * 1000).toLocaleTimeString("en-US")}</li> + <li>Lat: {props.value.lat}</li> + <li>Lon: {props.value.lon}</li> + </ul> + </div> + </li>); +} + +export default UserCheckin;
\ No newline at end of file |