From e71b7312c92b41068d7f3f6f63526ca2c309db28 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Wed, 21 Feb 2024 01:02:17 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=AD=F0=9F=AA=93=20=E2=86=9D=20Dynamic?= =?UTF-8?q?=20route=20for=20explore/rover=20components,=20customising=20da?= =?UTF-8?q?ta=20graphs=20[=20SGV2-7=20]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Planets/Base/IndividualBasePlanet.tsx | 46 +- components/Content/RoverData/RoverExplore.tsx | 538 ++++++++++++++++++ components/Modals/rover-interface.tsx | 509 ++++++++++++++++- components/{ => Modals}/rover-mobile-test.tsx | 4 +- pages/explore/[id].tsx | 38 ++ pages/explore/index.tsx | 31 +- public/assets/Surface.mp4 | Bin 0 -> 3253016 bytes 7 files changed, 1129 insertions(+), 37 deletions(-) create mode 100644 components/Content/RoverData/RoverExplore.tsx rename components/{ => Modals}/rover-mobile-test.tsx (97%) create mode 100644 pages/explore/[id].tsx create mode 100644 public/assets/Surface.mp4 diff --git a/components/Content/Planets/Base/IndividualBasePlanet.tsx b/components/Content/Planets/Base/IndividualBasePlanet.tsx index 15e9f5cc..bb4c15e7 100644 --- a/components/Content/Planets/Base/IndividualBasePlanet.tsx +++ b/components/Content/Planets/Base/IndividualBasePlanet.tsx @@ -8,31 +8,31 @@ import { LightkurveBaseGraph } from "../PlanetData/ContentPlaceholder"; export function IndividualBasePlanetDesktop({ id }: { id: string }) { const router = useRouter(); - const supabase = useSupabaseClient(); - const session = useSession(); - - const [planetData, setPlanetData] = useState(null); - const [planetPosts, setPlanetPosts] = useState([]); - const { id: planetId } = router.query; - const [hasPlanetInInventory, setHasPlanetInInventory] = useState(false); - const [inventoryPlanetId, setInventoryPlanetId] = useState( - null - ); - const [sectors, setSectors] = useState([]); - - const [screenWidth, setScreenWidth] = useState(0); - const [showSidebar, setShowSidebar] = useState(true); + const supabase = useSupabaseClient(); + const session = useSession(); - // For handling selection of specific structures and then displaying content - const [selectedStructure, setSelectedStructure] = useState(null); + const [planetData, setPlanetData] = useState(null); + const [planetPosts, setPlanetPosts] = useState([]); + const { id: planetId } = router.query; + const [hasPlanetInInventory, setHasPlanetInInventory] = useState(false); + const [inventoryPlanetId, setInventoryPlanetId] = useState( + null + ); + const [sectors, setSectors] = useState([]); - const handleStructureClick = (structureName) => { - setSelectedStructure(planetId); // Set selectedStructure to planetId - }; - - const handleClosePopup = () => { - setSelectedStructure(null); - }; + const [screenWidth, setScreenWidth] = useState(0); + const [showSidebar, setShowSidebar] = useState(true); + + // For handling selection of specific structures and then displaying content + const [selectedStructure, setSelectedStructure] = useState(null); + + const handleStructureClick = (structureName) => { + setSelectedStructure(planetId); // Set selectedStructure to planetId + }; + + const handleClosePopup = () => { + setSelectedStructure(null); + }; useEffect(() => { const handleResize = () => { diff --git a/components/Content/RoverData/RoverExplore.tsx b/components/Content/RoverData/RoverExplore.tsx new file mode 100644 index 00000000..71b39b87 --- /dev/null +++ b/components/Content/RoverData/RoverExplore.tsx @@ -0,0 +1,538 @@ +import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; +import { useRouter } from "next/router"; +import React, { useEffect, useState } from "react"; + +// UI elements +import { Button } from "../../ui/Button"; +import { Checkbox } from "../../ui/checkbox"; +// import { ResponsiveLine } from "@nivo/line"; +import { Input } from "../../ui/input"; +import { Textarea } from "../../ui/TextArea"; + +export default function RoverExploreDesktop({ id }: { id: string }) { + const supabase = useSupabaseClient(); + const session = useSession(); + + const router = useRouter(); + const [planetData, setPlanetData] = useState(null); + const { id: planetId } = router.query; + + useEffect(() => { + getPlanetData(); + }, [session, supabase, planetId]); + + const getPlanetData = async () => { + try { + const { data, error } = await supabase + .from("basePlanets") // TO-DO: Work in the vehicles table too at some point for this script + .select("*") + .eq("id", planetId) + .single(); + + if (data) { + setPlanetData(data); + }; + + if (error) { + throw error; + }; + } catch (error: any) { + console.error(error.message); + }; + }; + + return ( +
+
+
+
{planetData?.content}
+
+
ROVER #1
+
+
+
MISSION DAY
+
SOL #3039
+
Time: 2:36 pm
+
+
+
SUNRISE
+
6:37 am
+
SUNSET
+
6:35 pm
+
+
+
+
+
+
PRESSURE
+
+ + 827 Pa +
+
+
+
OXYGEN
+
+ + 0.064% +
+
+
+
+
TEMPERATURE
+
+ + -29.16 °C +
+
+
+
ATMOSPHERE
+
Moderate sunny
+
+
+
ROVER STATUS
+
+
+
CELL
+
65.25
+
+
+
GAS PRESS
+
12.48
+
+
+
+
MODE
+
DRV
+
+
+
+
SPEED
+
118 km/hour
+
+
+
+
CAMERA CONTROL PANEL
+
+
+
+
+ + + +
+
+ + + +
+
+
+