From 5ddb812774a571b808c2d7ea009729edf6f91bac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20Gr=C3=B8tan=20Gregusson?= <55840686+Jakobgg1243@users.noreply.github.com> Date: Wed, 28 Feb 2024 13:49:49 +0100 Subject: [PATCH] 79 satellite tracking info site and page displaying all satellites from strapi (#111) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(frontend): :sparkles: Add sattelites page * fix(frontend): :bug: Fix bug with spelling error of satelliteslug * style(frontend): :lipstick: Put the satellites on 3 column grid * fix(frontend): :bug: fix eslint errors with unused variables * feat(frontend): :sparkles: Add previewimage and use satellitename as slug instead of catnr * feat(frontend): :sparkles: Add globe to satellite page and flight stats * fix(frontend): :bug: fix eslint unused variable error --------- Co-authored-by: Jakob Grøtan Gregusson --- .../content-types/satellite/schema.json | 25 ++++- backend/types/generated/contentTypes.d.ts | 7 +- frontend/src/__generated__/gql.ts | 14 ++- frontend/src/__generated__/graphql.ts | 28 +++++- .../app/satellites/[satelliteSlug]/page.tsx | 72 ++++++++++++++ frontend/src/app/satellites/page.tsx | 93 +++++++++++++++++++ frontend/src/components/Navbar.tsx | 6 +- .../src/components/map/SatelliteFetcher.tsx | 31 +++++-- 8 files changed, 261 insertions(+), 15 deletions(-) create mode 100644 frontend/src/app/satellites/[satelliteSlug]/page.tsx create mode 100644 frontend/src/app/satellites/page.tsx diff --git a/backend/src/api/satellite/content-types/satellite/schema.json b/backend/src/api/satellite/content-types/satellite/schema.json index 435f393..138b15e 100644 --- a/backend/src/api/satellite/content-types/satellite/schema.json +++ b/backend/src/api/satellite/content-types/satellite/schema.json @@ -13,7 +13,8 @@ "pluginOptions": {}, "attributes": { "catalogNumberNORAD": { - "type": "string" + "type": "string", + "unique": true }, "projects": { "type": "relation", @@ -22,7 +23,27 @@ "mappedBy": "satellites" }, "celestrakURL": { - "type": "string" + "type": "string", + "unique": true + }, + "content": { + "type": "blocks" + }, + "previewImage": { + "type": "media", + "multiple": false, + "required": false, + "allowedTypes": [ + "images", + "files", + "videos", + "audios" + ] + }, + "satelliteName": { + "type": "string", + "required": true, + "unique": true } } } diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts index 62372f1..ad6269e 100644 --- a/backend/types/generated/contentTypes.d.ts +++ b/backend/types/generated/contentTypes.d.ts @@ -1011,13 +1011,16 @@ export interface ApiSatelliteSatellite extends Schema.CollectionType { draftAndPublish: true; }; attributes: { - catalogNumberNORAD: Attribute.String; + catalogNumberNORAD: Attribute.String & Attribute.Unique; projects: Attribute.Relation< 'api::satellite.satellite', 'manyToMany', 'api::project.project' >; - celestrakURL: Attribute.String; + celestrakURL: Attribute.String & Attribute.Unique; + content: Attribute.Blocks; + previewImage: Attribute.Media; + satelliteName: Attribute.String & Attribute.Required & Attribute.Unique; createdAt: Attribute.DateTime; updatedAt: Attribute.DateTime; publishedAt: Attribute.DateTime; diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts index 6c3ae98..41f5e67 100644 --- a/frontend/src/__generated__/gql.ts +++ b/frontend/src/__generated__/gql.ts @@ -21,7 +21,9 @@ const documents = { "\nquery GET_ARTICLES {\n articles(sort: [\"datePublished:desc\"]) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n }\n }\n }\n}\n": types.Get_ArticlesDocument, "\nquery Projects($projectFilters: ProjectFiltersInput) {\n projects(filters: $projectFilters) {\n data {\n attributes {\n title\n description\n article\n satellites {\n data {\n id\n attributes {\n catalogNumberNORAD\n projects {\n data {\n id\n }\n }\n createdAt\n updatedAt\n publishedAt\n }\n }\n }\n slug\n publishedAt\n coverImage {\n data {\n id\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }": types.ProjectsDocument, "\n query GET_PROJECTS {\n projects(sort: [\"publishedAt:desc\"]) {\n data {\n id\n attributes {\n title\n article\n satellites {\n data {\n attributes {\n catalogNumberNORAD\n }\n }\n }\n slug\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n updatedAt\n publishedAt\n createdAt\n description\n }\n }\n }\n }": types.Get_ProjectsDocument, - "query Satellites {\n satellites {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n ": types.SatellitesDocument, + "query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n content\n satelliteName\n }\n }\n }\n}\n ": types.Get_Satellite_InfoDocument, + "\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n satelliteName\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }\n": types.Get_SatellitesDocument, + "query Satellites($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n ": types.SatellitesDocument, }; /** @@ -73,7 +75,15 @@ export function gql(source: "\n query GET_PROJECTS {\n projects(sort: [\"publ /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "query Satellites {\n satellites {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n "): (typeof documents)["query Satellites {\n satellites {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n "]; +export function gql(source: "query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n content\n satelliteName\n }\n }\n }\n}\n "): (typeof documents)["query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n content\n satelliteName\n }\n }\n }\n}\n "]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n satelliteName\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }\n"): (typeof documents)["\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n satelliteName\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }\n"]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "query Satellites($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n "): (typeof documents)["query Satellites($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n "]; export function gql(source: string) { return (documents as any)[source] ?? {}; diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts index fe96862..247300b 100644 --- a/frontend/src/__generated__/graphql.ts +++ b/frontend/src/__generated__/graphql.ts @@ -1257,9 +1257,12 @@ export type Satellite = { __typename?: 'Satellite'; catalogNumberNORAD?: Maybe; celestrakURL?: Maybe; + content?: Maybe; createdAt?: Maybe; + previewImage?: Maybe; projects?: Maybe; publishedAt?: Maybe; + satelliteName: Scalars['String']['output']; updatedAt?: Maybe; }; @@ -1292,20 +1295,25 @@ export type SatelliteFiltersInput = { and?: InputMaybe>>; catalogNumberNORAD?: InputMaybe; celestrakURL?: InputMaybe; + content?: InputMaybe; createdAt?: InputMaybe; id?: InputMaybe; not?: InputMaybe; or?: InputMaybe>>; projects?: InputMaybe; publishedAt?: InputMaybe; + satelliteName?: InputMaybe; updatedAt?: InputMaybe; }; export type SatelliteInput = { catalogNumberNORAD?: InputMaybe; celestrakURL?: InputMaybe; + content?: InputMaybe; + previewImage?: InputMaybe; projects?: InputMaybe>>; publishedAt?: InputMaybe; + satelliteName?: InputMaybe; }; export type SatelliteRelationResponseCollection = { @@ -1755,7 +1763,21 @@ export type Get_ProjectsQueryVariables = Exact<{ [key: string]: never; }>; export type Get_ProjectsQuery = { __typename?: 'Query', projects?: { __typename?: 'ProjectEntityResponseCollection', data: Array<{ __typename?: 'ProjectEntity', id?: string | null, attributes?: { __typename?: 'Project', title?: string | null, article?: any | null, slug?: string | null, updatedAt?: any | null, publishedAt?: any | null, createdAt?: any | null, description?: string | null, satellites?: { __typename?: 'SatelliteRelationResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', attributes?: { __typename?: 'Satellite', catalogNumberNORAD?: string | null } | null }> } | null, coverImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; -export type SatellitesQueryVariables = Exact<{ [key: string]: never; }>; +export type Get_Satellite_InfoQueryVariables = Exact<{ + filters?: InputMaybe; +}>; + + +export type Get_Satellite_InfoQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', id?: string | null, attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null, content?: any | null, satelliteName: string } | null }> } | null }; + +export type Get_SatellitesQueryVariables = Exact<{ [key: string]: never; }>; + + +export type Get_SatellitesQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', id?: string | null, attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null, satelliteName: string, previewImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; + +export type SatellitesQueryVariables = Exact<{ + filters?: InputMaybe; +}>; export type SatellitesQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null } | null }> } | null }; @@ -1769,4 +1791,6 @@ export const ArticleWithSlugDocument = {"kind":"Document","definitions":[{"kind" export const Get_ArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_ARTICLES"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"datePublished:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"datePublished"}},{"kind":"Field","name":{"kind":"Name","value":"body"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Projects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"article"}},{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_PROJECTS"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"publishedAt:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"article"}},{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}}]}}]}}]}}]} as unknown as DocumentNode; -export const SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file +export const Get_Satellite_InfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITE_INFO"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SatelliteFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"satelliteName"}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const Get_SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITES"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"satelliteName"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Satellites"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SatelliteFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx new file mode 100644 index 0000000..cc98921 --- /dev/null +++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx @@ -0,0 +1,72 @@ +export const runtime = "edge"; +import { gql } from "@/__generated__/gql"; +import { getClient } from "@/lib/ApolloClient"; +import BlockRendererClient from "@/components/BlockRendererClient"; +import SatelliteFetcher from "@/components/map/SatelliteFetcher"; + +const GET_SATELLITE_INFO = + gql(`query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) { + satellites(filters: $filters) { + data { + id + attributes { + celestrakURL + catalogNumberNORAD + content + satelliteName + } + } + } +} + `); + +export default async function SatelliteInfoPage({ + params, +}: { + params: { satelliteSlug: string }; +}) { + const filters = { + satelliteName: { + eq: params.satelliteSlug, + }, + }; + try { + const graphqlData = await getClient().query({ + query: GET_SATELLITE_INFO, + variables: { + filters: filters, + }, + }); + return ( +
+ + + {graphqlData?.data?.satellites?.data.map((satellite) => ( +
+

+ {satellite?.attributes?.satelliteName} +

+
+

Altitude: {"1234"}km

+

Speed: {"1223"}km/s

+

Latitude: {"24.65"}°

+

Longitude: {"26.12"}°

+
+ +
+ ))} +
+ ); + } catch (error) { + console.error("Error fetching satellite info:", error); + return
Error fetching satellite info
; + } +} diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx new file mode 100644 index 0000000..57a57ab --- /dev/null +++ b/frontend/src/app/satellites/page.tsx @@ -0,0 +1,93 @@ +export const runtime = "edge"; +import { gql } from "@/__generated__/gql"; +import { getClient } from "@/lib/ApolloClient"; +import Link from "next/link"; +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import Image from "next/image"; +const HOST_URL = process.env.HOST_URL; +const GET_SATELLITES = gql(` +query GET_SATELLITES { + satellites { + data { + id + attributes { + celestrakURL + catalogNumberNORAD + satelliteName + previewImage { + data { + attributes { + url + } + } + } + } + } + } + } +`); + +export default async function Satellites() { + try { + const graphqlData = await getClient().query({ + query: GET_SATELLITES, + }); + + return ( +
+ {graphqlData?.data?.satellites?.data?.map((satellite) => { + let previewImage = + satellite?.attributes?.previewImage?.data?.attributes + ?.url; + if (HOST_URL && previewImage != undefined) { + previewImage = HOST_URL + previewImage; + } + return ( + + + + + {satellite?.attributes?.satelliteName} + + + + +
+

Altitude: {"1234"}km

+

Speed: {"1223"}km/s

+

Latitude: {"24.65"}°

+

Longitude: {"26.12"}°

+
+ + {previewImage && ( + {previewImage} + )} + + + + ); + })} +
+ ); + } catch (error) { + console.error("Error fetching satellites:", error); + return
Error fetching satellites
; + } +} diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index db638b8..49f86ae 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -68,7 +68,11 @@ export default function Navbar() { Projects - + + +