updated saved locations page. need to work on tileserver api next

Author: amyfromandi

pages/dev/map/saved-locations/+Page.client.ts

@@ -44,6 +44,7 @@ export function Page() {
 
   const [data, setData] = useState(null);
 
+
   return h(
     MapAreaContainer,
     {

pages/dev/map/saved-locations/+route.ts

@@ -7,6 +7,9 @@ const lngLatRegex = /(-?\d+\.\d+)/;
 
 const routeRegex = partRegex`/loc/${lngLatRegex}/${lngLatRegex}`;
 
+
+
+
 export function route(pageContext) {
   const url = pageContext.urlPathname;
 

pages/dev/map/saved-locations/+title.ts

@@ -1 +1 @@
-export const title = "My saved locations";
+export const title = "Saved Locations";

pages/dev/map/saved-locations/details-panel.ts

@@ -6,147 +6,111 @@ import {
   FeatureProperties,
   LocationPanel,
 } from "@macrostrat/map-interface";
-import { useNearbyCheckins, useNearbySpots } from "./sidebar-data";
-import { CheckinListing, SpotListing } from "@macrostrat/data-components";
 import { getColors } from "#/dev/map/rockd-strabospot/map-style";
 import { useInDarkMode } from "@macrostrat/ui-components";
-import { SaveLocationButton, SaveLocationForm } from "./save-location-form/save-location";
-import { ViewLocations } from "./save-location-form/view-locations";
-import { useAppState } from "#/map/map-interface/app-state";
-import React, { useState } from "react";
+import { SaveLocationForm } from "./save-location";
+import React, { useState, useEffect } from "react";
 
 
 
-const h = hyper.styled(styles);
 
+const h = hyper.styled(styles);
 export function DetailsPanel({ position, nearbyFeatures, onClose }) {
-  console.log("position ", position)
-  console.log("features ", nearbyFeatures)
-  const [showSaveLocationForm, setShowSaveLocationForm] = useState(false);
-  const handleSaveLocationClick = () => {
-      setShowSaveLocationForm((prevState) => !prevState);
-    };
   if (position == null) return null;
+  let count = 22;
+
   return h(
     LocationPanel,
     {
       onClose,
       position,
     },
     [
+      h(SaveLocationForm, { position, count }),
+      //h(CheckinsPanel, { nearbyFeatures }),
       h(SpotsPanel, {
         nearbyFeatures,
       }),
-      h(SaveLocationButton, {onClick: handleSaveLocationClick,}),
-      showSaveLocationForm && h(SaveLocationForm, { onSubmit: handleFormSubmit, onViewLocations: handleViewLocationsForm }),
-      //locations && h(ViewLocations, { locations }),
     ]
   );
 }
 
-
-
+//implement tileserver api to reorient user to an exact location
 /*
-//import lat and lng from file1 or call function from file1 to obtain the lat and lng
-
-  const [locations, setLocations] = useState(0)
-
-
-
-  //id is a sequential serial within the database and webanon has to
-  //specify every column value in order for any payload to post to the
-  //saved locations table. TODO specify permissions and RLA in postgrest.
-  let count_id = 18
-  let position = useAppState((state) => state.core.infoMarkerPosition);
-  let lat = position.lat
-  let lng = position.lng
-
-  const handleFormSubmit = async (formData) => {
-    count_id = count_id + 1;
-    const payload = {
-      id: count_id,
-      user_id: 46,
-      location_name: formData.location_name,
-      location_description: formData.location_description,
-      latitude: lat,  //need latitude from state
-      longitude: lng, //need longitude from state
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-      category: formData.category
-    };
-    console.log("posting with this payload", payload)
-    const response = await fetch("https://dev2.macrostrat.org/api/pg/saved_locations", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    });
-    console.log(response)
-    console.log(response.ok)
-    console.log(response.status)
-    console.log(response.statusText)
-    if (response.status != 201) {
-      alert(`Error ${response.status}: ${response.statusText}`)
-    }
-    else {
-      alert("Saved successfully")
-    }
-    setShowSaveLocationForm(false);
-  };
-
-//build own view locations component outside of geo-map
-  const handleViewLocationsForm = async () => {
-    const response = await fetch("https://dev2.macrostrat.org/api/pg/saved_locations", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+export function CheckinsPanel({ nearbyFeatures }) {
+  const checkins = useNearbyCheckins(nearbyFeatures);
+  const titleComponent = () =>
+    h(PanelHeader, {
+      title: "Checkins",
+      sourceLink: h(SystemLink, { href: "https://rockd.org" }, "Rockd"),
+      hasData: checkins.length != 0,
     });
 
-    if (response.status !== 200) {
-      alert(`Error ${response.status}: ${response.statusText}`)
-    }
-    else {
-      const result = await response.json();
-      console.log(result)
-      setLocations(result);
-    }
-  };
-
-
-
-  */
-
-
-
+  return h(FeatureTypePanel, {
+    features: checkins,
+    titleComponent,
+    featureComponent: CheckinFeature,
+  });
+}
+ */
 export function SpotsPanel({ nearbyFeatures }) {
-  // Here, we handle loading state for feature
-  const [features, loading, error] = useNearbySpots(nearbyFeatures);
+  const [features, setFeatures] = useState([]); // State to store features
+  const [loading, setLoading] = useState(true); // State to track loading
+  const [error, setError] = useState(null); // State to track errors
+
+  useEffect(() => {
+    const fetchFeatures = async () => {
+      try {
+        const response = await fetch(
+          "https://dev2.macrostrat.org/api/pg/saved_locations"
+        );
+        if (!response.ok) {
+          throw new Error(`Error ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        setFeatures(data); // Update features state
+      } catch (err) {
+        setError(err.message); // Set error message
+      } finally {
+        setLoading(false); // Stop loading
+      }
+    };
+
+    fetchFeatures();
+  }, []);
 
+  console.log("features!!", features)
 
+  const FeatureComponent = ({ data }) => {
+  return h("div.feature", [
+    h("h3.feature-title", data.location_name),
+    h("p.feature-description", data.location_description),
+    h("p.feature-coordinates", [
+      `Latitude: ${data.latitude}, Longitude: ${data.longitude}`,
+    ]),
+    h("p.feature-category", `Category: ${data.category}`),
+    h("p.feature-dates", [
+      `Created at: ${new Date(data.created_at).toLocaleString()}`,
+      `Updated at: ${new Date(data.updated_at).toLocaleString()}`,
+    ]),
+  ]);
+};
   const titleComponent = () =>
-    h(PanelHeader, {
-      title: "Saved locations",
-      sourceLink: h(
-        SystemLink,
-        { href: "https://strabospot.org" },
-        "StraboSpot"
-      ),
-      hasData: features.length != 0,
-    });
+  h(PanelHeader, {
+    title: "My Saved Locations",
+    hasData: features.length != 0,
+  });
+
 
   return h(FeatureTypePanel, {
     features,
     titleComponent,
     loading,
     error,
-    featureComponent: spotfeature,
+    featureComponent: FeatureComponent,
   });
 }
 
-const spotfeature = (props) => h(SpotListing, { spot: props.data });
-
 function FeatureTypePanel({
   features,
   titleComponent,
@@ -162,11 +126,6 @@ function FeatureTypePanel({
       icon: "error",
     });
   }
-
-  // if (features.length == 0) {
-  //   return h("div.empty-list", h("p", "No nearby " + title));
-  // }
-
   return h("div.feature-panel", [
     h(
       ExpansionPanel,
@@ -215,23 +174,9 @@ export function LegendList() {
       LegendItem,
       {
         color: colors.checkins,
-        name: "Checkins",
-        sourceLink: h(SystemLink, { href: "https://rockd.org" }, "Rockd"),
-      },
-      "Outcrops collected as part of a community-collaborative field guide."
-    ),
-    h(
-      LegendItem,
-      {
-        color: colors.spots,
-        name: "Spots",
-        sourceLink: h(
-          SystemLink,
-          { href: "https://strabospot.org" },
-          "StraboSpot"
-        ),
+        name: "My saved locations",
       },
-      "Sites collected for research purposes (filtered for general interest)."
+      "Will show the user locations on the map. Need to build it within the tileserver."
     ),
   ]);
 }
@@ -259,3 +204,9 @@ function LegendHeader({ color, name, sourceLink = null }) {
 function Swatch({ color }) {
   return h("span.swatch", { style: { backgroundColor: color } });
 }
+
+
+
+
+
+

pages/dev/map/saved-locations/legend-text.mdx

@@ -6,4 +6,4 @@ import {LegendList} from './details-panel'
 
 <LegendList />
 
-{}rototype for user features.
+Prototype for user features.