diff --git a/src/pages/Home.module.css b/src/pages/Home.module.css new file mode 100644 index 0000000..5b3998d --- /dev/null +++ b/src/pages/Home.module.css @@ -0,0 +1,21 @@ +.activeKit { + display: flex; + align-items: center; + gap: 1rem; + + padding-top: 1.75rem; + padding-bottom: 1.75rem; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + margin-bottom: 1em; +} + +.activeKitHeader { + display: flex; + align-items: center; + gap: 1rem; + + h3 { + margin: 0; + } +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 84452fe..a88163a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,19 +1,75 @@ -import React from "react"; +import { useMemo } from "react"; import { Container } from "semantic-ui-react"; +import { DateTime, Duration } from "luxon"; +import { Link } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import HeadTitle from "../Components/HeadTitle"; -import { useTranslation } from "react-i18next"; +import { rtkApi } from "~/services/astroplant"; +import { KitAvatar } from "~/Components/KitAvatar"; +import { Badge } from "~/Components/Badge"; + +import style from "./Home.module.css"; export default function Home() { const { t } = useTranslation(); + // Find kits that were active in the past hour ... + const lastSeenSince = useMemo(() => { + const dateTime = DateTime.now().minus( + Duration.fromMillis(1000 * 60 * 60 * 1), + ); + return dateTime.toISO(); + }, []); + const { data } = rtkApi.useListKitsQuery({ lastSeenSince }); + + // ... and pick one. + const activeKit = useMemo(() => { + if (data === undefined || data.length === 0) { + return undefined; + } + + const favoredKitSerials = ["k-hvcx-p3qg-7dfq", "k-mqym-kdc8-b3t9"]; + const specificKit = data.find((kit) => kit.serial in favoredKitSerials); + if (specificKit) { + return specificKit; + } + + const filtered = data.filter( + (kit) => kit.name && kit.description && kit.latitude && kit.longitude, + ); + + return filtered[Math.floor(Math.random() * filtered.length)]; + }, [data]); + return ( <> - +

{t("home.content.title")}

{t("home.content.body1")}

+ + {activeKit !== undefined && ( + <> +

For an example, see this kit:

+
+ +
+
+ +

{activeKit.name}

+ + {activeKit.privacyPublicDashboard && ( + + )} +
+

{activeKit.serial}

+
+
+ + )} +

{t("home.content.body2")}

{t("home.content.body3")}

diff --git a/src/services/astroplant.ts b/src/services/astroplant.ts index f4a079c..79ca55a 100644 --- a/src/services/astroplant.ts +++ b/src/services/astroplant.ts @@ -83,8 +83,14 @@ export const rtkApi = createApi({ "KitConfigurations", ], endpoints: (build) => ({ - listKits: build.query({ - query: () => ({ path: "/kits", method: "GET" }), + listKits: build.query< + schemas["Kit"][], + { + lastSeenSince?: string; + after?: number; + } + >({ + query: (query) => ({ path: "/kits", method: "GET", query }), providesTags: (result) => [ ...(result || []).map( (kit) => ({ type: "Kits", id: kit.serial }) as const, diff --git a/src/translations/en.json b/src/translations/en.json index c0f900b..4386ce5 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -22,13 +22,12 @@ "confirm": "Confirm" }, "home": { - "header": "AstroPlant Prototype", - "subheader": "Be a space farmer", + "header": "AstroPlant sensing and control", "content": { "title": "Grow plants in space", - "body1": "Welcome, space farmer!", - "body2": "AstroPlant is an educational citizen science project with the European Space Agency to engage a new generation of space farmers, collect data and ideas for agriculture on Mars, develop open source research equipment, and create awareness of regenerative and closed-loop life support systems.", - "body3": "We have built a prototype plant lab that collects and shares open data about plant growth in different grow environments and are working on an open lab-infrastructure that makes it possible for everyone to contribute to science and space exploration—and to get to know more about topics such as plant science and biology, space science, engineering, electronics, open innovation and the circular economy." + "body1": "You have found the sensing and control platform powering AstroPlant. This is an open source platform that you can use to configure and run hardware-based industrial control systems and conduct experiments. The control system can run on low-power devices such as the Raspberry Pi and communicates with various types of sensors and actuators, either wired or wirelessly.", + "body2": "AstroPlant is an educational citizen science project in cooporation with the European Space Agency to engage a new generation of space farmers, collect data and ideas for agriculture on Mars, develop open source research equipment, and create awareness of regenerative and closed-loop agricultural systems.", + "body3": "We have built a prototype plant lab that collects and shares open data about plant growth in different growth environments and are working on an open lab-infrastructure that makes it possible for everyone to contribute to science and space exploration—and to get to know more about topics such as plant science and biology, space science, engineering, electronics, open innovation and the circular economy." }, "buttons": { "see": {