Add ModCard
+
+
+
@@ -10,7 +11,8 @@ const Landing = () => (
(
(
{/* eslint-disable-next-line max-len */} - (
{
+ const [mapOptions] = useState({
+ center: center,
+ zoom: 16,
+ mapTypeId: 'satellite',
+ tilt: 0,
+ });
+
+ const [selectedPlace, setSelectedPlace] = useState(null);
+ const [infoWindowPosition, setInfoWindowPosition] = useState(null);
+ const [formattedAddress, setFormattedAddress] = useState('');
+ const [locationPhotoUrl, setLocationPhotoUrl] = useState('');
+ const [activeAccordionKey, setActiveAccordionKey] = useState(null);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [isMapScriptLoaded, setIsMapScriptLoaded] = useState(false);
+ const modCardsPerPage = 2;
+ const navigate = useNavigate();
+ const searchBoxRef = useRef(null);
+
+ const handleImageClick = (imageUrl) => {
+ setLocationPhotoUrl(imageUrl);
+ };
+
+ const onMapClick = (e) => {
+ const lat = e.latLng.lat();
+ const lng = e.latLng.lng();
+ setInfoWindowPosition({ lat, lng });
+ setLocationPhotoUrl('');
+
+ const geocoder = new window.google.maps.Geocoder();
+ geocoder.geocode({ location: { lat, lng } }, (results, status) => {
+ if (status === 'OK' && results[0]) {
+ setFormattedAddress(results[0].formatted_address);
+ setSelectedPlace({ lat, lng });
+ }
+ });
+ };
+
+ const onLoadSearchBox = (ref) => {
+ searchBoxRef.current = ref;
+ };
+
+ const navigateToAddModCard = () => {
+ navigate('/addmodcard', { state: { formattedAddress } });
+ };
+
+ const onPlacesChanged = () => {
+ const places = searchBoxRef.current.getPlaces();
+ if (places && places.length > 0) {
+ const place = places[0];
+ const latLng = place.geometry.location;
+ const lat = latLng.lat();
+ const lng = latLng.lng();
+ setInfoWindowPosition({ lat, lng });
+ setLocationPhotoUrl('');
+ setSelectedPlace({ lat, lng });
+ setFormattedAddress(place.formatted_address || '');
+ onMapClick({ latLng: new window.google.maps.LatLng(lat, lng) });
+ }
+ };
+
+ const photoUrlToShow = locationPhotoUrl || '/images/example-photo.png';
+
+ const handleAccordionToggle = (key) => setActiveAccordionKey(activeAccordionKey === key ? null : key);
+
+ const { ready, modcards } = useTracker(() => {
+ const subscription = Meteor.subscribe(ModCards.userPublicationName);
+ const allModCards = ModCards.collection.find({}).fetch();
+ const filteredModCards = allModCards.filter(modCard => modCard.address === formattedAddress);
+
+ return {
+ modcards: filteredModCards,
+ ready: subscription.ready(),
+ };
+ }, [formattedAddress]);
+
+ const indexOfLastModCard = currentPage * modCardsPerPage;
+ const indexOfFirstModCard = indexOfLastModCard - modCardsPerPage;
+ const currentModCards = modcards.slice(indexOfFirstModCard, indexOfLastModCard);
+
+ const handlePageChange = (pageNumber) => setCurrentPage(pageNumber);
+
+ return ready ? (
+
+
+
+ handleAccordionToggle('0')}>Information
+
+
+
+
+ handleAccordionToggle('1')}>User Modeling
+
+
+ {currentModCards.map((modcard) => (
+
+
+
+
+
+ setIsMapScriptLoaded(true)}
+ >
+ {isMapScriptLoaded && (
+
+ {selectedPlace && (
+ setSelectedPlace(null)}
+ >
+
+ )}
+
+
+
+
+ ) :
Our Mission
-{/* eslint-disable-next-line max-len */} -
We want to create a web portal that facilitates the civic engagement around how to rebuild Lahaina, Maui, including surveys, forums, sharing design concepts with visual and data models for economic, environmental, etc. analysis.
+We want to create a web portal that facilitates the civic engagement around how to rebuild Lahaina, Maui, including surveys, forums, sharing design concepts with visual and mappinig models for economic, environmental, etc. analysis.
+
+ 
+
+ Address: {formattedAddress}
+
+
+ {Array.from({ length: Math.ceil(modcards.length / modCardsPerPage) }, (_, i) => (
+ handlePageChange(i + 1)}>
+ {i + 1}
+
+ ))}
+
+
+ {formattedAddress && (
+
+
+
+
+ )}
+ {/* Search box container */}
+
+ {/* eslint-disable-next-line max-len */}
+
+
+
+ )}
+
+
+ Address
+{formattedAddress}
+