SALG-1278: Add index on poi

Author: yepzdk

src/components/points-of-interest/PointOfInterest.jsx

@@ -20,7 +20,7 @@ function PointOfInterest({
     subtitles,
     podcast,
     IFrameUrl,
-  },
+  }, index
 }) {
   const { lat, long } = useContext(LatLongContext);
   const { setSource } = useContext(AudioContext);
@@ -85,17 +85,19 @@ function PointOfInterest({
     if (isExperienceIdInLocalstorage()) {
       setUnlocked(true);
     }
-
   }, []);
 
   return (
     <div
       className={
         unlocked
-          ? `flex items-start gap-4 p-4`
-          : `flex items-start gap-4 p-4 opacity-10`
+          ? `relative flex items-start gap-4 p-2 bg-white dark:bg-zinc-700 rounded-lg`
+          : `relative flex items-start gap-4 p-2 bg-white dark:bg-zinc-700 rounded-lg opacity-10`
       }
     >
+      <div className="absolute -left-3 px-2 font-bold rounded-full bg-emerald-700 text-zinc-100 text-sm">
+        {index}
+      </div>
       <Image src={image} className="w-24 h-24 rounded-full" />
       <div className="flex flex-col">
         <h2 className="text-zinc-900 text-sm font-bold dark:text-zinc-200 my-3">
@@ -146,18 +148,6 @@ function PointOfInterest({
           {!unlocked && <div>Lås op ved at gå tættere på</div>}
         </div>
       </div>
-      {unlocked && (
-        <button type="button" onClick={() => setSource(podcast)}>
-          Play
-        </button>
-      )}
-      {unlocked && (
-        <button type="button" onClick={() => setViewSubtitles(!viewSubtitles)}>
-          Se tekst
-        </button>
-      )}
-      {!unlocked && <div>kan ikke tilgås</div>}
-      {viewSubtitles && <div>{subtitles}</div>}
       {unlocked && IFrameUrl && <PodcastWrapper IFrameUrl={IFrameUrl} />}
     </div>
   );

src/components/routes/RoutePage.jsx

@@ -86,10 +86,8 @@ function RoutePage() {
       );
     }
   }, []);
-
   useEffect(() => {
     if (pointsOfInterest) {
-      console.log(pointsOfInterest);
       setLatitude(pointsOfInterest[0].latitude);
       setLongitude(pointsOfInterest[0].longitude);
       setDestinationName(pointsOfInterest[0].name);
@@ -102,14 +100,14 @@ function RoutePage() {
     <div className="flex flex-col place-items-start pb-20">
       <BackButton>Afslut</BackButton>
       <h1 className="text-xl font-bold my-3">{selectedRoute.name}</h1>
-      <div className="overflow-y-auto h-4/6 relative w-full bg-white dark:bg-zinc-700 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-lg flex flex-col divide-y dark:divide-zinc-200/5">
+      <div className="relative w-full rounded-lg flex flex-col-reverse gap-1">
         {pointsOfInterest &&
           pointsOfInterest
-            .toReversed()
-            .map((pointOfInterest) => (
+            .map((pointOfInterest, index) => (
               <PointOfInterest
                 pointOfInterest={pointOfInterest}
                 key={pointOfInterest.id}
+                index={index + 1}
               />
             ))}
       </div>
@@ -118,32 +116,40 @@ function RoutePage() {
         <div>
           <span className="block text-sm text-bold">Afstand til del 1</span>
           <span className="block">180 meter</span>
-          <button
-            className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
-            type="button"
-            onClick={() => startWaypointer()}
-          >
-            Vis mig vej
-          </button>
         </div>
         <div className="pl-3">
-          <div className="flex justify-between mb-3">
-            <span className="text-sm text-bold">Retning</span>
-            <span className="w-1/2">
-              <LocationArrow
-                className="inline w-5"
-                style={{
-                  transform: `rotate(${-rotation}deg)`,
-                }}
-              />
-            </span>
-          </div>
-          <div className="text-xs text-zinc-500">
-            Lat: {userLatitude}/{latitude}
-          </div>
-          <div className="text-xs text-zinc-500">
-            Long: {userLongitude}/{longitude}
-          </div>
+          {/* TODO: Make this check for compass */}
+          {!location && (
+            <button
+              className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
+              type="button"
+              onClick={() => startWaypointer()}
+            >
+              Vis mig vej
+            </button>
+          )}
+          {/* TODO: Make this check for compass */}
+          {location && (
+            <div>
+              <div className="flex justify-between mb-3">
+                <span className="text-sm text-bold">Retning</span>
+                <span className="w-1/2">
+                  <LocationArrow
+                    className="inline w-5"
+                    style={{
+                      transform: `rotate(${-rotation}deg)`,
+                    }}
+                  />
+                </span>
+              </div>
+              <div className="text-xs text-zinc-500">
+                Lat: {userLatitude}/{latitude}
+              </div>
+              <div className="text-xs text-zinc-500">
+                Long: {userLongitude}/{longitude}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>