+
+
+
+
+ No range found.
+
+ {dateTimeRanges.map((dateTimeRange) => (
+ {
+ const selectedDateTimeRange = dateTimeRanges.find(
+ (range) => range.value === value,
+ );
+
+ const timeRange = selectedDateTimeRange?.convert();
+
+ setDate({
+ from: timeRange?.from,
+ to: timeRange?.to,
+ });
+ }}
+ >
+ {dateTimeRange.label}
+
+ ))}
+
+
+
+
+
+ {
+ setDate(dates);
+ }}
+ initialFocus
+ />
+
+
+ Absolute time range
+
+
+ {
+ submit(searchParams);
+ }}
+ >
+ Apply
+
+
+
+ {device.name}
+ {device.description}
+
+
+
+
+
+ Updated {device.updatedAt.toString()}
+ +
+
+
+ {navigation.state === "loading" && (
+
+
+
+ )}
+
+
+
+
+
+
+
+ Share this link
+
+
+ Close
+
+
+
+
+
+
+
+
+ Actions
+ handleCompareClick()}
+ >
+
+
+
+
+
+
+
+
+ setOpen(false)}
+ />
+ {
+ navigate("/explore");
+ }}
+ />
+
+
+ {data.device.name}
+
+
+
+
+
+ General
+
+
+
+
+
+
+
+
+ Description
+
+
+ {addLineBreaks(data.device.description || "")}
+
+
+
+
+
+
+ Sensors
+
+
+
+
+
+
+
+
+
+ {/*
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
*/}
+ {
+ setOpen(true);
+ }}
+ className="absolute bottom-[10px] left-4 flex cursor-pointer rounded-xl border border-gray-100 bg-white shadow-lg transition-colors duration-300 ease-in-out hover:brightness-90 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-90 sm:bottom-[30px] sm:left-[10px]"
+ >
+
+
+
+
+
+
+
+
+
+ )}
+ {selectedSensorIds.length > 0 ? (
+
+
+ Open device details
+
+ {navigation.state === "loading" && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ PNG
+
+ {loaderData.selectedSensors.length < 2 && (
+
+ CSV
+
+ )}
+
+
+ {
+ searchParams.delete("sensor");
+ searchParams.delete("date_to");
+ searchParams.delete("date_from");
+ searchParams.delete("aggregation");
+ setSearchParams(searchParams);
+ props.setOpenGraph(false);
+ }}
+ />
+
+
+ {(loaderData.selectedSensors[0].data.length === 0 &&
+ loaderData.selectedSensors[1] === undefined) ||
+ (loaderData.selectedSensors[0].data.length === 0 &&
+ loaderData.selectedSensors[1].data.length === 0) ? (
+
+ There is no data for the selected time period.
+ ) : (
+
+ {/* this is all jsut dummy data - the real data will be fetched from the API as soon as the route is implemented */}
+
+
+ {dummyBoxes[0].name}
+ Last activity: 13min ago
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/device-detail/share-link.tsx b/app/components/device-detail/share-link.tsx
new file mode 100644
index 000000000..3f8b5fa8f
--- /dev/null
+++ b/app/components/device-detail/share-link.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { useToast } from "@/components/ui/use-toast";
+import { Copy, Link } from "lucide-react";
+
+export default function ShareLink() {
+ const { toast } = useToast();
+
+ return (
+
+ 
+
+
+
+ );
+}
diff --git a/app/components/device/new/advanced/index.tsx b/app/components/device/new/advanced/index.tsx
new file mode 100644
index 000000000..3cdfbb11e
--- /dev/null
+++ b/app/components/device/new/advanced/index.tsx
@@ -0,0 +1,703 @@
+import { InfoIcon } from "lucide-react";
+import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useField } from "remix-validated-form";
+
+interface AdvancedProps {
+ data: any;
+}
+
+export default function Advanced({ data }: AdvancedProps) {
+ const { t } = useTranslation("newdevice");
+
+ // ttn form fields
+ const [ttnEnabled, setTtnEnabled] = useState
+ {/* */}
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/device/new/general/index.tsx b/app/components/device/new/general/index.tsx
new file mode 100644
index 000000000..86901b12d
--- /dev/null
+++ b/app/components/device/new/general/index.tsx
@@ -0,0 +1,206 @@
+import { InfoIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { useField } from "remix-validated-form";
+import TagsInput from "react-tagsinput";
+import "react-tagsinput/react-tagsinput.css";
+import { useState } from "react";
+
+export interface GeneralProps {
+ data: any;
+}
+
+export default function General({ data }: GeneralProps) {
+ const { t } = useTranslation("newdevice");
+
+ const nameField = useField("name");
+ const exposureField = useField("exposure");
+ const groupIdField = useField("groupId");
+
+ const [tags, setTags] = useState(
+ data.groupId ? data.groupId.split(", ") : [],
+ );
+
+ const handleChange = (tags: any) => {
+ setTags(tags);
+ };
+
+ return (
+
+
+ + {t("advanced_text")} +
+
+
+
+ Info
+
+
+ placeholder
+ ,
+
+ placeholder
+ ,
+ ]}
+ />
+
+
+
+
+
+
+ TheThingsNetwork - TTN
+ {/* {hasObjPropMatchWithPrefixKey(formContext.fieldErrors, [ + "ttn", + ]) ? ( ++
+
+ {
+ checked === "indeterminate"
+ ? setTtnEnabled(undefined)
+ : setTtnEnabled(checked);
+ }}
+ />
+
+
+ {ttnEnabled ? (
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ {ttnAppIdField.error && (
+
+ {ttnAppIdField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {ttnDeviceIdField.error && (
+
+ {ttnDeviceIdField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {ttnDecodeProfileField.error && (
+
+ {ttnDecodeProfileField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {ttnDecodeOptionsField.error && (
+
+ {ttnDecodeOptionsField.error}
+
+ )}
+
+
+
+
+
+
+
+
+ {ttnPortField.error && (
+
+ {ttnPortField.error}
+
+ )}
+
+
+
+ Info
+
+
+ placeholder
+ ,
+
+ placeholder
+ ,
+ ]}
+ />
+
+
+
+
+
+
+
+ MQTT
+ {/* {hasObjPropMatchWithPrefixKey(formContext.fieldErrors, [ + "mqtt", + ]) ? ( ++
+
+ {
+ checked === "indeterminate"
+ ? setMqttEnabled(undefined)
+ : setMqttEnabled(checked);
+ // if (checked === false) {
+ // formContext.validateField("mqtt");
+ // }
+ }}
+ />
+
+
+ {mqttEnabled ? (
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ {mqttUrlField.error && (
+
+ {mqttUrlField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {mqttTopicField.error && (
+
+ {mqttTopicField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ + The file format your data will be transferred in. +
+
+
+ {mqttFormatField.error && (
+
+ {mqttFormatField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {mqttDecodeOptionsField.error && (
+
+ {mqttDecodeOptionsField.error}
+
+ )}
+
+
+
+
+
+
+
+
+ {mqttConnectOptionsField.error && (
+
+ {mqttConnectOptionsField.error}
+
+ )}
+ +
+
+ );
+}
diff --git a/app/components/device/new/select-device/index.tsx b/app/components/device/new/select-device/index.tsx
new file mode 100644
index 000000000..501b4de62
--- /dev/null
+++ b/app/components/device/new/select-device/index.tsx
@@ -0,0 +1,169 @@
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { InfoIcon } from "lucide-react";
+import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { AspectRatio } from "~/components/ui/aspect-ratio";
+import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
+import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";
+import { useField } from "remix-validated-form";
+import SensorWikHoverCard from "~/components/sensor-wiki-hover-card";
+
+interface SelectDeviceProps {
+ data: any;
+}
+
+export default function SelectDevice({ data }: SelectDeviceProps) {
+ const [deviceType, setDeviceType] = useState(data.data.type);
+ const { t } = useTranslation("newdevice");
+
+ const deviceTypeField = useField("type");
+
+ return (
+
+
+
+ + {t("general_text")} +
+
+
+ Info
+ {t("general_info_text")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {nameField.error && (
+
+ {nameField.error}
+
+ )}
+
+
+
+
+
+
+ {t("exposure")}
+
+
+
+
+
+ + {t("exposure_explaination")} +
+
+
+ {exposureField.error && (
+
+ {exposureField.error}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 ? tags.join(", ") : ""}
+ className="hidden"
+ disabled={tags.length === 0}
+ />
+
+ {groupIdField.error && (
+
+ {groupIdField.error}
+
+ )}
+
+
+ );
+}
diff --git a/app/components/device/new/select-location/index.tsx b/app/components/device/new/select-location/index.tsx
new file mode 100644
index 000000000..64022a288
--- /dev/null
+++ b/app/components/device/new/select-location/index.tsx
@@ -0,0 +1,330 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import {
+ Map,
+ type MapLayerMouseEvent,
+ type MapRef,
+ Marker,
+ type MarkerDragEvent,
+ NavigationControl,
+ GeolocateControl,
+ type GeolocateResultEvent,
+ Source,
+} from "react-map-gl";
+
+import GeocoderControl from "~/components/map/geocoder-control";
+import { InfoIcon } from "lucide-react";
+import getUserLocale from "get-user-locale";
+import { useField } from "remix-validated-form";
+
+export interface SelectLocationProps {
+ data: any;
+}
+
+//**********************************
+export default function SelectLocation({ data }: SelectLocationProps) {
+ const { t } = useTranslation("newdevice");
+ const mapRef = useRef
+ {deviceTypeField.error && (
+ {deviceTypeField.error}
+ )}
+
+
+ + {t("select_device_text")} +
+
+ {data.devices.map((device: any) => {
+ return (
+ {
+ setDeviceType(device.slug);
+ deviceTypeField.validate();
+ }}
+ className="relative data-[checked=true]:ring-2 data-[checked=true]:ring-light-green dark:data-[checked=true]:ring-dark-green cursor-pointer dark:bg-dark-boxes dark:text-dark-text"
+ >
+
+
+ 
+
+
+
+ {sensorWikiLabel(device.label.item)}
+ {deviceType === device.slug && (
+
+
+ }
+ />
+ );
+ })}
+
+ setDeviceType("own_device")}
+ className="relative data-[checked=true]:ring-2 data-[checked=true]:ring-light-green dark:data-[checked=true]:ring-dark-green cursor-pointer dark:bg-dark-boxes dark:text-dark-text"
+ >
+
+
+ {/* 
*/}
+
+
+
+ {t("own_device")}
+ {deviceType === "own_device" && (
+
+
+
+
+
+ */}
+
+ {data.devices.map((device: any) => {
+ return (
+
+
+
+ setDeviceType(device.slug)}
+ type="radio"
+ // required
+ className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300"
+ />
+
+
+ );
+ })}
+
+
+ setDeviceType("own_device")}
+ type="radio"
+ // required
+ className="focus:ring-indigo-500 text-indigo-600 h-4 w-4 border-gray-300"
+ />
+
+
+
+
+ Info
+
+
+ placeholder
+ ,
+ ]}
+ />
+
+
+
+
+
+ );
+}
diff --git a/app/components/device/new/select-sensors/index.tsx b/app/components/device/new/select-sensors/index.tsx
new file mode 100644
index 000000000..231d9a480
--- /dev/null
+++ b/app/components/device/new/select-sensors/index.tsx
@@ -0,0 +1,272 @@
+import { PlusCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { AspectRatio } from "~/components/ui/aspect-ratio";
+import { Card, CardContent, CardFooter, CardTitle } from "~/components/ui/card";
+import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Trans, useTranslation } from "react-i18next";
+import { useField } from "remix-validated-form";
+import SensorWikHoverCard from "~/components/sensor-wiki-hover-card";
+import { InfoIcon } from "lucide-react";
+
+interface SelectSensorsProps {
+ data: any;
+}
+
+export default function SelectSensors({ data }: SelectSensorsProps) {
+ const [addedSensors, setAddedSensors] = useState(data.data.sensors ?? {});
+ const { t } = useTranslation("newdevice");
+
+ const sensorsField = useField("sensors");
+
+ function addSensor(sensorItem: any, key: string) {
+ //this is an array because objects would not work with the forms [sensorSlug, phenomenonId, unitSlug]
+ let sensorArray = ["", sensorItem.sensor.slug, sensorItem.phenomenonId, ""];
+ const newSensorObject = { ...addedSensors };
+ if (newSensorObject[key]) {
+ newSensorObject[key].push(sensorArray);
+ } else {
+ newSensorObject[key] = [sensorArray];
+ }
+ setAddedSensors(newSensorObject);
+ }
+
+ function deleteSensorItem(index: any, key: string) {
+ const newSensorObject = { ...addedSensors };
+ newSensorObject["p-" + key].splice(index, 1);
+ setAddedSensors(newSensorObject);
+ }
+
+ return (
+
+
+
+ {/* Map view */}
+ + {t("location_text")} +
+
+
+
+
+ {/* Latitude, Longitude */}
+
+
+
+
+
+
+
+
+
+ {latitudeField.error && (
+ {latitudeField.error}
+ )}
+
+
+
+ {
+ if (
+ Number(e.target.value) >= -90 &&
+ Number(e.target.value) <= 90
+ ) {
+ setMarker({
+ latitude: e.target.value,
+ longitude: marker.longitude,
+ });
+ latitudeField.validate();
+ }
+ }}
+ aria-describedby="name-error"
+ className={
+ "w-full rounded border border-gray-200 px-2 py-1 text-base dark:bg-dark-boxes" +
+ (!marker.latitude
+ ? " border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow focus:shadow-[#FF0000] "
+ : "")
+ }
+ />
+
+
+
+
+
+
+ {longitudeField.error && (
+
+ {longitudeField.error}
+
+ )}
+
+
+
+ {
+ if (
+ Number(e.target.value) >= -180 &&
+ Number(e.target.value) <= 180
+ ) {
+ setMarker({
+ latitude: marker.latitude,
+ longitude: e.target.value,
+ });
+ longitudeField.validate();
+ }
+ }}
+ aria-describedby="name-error"
+ className={
+ "w-full rounded border border-gray-200 px-2 py-1 text-base dark:bg-dark-boxes" +
+ (!marker.longitude
+ ? " border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow focus:shadow-[#FF0000] "
+ : "")
+ }
+ />
+
+
+
+
+
+ {heightField.error && (
+ {heightField.error}
+ )}
+
+
+ {
+ if (
+ Number(e.target.value) >= -200 &&
+ Number(e.target.value) <= 10000
+ ) {
+ setHeight(e.target.value);
+ heightField.validate();
+ }
+ }}
+ aria-describedby="name-error"
+ className="w-full rounded border border-gray-200 px-2 py-1 text-base dark:bg-dark-boxes"
+ />
+
+
+
+ );
+}
diff --git a/app/components/device/new/summary/index.tsx b/app/components/device/new/summary/index.tsx
new file mode 100644
index 000000000..a1e47f0e1
--- /dev/null
+++ b/app/components/device/new/summary/index.tsx
@@ -0,0 +1,191 @@
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { useTranslation } from "react-i18next";
+import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";
+
+interface SummaryProps {
+ data: any;
+ phenomena: any;
+}
+
+export default function Summary({ data, phenomena }: SummaryProps) {
+ const { t } = useTranslation("newdevice");
+ return (
+ <>
+
+ {sensorsField.error && (
+ {sensorsField.error}
+ )}
+
+
+ + {t("select_sensors_text")} +
+
+
+ Info
+
+
+ placeholder
+ ,
+ ]}
+ />
+
+
+
+
+
+ {Object.entries(data.groupedSensors).map(([key, value]) => {
+ const phenomenonSlug: string = data.phenomena.find(
+ (pheno: any) => pheno.id == key,
+ ).slug;
+ return (
+
+
+
+ {sensorWikiLabel(
+ data.phenomena.find((pheno: any) => pheno.id == key).label
+ .item,
+ )}
+
+ }
+ />
+
+ );
+ })}
+
+
+ {addedSensors["p-" + key] &&
+ addedSensors["p-" + key].length > 0 && (
+
+ {/** @ts-ignore */}
+ {value.map((sensor: any) => {
+ return (
+ {
+ addSensor(sensor, "p-" + key);
+ sensorsField.validate();
+ }}
+ key={sensor.id}
+ className="relative hover:cursor-pointer hover:ring-2 hover:ring-light-green data-[checked=true]:ring-4 data-[checked=true]:ring-light-green"
+ >
+
+
+ 
+
+
+
+
+ {sensor.sensor.label.item[0].text}
+
+
+
+ }
+ />
+ );
+ })}
+
+
+ {JSON.stringify(data.json, null, 2)}
+
+
+
+
+ )}
+ + {t("your_added")}{" "} + {sensorWikiLabel( + data.phenomena.find((pheno: any) => pheno.id == key) + .label.item, + )}{" "} + {t("sensors")} +
+
+
+
+
+
+ {/*
+
+
+
+ );
+}
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
new file mode 100644
index 000000000..21d4a5eb5
--- /dev/null
+++ b/app/components/error-boundary.tsx
@@ -0,0 +1,44 @@
+import {
+ isRouteErrorResponse,
+ useParams,
+ useRouteError,
+} from "@remix-run/react";
+import { type ErrorResponse } from "@remix-run/router";
+import { getErrorMessage } from "~/utils/misc";
+
+type StatusHandler = (info: {
+ error: ErrorResponse;
+ params: Record
+
+
+ + {t("summary_text")} +
+{t("summary_general")}
+ +{t("summary_sensors")}
+Your Extensions
+ {data["ttn.enabled"] && ( +
+
+ {/*
+
+ )}
+
+ {data.mqttEnabled && (
+ TTN
+
+
+ {/*
+
+ )}
+
+ MQTT
+{JSON.stringify(data, null, 2)}
+ + {error.status} {error.data} +
+ ), + statusHandlers, + unexpectedErrorHandler = (error) =>{getErrorMessage(error)}
, +}: { + defaultStatusHandler?: StatusHandler; + statusHandlers?: Record
+ {isRouteErrorResponse(error)
+ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+ error,
+ params,
+ })
+ : unexpectedErrorHandler(error)}
+
+ );
+}
diff --git a/app/components/error-message.tsx b/app/components/error-message.tsx
new file mode 100644
index 000000000..19cb053a2
--- /dev/null
+++ b/app/components/error-message.tsx
@@ -0,0 +1,29 @@
+import { X } from "lucide-react";
+import { Alert, AlertDescription } from "./ui/alert";
+import { useNavigate } from "@remix-run/react";
+
+export default function ErrorMessage() {
+ let navigate = useNavigate();
+ const goBack = () => navigate(-1);
+
+ return (
+
+ {
+ goBack();
+ }}
+ />
+
+ + Oh no, this shouldn't happen, but don't worry, our team is on the case! +
++ Add some info here. +
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx
new file mode 100644
index 000000000..ec91bff91
--- /dev/null
+++ b/app/components/header/index.tsx
@@ -0,0 +1,24 @@
+import Home from "./home";
+import NavBar from "./nav-bar";
+import Menu from "./menu";
+import { useLoaderData } from "@remix-run/react";
+import Notification from "./notification";
+import type { loader } from "~/routes/explore.$deviceId._index";
+
+interface HeaderProps {
+ devices: any;
+}
+
+export default function Header(props: HeaderProps) {
+ const data = useLoaderData
+
+ );
+}
diff --git a/app/components/header/menu/index.tsx b/app/components/header/menu/index.tsx
new file mode 100644
index 000000000..df6877aca
--- /dev/null
+++ b/app/components/header/menu/index.tsx
@@ -0,0 +1,307 @@
+import {
+ Form,
+ Link,
+ useNavigation,
+ useSearchParams,
+ useLoaderData,
+} from "@remix-run/react";
+// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useToast } from "@/components/ui/use-toast";
+import type { loader } from "~/routes/explore";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Spinner from "~/components/spinner";
+import {
+ Globe,
+ LogIn,
+ LogOut,
+ PlusCircle,
+ Puzzle,
+ Menu as MenuIcon,
+ Cpu,
+ Settings,
+ Mail,
+ Fingerprint,
+ FileLock2,
+ Coins,
+ User2,
+ ExternalLink,
+} from "lucide-react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function useFirstRender() {
+ const firstRender = useRef(true);
+
+ useEffect(() => {
+ firstRender.current = false;
+ }, []);
+
+ return firstRender.current;
+}
+
+export default function Menu() {
+ const [searchParams] = useSearchParams();
+ const redirectTo =
+ searchParams.size > 0 ? "/explore?" + searchParams.toString() : "/explore";
+ const data = useLoaderData
+ {data?.user?.email ?
+
+
+
+
+
+ {data.user === null ? (
+
+
+ {navigation.state === "loading" && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ e.preventDefault()}
+ className="cursor-pointer"
+ >
+
+
+
+
+
+
+
+
+
+ {data.user === null ? (
+ setOpen(false)}
+ >
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ {t("title")}
++ {t("subtitle")} +
+
+
+ )}
+ + {/* Max Mustermann */} + {data.user.name} +
++ {data.user.email} +
+
+
+ )}
+ {data.profile && (
+ Coming soon...
+
+
+
+ );
+}
diff --git a/app/components/header/menu/profile/index.tsx b/app/components/header/menu/profile/index.tsx
new file mode 100644
index 000000000..7ca83bbde
--- /dev/null
+++ b/app/components/header/menu/profile/index.tsx
@@ -0,0 +1,32 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ProfileDialogProps {
+ isProfileDialogOpen: boolean;
+ setIsProfileDialogOpen: (value: boolean) => void;
+}
+
+export default function ProfileDialog(props: ProfileDialogProps) {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/header/menu/user-settings/index.tsx b/app/components/header/menu/user-settings/index.tsx
new file mode 100644
index 000000000..bf34376ad
--- /dev/null
+++ b/app/components/header/menu/user-settings/index.tsx
@@ -0,0 +1,32 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+
+interface UserSettingsDialogProps {
+ isSettingsDialogOpen: boolean;
+ setIsSettingsDialogOpen: (value: boolean) => void;
+}
+
+export default function UserSettingsDialog(props: UserSettingsDialogProps) {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/header/nav-bar/filter-options/filter-options.tsx b/app/components/header/nav-bar/filter-options/filter-options.tsx
new file mode 100644
index 000000000..4cc9b658f
--- /dev/null
+++ b/app/components/header/nav-bar/filter-options/filter-options.tsx
@@ -0,0 +1,135 @@
+import {
+ useSearchParams,
+ useNavigation,
+ useLoaderData,
+} from "@remix-run/react";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import Spinner from "../../../spinner";
+import type { loader } from "~/routes/explore";
+import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
+
+export default function FilterOptions() {
+ const data = useLoaderData
+ {navigation.state === "loading" && (
+
+ );
+}
diff --git a/app/components/header/nav-bar/index.tsx b/app/components/header/nav-bar/index.tsx
new file mode 100644
index 000000000..31a4a6be5
--- /dev/null
+++ b/app/components/header/nav-bar/index.tsx
@@ -0,0 +1,108 @@
+import { useState, useEffect, useRef, createContext } from "react";
+import { useMap } from "react-map-gl";
+import NavbarHandler from "./nav-bar-handler";
+import { AnimatePresence, motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { SearchIcon, XIcon } from "lucide-react";
+import type { Device } from "~/schema";
+
+interface NavBarProps {
+ devices: Device[];
+}
+
+export const NavbarContext = createContext({
+ open: false,
+ setOpen: (_open: boolean) => {},
+});
+
+export default function NavBar(props: NavBarProps) {
+ const [open, setOpen] = useState(false);
+ const inputRef = useRef
+
+ )}
+
+
+
+
+ {
+ if (value === "all") {
+ searchParams.delete("exposure");
+ } else if (value === "") {
+ searchParams.delete("exposure");
+ } else {
+ searchParams.set("exposure", value);
+ }
+ setSearchParams(searchParams);
+ }}
+ >
+
+ all
+
+
+ indoor
+
+
+ outdoor
+
+
+ mobile
+
+
+
+
+
+ {
+ if (value === "all") {
+ searchParams.delete("status");
+ } else if (value === "") {
+ searchParams.delete("status");
+ } else {
+ searchParams.set("status", value);
+ }
+ setSearchParams(searchParams);
+ }}
+ >
+
+ all
+
+
+ active
+
+
+ inactive
+
+
+ old
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/header/nav-bar/nav-bar-handler.tsx b/app/components/header/nav-bar/nav-bar-handler.tsx
new file mode 100644
index 000000000..1af5f53df
--- /dev/null
+++ b/app/components/header/nav-bar/nav-bar-handler.tsx
@@ -0,0 +1,80 @@
+import type { Device } from "~/schema";
+import Search from "~/components/search";
+import { Clock4Icon, Cog, Filter, IceCream2Icon } from "lucide-react";
+import useKeyboardNav from "./use-keyboard-nav";
+import { cn } from "~/lib/utils";
+import FilterOptions from "./filter-options/filter-options";
+import { PhenomenonSelect } from "./phenomenon-select/phenomenon-select";
+
+interface NavBarHandlerProps {
+ devices: Device[];
+ searchString: string;
+}
+
+function getSections(devices: Device[]) {
+ return [
+ {
+ title: "Datum & Zeit",
+ icon: Clock4Icon,
+ color: "bg-blue-100",
+ component:
+
+
+ {open && (
+
+
+ )}
+
+
+
+
+ {
+ setSearchString("");
+ setOpen(false);
+ inputRef.current?.blur();
+ }}
+ className="h-6"
+ />
+ )}
+
+ Datum & Zeit
,
+ },
+ {
+ title: "Filter",
+ icon: Filter,
+ color: "bg-gray-300",
+ component: Einstellungen
,
+ },
+ ];
+}
+
+export default function NavbarHandler({
+ devices,
+ searchString,
+}: NavBarHandlerProps) {
+ const sections = getSections(devices);
+
+ const { cursor, setCursor } = useKeyboardNav(0, 0, sections.length);
+
+ if (searchString.length >= 2) {
+ return
+
+ );
+}
diff --git a/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx b/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx
new file mode 100644
index 000000000..4b311d5dd
--- /dev/null
+++ b/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx
@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+ useLoaderData,
+ useNavigation,
+ useSearchParams,
+} from "@remix-run/react";
+// import { useTranslation } from "react-i18next";
+import type { SensorWikiLabel } from "~/utils/sensor-wiki-helper";
+import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";
+import type { Key } from "react";
+import { useState, useEffect } from "react"; // Changed import
+import { Label } from "~/components/ui/label";
+import Spinner from "~/components/spinner";
+import { X } from "lucide-react";
+import { Checkbox } from "~/components/ui/checkbox";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Button } from "~/components/ui/button";
+import type { loader } from "~/routes/explore";
+
+export function PhenomenonSelect() {
+ const data = useLoaderData
+ {sections.map((section, index) => (
+
+ {
+ setCursor(index);
+ }}
+ >
+
+ ))}
+ {sections[cursor].component}
+
+ {navigation.state === "loading" && (
+
+
+
+ );
+}
diff --git a/app/components/header/nav-bar/sensor-filter.tsx b/app/components/header/nav-bar/sensor-filter.tsx
new file mode 100644
index 000000000..0a2bf5255
--- /dev/null
+++ b/app/components/header/nav-bar/sensor-filter.tsx
@@ -0,0 +1,103 @@
+import * as React from "react";
+import { CloudSunRain, SunIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Form } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
+import { cn } from "~/lib/utils";
+import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";
+import { type Phenomenon } from "~/models/phenomena.server";
+
+interface SensorFilterProps {
+ className?: React.HTMLAttributes
+
+ )}
+ {/*
+ {loaderData.phenomena.map(
+ (
+ p: { slug: string; label: { item: SensorWikiLabel[] } },
+ i: Key | null | undefined,
+ ) => (
+
+
+ handleCheckboxChange(p.slug)}
+ />
+
+
+ ),
+ )}
+
+
+
+
*/}
+ Coming soon
+
+
+
+ );
+}
diff --git a/app/components/header/nav-bar/time-filter/index.tsx b/app/components/header/nav-bar/time-filter/index.tsx
new file mode 100644
index 000000000..45fab643d
--- /dev/null
+++ b/app/components/header/nav-bar/time-filter/index.tsx
@@ -0,0 +1,426 @@
+"use client";
+
+import * as React from "react";
+// import { useSearchParams, useSubmit } from "@remix-run/react";
+import { format } from "date-fns";
+import { de, enGB } from "date-fns/locale";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { Clock, CalendarSearch, CalendarClock } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Form } from "@remix-run/react";
+import { useToast } from "@/components/ui/use-toast";
+
+import { getUserLocale } from "get-user-locale";
+import { useTranslation } from "react-i18next";
+
+interface TimeFilterProps {
+ className?: React.HTMLAttributes
+
+
+ );
+}
diff --git a/app/components/header/nav-bar/time-filter/time-filter.tsx b/app/components/header/nav-bar/time-filter/time-filter.tsx
new file mode 100644
index 000000000..da8cfdb95
--- /dev/null
+++ b/app/components/header/nav-bar/time-filter/time-filter.tsx
@@ -0,0 +1,363 @@
+"use client";
+
+import * as React from "react";
+// import { useSearchParams, useSubmit } from "@remix-run/react";
+import { de, enGB } from "date-fns/locale";
+import { Clock, CalendarSearch, CalendarClock } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Form } from "@remix-run/react";
+import { useToast } from "@/components/ui/use-toast";
+
+import { getUserLocale } from "get-user-locale";
+import { useTranslation } from "react-i18next";
+
+interface TimeFilterProps {
+ className?: React.HTMLAttributes
+ {t("live_description")}
+
+
+
+
+
+ {t("pointintime_description")}
+
+
+ {props.singleDate === undefined ? (
+
+
+ {t("date_picker_label")}
+
+ ) : (
+
+
+ )}
+
+ {props.singleDate?.getDate() < 10
+ ? "0" + props.singleDate?.getDate()
+ : props.singleDate?.getDate()}
+
+
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { month: "long" }
+ ).format(props.singleDate)}{" "}
+ {props.singleDate?.getFullYear()}
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { weekday: "long" }
+ ).format(props.singleDate)}
+
+
+ {
+ props.setSingleDate(value);
+ }}
+ locale={userLocale}
+ className="mx-auto"
+ disabled={{ after: today }}
+ toMonth={today}
+ />
+
+
+
+
+
+
+
+
+
+ {t("timeperiod_description")}
+
+
+ {props.dateRange === undefined ||
+ props.dateRange.from === undefined ? (
+
+
+ {t("date_range_picker_label")}
+
+ ) : (
+
+
+ )}
+
+
+
+
+ {props.dateRange?.from?.getDate() < 10
+ ? "0" + props.dateRange.from?.getDate()
+ : props.dateRange.from?.getDate()}
+
+
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { month: "long" }
+ ).format(props.dateRange.from)}{" "}
+ {props.dateRange.from?.getFullYear()}
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { weekday: "long" }
+ ).format(props.dateRange.from)}
+
+
+
+
+ {props.dateRange.to !== undefined ? (
+
+ -
+
+
+
+ ) : (
+
+ )}
+
+ {props.dateRange.to?.getDate() < 10
+ ? "0" + props.dateRange.to?.getDate()
+ : props.dateRange.to?.getDate()}
+
+
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { month: "long" }
+ ).format(props.dateRange.to)}{" "}
+ {props.dateRange.to?.getFullYear()}
+
+
+ {new Intl.DateTimeFormat(
+ userLocaleString === "de" ? "de" : "en-GB",
+ { weekday: "long" }
+ ).format(props.dateRange.to)}
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ //header content here
+ return ;
+ }}
+ footer={() => {
+ //footer content here
+ return ;
+ }}
+ >
+ {({ unseenCount }) =>
+
+
+ );
+}
diff --git a/app/components/label-button.tsx b/app/components/label-button.tsx
new file mode 100644
index 000000000..4a77d3ad0
--- /dev/null
+++ b/app/components/label-button.tsx
@@ -0,0 +1,5 @@
+export function LabelButton({
+ ...props
+}: Omit
+ 
+
+
+ Connect any device
+
+
+ We support preconfigured devices by some vendors but you can always
+ registered your custom hardware and sensor setup.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/landing/donate-text.tsx b/app/components/landing/donate-text.tsx
new file mode 100644
index 000000000..c0051ab5a
--- /dev/null
+++ b/app/components/landing/donate-text.tsx
@@ -0,0 +1,30 @@
+export default function DonationText() {
+ return (
+
+ Liebe Nutzer*innen,
+
+
+
+
+
+ Danke! +
+
+ Euer openSenseMap.org Team +
+ );
+}
diff --git a/app/components/landing/donate.tsx b/app/components/landing/donate.tsx
new file mode 100644
index 000000000..7086f2651
--- /dev/null
+++ b/app/components/landing/donate.tsx
@@ -0,0 +1,23 @@
+import DonationiFrame from "./donate-iframe";
+import DonationText from "./donate-text";
+
+export default function Donate() {
+ return (
+ +
+
+ Bildung und freier Zugang zu Wissen und Informationen sind die + Triebkraft für positive Veränderungen in unserer Welt. Schulen, + Forschungseinrichtungen, engagierte Bürger*innen, Hobbyforscher*innen, + Journalist*innen und Umweltaktivist*innen weltweit nutzen die + openSenseMap als freie Plattform für Umwelt-Daten. +
++
+ Uns liegt es am Herzen, dass die openSenseMap weiterhin für alle kosten- + und werbefrei zur Verfügung steht. +
++
+ Daher brauchen wir dringend Eure Unterstützung! +
++ Danke! +
+
+ Euer openSenseMap.org Team +
+
+ );
+}
diff --git a/app/components/landing/features-card.tsx b/app/components/landing/features-card.tsx
new file mode 100644
index 000000000..c17d0d68e
--- /dev/null
+++ b/app/components/landing/features-card.tsx
@@ -0,0 +1,18 @@
+import type { Feature } from "~/lib/directus";
+
+export default function FeatureCard(item: Feature) {
+ return (
+
+
+
+
+ + Donate +
+
+
+
+
+ );
+}
diff --git a/app/components/landing/features-carousel.tsx b/app/components/landing/features-carousel.tsx
new file mode 100644
index 000000000..8119fd7ee
--- /dev/null
+++ b/app/components/landing/features-carousel.tsx
@@ -0,0 +1,189 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import type { Variants } from "framer-motion";
+import type { Feature } from "~/lib/directus";
+import FeatureCard from "./features-card";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+type FeaturesProps = {
+ data: Feature[];
+};
+
+const variants: Variants = {
+ enter: ({ direction }) => {
+ return { scale: 0.2, x: direction < 1 ? 50 : -50, opacity: 0 };
+ },
+ center: ({ position, direction }) => {
+ return {
+ scale: position() === "center" ? 1 : 0.7,
+ x: 0,
+ zIndex: getZIndex({ position, direction }),
+ opacity: 1,
+ };
+ },
+ exit: ({ direction }) => {
+ return { scale: 0.2, x: direction < 1 ? -50 : 50, opacity: 0 };
+ },
+};
+
+function getZIndex({
+ position,
+ direction,
+}: {
+ position: () => string;
+ direction: number;
+}): number {
+ const indexes: { [key: string]: number } = {
+ left: direction > 0 ? 2 : 1,
+ center: 3,
+ right: direction > 0 ? 1 : 2,
+ };
+ return indexes[position()];
+}
+
+export default function FeaturesCarousel({ data }: FeaturesProps) {
+ const [[activeIndex, direction], setActiveIndex] = useState<[number, number]>(
+ [0, 0]
+ );
+ const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+ const [isMobileScreen, setIsMobileScreen] = useState(false);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobileScreen(window.innerWidth <= 768); // Adjust the breakpoint as needed
+ };
+
+ handleResize(); // Check on initial render
+
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ const indexInArrayScope =
+ ((activeIndex % data.length) + data.length) % data.length;
+
+ const visibleItems: Feature[] = isMobileScreen
+ ? [data[indexInArrayScope]]
+ : [...data, ...data].slice(indexInArrayScope, indexInArrayScope + 3);
+
+ const handleClick = (newDirection: number): void => {
+ if (isButtonDisabled) return; // Prevent clicking if the button is disabled
+
+ setActiveIndex((prevIndex) => [prevIndex[0] + newDirection, newDirection]);
+ setIsButtonDisabled(true); // Disable the button
+
+ setTimeout(() => {
+ setIsButtonDisabled(false); // Enable the button after 1 second
+ }, 1000);
+ };
+
+ return (
+
+ {item.title}
+
+ {item.description}
+
+ 
+
+
+
+ handleClick(-1)}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true }}
+ transition={{
+ duration: 0.5,
+ delay: 0.8,
+ type: "spring",
+ stiffness: 150,
+ }}
+ variants={{
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: -50 },
+ }}
+ >
+
+
+
+
+ {visibleItems.map((item: Feature) => {
+ return (
+ {
+ if (item === visibleItems[0]) {
+ return "left";
+ } else if (item === visibleItems[1]) {
+ return "center";
+ } else {
+ return "right";
+ }
+ },
+ }}
+ variants={variants}
+ initial="enter"
+ animate="center"
+ exit="exit"
+ transition={{ duration: 1 }}
+ >
+
+ );
+ })}
+
+ handleClick(1)}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true }}
+ transition={{
+ duration: 0.3,
+ delay: 0.8,
+ type: "spring",
+ stiffness: 150,
+ }}
+ variants={{
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: 50 },
+ }}
+ >
+
+
+
+
+
+ );
+}
diff --git a/app/components/landing/features.tsx b/app/components/landing/features.tsx
new file mode 100644
index 000000000..8cd780950
--- /dev/null
+++ b/app/components/landing/features.tsx
@@ -0,0 +1,75 @@
+import {
+ Copyleft,
+ Download,
+ GitFork,
+ Scale,
+ Telescope,
+ Terminal,
+ Trash,
+} from "lucide-react";
+
+export default function Features() {
+ return (
+
+ 
+
+
+ Features
+
+
+ The openSenseMap platform has a lot to offer that makes
+ discoverability and sharing of environmental and sensor data easy.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ );
+}
diff --git a/app/components/landing/header.tsx b/app/components/landing/header.tsx
new file mode 100644
index 000000000..eb3e7ddb8
--- /dev/null
+++ b/app/components/landing/header.tsx
@@ -0,0 +1,125 @@
+import { Link } from "@remix-run/react";
+import { useState } from "react";
+import LanguageSelector from "./language-selector";
+import { ThemeSelector } from "./theme-selector";
+
+const links = [
+ {
+ name: "Explore",
+ link: "/explore",
+ },
+ {
+ name: "Features",
+ link: "#features",
+ },
+ // {
+ // name: "Tools",
+ // link: "#tools",
+ // },
+ // {
+ // name: "Use Cases",
+ // link: "#useCases",
+ // },
+ // {
+ // name: "Partners",
+ // link: "#partners",
+ // },
+ {
+ name: "Sponsor",
+ link: "#pricing",
+ },
+];
+
+export default function Header() {
+ const [openMenu, setOpenMenu] = useState(false);
+
+ return (
+
+ );
+}
diff --git a/app/components/landing/integrations.tsx b/app/components/landing/integrations.tsx
new file mode 100644
index 000000000..5fee3e7ab
--- /dev/null
+++ b/app/components/landing/integrations.tsx
@@ -0,0 +1,58 @@
+import { ArrowUpDown, RadioTower, Unplug } from "lucide-react";
+
+export default function Integrations() {
+ return (
+
+ 
+
+
+ Integrations
+
+
+ We support different data communication protocols and offer specific
+ integrations for them.
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/landing/pricing-plans.tsx b/app/components/landing/pricing-plans.tsx
new file mode 100644
index 000000000..bb781fc54
--- /dev/null
+++ b/app/components/landing/pricing-plans.tsx
@@ -0,0 +1,43 @@
+import { Gift, Star } from "lucide-react";
+
+export default function PricingPlans() {
+ return (
+ <>
+
+
+ 
+
+
+
+
+ + Partners +
+
+ {data.map((partner, index) => {
+ return (
+
+ 
+
+ );
+ })}
+
+ hosted by
+
+
+
+
+
+ Pricing
+
+ Just kidding, openSenseMap is free and open-source.
+ You can still make your contribution.
+
+
+
+
+
+
+ );
+}
diff --git a/app/components/landing/theme-selector.tsx b/app/components/landing/theme-selector.tsx
new file mode 100644
index 000000000..37f6a5ca8
--- /dev/null
+++ b/app/components/landing/theme-selector.tsx
@@ -0,0 +1,22 @@
+import { Moon, Sun } from "lucide-react";
+import { Theme, useTheme } from "remix-themes";
+
+export function ThemeSelector() {
+ const [theme, setTheme] = useTheme();
+
+ const toggleTheme = () => {
+ setTheme((prevTheme) =>
+ prevTheme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT,
+ );
+ };
+
+ return (
+ <>
+ {theme == "light" ? (
+
+ {osemStats.map((stat) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ + {stat.unit} +
+{t(stat.name)}
+
+
+ );
+}
diff --git a/app/components/landing/usa-flag.tsx b/app/components/landing/usa-flag.tsx
new file mode 100644
index 000000000..cab171035
--- /dev/null
+++ b/app/components/landing/usa-flag.tsx
@@ -0,0 +1,9 @@
+export default function UsaFlag() {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ + Tools +
+
+
+ {tools.map((tool) => {
+ return (
+
+ {tool.name}
+
+ );
+ })}
+
+
+ {tools.map((tool) => {
+ return (
+
+
+
+ 
+ );
+}
diff --git a/app/components/landing/use-cases-card.tsx b/app/components/landing/use-cases-card.tsx
new file mode 100644
index 000000000..c5881817d
--- /dev/null
+++ b/app/components/landing/use-cases-card.tsx
@@ -0,0 +1,18 @@
+import type { UseCase } from "~/lib/directus";
+
+export default function UseCaseCard(item: UseCase) {
+ return (
+
+
+ );
+}
diff --git a/app/components/landing/use-cases-carousel.tsx b/app/components/landing/use-cases-carousel.tsx
new file mode 100644
index 000000000..fb0cb4f30
--- /dev/null
+++ b/app/components/landing/use-cases-carousel.tsx
@@ -0,0 +1,189 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import type { Variants } from "framer-motion";
+import type { UseCase } from "~/lib/directus";
+import UseCaseCard from "./use-cases-card";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+type UseCaseProps = {
+ data: UseCase[];
+};
+
+const variants: Variants = {
+ enter: ({ direction }) => {
+ return { scale: 0.2, x: direction < 1 ? 50 : -50, opacity: 0 };
+ },
+ center: ({ position, direction }) => {
+ return {
+ scale: position() === "center" ? 1 : 0.7,
+ x: 0,
+ zIndex: getZIndex({ position, direction }),
+ opacity: 1,
+ };
+ },
+ exit: ({ direction }) => {
+ return { scale: 0.2, x: direction < 1 ? -50 : 50, opacity: 0 };
+ },
+};
+
+function getZIndex({
+ position,
+ direction,
+}: {
+ position: () => string;
+ direction: number;
+}): number {
+ const indexes: { [key: string]: number } = {
+ left: direction > 0 ? 2 : 1,
+ center: 3,
+ right: direction > 0 ? 1 : 2,
+ };
+ return indexes[position()];
+}
+
+export default function FeaturesCarousel({ data }: UseCaseProps) {
+ const [[activeIndex, direction], setActiveIndex] = useState<[number, number]>(
+ [0, 0]
+ );
+ const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+ const [isMobileScreen, setIsMobileScreen] = useState(false);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobileScreen(window.innerWidth <= 768); // Adjust the breakpoint as needed
+ };
+
+ handleResize(); // Check on initial render
+
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, []);
+
+ const indexInArrayScope =
+ ((activeIndex % data.length) + data.length) % data.length;
+
+ const visibleItems: UseCase[] = isMobileScreen
+ ? [data[indexInArrayScope]]
+ : [...data, ...data].slice(indexInArrayScope, indexInArrayScope + 3);
+
+ const handleClick = (newDirection: number): void => {
+ if (isButtonDisabled) return; // Prevent clicking if the button is disabled
+
+ setActiveIndex((prevIndex) => [prevIndex[0] + newDirection, newDirection]);
+ setIsButtonDisabled(true); // Disable the button
+
+ setTimeout(() => {
+ setIsButtonDisabled(false); // Enable the button after 1 second
+ }, 1000);
+ };
+
+ return (
+
+ {item.title}
+
+ {item.description}
+
+ 
+
+
+
+ handleClick(-1)}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true }}
+ transition={{
+ duration: 0.5,
+ delay: 0.8,
+ type: "spring",
+ stiffness: 150,
+ }}
+ variants={{
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: -50 },
+ }}
+ >
+
+
+
+
+ {visibleItems.map((item: UseCase) => {
+ return (
+ {
+ if (item === visibleItems[0]) {
+ return "left";
+ } else if (item === visibleItems[1]) {
+ return "center";
+ } else {
+ return "right";
+ }
+ },
+ }}
+ variants={variants}
+ initial="enter"
+ animate="center"
+ exit="exit"
+ transition={{ duration: 1 }}
+ >
+
+ );
+ })}
+
+ handleClick(1)}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: true }}
+ transition={{
+ duration: 0.3,
+ delay: 0.8,
+ type: "spring",
+ stiffness: 150,
+ }}
+ variants={{
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: 50 },
+ }}
+ >
+
+
+
+
+
+ );
+}
diff --git a/app/components/landing/use-cases.tsx b/app/components/landing/use-cases.tsx
new file mode 100644
index 000000000..f5790311b
--- /dev/null
+++ b/app/components/landing/use-cases.tsx
@@ -0,0 +1,23 @@
+import type { UseCase } from "~/lib/directus";
+import UseCaseCarousel from "./use-cases-carousel";
+
+type UseCaseProps = {
+ data: UseCase[];
+};
+
+export default function UseCases({ data }: UseCaseProps) {
+ return (
+
+
+ );
+}
diff --git a/app/components/map/geocoder-control.tsx b/app/components/map/geocoder-control.tsx
new file mode 100644
index 000000000..2bf4a54b2
--- /dev/null
+++ b/app/components/map/geocoder-control.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {useControl, Marker, type MarkerProps, type ControlPosition} from 'react-map-gl';
+import MapboxGeocoder, {type GeocoderOptions} from '@mapbox/mapbox-gl-geocoder';
+
+type GeocoderControlProps = Omit
+
+
+
+ + Use Cases +
+
+
+ clusterOnClick(cluster)}>
+
+
+ );
+}
diff --git a/app/components/map/layers/index.ts b/app/components/map/layers/index.ts
new file mode 100644
index 000000000..6cc2668d2
--- /dev/null
+++ b/app/components/map/layers/index.ts
@@ -0,0 +1,437 @@
+import type { LayerProps } from "react-map-gl";
+
+// colors to use for the categories
+const colors = ["#4EAF47", "#666", "#666", "#666"];
+
+// filters for classifying devices into three categories phenomenond on status
+export const deviceStatusFilter = {
+ active: ["==", ["get", "status"], "ACTIVE"],
+ inactive: ["==", ["get", "status"], "INACTIVE"],
+ old: ["==", ["get", "status"], "OLD"],
+};
+
+export const activeClusterLayer: LayerProps = {
+ id: "cluster",
+ type: "circle",
+ source: "devices",
+ // filter: ["has", "point_count"],
+ filter: ["==", "cluster", true],
+ paint: {
+ "circle-color": "transparent",
+ "circle-radius": 20,
+ "circle-opacity": 0.5,
+ "circle-stroke-color": colors[0],
+ "circle-translate": [5, 5],
+ // "circle-stroke-color": [
+ // "interpolate",
+ // ["exponential", 0.5],
+ // ["zoom"],
+ // 2,
+ // colors[0],
+ // 4,
+ // colors[1],
+ // ],
+ "circle-stroke-width": 4,
+ "circle-stroke-opacity": 0.5,
+ },
+};
+
+export const inactiveClusterLayer: LayerProps = {
+ id: "inactive-cluster",
+ type: "circle",
+ source: "inactive-devices",
+ filter: ["has", "point_count"],
+ paint: {
+ "circle-color": "transparent",
+ "circle-radius": 20,
+ "circle-opacity": 0.5,
+ "circle-stroke-color": colors[1],
+ "circle-stroke-width": 4,
+ },
+};
+
+export const oldClusterLayer: LayerProps = {
+ id: "clusters",
+ type: "circle",
+ source: "devices",
+ filter: ["has", "point_count"],
+ paint: {
+ "circle-color": "#666",
+ "circle-radius": 20,
+ },
+};
+
+export const activeClusterCountLayer: LayerProps = {
+ id: "active-cluster-count",
+ type: "symbol",
+ source: "active-devices",
+ filter: ["has", "point_count"],
+ layout: {
+ "text-field": "{point_count_abbreviated}",
+ "text-size": 12,
+ },
+};
+
+export const inactiveClusterCountLayer: LayerProps = {
+ id: "inactive-cluster-count",
+ type: "symbol",
+ source: "inactive-devices",
+ filter: ["has", "point_count"],
+ layout: {
+ "text-field": "{point_count_abbreviated}",
+ "text-size": 12,
+ },
+};
+
+export const unclusteredPointLayer: LayerProps = {
+ id: "unclustered-point",
+ type: "symbol",
+ source: "devices",
+ filter: ["!=", "cluster", true],
+ paint: {
+ "icon-opacity": [
+ "case",
+ deviceStatusFilter.active,
+ 1,
+ deviceStatusFilter.inactive,
+ 0.7,
+ deviceStatusFilter.old,
+ 0.5,
+ 0.5,
+ ],
+ },
+ layout: {
+ // get icon depending on source´s "exposure" property
+ "icon-image": [
+ "match",
+ ["get", "exposure"],
+ "INDOOR",
+ "box",
+ "OUTDOOR",
+ "box",
+ "MOBILE",
+ "rocket",
+ "UNKNOW",
+ "box",
+ "box",
+ ],
+ // get the device name from the source's "name" property
+ // "text-field": ["get", "name"],
+ // "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+ // "text-anchor": "left",
+ },
+};
+
+// add a symbol layer - text label
+export const unclusteredPointLabelsLayer: LayerProps = {
+ id: "device-labels",
+ type: "symbol",
+ source: "devices",
+ layout: {
+ "text-field": ["get", "name"],
+ "text-size": 14,
+ "text-anchor": "center",
+ "text-offset": [0, -1.5],
+ },
+ paint: {
+ "text-color": "#ffff00",
+ "text-halo-color": "#333333",
+ "text-halo-width": 10,
+ },
+};
+
+interface ObjectLiteral {
+ [key: string]: LayerProps;
+}
+
+export const phenomenonLayers: ObjectLiteral = {
+ temperature: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 2.75,
+ stops: [
+ [1, 5],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ -10,
+ "#9900cc",
+ 0,
+ "#0000ff",
+ 10,
+ "#0099ff",
+ 20,
+ "#ffff00",
+ 30,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ relative_humidity: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 25,
+ "#0000ff",
+ 50,
+ "#0099ff",
+ 75,
+ "#ffff00",
+ 100,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ barometric_pressure: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 25,
+ "#0000ff",
+ 50,
+ "#0099ff",
+ 75,
+ "#ffff00",
+ 100,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ ambient_light: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 1000,
+ "#0000ff",
+ 2000,
+ "#0099ff",
+ 3000,
+ "#ffff00",
+ 4000,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ ultraviolet_a_light: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 100,
+ "#0000ff",
+ 200,
+ "#0099ff",
+ 300,
+ "#ffff00",
+ 400,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ pm10_concentration: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 15,
+ "#0000ff",
+ 30,
+ "#0099ff",
+ 45,
+ "#ffff00",
+ 60,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+ pm25: {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 10,
+ "#0000ff",
+ 20,
+ "#0099ff",
+ 30,
+ "#ffff00",
+ 40,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+ },
+};
+
+export const defaultLayer = {
+ id: "phenomenon-layer",
+ type: "circle",
+ source: "boxes",
+ paint: {
+ "circle-opacity": 0.7,
+ "circle-radius": {
+ base: 1.75,
+ stops: [
+ [1, 4],
+ [22, 200],
+ ],
+ },
+ "circle-color": [
+ "interpolate",
+ ["linear"],
+ [
+ "get",
+ "value",
+ ["object", ["get", "lastMeasurement", ["object", ["get", "sensor"]]]],
+ ],
+ 0,
+ "#9900cc",
+ 25,
+ "#0000ff",
+ 50,
+ "#0099ff",
+ 75,
+ "#ffff00",
+ 100,
+ "#ff0000",
+ ],
+ "circle-stroke-width": 1,
+ "circle-stroke-color": "black",
+ },
+};
diff --git a/app/components/map/layers/mobile/color-palette.ts b/app/components/map/layers/mobile/color-palette.ts
new file mode 100644
index 000000000..c61eea8e6
--- /dev/null
+++ b/app/components/map/layers/mobile/color-palette.ts
@@ -0,0 +1,11 @@
+import chroma from "chroma-js";
+
+export const LOW_COLOR = "#375F73";
+export const HIGH_COLOR = "#B5F584";
+
+export const createPalette = (
+ min: number,
+ max: number,
+ minColor = LOW_COLOR,
+ maxColor = HIGH_COLOR
+) => chroma.scale([minColor, maxColor]).domain([min, max]);
diff --git a/app/components/map/layers/mobile/mobile-box-layer.tsx b/app/components/map/layers/mobile/mobile-box-layer.tsx
new file mode 100644
index 000000000..2994e34fb
--- /dev/null
+++ b/app/components/map/layers/mobile/mobile-box-layer.tsx
@@ -0,0 +1,114 @@
+import type { Sensor } from "~/schema";
+import {
+ featureCollection,
+ lineString,
+ multiLineString,
+ point,
+} from "@turf/helpers";
+import type { MultiLineString, Point } from "geojson";
+import { useEffect, useState } from "react";
+import { Layer, Source, useMap } from "react-map-gl";
+import bbox from "@turf/bbox";
+import { HIGH_COLOR, LOW_COLOR, createPalette } from "./color-palette";
+
+const FIT_PADDING = 50;
+const BOTTOM_BAR_HEIGHT = 400;
+
+export default function MobileBoxLayer({
+ sensor,
+ minColor = LOW_COLOR,
+ maxColor = HIGH_COLOR,
+}: {
+ sensor: Sensor;
+ minColor?:
+ | mapboxgl.CirclePaint["circle-color"]
+ | mapboxgl.LinePaint["line-color"];
+ maxColor?:
+ | mapboxgl.CirclePaint["circle-color"]
+ | mapboxgl.LinePaint["line-color"];
+}) {
+ const [sourceData, setSourceData] = useState
+ {sensors.map((sensor) => (
+
+ );
+}
+
+function SensorView({ sensor }: { sensor: Sensor }) {
+ const [minColor, setMinColor] = useState(LOW_COLOR);
+ const [maxColor, setMaxColor] = useState(HIGH_COLOR);
+
+ return (
+ <>
+