Signal-K · Gizmotronn · Aug 18, 2024 · Aug 18, 2024 · Aug 18, 2024
diff --git a/app/(anomalies)/(data)/Zoodex.tsx b/app/(anomalies)/(data)/Zoodex.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import ClassificationForm from "@/app/(create)/(classifications)/PostForm";
+
+interface ZoodexProps {
+    anomalyType: string;
+    anomalyId: string;
+    missionNumber: number;
+    assetMentioned: string;
+}
+
+const Zoodex: React.FC<ZoodexProps> = ({ anomalyType, anomalyId, missionNumber, assetMentioned }) => {
+    const supabase = useSupabaseClient();
+
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchRandomImage = async () => {
+            try {
+                // List files in the 'burrowingOwl' folder
+                const { data: files, error: listError } = await supabase
+                    .storage
+                    .from('zoodex')
+                    .list('burrowingOwl', { limit: 100 });
+
+                if (listError) {
+                    throw new Error(listError.message);
+                }
+
+                if (files && files.length > 0) {
+                    // Select a random file
+                    const randomFile = files[Math.floor(Math.random() * files.length)];
+                    const { data: urlData } = supabase
+                        .storage
+                        .from('zoodex')
+                        .getPublicUrl(`burrowingOwl/${randomFile.name}`);
+
+                    setImageUrl(urlData.publicUrl);
+                } else {
+                    setError('No images found.');
+                }
+            } catch (error: any) {
+                setError(error.message);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchRandomImage();
+    }, [supabase]);
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error}</div>;
+    }
+
+    return (
+        <div>
+            <h2>Zoodex Classification</h2>
+            {imageUrl ? (
+                <div>
+                    <img src={imageUrl} alt="Random Zoodex" style={{ maxWidth: '100%', height: 'auto' }} />
+                    <ClassificationForm
+                        anomalyType={anomalyType}
+                        anomalyId={anomalyId}
+                        missionNumber={missionNumber}
+                        assetMentioned={assetMentioned}
+                    />
+                </div>
+            ) : (
+                <p>No image available</p>
+            )}
+        </div>
+    );
+};
+
+export default Zoodex;
diff --git a/app/(create)/(classifications)/PostForm.tsx b/app/(create)/(classifications)/PostForm.tsx
@@ -11,22 +11,6 @@ interface ClassificationOption {
     text: string;
 };
 
-const planetClassificationOptions: ClassificationOption[] = [
-    { id: 1, text: 'No dips at all' },
-    { id: 2, text: 'Repeating dips' },
-    { id: 3, text: 'Dips with similar size' },
-    { id: 4, text: 'Dips aligned to one side' },
-];
-
-const roverImgClassificationOptions: ClassificationOption[] = [
-    { id: 1, text: 'Dried-up water channels' },
-    { id: 2, text: 'Pebbles/medium-sized rocks' },
-    { id: 3, text: 'Hills/mountain formations' },
-    { id: 4, text: 'Volcano (dormant/extinct)' },
-    { id: 5, text: 'Mineral deposits' },
-    { id: 6, text: 'Sandy/rocky terrain' },
-];
-
 interface ClassificationFormProps {
     anomalyType: string;
     anomalyId: string;
@@ -37,17 +21,32 @@ interface ClassificationFormProps {
 const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, anomalyId, missionNumber, assetMentioned }) => {
     const supabase = useSupabaseClient();
     const session = useSession();
-
     const [content, setContent] = useState<string>("");
     const [uploads, setUploads] = useState<string[]>([]);
     const [isUploading, setIsUploading] = useState<boolean>(false);
     const [avatar_url, setAvatarUrl] = useState<string | undefined>(undefined);
     const [selectedOptions, setSelectedOptions] = useState<{ [key: number]: boolean }>({});
+    const [classificationOptions, setClassificationOptions] = useState<ClassificationOption[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
 
     const { activePlanet } = useActivePlanet();
     const { userProfile } = useProfileContext();
 
-    const classificationOptions = anomalyType === "planet" ? planetClassificationOptions : roverImgClassificationOptions;
+    useEffect(() => {
+        const fetchOptions = async () => {
+            setIsLoading(true);
+            try {
+                const response = await fetch(`/api/citizen/zoodex/${anomalyType}`);
+                const data = await response.json();
+                setClassificationOptions(data.options);
+            } catch (error) {
+                console.error("Error fetching classification options:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchOptions();
+    }, [anomalyType]);
 
     useEffect(() => {
         const fetchUserProfile = async () => {
@@ -175,6 +174,10 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, an
         }
     };
 
+    if (isLoading) {
+        return <div>Loading options...</div>;
+    }
+
     return (
         <div className="p-4 w-full max-w-4xl mx-auto rounded-lg h-full w-full bg-white-900 rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-50">
             <div className="flex gap-4">
@@ -193,13 +196,13 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, an
                     {Object.keys(selectedOptions).length > 0 && (
                         <>
                             <div className="flex gap-4 mb-4">
-                            <UserAvatarNullUpload
-                                url={avatar_url}
-                                size={64}
-                                onUpload={(filePath: string) => {
-                                    setAvatarUrl(filePath);
-                                }}
-                            />
+                                <UserAvatarNullUpload
+                                    url={avatar_url}
+                                    size={64}
+                                    onUpload={(filePath: string) => {
+                                        setAvatarUrl(filePath);
+                                    }}
+                                />
                                 <textarea
                                     value={content}
                                     onChange={e => setContent(e.target.value)}
@@ -228,18 +231,15 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, an
                                     ))}
                                 </div>
                             )}
+                            <button
+                                onClick={createPost}
+                                className="w-full py-2 px-4 text-white bg-blue-600 rounded-lg hover:bg-blue-700"
+                            >
+                                Create Post
+                            </button>
                         </>
                     )}
                 </div>
-                <div className="flex flex-col gap-2 w-1/3">
-                    <button
-                        onClick={createPost}
-                        disabled={!content || Object.keys(selectedOptions).length === 0}
-                        className="px-4 py-2 bg-blue-500 text-white rounded-md"
-                    >
-                        Submit Classification
-                    </button>
-                </div>
             </div>
         </div>
     );

diff --git a/app/(create)/(classifications)/ZoodexClassification.tsx b/app/(create)/(classifications)/ZoodexClassification.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import ClassificationForm from "@/app/(create)/(classifications)/PostForm";
+
+interface AnimalClassificationProps {
+    anomalyType: string;
+    anomalyId: string;
+    missionNumber: number;
+    assetMentioned: string;
+}
+
+const AnimalClassification: React.FC<AnimalClassificationProps> = ({ anomalyType, anomalyId, missionNumber, assetMentioned }) => {
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Fetch or load any data needed for AnimalClassification if required
+        // Update isLoading and error state based on your logic
+        setIsLoading(false); // Example: once data is loaded
+    }, []);
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error}</div>;
+    }
+
+    return (
+        <div>
+            <h2>Animal Classification</h2>
+            <ClassificationForm
+                anomalyType={anomalyType}
+                anomalyId={anomalyId}
+                missionNumber={missionNumber}
+                assetMentioned={assetMentioned}
+            />
+        </div>
+    );
+};
+
+export default AnimalClassification;
diff --git a/app/(scenes)/(onboarding)/window.tsx b/app/(scenes)/(onboarding)/window.tsx
@@ -10,6 +10,7 @@ import ProgressBar from "../(missions)/ProgressBar";
 import DeployRooversInitial from "../roovers/deployAndReturn";
 import Compass from "@/Classifications/RoverContent/RoverData";
 import { MineralDeposit } from "@/app/(inventory)/items/MineralDeposits";
