merged branches

Author: davidsklar99

pages/dev/test-site/explore/+Page.client.ts

@@ -118,8 +118,8 @@ function FeatureDetails() {
   let checkins = [];
   let result;
 
-  if(mapRef == null) {
-    result = getCheckins(0, 100, 0, 100);
+  if(mapRef?.current == null) {
+    return h(Spinner)
   } else {
     let map = mapRef.current;
 
@@ -140,7 +140,7 @@ function FeatureDetails() {
     }, [bounds]);
   }
 
-  if (result == null) return h(Spinner);
+  if (result == null) return h("div.checkin-container",Spinner);
   result = result.success.data;
   console.log("result:",result)
 
@@ -240,16 +240,20 @@ function WeaverMap({
   const style = useMapStyle(type, mapboxToken);
 
   const [featuredCheckins, setFeaturedCheckin] = useState(h(Spinner));
+  // overlay
+  const [isOpenSelected, setOpenSelected] = useState(true);
+
 
   const [inspectPosition, setInspectPosition] =
     useState<mapboxgl.LngLat | null>(null);
 
   const onSelectPosition = useCallback((position: mapboxgl.LngLat) => {
     setInspectPosition(position);
+    setOpenSelected(true);
   }, []);
 
   let detailElement = null;
-  let selectedCheckin = h('h1', { className: 'no-checkins' }, "No Checkin(s) Selected");
+  let selectedCheckin = null;
   let result = getCheckins(inspectPosition?.lat - .05, inspectPosition?.lat + .05, inspectPosition?.lng - .05, inspectPosition?.lng + .05);
   if (inspectPosition != null) {
     detailElement = h(
@@ -268,13 +272,26 @@ function WeaverMap({
 
   // TODO: have run depend on changing mapRef
   let featuredCheckin = h(FeatureDetails);
+  let overlay;
 
-  let overlay = h(
-    "div.overlay-div",
-    [
-      h(ExpansionPanel, {title: "Selected Checkins"}, selectedCheckin),
-      h(ExpansionPanel, {title: "Featured Checkins"}, featuredCheckin),
+  if (selectedCheckin == null || !isOpenSelected) {
+    overlay = h("div.sidebox", [
+      h('div.title', h("h1", "Featured Checkins")),
+      h("div.overlay-div", featuredCheckin),
     ]);
+  } else {
+    overlay = h("div.sidebox", [
+      h('div.title', [
+        h("h1", "Selected Checkins"),
+        h('h3', { className: "coordinates" }, formatCoordinates(inspectPosition.lat, inspectPosition.lng)),
+      ]),
+      h("button", {
+        className: "close-btn",
+        onClick: () => setOpenSelected(false)
+      }, "X"),
+      h("div.overlay-div", selectedCheckin)
+    ]);
+  }
 
   if(style == null) return null;
 
@@ -285,7 +302,6 @@ function WeaverMap({
       h(
         MapAreaContainer,
         {
-          detailPanel: detailElement,
           contextPanelOpen: isOpen,
         },
         [
@@ -311,15 +327,15 @@ function getSelectedCheckins(result) {
 
   // Selected checkin
   if (result == null) {
-    return h(Spinner);
+    return null;
   } else {
     result = result.success.data;
     checkins = createCheckins(result, mapRef, false);
 
     if (checkins.length > 0) {
       return h("div", {className: 'checkin-container'}, checkins);
     } else {
-      return h('h1', { className: 'no-checkins' }, "No Checkin(s) Selected");
+      return null;
     }
   }
 }
@@ -346,4 +362,16 @@ function useMapStyle(type, mapboxToken) {
   }, []);
 
   return actualStyle;
+}
+
+function formatCoordinates(latitude, longitude) {
+  // Round latitude and longitude to 4 decimal places
+  const roundedLatitude = latitude.toFixed(4);
+  const roundedLongitude = longitude.toFixed(4);
+
+  const latitudeDirection = latitude >= 0 ? 'N' : 'S';
+  const longitudeDirection = longitude >= 0 ? 'E' : 'W';
+
+  // Return the formatted string with rounded values
+  return `${Math.abs(roundedLatitude)}° ${latitudeDirection}, ${Math.abs(roundedLongitude)}° ${longitudeDirection}`;
 }

pages/dev/test-site/explore/main.styl

@@ -94,16 +94,16 @@ h3,h4,p
 
 .overlay-div
   position: absolute
-  top: 0
+  top: 10%
   left: 0
   z-index: 1000
-  background: rgba(255, 255, 255, 0.9)
-  padding: 8px
   border-radius: 0 4px 4px 0
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-  max-height: 100vh 
+  height: 90vh 
   overflow-y: auto
-  width: 30%
+  width 100%
+  padding 8px
+  padding-top 0
 
 .overlay-div > *:not(:last-child) 
   margin-bottom 8px
@@ -133,8 +133,63 @@ h3,h4,p
   border-radius: 4px;
   width 100%
 
-.no-checkins
-  color black
+.sidebox
+  position absolute
+  z-index 1000
+  height 100vh
+  width 30%
+  top 0
+  left 0
+  background rgba(255, 255, 255, 0.8)
+
+  .title
+    color black
+    position fixed
+    width 30%
+    background rgba(255, 255, 255, 0.85)
+    margin 0
+    height 10vh
+    display flex
+    flex-direction column
+    align-items center
+    justify-content center
+
+    h1
+      margin-bottom 0
+      margin-top 0
+
+.close-btn
+  position absolute
+  top 10px
+  right 10px
+  background-color #333
+  color white
+  border none
+  border-radius 50%
+  width 30px
+  height 30px
+  display flex
+  justify-content center
+  align-items center
+  font-size 15px
+  cursor pointer
+  box-shadow 0 4px 8px rgba(0, 0, 0, 0.2)
+  transition background-color 0.3s, box-shadow 0.3s
+
+.close-btn:hover
+  background-color #555
+  box-shadow 0 6px 12px rgba(0, 0, 0, 0.3)
+
+.marker
+  height 7vh
+  display grid
+  margin auto
+  margin-right 10px
+
+.details-image
+  width 40px
+  margin-left 10px
+  margin-top 4px
 
 .checkin-footer
   display flex
@@ -159,14 +214,3 @@ h3,h4,p
 
     .comments-image
       width 40px
-
-.marker
-  height 7vh
-  display grid
-  margin auto
-  margin-right 10px
-
-.details-image
-  width 40px
-  margin-left 10px
-  margin-top 4px