️🥛🐥 ↝ [SGV2-10 SGV2-7]: Rover & sector data blocks

components/_Core/Section/BentoBox.tsx

@@ -4,7 +4,8 @@ import { RocketIcon } from "lucide-react";
 import { BentoGrid, BentoGridTest } from "../ui/bento-grid";
 import { InventoryOneList, InventoryTwoList, OwnedStructuresFullList } from "../../_Skeleton/InventoryBlocks";
 import { ClassificationForPlanetFormBlock } from "../../_Skeleton/ClassificationBlocks";
-import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
+import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock, StructuresOnPlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
+import { SectorRoverImageClassificationBlock } from "../../_Skeleton/SectorDataBlocks";
 
 export default function BlockGrid() {
     return (
@@ -135,6 +136,28 @@ const items = [
         ),
         icon: RocketIcon,
         header: <SectorsInsidePlanetBlock />,
+        className: "md:col-span-1 row-span-1"
+    },
+    {
+        title: "All structures that you own on a particular planet",
+        description: (
+            <span className="text-sm">
+                Currently set to planetId "2"
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <StructuresOnPlanetBlock />,
+        className: "md:col-span-1 row-span-1"
+    },
+    {
+        title: "Create a post/classification about what's going on in the rover image",
+        description: (
+            <span className="text-sm">
+                Randomly generated image, classification is for sector 18
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <SectorRoverImageClassificationBlock />,
         className: "md:col-span-2 row-span-1"
     },
     {

components/_Skeleton/PlanetDataBlocks.tsx

@@ -3,6 +3,8 @@ import ContentPlaceholder from "../Content/Planets/PlanetData/ContentPlaceholder
 import { useEffect, useState } from "react";
 import Link from "next/link";
 
+import { LightkurveBaseGraph } from "../Content/Planets/PlanetData/ContentPlaceholder";
+
 export const ContentPlaceholderBlockTest = () => {
     return (
         // <ContentPlaceholder />
@@ -95,7 +97,7 @@ export const SectorsInsidePlanetBlock = () => {
     const planetId = "2";
     const userId = session?.user?.id;
     const [sectors, setSectors] = useState<Sector[]>([]);
-
+    
     useEffect(() => {
         fetchSectorsForPlanet();
     }, [planetId, session]);
@@ -136,7 +138,6 @@ export const SectorsInsidePlanetBlock = () => {
                 .grid-container {
                     display: grid;
                     grid-template-columns: repeat(5, 1fr);
-                    grid-auto-rows: 20rem; /* Adjust height as needed */
                     gap: 10px;
                     padding: 20px; /* Add padding to ensure spacing */
                 }
@@ -167,3 +168,98 @@ export const SectorsInsidePlanetBlock = () => {
         </div>
     );
 };
+
+export const StructuresOnPlanetBlock = () => {
+    const [planetData, setPlanetData] = useState<{
+        content: string;
+        avatar_url: string;
+        type: string;
+        deepnote: string;
+        cover: string;
+        ticId: string;
+        temperatureEq: string;
+        smaxis: string;
+        mass: string;
+        lightkurve?: string;
+    } | null>(null);
+    const planetId = "2";
+
+    const [selectedStructure, setSelectedStructure] = useState<string | null>(null);
+
+    const handleStructureClick = (structureName: string) => {
+        if (typeof planetId === "string") {
+            setSelectedStructure(planetId); // Set selectedStructure to planetId
+        }
+    };
+
+    const handleClosePopup = () => {
+        setSelectedStructure(null);
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-center">
+            <div className="grid grid-cols-3 grid-rows-3 gap-4 p-8">
+                <button className="justify-self-start self-start"></button>
+                <button
+                    className="justify-self-center self-start"
+                    onClick={() => handleStructureClick("Structure 2")}
+                >
+                    <img
+                        alt="Structure 2"
+                        className="w-24 h-24"
+                        src="/assets/Inventory/Structures/Telescope2.png"
+                    />
+                    <div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
+                        View planet light curves
+                    </div>
+                </button>
+            </div>
+                {/* <button className="justify-self-end self-start"></button>
+                <button className="justify-self-start self-center">
+                    <img
+                        alt="Structure 4"
+                        className="w-32 h-32"
+                        src="/assets/Inventory/Structures/TelescopeReceiver.png"
+                        style={{
+                            aspectRatio: "50/50",
+                            objectFit: "cover",
+                        }}
+                    />
+                </button>
+                <button className="justify-self-center self-center">
+                    <img
+                        alt="Structure 5"
+                        className="w-96 h-96 topographic-image"
+                        src="/Galaxy/Mars.png"
+                        style={{
+                            aspectRatio: "50/50",
+                            objectFit: "cover",
+                        }}
+                    />
+                </button>
+                <button className="justify-self-end self-center"></button>
+                <button className="justify-self-start self-end"></button>
+                <button className="justify-self-center self-end"></button>
+                <button className="justify-self-end self-end"></button>
+            </div> */}
+            {selectedStructure && (
+                <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
+                    <div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-xl z-50">
+                        {!planetData?.lightkurve && (
+                            <>
+                                <LightkurveBaseGraph planetId={{ planetId: planetId }} />
+                                <button onClick={handleClosePopup}>Close</button>
+                            </>
+                        )}
+                        {planetData?.lightkurve && (
+                            <>
+                                <img src={planetData?.lightkurve} />
+                                <button onClick={handleClosePopup}>Close</button>
+                            </>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

components/_Skeleton/SectorDataBlocks.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { RoverContentPostForm } from "../Content/Classify/CreatePostForm"
+import axios from "axios";
+
+export const SectorRoverImageClassificationBlock = () => {
+    const [imageUrl, setImageUrl] = useState('');
+    const apiKey = 'iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE';
+
+    const [imageMetadata, setImageMetadata] = useState('');
+    const [metadata, setMetadata] = useState('');
+    const date = Math.floor(Math.random() * 200) + 1; // Generate a random date here
+    const rover = 'perseverance';
+
+    useEffect(() => {
+        const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${date}&api_key=${apiKey}`;
+
+        axios.get(apiUrl)
+            .then((response) => {
+                if (response.data.photos && response.data.photos.length > 0) {
+                    const firstImageMetadata = response.data.photos[0];
+                    // setImageUrl(firstImageMetadata.img_src || '');
+                    const firstImage = response.data.photos[0].img_src;
+                    setImageUrl(firstImage);
+                    const metadataText = JSON.stringify(firstImageMetadata, null, 2);
+                    setImageMetadata(metadataText);
+                    setMetadata(metadataText)
+                } else {
+                    setImageUrl('No images found for the given date & rover.');
+                    setImageMetadata('No images found for the given date & rover' + JSON.stringify(response));
+                }
+            })
+            .catch((error) => {
+                setImageUrl('An error occurred while fetching the image');
+                setImageMetadata('Error fetching image');
+                console.error(error);
+            });
+    }, [apiKey]);
+
+    return (
+        <><RoverContentPostForm  metadata={metadata} imageLink={imageUrl} sector="18" /><img src={imageUrl} className="h-[20%]" /></>
+    );
+};