+import Zoodex from "@/app/(anomalies)/(data)/Zoodex";
 
 interface Mission {
   id: number;
@@ -41,11 +42,13 @@ const OnboardingStep = ({ title, description, step }: OnboardingStepProps) => {
         );
       case 1370104:
         return (
-            <DeployRooversInitial />
+          <DeployRooversInitial />
         );
       case 1370105:
         return (
-          <MineralDeposit />
+          <>
+            <Zoodex />
+          </>
         );
       case 1370106:
         return (
@@ -162,7 +165,7 @@ const OnboardingWindow = () => {
 
       {/* Right Panel */}
       <div
-        className={`md:w-2/3 w-full flex flex-col justify-center p-10  overflow-hidden`} // // bg-[url('https://images.unsplash.com/photo-1462726625343-6a2ab0b9f020?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-repeat bg-cover bg-center
+        className={`md:w-2/3 w-full flex flex-col justify-center p-10 overflow-y-auto h-screen`} 
         style={{ backgroundPosition: "center" }}
       >
         <div className="flex-grow flex flex-col justify-between">

diff --git a/app/(structures)/Telescopes/Transiting.tsx b/app/(structures)/Telescopes/Transiting.tsx
@@ -86,8 +86,10 @@ export const TelescopeClassification: React.FC<TelescopeProps> = ({ anomalyid })
                 {/* <img src={structure.icon_url} alt={structure.name} className="w-24 h-24 mb-2" /> */}
                 <img src='https://github.com/Signal-K/client/blob/initialClassification/public/assets/Inventory/Structures/TelescopeReceiver.png?raw=true' alt='telescope' className="w-24 h-24 mb-2" /> {/* Structure 101 */}
                 <div className='relative'>
-                <div className='absolute inset-0 w-full h-full bg-blue-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-0'></div>
-                    <img src={imageUrl} alt={`Active Planet ${activePlanet?.id}`} className="relative z-10 w-128 h-128" />
+                <div className='bg-white bg-opacity-75 rounded-3xl'>
+                    <div className='absolute inset-0 w-full h-full rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm'></div>
+                        <img src={imageUrl} alt={`Active Planet ${activePlanet?.id}`} className="relative z-10 w-128 h-128" />
+                    </div>
                 </div>
                 <ClassificationForm anomalyId={anomalyid} anomalyType='planet' missionNumber={1370103} assetMentioned={imageUrl} />
             </div>