339 add satellite image to individual satellite page (#348)

* rename satellite preview image to satelliteImage * fix image and satellites responsiveness
NTNU-SmallSatLab · Apr 21, 2024 · 0c06127 · 0c06127
1 parent bf1d167
commit 0c06127
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 44 deletions.
diff --git a/backend/src/api/satellite/content-types/satellite/schema.json b/backend/src/api/satellite/content-types/satellite/schema.json
@@ -24,7 +24,7 @@
     "content": {
       "type": "blocks"
     },
-    "previewImage": {
+    "satelliteImage": {
       "type": "media",
       "multiple": false,
       "required": false,

diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts
@@ -980,7 +980,7 @@ export interface ApiSatelliteSatellite extends Schema.CollectionType {
     name: Attribute.String & Attribute.Required & Attribute.Unique;
     catalogNumberNORAD: Attribute.String & Attribute.Unique;
     content: Attribute.Blocks;
-    previewImage: Attribute.Media;
+    satelliteImage: Attribute.Media;
     projects: Attribute.Relation<
       'api::satellite.satellite',
       'manyToMany',

diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts
diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts
diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -18,7 +18,7 @@ query Projects($projectFilters: ProjectFiltersInput) {
             id
             attributes {
               name
-              previewImage {
+              satelliteImage {
                 data {
                   attributes {
                     url
@@ -84,13 +84,13 @@ export default async function Page({
                     <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4">
                         {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
                             (satellite: any) => {
-                                const previewImage =
-                                    satellite?.attributes?.previewImage?.data
+                                const satelliteImage =
+                                    satellite?.attributes?.satelliteImage?.data
                                         ?.attributes?.url ?? undefined;
                                 const satelliteObject: ProjectOrSatellite = {
                                     id: satellite.id,
                                     title: satellite.attributes.name,
-                                    previewImage: previewImage,
+                                    previewImage: satelliteImage,
                                     slug: satellite.attributes.name,
                                     isProject: false,
                                 };

diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -11,6 +11,7 @@ import {
     PageSubtitle,
     PageHeaderAndSubtitle,
 } from "@/components/PageHeader";
+import Image from "next/image";
 
 export interface SatelliteInfo {
     launchDate: string | undefined;
@@ -20,6 +21,7 @@ export interface SatelliteInfo {
     noradId: string | undefined;
     missionStatus: string | undefined;
     massKg: number | undefined;
+    satelliteImage: string | undefined;
 }
 
 export interface ProjectOrSatellite {
@@ -30,6 +32,8 @@ export interface ProjectOrSatellite {
     isProject: boolean;
 }
 
+const STRAPI_URL = process.env.STRAPI_URL;
+
 export default async function SatelliteInfoPage({
     params,
 }: {
@@ -41,6 +45,11 @@ export default async function SatelliteInfoPage({
 
     if (!satelliteInfo) return <div>Loading...</div>;
 
+    let imageURL = undefined;
+    if (STRAPI_URL && satelliteInfo.satelliteImage) {
+        imageURL = STRAPI_URL + satelliteInfo.satelliteImage;
+    }
+
     return (
         <>
             <div className="flex flex-col items-center ">
@@ -65,7 +74,7 @@ export default async function SatelliteInfoPage({
                     <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
                         {/* Stats Container */}
                         <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
-                            <div className="grow basis-0 border-b border-gray-600 bg-black p-5">
+                            <div className="border-b border-gray-600 bg-black p-5">
                                 {satelliteInfo.noradId
                                     ? "NORAD ID: " + satelliteInfo.noradId
                                     : null}
@@ -84,7 +93,16 @@ export default async function SatelliteInfoPage({
                         {/* Image container */}
                         <div className="w-full border-t-2 border-gray-600 xl:border-t-0">
                             <div className="flex h-full w-full items-center justify-center bg-black">
-                                <h1>Satellite image</h1>
+                                {imageURL ? (
+                                    <Image
+                                        src={imageURL}
+                                        alt={satelliteInfo.name}
+                                        width={1600} // Set according to the aspect ratio of the image
+                                        height={0}
+                                        layout="responsive"
+                                        className="p-2"
+                                    />
+                                ) : null}
                             </div>
                         </div>
                     </div>

diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -10,7 +10,7 @@ query GET_SATELLITES {
         attributes {
           catalogNumberNORAD
           name
-          previewImage {
+          satelliteImage {
             data {
               attributes {
                 url
@@ -32,21 +32,32 @@ export default async function Satellites() {
             query: GET_SATELLITES,
         });
 
+        const noNoradIdArray = graphqlData.data.satellites?.data.filter(
+            (data) => data.attributes?.catalogNumberNORAD == null,
+        );
+
         return (
             <>
+                {/* Table for satellites in orbit */}
                 <SatelliteResponsiveTable
                     satellites={graphqlData.data.satellites?.data.filter(
                         (data) => data.attributes?.catalogNumberNORAD !== null,
                     )}
                     inOrbit={true}
                 ></SatelliteResponsiveTable>
-                <div className="mt-12"></div>
-                <SatelliteResponsiveTable
-                    satellites={graphqlData.data.satellites?.data.filter(
-                        (data) => data.attributes?.catalogNumberNORAD == null,
-                    )}
-                    inOrbit={false}
-                ></SatelliteResponsiveTable>
+
+                <div className="mt-12" />
+
+                {/* Table for satellites not in orbit */}
+                {noNoradIdArray != undefined && noNoradIdArray.length > 0 ? (
+                    <SatelliteResponsiveTable
+                        satellites={graphqlData.data.satellites?.data.filter(
+                            (data) =>
+                                data.attributes?.catalogNumberNORAD == null,
+                        )}
+                        inOrbit={false}
+                    ></SatelliteResponsiveTable>
+                ) : null}
             </>
         );
     } catch (error) {

diff --git a/frontend/src/components/SatelliteResponsiveTable.tsx b/frontend/src/components/SatelliteResponsiveTable.tsx
@@ -54,10 +54,10 @@ export default function SatelliteResponsiveTable({
                                 <TableHead className="min-w-[135px]">
                                     Altitude
                                 </TableHead>
-                                <TableHead className="min-w-[100px]">
+                                <TableHead className="hidden min-w-[100px] sm:table-cell">
                                     Latitude
                                 </TableHead>
-                                <TableHead className="min-w-[100px]">
+                                <TableHead className="hidden min-w-[100px] sm:table-cell">
                                     Longitude
                                 </TableHead>
                             </>

diff --git a/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
@@ -42,8 +42,12 @@ export default function SatelliteStatsTableRow({
                     Loading...
                 </TableCell>
                 <TableCell className="w-1/5">Loading...</TableCell>
-                <TableCell className="w-1/5">Loading...</TableCell>
-                <TableCell className="w-1/5">Loading...</TableCell>
+                <TableCell className="hidden w-1/5 sm:table-cell">
+                    Loading...
+                </TableCell>
+                <TableCell className="hidden w-1/5 sm:table-cell">
+                    Loading...
+                </TableCell>
             </TableRow>
         );
     }
@@ -60,13 +64,11 @@ export default function SatelliteStatsTableRow({
             <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.velocity} km/s
             </TableCell>
-            <TableCell className=" w-1/5">
-                {satelliteInfo.altitude} km
-            </TableCell>
-            <TableCell className=" w-1/5">
+            <TableCell className="w-1/5">{satelliteInfo.altitude} km</TableCell>
+            <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.latitudeDeg}° N
             </TableCell>
-            <TableCell className="w-1/5">
+            <TableCell className="hidden w-1/5 sm:table-cell">
                 {satelliteInfo.longitudeDeg}° E
             </TableCell>
         </TableRow>

diff --git a/frontend/src/components/ui/satelliteCard.tsx b/frontend/src/components/ui/satelliteCard.tsx
@@ -16,14 +16,14 @@ import { OuiImage } from "@/components/fullBlogCard";
 interface SatelliteCardProps {
     satelliteName: string;
     missionStatus: string;
-    previewImage?: string; // Optional
+    satelliteImage?: string; // Optional
     satelliteId: Number;
 }
 
 const SatelliteCard: React.FC<SatelliteCardProps> = ({
     satelliteName,
     missionStatus,
-    previewImage,
+    satelliteImage,
     satelliteId,
 }) => {
     /*const setSelectedSatellite = useSatelliteStore(
@@ -45,10 +45,10 @@ const SatelliteCard: React.FC<SatelliteCardProps> = ({
                         satName={satelliteName}
                         missionStatus={missionStatus}
                     />
-                    {previewImage ? (
+                    {satelliteImage ? (
                         <Image
-                            src={previewImage}
-                            alt={previewImage}
+                            src={satelliteImage}
+                            alt={satelliteImage}
                             width={200}
                             height={0}
                             className="margin p-2"

diff --git a/frontend/src/lib/data/fetchSatelliteInfo.ts b/frontend/src/lib/data/fetchSatelliteInfo.ts
@@ -16,6 +16,13 @@ const GET_SATELLITE_INFO =
                 name
                 massKg
                 missionStatus
+                satelliteImage {
+                  data {
+                    attributes {
+                      url
+                    }
+                  }
+                }
               projects {
                 data {
                   attributes {
@@ -90,6 +97,9 @@ export default async function fetchSatelliteInfo({
         massKg:
             graphqlData?.data?.satellites?.data[0]?.attributes?.massKg ??
             undefined,
+        satelliteImage:
+            graphqlData?.data?.satellites?.data[0]?.attributes?.satelliteImage
+                ?.data?.attributes?.url ?? undefined,
     };
 
     return satelliteInfo;