- {sensor.lastMeasurement?.value ?? '–'}
+ {sensor.lastMeasurement?.value ??
+ '–'}
{sensor.unit}
@@ -588,7 +589,8 @@ export default function DeviceDetailBox() {
- {sensor.lastMeasurement?.value ?? '–'}
+ {sensor.lastMeasurement?.value ??
+ '–'}
{sensor.unit}
diff --git a/app/components/device-detail/entry-logs.tsx b/app/components/device-detail/entry-logs.tsx
index 5eabf15f8..098923d73 100644
--- a/app/components/device-detail/entry-logs.tsx
+++ b/app/components/device-detail/entry-logs.tsx
@@ -1,165 +1,167 @@
-import { useMediaQuery } from "@mantine/hooks";
-import { Activity, Clock, ExternalLink } from "lucide-react";
-import { useState } from "react";
-import { Button } from "../ui/button";
+import { useMediaQuery } from '@mantine/hooks'
+import { Activity, Clock, ExternalLink } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '../ui/button'
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "../ui/dialog";
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '../ui/dialog'
import {
- Drawer,
- DrawerClose,
- DrawerContent,
- DrawerDescription,
- DrawerFooter,
- DrawerHeader,
- DrawerTitle,
- DrawerTrigger,
-} from "../ui/drawer";
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from '../ui/drawer'
import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "../ui/tooltip";
-import { Card } from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { type LogEntry } from "~/schema/log-entry";
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '../ui/tooltip'
+import { Card } from '@/components/ui/card'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { type LogEntry } from '~/schema/log-entry'
export default function EntryLogs({
- entryLogs = [],
+ entryLogs = [],
}: {
- entryLogs: LogEntry[];
+ entryLogs: LogEntry[]
}) {
- const [open, setOpen] = useState(false);
- const isDesktop = useMediaQuery("(min-width: 768px)");
+ const [open, setOpen] = useState(false)
+ const isDesktop = useMediaQuery('(min-width: 768px)')
- if (isDesktop) {
- return (
-
-
Logs
-
-
-
-
-
{entryLogs[entryLogs.length -1].content}
-
-
-
-
-
-
-
-
-
-
-
- {" "}
-
-
- Show all logs.
-
-
-
-
-
-
-
- Device Logs
-
- If this is your device, you can make changes in your device
- settings.
-
-
-
-
-
-
-
- );
- }
+ if (isDesktop) {
+ return (
+
+
Logs
+
+
+
+
+
+ {entryLogs[entryLogs.length - 1].content}
+
+
+
+
+
+
+
+
+
+
+
+
+ {' '}
+
+
+ Show all logs.
+
+
+
+
+
+
+
+ Device Logs
+
+ If this is your device, you can make changes in your device
+ settings.
+
+
+
+
+
+
+
+ )
+ }
- return (
-
-
Logs
-
-
-
-
-
{entryLogs[0].content}
-
-
-
-
-
-
-
-
-
-
-
-
- Device Logs
-
- If this is your device, you can make changes in your device
- settings.
-
-
-
-
- Close
-
-
-
-
-
-
- );
+ return (
+
+
Logs
+
+
+
+
+
{entryLogs[0].content}
+
+
+
+
+
+
+
+
+
+
+
+
+ Device Logs
+
+ If this is your device, you can make changes in your device
+ settings.
+
+
+
+
+ Close
+
+
+
+
+
+
+ )
}
function LogList({ entryLogs = [] }: { entryLogs: LogEntry[] }) {
- return (
-
-
- {entryLogs.map((log, index) => (
-
-
-
-
- {log.content}
-
-
-
-
- {index < entryLogs.length - 1 && (
-
- )}
-
- ))}
-
- );
+ return (
+
+
+ {entryLogs.map((log, index) => (
+
+
+
+
+ {log.content}
+
+
+
+
+ {index < entryLogs.length - 1 && (
+
+ )}
+
+ ))}
+
+ )
}
diff --git a/app/components/device-detail/graph.tsx b/app/components/device-detail/graph.tsx
index 594d983c4..114675ba7 100644
--- a/app/components/device-detail/graph.tsx
+++ b/app/components/device-detail/graph.tsx
@@ -13,7 +13,14 @@ import {
import 'chartjs-adapter-date-fns'
// import { de, enGB } from "date-fns/locale";
import { Download, RefreshCcw, X } from 'lucide-react'
-import { useMemo, useRef, useState, useEffect, useContext,type RefObject } from 'react'
+import {
+ useMemo,
+ useRef,
+ useState,
+ useEffect,
+ useContext,
+ type RefObject,
+} from 'react'
import { Scatter } from 'react-chartjs-2'
import { isBrowser, isTablet } from 'react-device-detect'
import Draggable, { type DraggableData } from 'react-draggable'
diff --git a/app/components/device-detail/profile-box-selection.tsx b/app/components/device-detail/profile-box-selection.tsx
index 10aadbc36..80c3597ec 100644
--- a/app/components/device-detail/profile-box-selection.tsx
+++ b/app/components/device-detail/profile-box-selection.tsx
@@ -1,70 +1,70 @@
// import { useState } from "react";
import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "../ui/card";
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '../ui/card'
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "../ui/select";
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../ui/select'
const dummyBoxes = [
- {
- name: "Box at IFGI",
- id: "1",
- image: "/sensebox_outdoor.jpg",
- },
- {
- name: "senseBox at Aasee",
- id: "2",
- image: "https://picsum.photos/200/300",
- },
- {
- name: "Box at Schlossgarten",
- id: "3",
- image: "https://picsum.photos/200/300",
- },
-];
+ {
+ name: 'Box at IFGI',
+ id: '1',
+ image: '/sensebox_outdoor.jpg',
+ },
+ {
+ name: 'senseBox at Aasee',
+ id: '2',
+ image: 'https://picsum.photos/200/300',
+ },
+ {
+ name: 'Box at Schlossgarten',
+ id: '3',
+ image: 'https://picsum.photos/200/300',
+ },
+]
export default function ProfileBoxSelection() {
- // const [selectedBox, setSelectedBox] = useState(dummyBoxes[0]);
- return (
-
- {/* 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
-
-
-
-
-
-
-
-
-
-
- Light
- Dark
- System
-
-
-
-
-
- );
+ // const [selectedBox, setSelectedBox] = useState(dummyBoxes[0]);
+ return (
+
+ {/* 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
+
+
+
+
+
+
+
+
+
+
+ Light
+ Dark
+ System
+
+
+
+
+
+ )
}
diff --git a/app/components/device-detail/share-link.tsx b/app/components/device-detail/share-link.tsx
index 42066ac58..bd4d5077a 100644
--- a/app/components/device-detail/share-link.tsx
+++ b/app/components/device-detail/share-link.tsx
@@ -1,99 +1,99 @@
-import { Copy, Link } from "lucide-react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { useToast } from "@/components/ui/use-toast";
+import { Copy, Link } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { useToast } from '@/components/ui/use-toast'
export default function ShareLink() {
- const { toast } = useToast();
+ const { toast } = useToast()
- return (
-
-
- {/* */}
-
- {/* */}
-
- {/* */}
-
- {/* */}
-
- {/* */}
-
-
- {/* */}
-
- {
- void navigator.clipboard.writeText(window.location.href);
- toast({
- title: "Copied to clipboard",
- description: "Go ahead and share your link! 🎉",
- });
- }}
- className="inline-flex h-9 transform items-center justify-center rounded-md bg-primary px-2 py-2 text-sm font-medium text-primary-foreground shadow transition-transform active:scale-75"
- >
-
-
-
- );
+ return (
+
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+
+ {
+ void navigator.clipboard.writeText(window.location.href)
+ toast({
+ title: 'Copied to clipboard',
+ description: 'Go ahead and share your link! 🎉',
+ })
+ }}
+ className="inline-flex h-9 transform items-center justify-center rounded-md bg-primary px-2 py-2 text-sm font-medium text-primary-foreground shadow transition-transform active:scale-75"
+ >
+
+
+
+ )
}
diff --git a/app/components/device/new/advanced-info.tsx b/app/components/device/new/advanced-info.tsx
index ba7019d24..240c8f200 100644
--- a/app/components/device/new/advanced-info.tsx
+++ b/app/components/device/new/advanced-info.tsx
@@ -1,246 +1,246 @@
-import { useFormContext } from "react-hook-form";
+import { useFormContext } from 'react-hook-form'
import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '~/components/ui/card'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "~/components/ui/select";
-import { Switch } from "~/components/ui/switch";
-import { Textarea } from "~/components/ui/textarea";
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '~/components/ui/select'
+import { Switch } from '~/components/ui/switch'
+import { Textarea } from '~/components/ui/textarea'
export function AdvancedStep() {
- const { register, setValue, watch, resetField } = useFormContext();
-
- // Watch field states
- const isMqttEnabled = watch("mqttEnabled") || false;
- const isTtnEnabled = watch("ttnEnabled") || false;
-
- // Clear corresponding fields when disabling
- const handleMqttToggle = (checked: boolean) => {
- setValue("mqttEnabled", checked);
- if (!checked) {
- resetField("url");
- resetField("topic");
- resetField("messageFormat");
- resetField("decodeOptions");
- resetField("connectionOptions");
- }
- };
-
- const handleTtnToggle = (checked: boolean) => {
- setValue("ttnEnabled", checked);
- if (!checked) {
- resetField("dev_id");
- resetField("app_id");
- resetField("profile");
- resetField("decodeOptions");
- resetField("port");
- }
- };
-
- const handleInputChange = (
- event: React.ChangeEvent
,
- ) => {
- const { name, value } = event.target;
- setValue(name, value);
- };
-
- const handleSelectChange = (field: string, value: string) => {
- setValue(field, value);
- };
-
- return (
- <>
- {/* MQTT Configuration */}
-
-
- MQTT Configuration
-
- Configure your MQTT settings for data streaming
-
-
-
-
-
- Enable MQTT
-
-
-
- {isMqttEnabled && (
-
-
- MQTT URL
-
-
-
- MQTT Topic
-
-
-
- Message Format
-
- handleSelectChange("messageFormat", value)
- }
- defaultValue={watch("messageFormat")}
- >
-
-
-
- JSON
- CSV
-
-
-
-
-
- Decode Options
-
-
-
-
-
- Connection Options
-
-
-
-
-
-
- {/* TTN Configuration */}
-
-
- TTN Configuration
-
- Configure your TTN (The Things Network) settings
-
-
-
-
-
- Enable TTN
-
-
-
- {isTtnEnabled && (
-
-
- Device ID
-
-
-
- Application ID
-
-
-
- Profile
-
- handleSelectChange("profile", value)
- }
- defaultValue={watch("profile")}
- >
-
-
-
-
- Lora Serialization
-
- Sensebox/Home
- JSON
- Debug
- Cayenne LPP
-
-
-
-
-
- Decode Options
-
-
-
-
- Port
-
-
-
-
- );
+ const { register, setValue, watch, resetField } = useFormContext()
+
+ // Watch field states
+ const isMqttEnabled = watch('mqttEnabled') || false
+ const isTtnEnabled = watch('ttnEnabled') || false
+
+ // Clear corresponding fields when disabling
+ const handleMqttToggle = (checked: boolean) => {
+ setValue('mqttEnabled', checked)
+ if (!checked) {
+ resetField('url')
+ resetField('topic')
+ resetField('messageFormat')
+ resetField('decodeOptions')
+ resetField('connectionOptions')
+ }
+ }
+
+ const handleTtnToggle = (checked: boolean) => {
+ setValue('ttnEnabled', checked)
+ if (!checked) {
+ resetField('dev_id')
+ resetField('app_id')
+ resetField('profile')
+ resetField('decodeOptions')
+ resetField('port')
+ }
+ }
+
+ const handleInputChange = (
+ event: React.ChangeEvent,
+ ) => {
+ const { name, value } = event.target
+ setValue(name, value)
+ }
+
+ const handleSelectChange = (field: string, value: string) => {
+ setValue(field, value)
+ }
+
+ return (
+ <>
+ {/* MQTT Configuration */}
+
+
+ MQTT Configuration
+
+ Configure your MQTT settings for data streaming
+
+
+
+
+
+ Enable MQTT
+
+
+
+ {isMqttEnabled && (
+
+
+ MQTT URL
+
+
+
+ MQTT Topic
+
+
+
+ Message Format
+
+ handleSelectChange('messageFormat', value)
+ }
+ defaultValue={watch('messageFormat')}
+ >
+
+
+
+ JSON
+ CSV
+
+
+
+
+
+ Decode Options
+
+
+
+
+
+ Connection Options
+
+
+
+
+
+
+ {/* TTN Configuration */}
+
+
+ TTN Configuration
+
+ Configure your TTN (The Things Network) settings
+
+
+
+
+
+ Enable TTN
+
+
+
+ {isTtnEnabled && (
+
+
+ Device ID
+
+
+
+ Application ID
+
+
+
+ Profile
+
+ handleSelectChange('profile', value)
+ }
+ defaultValue={watch('profile')}
+ >
+
+
+
+
+ Lora Serialization
+
+ Sensebox/Home
+ JSON
+ Debug
+ Cayenne LPP
+
+
+
+
+
+ Decode Options
+
+
+
+
+ Port
+
+
+
+
+ )
}
diff --git a/app/components/device/new/custom-device-config.tsx b/app/components/device/new/custom-device-config.tsx
index 458969018..a7e898c5d 100644
--- a/app/components/device/new/custom-device-config.tsx
+++ b/app/components/device/new/custom-device-config.tsx
@@ -1,116 +1,116 @@
-import { X } from "lucide-react";
-import { useState, useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import { type Sensor } from "./sensors-info";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "~/components/ui/separator";
+import { X } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { type Sensor } from './sensors-info'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Separator } from '~/components/ui/separator'
export function CustomDeviceConfig() {
- const { setValue, watch } = useFormContext();
+ const { setValue, watch } = useFormContext()
- // Initialize state from form context
- const [sensors, setSensors] = useState(
- () => watch("selectedSensors") || [],
- );
- const [newSensor, setNewSensor] = useState({
- title: "",
- unit: "",
- sensorType: "",
- });
+ // Initialize state from form context
+ const [sensors, setSensors] = useState(
+ () => watch('selectedSensors') || [],
+ )
+ const [newSensor, setNewSensor] = useState({
+ title: '',
+ unit: '',
+ sensorType: '',
+ })
- // Sync state with form context on mount
- useEffect(() => {
- const savedSensors = watch("selectedSensors") || [];
- if (savedSensors.length > 0) {
- setSensors(savedSensors);
- }
- }, [watch]);
+ // Sync state with form context on mount
+ useEffect(() => {
+ const savedSensors = watch('selectedSensors') || []
+ if (savedSensors.length > 0) {
+ setSensors(savedSensors)
+ }
+ }, [watch])
- const updateNewSensor = (field: keyof Sensor, value: string) => {
- setNewSensor((prev) => ({ ...prev, [field]: value }));
- };
+ const updateNewSensor = (field: keyof Sensor, value: string) => {
+ setNewSensor((prev) => ({ ...prev, [field]: value }))
+ }
- const addSensor = () => {
- if (newSensor.title && newSensor.unit && newSensor.sensorType) {
- const updatedSensors = [...sensors, newSensor];
- setSensors(updatedSensors);
- setValue("selectedSensors", updatedSensors); // Sync with form
- setNewSensor({ title: "", unit: "", sensorType: "" });
- }
- };
+ const addSensor = () => {
+ if (newSensor.title && newSensor.unit && newSensor.sensorType) {
+ const updatedSensors = [...sensors, newSensor]
+ setSensors(updatedSensors)
+ setValue('selectedSensors', updatedSensors) // Sync with form
+ setNewSensor({ title: '', unit: '', sensorType: '' })
+ }
+ }
- const removeSensor = (index: number) => {
- const updatedSensors = sensors.filter((_, i) => i !== index);
- setSensors(updatedSensors);
- setValue("selectedSensors", updatedSensors); // Sync with form
- };
+ const removeSensor = (index: number) => {
+ const updatedSensors = sensors.filter((_, i) => i !== index)
+ setSensors(updatedSensors)
+ setValue('selectedSensors', updatedSensors) // Sync with form
+ }
- return (
-
-
+ return (
+
+
- {sensors.length > 0 &&
}
- {sensors.map((sensor, index) => (
-
-
-
- {sensor.title} ({sensor.unit}
- ) - {sensor.sensorType}
-
- {
- e.preventDefault();
- removeSensor(index);
- }}
- >
-
-
-
- ))}
-
- );
+ {sensors.length > 0 &&
}
+ {sensors.map((sensor, index) => (
+
+
+
+ {sensor.title} ({sensor.unit}
+ ) - {sensor.sensorType}
+
+ {
+ e.preventDefault()
+ removeSensor(index)
+ }}
+ >
+
+
+
+ ))}
+
= {
- homeV2Wifi: "Wifi",
- homeV2Ethernet: "Ethernet",
- homeV2Lora: "Lora",
- };
- setSelectedConnectionType(connectionMap[model] || "");
- } else {
- setSelectedDevice(model || "");
- setSelectedConnectionType("");
- }
- }, [model]);
+ useEffect(() => {
+ if (
+ model === 'homeV2Wifi' ||
+ model === 'homeV2Ethernet' ||
+ model === 'homeV2Lora'
+ ) {
+ setSelectedDevice('senseBox:Home')
+ const connectionMap: Record = {
+ homeV2Wifi: 'Wifi',
+ homeV2Ethernet: 'Ethernet',
+ homeV2Lora: 'Lora',
+ }
+ setSelectedConnectionType(connectionMap[model] || '')
+ } else {
+ setSelectedDevice(model || '')
+ setSelectedConnectionType('')
+ }
+ }, [model])
- const handleDeviceChange = (value: string) => {
- setValue("selectedSensors", null); // Reset the selected sensors
- if (selectedDevice === value) {
- // Deselect the currently selected device
- setSelectedDevice(null);
- setValue("model", ""); // Reset the model
- } else {
- // Select a new device
- setSelectedDevice(value);
+ const handleDeviceChange = (value: string) => {
+ setValue('selectedSensors', null) // Reset the selected sensors
+ if (selectedDevice === value) {
+ // Deselect the currently selected device
+ setSelectedDevice(null)
+ setValue('model', '') // Reset the model
+ } else {
+ // Select a new device
+ setSelectedDevice(value)
- // Set the model for the selected device
- if (value === "senseBox:Home") {
- setValue("model", "homeV2Wifi"); // Default to a valid connection type for Home
- } else {
- setValue("model", value); // Set model to the selected device name
- }
- }
- };
+ // Set the model for the selected device
+ if (value === 'senseBox:Home') {
+ setValue('model', 'homeV2Wifi') // Default to a valid connection type for Home
+ } else {
+ setValue('model', value) // Set model to the selected device name
+ }
+ }
+ }
- const handleConnectionTypeChange = (type: string) => {
- // Dynamically set the model based on the connection type
- const modelMap: Record = {
- Wifi: "homeV2Wifi",
- Ethernet: "homeV2Ethernet",
- Lora: "homeV2Lora",
- };
- setValue("model", modelMap[type]);
- setSelectedConnectionType(type); // Update local state
- };
+ const handleConnectionTypeChange = (type: string) => {
+ // Dynamically set the model based on the connection type
+ const modelMap: Record = {
+ Wifi: 'homeV2Wifi',
+ Ethernet: 'homeV2Ethernet',
+ Lora: 'homeV2Lora',
+ }
+ setValue('model', modelMap[type])
+ setSelectedConnectionType(type) // Update local state
+ }
- const handleClose = () => {
- setSelectedDevice(null);
- setValue("model", null);
- };
+ const handleClose = () => {
+ setSelectedDevice(null)
+ setValue('model', null)
+ }
- return (
-
-
- {devices.map((device) => {
- if (
- selectedDevice === "senseBox:Home" &&
- device.name !== selectedDevice
- )
- return null;
+ return (
+
+
+ {devices.map((device) => {
+ if (
+ selectedDevice === 'senseBox:Home' &&
+ device.name !== selectedDevice
+ )
+ return null
- return (
-
{
- if (selectedDevice === "senseBox:Home") {
- return;
- }
- handleDeviceChange(device.name);
- }}
- >
-
- {selectedDevice === "senseBox:Home" && (
- {
- e.stopPropagation();
- handleClose();
- }}
- >
-
- )}
- {device.name}
- {device.name === "senseBox:Home" &&
- selectedDevice === "senseBox:Home" && (
- <>
-
-
- Connection Type:
-
-
- handleConnectionTypeChange(value)
- }
- className="flex flex-col space-y-1"
- >
- {connectionTypes.map((type) => (
-
-
- {type}
-
-
- ))}
-
-
-
- );
- })}
-
-
- );
+ return (
+
{
+ if (selectedDevice === 'senseBox:Home') {
+ return
+ }
+ handleDeviceChange(device.name)
+ }}
+ >
+
+ {selectedDevice === 'senseBox:Home' && (
+ {
+ e.stopPropagation()
+ handleClose()
+ }}
+ >
+
+ )}
+ {device.name}
+ {device.name === 'senseBox:Home' &&
+ selectedDevice === 'senseBox:Home' && (
+ <>
+
+
+ Connection Type:
+
+
+ handleConnectionTypeChange(value)
+ }
+ className="flex flex-col space-y-1"
+ >
+ {connectionTypes.map((type) => (
+
+
+ {type}
+
+
+ ))}
+
+
+
+ )
+ })}
+
+
;
+export type Sensor = z.infer
type SensorGroup = {
- sensorType: string;
- sensors: Sensor[];
- image?: string;
-};
+ sensorType: string
+ sensors: Sensor[]
+ image?: string
+}
export function SensorSelectionStep() {
- const { watch, setValue } = useFormContext();
- const selectedDevice = watch("model");
- const [selectedDeviceModel, setSelectedDeviceModel] = useState(
- null,
- );
- const [sensors, setSensors] = useState([]);
- const [selectedSensors, setSelectedSensors] = useState([]);
-
- useEffect(() => {
- if (selectedDevice) {
- const deviceModel = selectedDevice.startsWith("homeV2")
- ? "senseBoxHomeV2"
- : selectedDevice;
- setSelectedDeviceModel(deviceModel);
-
- if (deviceModel !== "custom") {
- const fetchedSensors = getSensorsForModel(deviceModel);
- setSensors(fetchedSensors);
- } else {
- setSensors([]);
- }
-
- }
- }, [selectedDevice]);
-
- useEffect(() => {
- const savedSelectedSensors = watch("selectedSensors") || [];
- setSelectedSensors(savedSelectedSensors);
- }, [watch]);
-
- const groupSensorsByType = (sensors: Sensor[]): SensorGroup[] => {
- const grouped = sensors.reduce(
- (acc, sensor) => {
- if (!acc[sensor.sensorType]) {
- acc[sensor.sensorType] = [];
- }
- acc[sensor.sensorType].push(sensor);
- return acc;
- },
- {} as Record,
- );
-
- return Object.entries(grouped).map(([sensorType, sensors]) => ({
- sensorType,
- sensors,
- image: sensors.find((sensor) => sensor.image)?.image,
- }));
- };
-
- const sensorGroups = groupSensorsByType(sensors);
-
- const handleGroupToggle = (group: SensorGroup) => {
- const isGroupSelected = group.sensors.every((sensor) =>
- selectedSensors.some(
- (s) => s.title === sensor.title && s.sensorType === sensor.sensorType,
- ),
- );
-
- const updatedSensors = isGroupSelected
- ? selectedSensors.filter(
- (s) =>
- !group.sensors.some(
- (sensor) =>
- s.title === sensor.title && s.sensorType === sensor.sensorType,
- ),
- )
- : [
- ...selectedSensors,
- ...group.sensors.filter(
- (sensor) =>
- !selectedSensors.some(
- (s) =>
- s.title === sensor.title &&
- s.sensorType === sensor.sensorType,
- ),
- ),
- ];
-
- setSelectedSensors(updatedSensors);
- setValue("selectedSensors", updatedSensors);
- };
-
- const handleSensorToggle = (sensor: Sensor) => {
- const isAlreadySelected = selectedSensors.some(
- (s) => s.title === sensor.title && s.sensorType === sensor.sensorType,
- );
-
- const updatedSensors = isAlreadySelected
- ? selectedSensors.filter(
- (s) =>
- !(s.title === sensor.title && s.sensorType === sensor.sensorType),
- )
- : [...selectedSensors, sensor];
-
- setSelectedSensors(updatedSensors);
- setValue("selectedSensors", updatedSensors);
- };
-
- if (!selectedDevice) {
- return Please select a device first.
;
- }
-
- if (selectedDevice === "custom") {
- return
-
-
- {sensorGroups.map((group) => {
- const isGroupSelected = group.sensors.every((sensor) =>
- selectedSensors.some(
- (s) =>
- s.title === sensor.title &&
- s.sensorType === sensor.sensorType,
- ),
- );
-
- return (
-
handleGroupToggle(group)
- : undefined
- }
- >
-
-
- {group.sensorType}
-
-
-
- {group.sensors.map((sensor) => {
- const isSelected = selectedSensors.some(
- (s) =>
- s.title === sensor.title &&
- s.sensorType === sensor.sensorType,
- );
-
- return (
- {
- e.stopPropagation();
- handleSensorToggle(sensor);
- }
- : undefined
- }
- >
- {sensor.title} ({sensor.unit})
-
- );
- })}
-
-
- {group.image && (
-
- )}
-
-
- );
- })}
-
-
-
(
+ null,
+ )
+ const [sensors, setSensors] = useState([])
+ const [selectedSensors, setSelectedSensors] = useState([])
+
+ useEffect(() => {
+ if (selectedDevice) {
+ const deviceModel = selectedDevice.startsWith('homeV2')
+ ? 'senseBoxHomeV2'
+ : selectedDevice
+ setSelectedDeviceModel(deviceModel)
+
+ if (deviceModel !== 'custom') {
+ const fetchedSensors = getSensorsForModel(deviceModel)
+ setSensors(fetchedSensors)
+ } else {
+ setSensors([])
+ }
+ }
+ }, [selectedDevice])
+
+ useEffect(() => {
+ const savedSelectedSensors = watch('selectedSensors') || []
+ setSelectedSensors(savedSelectedSensors)
+ }, [watch])
+
+ const groupSensorsByType = (sensors: Sensor[]): SensorGroup[] => {
+ const grouped = sensors.reduce(
+ (acc, sensor) => {
+ if (!acc[sensor.sensorType]) {
+ acc[sensor.sensorType] = []
+ }
+ acc[sensor.sensorType].push(sensor)
+ return acc
+ },
+ {} as Record,
+ )
+
+ return Object.entries(grouped).map(([sensorType, sensors]) => ({
+ sensorType,
+ sensors,
+ image: sensors.find((sensor) => sensor.image)?.image,
+ }))
+ }
+
+ const sensorGroups = groupSensorsByType(sensors)
+
+ const handleGroupToggle = (group: SensorGroup) => {
+ const isGroupSelected = group.sensors.every((sensor) =>
+ selectedSensors.some(
+ (s) => s.title === sensor.title && s.sensorType === sensor.sensorType,
+ ),
+ )
+
+ const updatedSensors = isGroupSelected
+ ? selectedSensors.filter(
+ (s) =>
+ !group.sensors.some(
+ (sensor) =>
+ s.title === sensor.title && s.sensorType === sensor.sensorType,
+ ),
+ )
+ : [
+ ...selectedSensors,
+ ...group.sensors.filter(
+ (sensor) =>
+ !selectedSensors.some(
+ (s) =>
+ s.title === sensor.title &&
+ s.sensorType === sensor.sensorType,
+ ),
+ ),
+ ]
+
+ setSelectedSensors(updatedSensors)
+ setValue('selectedSensors', updatedSensors)
+ }
+
+ const handleSensorToggle = (sensor: Sensor) => {
+ const isAlreadySelected = selectedSensors.some(
+ (s) => s.title === sensor.title && s.sensorType === sensor.sensorType,
+ )
+
+ const updatedSensors = isAlreadySelected
+ ? selectedSensors.filter(
+ (s) =>
+ !(s.title === sensor.title && s.sensorType === sensor.sensorType),
+ )
+ : [...selectedSensors, sensor]
+
+ setSelectedSensors(updatedSensors)
+ setValue('selectedSensors', updatedSensors)
+ }
+
+ if (!selectedDevice) {
+ return Please select a device first.
+ }
+
+ if (selectedDevice === 'custom') {
+ return
+
+
+ {sensorGroups.map((group) => {
+ const isGroupSelected = group.sensors.every((sensor) =>
+ selectedSensors.some(
+ (s) =>
+ s.title === sensor.title &&
+ s.sensorType === sensor.sensorType,
+ ),
+ )
+
+ return (
+
handleGroupToggle(group)
+ : undefined
+ }
+ >
+
+
+ {group.sensorType}
+
+
+
+ {group.sensors.map((sensor) => {
+ const isSelected = selectedSensors.some(
+ (s) =>
+ s.title === sensor.title &&
+ s.sensorType === sensor.sensorType,
+ )
+
+ return (
+ {
+ e.stopPropagation()
+ handleSensorToggle(sensor)
+ }
+ : undefined
+ }
+ >
+ {sensor.title} ({sensor.unit})
+
+ )
+ })}
+
+
+ {group.image && (
+
+ )}
+
+
+ )
+ })}
+
+
+
-
- {sections.map((section, index) => (
-
-
-
- {section.icon}
-
- {section.title}
-
-
-
- {section.data.map((item: any, idx: any) => (
-
- {item.label}:
-
- {item.value}
-
-
- ))}
-
-
- ))}
-
-
+
+ {sections.map((section, index) => (
+
+
+
+ {section.icon}
+
+ {section.title}
+
+
+
+ {section.data.map((item: any, idx: any) => (
+
+ {item.label}:
+
+ {item.value}
+
+
+ ))}
+
+
+ ))}
+
+
;
-}) => React.JSX.Element | null;
+ error: ErrorResponse
+ params: Record
+}) => React.JSX.Element | null
export function GeneralErrorBoundary({
- defaultStatusHandler = ({ error }) => (
-
- {error.status} {error.data}
-
- ),
- statusHandlers,
- unexpectedErrorHandler = (error) => {getErrorMessage(error)}
,
+ defaultStatusHandler = ({ error }) => (
+
+ {error.status} {error.data}
+
+ ),
+ statusHandlers,
+ unexpectedErrorHandler = (error) => {getErrorMessage(error)}
,
}: {
- defaultStatusHandler?: StatusHandler;
- statusHandlers?: Record;
- unexpectedErrorHandler?: (error: unknown) => React.JSX.Element | null;
+ defaultStatusHandler?: StatusHandler
+ statusHandlers?: Record
+ unexpectedErrorHandler?: (error: unknown) => React.JSX.Element | null
}) {
- const error = useRouteError();
- const params = useParams();
+ const error = useRouteError()
+ const params = useParams()
- if (typeof document !== "undefined") {
- console.error(error);
- }
+ if (typeof document !== 'undefined') {
+ console.error(error)
+ }
- return (
-
- {isRouteErrorResponse(error)
- ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
- error,
- params,
- })
- : unexpectedErrorHandler(error)}
-
- );
+ return (
+
+ {isRouteErrorResponse(error)
+ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+ error,
+ params,
+ })
+ : unexpectedErrorHandler(error)}
+
+ )
}
diff --git a/app/components/error-message.tsx b/app/components/error-message.tsx
index e8c1adbf0..266189246 100644
--- a/app/components/error-message.tsx
+++ b/app/components/error-message.tsx
@@ -1,29 +1,27 @@
-import { X } from "lucide-react";
-import { useNavigate } from "react-router";
-import { Alert, AlertDescription } from "./ui/alert";
+import { X } from 'lucide-react'
+import { useNavigate } from 'react-router'
+import { Alert, AlertDescription } from './ui/alert'
export default function ErrorMessage() {
- let navigate = useNavigate();
- const goBack = () => navigate(-1);
+ let navigate = useNavigate()
+ const goBack = () => navigate(-1)
- return (
-
-
- {
- void goBack();
- }}
- />
-
-
- Oh no, this shouldn't happen, but don't worry, our team is on the case!
-
-
-
- Add some info here.
-
-
-
- );
+ return (
+
+
+ {
+ void goBack()
+ }}
+ />
+
+
+ Oh no, this shouldn't happen, but don't worry, our team is on the case!
+
+
+ Add some info here.
+
+
+ )
}
diff --git a/app/components/header/download.tsx b/app/components/header/download.tsx
index 1f6a34188..f8d0c5aed 100644
--- a/app/components/header/download.tsx
+++ b/app/components/header/download.tsx
@@ -1,4 +1,4 @@
-import {type BBox } from 'geojson'
+import { type BBox } from 'geojson'
import { Download as DownloadIcon } from 'lucide-react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
@@ -7,321 +7,421 @@ import { Form, useNavigation, useActionData } from 'react-router'
import { Button } from '../ui/button'
import { Checkbox } from '../ui/checkbox'
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
} from '../ui/dialog'
import { Input } from '../ui/input'
import { Label } from '../ui/label'
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
} from '../ui/select'
import { toast } from '../ui/use-toast'
// Custom Loading Animation Component
const PulsingDownloadAnimation = () => {
- const { t } = useTranslation('download')
- return (
-
-
- {/* Main download icon */}
-
-
- {/* Animated ripples */}
-
-
-
- {/* Small data points moving toward the download icon */}
-
-
-
-
-
{t('processingData')}
-
+
+ {/* Main download icon */}
+
+
+ {/* Animated ripples */}
+
+
+
+ {/* Small data points moving toward the download icon */}
+
+
+
+
+
+ {t('processingData')}
+
+
-
-
-
{t('readyToDownload')}
-
+
+
+
{t('readyToDownload')}
+
(null)
-
- // Update download ready state when actionData changes
- useEffect(() => {
- if (actionData && actionData.error) {
- setErrorMessage(actionData.error)
- } else {
- setErrorMessage(null)
- // Only set download ready if there's no error
- if (actionData) {
- setIsDownloadReady(true)
- setShowReadyAnimation(true)
- }
- }
- }, [actionData])
+ const [isDownloadReady, setIsDownloadReady] = useState(false)
+ const [showReadyAnimation, setShowReadyAnimation] = useState(false)
+ const [errorMessage, setErrorMessage] = useState(null)
- // Reset download ready state when format changes
- const [format, setFormat] = useState('csv')
- const handleFormatChange = (value: string) => {
- setFormat(value)
- setShowReadyAnimation(false)
- setIsDownloadReady(false)
- setErrorMessage(null);
- }
+ // Update download ready state when actionData changes
+ useEffect(() => {
+ if (actionData && actionData.error) {
+ setErrorMessage(actionData.error)
+ } else {
+ setErrorMessage(null)
+ // Only set download ready if there's no error
+ if (actionData) {
+ setIsDownloadReady(true)
+ setShowReadyAnimation(true)
+ }
+ }
+ }, [actionData])
- const [downloadStarted, setDownloadStarted] = useState(false)
+ // Reset download ready state when format changes
+ const [format, setFormat] = useState('csv')
+ const handleFormatChange = (value: string) => {
+ setFormat(value)
+ setShowReadyAnimation(false)
+ setIsDownloadReady(false)
+ setErrorMessage(null)
+ }
-// Add this function to handle download start
-const handleDownloadStart = () => {
- const Delay = 3500;
- setDownloadStarted(true)
- setShowReadyAnimation(false)
- toast({
- description: t('toast'),
- duration: Delay,
- variant:"success"
- })
-
- // Reset the download started state after a delay
- setTimeout(() => {
- setDownloadStarted(false)
- setOpen(false)
- }, Delay)
-}
+ const [downloadStarted, setDownloadStarted] = useState(false)
+
+ // Add this function to handle download start
+ const handleDownloadStart = () => {
+ const Delay = 3500
+ setDownloadStarted(true)
+ setShowReadyAnimation(false)
+ toast({
+ description: t('toast'),
+ duration: Delay,
+ variant: 'success',
+ })
- // Filter devices inside the current bounds
- const bounds = mapRef?.getMap().getBounds().toArray().flat() as BBox ?? undefined;
- const devicesInBounds =
- bounds && bounds.length === 4
- ? devices.filter((device: any) => {
- // Ensure the device has coordinates
-
- if (!device.geometry || !device.geometry.coordinates) return false
+ // Reset the download started state after a delay
+ setTimeout(() => {
+ setDownloadStarted(false)
+ setOpen(false)
+ }, Delay)
+ }
- const [longitude, latitude] = device.geometry.coordinates
+ // Filter devices inside the current bounds
+ const bounds =
+ (mapRef?.getMap().getBounds().toArray().flat() as BBox) ?? undefined
+ const devicesInBounds =
+ bounds && bounds.length === 4
+ ? devices.filter((device: any) => {
+ // Ensure the device has coordinates
- // Check if bounds are defined properly
- const [minLon, minLat] = bounds.slice(0, 2) // [minLongitude, minLatitude]
- const [maxLon, maxLat] = bounds.slice(2, 4) // [maxLongitude, maxLatitude]
+ if (!device.geometry || !device.geometry.coordinates) return false
- return (
- longitude >= minLon &&
- longitude <= maxLon &&
- latitude >= minLat &&
- latitude <= maxLat
- )
- })
- : []
-
- let deviceIDs: Array = [];
- devicesInBounds.map((device: any) => {
- deviceIDs.push(device.properties.id);
- })
-
- const [aggregate, setAggregate] = useState('10m')
- const [fields, setFields] = useState({
- title: true,
- unit: true,
- value: true,
- timestamp: true,
- })
- const [open, setOpen] = useState(false)
- const handleFieldChange = (field: keyof typeof fields) => {
- setFields((prev) => ({ ...prev, [field]: !prev[field] }))
- setIsDownloadReady(false)
- setErrorMessage(null);
- setShowReadyAnimation(false);
- }
-
- return (
- {
- setOpen(!open);
- setIsDownloadReady(false);
- setErrorMessage(null);
- setShowReadyAnimation(false);}}>
- setOpen(true)}>
-
-
-
-
-
-
-
- {t('downloadOptions')}
-
- {t('downloadDescription')}
-
-
-
-
-
- )
-}
\ No newline at end of file
+ const [longitude, latitude] = device.geometry.coordinates
+
+ // Check if bounds are defined properly
+ const [minLon, minLat] = bounds.slice(0, 2) // [minLongitude, minLatitude]
+ const [maxLon, maxLat] = bounds.slice(2, 4) // [maxLongitude, maxLatitude]
+
+ return (
+ longitude >= minLon &&
+ longitude <= maxLon &&
+ latitude >= minLat &&
+ latitude <= maxLat
+ )
+ })
+ : []
+
+ let deviceIDs: Array = []
+ devicesInBounds.map((device: any) => {
+ deviceIDs.push(device.properties.id)
+ })
+
+ const [aggregate, setAggregate] = useState('10m')
+ const [fields, setFields] = useState({
+ title: true,
+ unit: true,
+ value: true,
+ timestamp: true,
+ })
+ const [open, setOpen] = useState(false)
+ const handleFieldChange = (field: keyof typeof fields) => {
+ setFields((prev) => ({ ...prev, [field]: !prev[field] }))
+ setIsDownloadReady(false)
+ setErrorMessage(null)
+ setShowReadyAnimation(false)
+ }
+
+ return (
+ {
+ setOpen(!open)
+ setIsDownloadReady(false)
+ setErrorMessage(null)
+ setShowReadyAnimation(false)
+ }}
+ >
+ setOpen(true)}
+ >
+
+
+
+
+
+
+
+ {t('downloadOptions')}
+ {t('downloadDescription')}
+
+
+
+
+ )
+}
diff --git a/app/components/header/home/index.tsx b/app/components/header/home/index.tsx
index d197fb694..80e597b2b 100644
--- a/app/components/header/home/index.tsx
+++ b/app/components/header/home/index.tsx
@@ -1,22 +1,22 @@
-import { Link } from "react-router";
+import { Link } from 'react-router'
export default function Home() {
- return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
();
- return (
-
-
-
-
-
-
-
- {/* {data?.user?.email ?
: null} */}
-
-
-
();
+ return (
+
+
+
+
+
+
+
+ {/* {data?.user?.email ?
: null} */}
+
+
+
-
-
-
- {!user ? (
-
-
-
-
-
-
- {!user ? (
-
-
{t("title")}
-
- {t("subtitle")}
-
-
-
- {/* Max Mustermann */}
- {user?.name}
-
-
- {user?.email}
-
-
-
- {user && (
-
- {navigation.state === "loading" && (
-
-
- )}
- {!(matches[1].pathname === "/explore") && (
-
- {t("explore_label")}
-
-
- )}
- {!(matches[1].pathname === "/profile") && (
-
-
-
- )}
+ return (
+
+
+
+
+ {!user ? (
+
+
+
+
+
+
+ {!user ? (
+
+
{t('title')}
+
+ {t('subtitle')}
+
+
+
+ {/* Max Mustermann */}
+ {user?.name}
+
+
+ {user?.email}
+
+
+
+ {user && (
+
+ {navigation.state === 'loading' && (
+
+
+ )}
+ {!(matches[1].pathname === '/explore') && (
+
+ {t('explore_label')}
+
+
+ )}
+ {!(matches[1].pathname === '/profile') && (
+
+
+
+ )}
- {!(matches[1].pathname === "/settings") && (
-
- {t("settings_label")}
-
-
- )}
-
-
- {t("tutorials_label")}
-
-
+ {!(matches[1].pathname === '/settings') && (
+
+ {t('settings_label')}
+
+
+ )}
+
+
+ {t('tutorials_label')}
+
+
-
- {t("api_docs_label")}
-
-
-
-
-
-
- {t("data_protection_label")}
-
-
-
-
+
+
+ {t('api_docs_label')}
+
+
+
+
+
+
+ {t('data_protection_label')}
+
+
+
+
-
- e.preventDefault()}
- className="cursor-pointer"
- >
- {t("donate_label")}
-
-
-
+
+ e.preventDefault()}
+ className="cursor-pointer"
+ >
+ {t('donate_label')}
+
+
+
-
+
-
- {
- // Prevent dropdown from closing
- e.preventDefault();
- }}
- >
- {!user ? (
-
- {t("login_label")}
-
-
- ) : (
-
- )}
-
-
-
-
- );
+
+ {
+ // Prevent dropdown from closing
+ e.preventDefault()
+ }}
+ >
+ {!user ? (
+
+ {t('login_label')}
+
+
+ ) : (
+
+ )}
+
+
+
+
+ )
}
diff --git a/app/components/header/menu/my-devices/index.tsx b/app/components/header/menu/my-devices/index.tsx
index ba8ec7e13..3978d38cd 100644
--- a/app/components/header/menu/my-devices/index.tsx
+++ b/app/components/header/menu/my-devices/index.tsx
@@ -1,32 +1,32 @@
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog'
interface MyDevicesDialogProps {
- isMyDevicesDialogOpen: boolean;
- setIsMyDevicesDialogOpen: (value: boolean) => void;
+ isMyDevicesDialogOpen: boolean
+ setIsMyDevicesDialogOpen: (value: boolean) => void
}
export default function MyDevicesDialog(props: MyDevicesDialogProps) {
- return (
-
-
-
-
- My Devices
-
- Here you can see all your devices.
-
-
-
-
-
- );
+ return (
+
+
+
+
+ My Devices
+
+ Here you can see all your devices.
+
+
+
+
+
+ )
}
diff --git a/app/components/header/menu/profile/index.tsx b/app/components/header/menu/profile/index.tsx
index 7ca83bbde..752a83cd4 100644
--- a/app/components/header/menu/profile/index.tsx
+++ b/app/components/header/menu/profile/index.tsx
@@ -1,32 +1,32 @@
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog'
interface ProfileDialogProps {
- isProfileDialogOpen: boolean;
- setIsProfileDialogOpen: (value: boolean) => void;
+ isProfileDialogOpen: boolean
+ setIsProfileDialogOpen: (value: boolean) => void
}
export default function ProfileDialog(props: ProfileDialogProps) {
- return (
-
-
-
-
- Profile
-
- Here you can edit your profile information.
-
-
-
-
-
- );
+ return (
+
+
+
+
+ Profile
+
+ Here you can edit your profile information.
+
+
+
+
+
+ )
}
diff --git a/app/components/header/menu/user-settings/index.tsx b/app/components/header/menu/user-settings/index.tsx
index bf34376ad..0ebdb3aa1 100644
--- a/app/components/header/menu/user-settings/index.tsx
+++ b/app/components/header/menu/user-settings/index.tsx
@@ -1,32 +1,32 @@
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog'
interface UserSettingsDialogProps {
- isSettingsDialogOpen: boolean;
- setIsSettingsDialogOpen: (value: boolean) => void;
+ isSettingsDialogOpen: boolean
+ setIsSettingsDialogOpen: (value: boolean) => void
}
export default function UserSettingsDialog(props: UserSettingsDialogProps) {
- return (
-
-
-
-
- Settings
-
- Here you can edit your user settings
-
-
-
-
-
- );
+ return (
+
+
+
+
+ Settings
+
+ Here you can edit your user settings
+
+
+
+
+
+ )
}
diff --git a/app/components/header/nav-bar/filter-options/filter-options.tsx b/app/components/header/nav-bar/filter-options/filter-options.tsx
index 96880cbf8..874850095 100644
--- a/app/components/header/nav-bar/filter-options/filter-options.tsx
+++ b/app/components/header/nav-bar/filter-options/filter-options.tsx
@@ -1,177 +1,171 @@
-import { X } from "lucide-react";
-import { useContext, useEffect, useState } from "react";
-import { useSearchParams, useNavigation } from "react-router";
-import { NavbarContext } from "..";
-import Spinner from "../../../spinner";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
-import { type DeviceExposureType, type DeviceStatusType } from "~/schema/enum";
+import { X } from 'lucide-react'
+import { useContext, useEffect, useState } from 'react'
+import { useSearchParams, useNavigation } from 'react-router'
+import { NavbarContext } from '..'
+import Spinner from '../../../spinner'
+import { Button } from '~/components/ui/button'
+import { Label } from '~/components/ui/label'
+import { ToggleGroup, ToggleGroupItem } from '~/components/ui/toggle-group'
+import { type DeviceExposureType, type DeviceStatusType } from '~/schema/enum'
export default function FilterOptions() {
- const { setOpen } = useContext(NavbarContext);
- const [searchParams, setSearchParams] = useSearchParams();
- const navigation = useNavigation();
+ const { setOpen } = useContext(NavbarContext)
+ const [searchParams, setSearchParams] = useSearchParams()
+ const navigation = useNavigation()
- const [exposureVal, setExposureVal] = useState(
- (searchParams.get("exposure") as DeviceExposureType) ?? "all",
- );
- const [statusVal, setStatusVal] = useState(
- (searchParams.get("status") as DeviceStatusType) ?? "all",
- );
+ const [exposureVal, setExposureVal] = useState(
+ (searchParams.get('exposure') as DeviceExposureType) ?? 'all',
+ )
+ const [statusVal, setStatusVal] = useState(
+ (searchParams.get('status') as DeviceStatusType) ?? 'all',
+ )
- const [tempExposureVal, setTempExposureVal] = useState(exposureVal);
- const [tempStatusVal, setTempStatusVal] = useState(statusVal);
- const [isChanged, setIsChanged] = useState(false);
+ const [tempExposureVal, setTempExposureVal] = useState(exposureVal)
+ const [tempStatusVal, setTempStatusVal] = useState(statusVal)
+ const [isChanged, setIsChanged] = useState(false)
- useEffect(() => {
- setExposureVal(
- (searchParams.get("exposure") as DeviceExposureType) ?? "all",
- );
- setStatusVal((searchParams.get("status") as DeviceStatusType) ?? "all");
- setTempExposureVal(
- (searchParams.get("exposure") as DeviceExposureType) ?? "all",
- );
- setTempStatusVal((searchParams.get("status") as DeviceStatusType) ?? "all");
- }, [searchParams]);
+ useEffect(() => {
+ setExposureVal(
+ (searchParams.get('exposure') as DeviceExposureType) ?? 'all',
+ )
+ setStatusVal((searchParams.get('status') as DeviceStatusType) ?? 'all')
+ setTempExposureVal(
+ (searchParams.get('exposure') as DeviceExposureType) ?? 'all',
+ )
+ setTempStatusVal((searchParams.get('status') as DeviceStatusType) ?? 'all')
+ }, [searchParams])
- useEffect(() => {
- setIsChanged(
- tempExposureVal !== exposureVal || tempStatusVal !== statusVal,
- );
- }, [tempExposureVal, tempStatusVal, exposureVal, statusVal]);
+ useEffect(() => {
+ setIsChanged(tempExposureVal !== exposureVal || tempStatusVal !== statusVal)
+ }, [tempExposureVal, tempStatusVal, exposureVal, statusVal])
- const handleApplyChanges = () => {
- setExposureVal(tempExposureVal);
- setStatusVal(tempStatusVal);
- searchParams.set("exposure", tempExposureVal);
- searchParams.set("status", tempStatusVal);
- setSearchParams(searchParams);
- setIsChanged(false);
- setOpen(false);
- };
+ const handleApplyChanges = () => {
+ setExposureVal(tempExposureVal)
+ setStatusVal(tempStatusVal)
+ searchParams.set('exposure', tempExposureVal)
+ searchParams.set('status', tempStatusVal)
+ setSearchParams(searchParams)
+ setIsChanged(false)
+ setOpen(false)
+ }
- const handleResetFilters = () => {
- setTempExposureVal("all");
- setTempStatusVal("all");
- searchParams.set("exposure", "all");
- searchParams.set("status", "all");
- setSearchParams(searchParams);
- setIsChanged(false);
- };
+ const handleResetFilters = () => {
+ setTempExposureVal('all')
+ setTempStatusVal('all')
+ searchParams.set('exposure', 'all')
+ searchParams.set('status', 'all')
+ setSearchParams(searchParams)
+ setIsChanged(false)
+ }
- return (
-
- {navigation.state === "loading" && (
-
-
- )}
-
-
- Exposure:
- {
- if (values.length === 0) {
- setTempExposureVal("all");
- } else if (
- values.includes("all") &&
- values.indexOf("all") === 0
- ) {
- const filteredValues = values.filter(
- (value) => value !== "all",
- );
- setTempExposureVal(
- filteredValues.join(",") as DeviceExposureType | "all",
- );
- } else if (values.includes("all")) {
- setTempExposureVal("all");
- } else {
- setTempExposureVal(
- values.join(",") as DeviceExposureType | "all",
- );
- }
- }}
- >
-
- all
-
-
- indoor
-
-
- outdoor
-
-
- mobile
-
-
-
-
- Status:
- {
- if (values.length === 0) {
- setTempStatusVal("all");
- } else if (
- values.includes("all") &&
- values.indexOf("all") === 0
- ) {
- const filteredValues = values.filter(
- (value) => value !== "all",
- );
- setTempStatusVal(
- filteredValues.join(",") as DeviceStatusType | "all",
- );
- } else if (values.includes("all")) {
- setTempStatusVal("all");
- } else {
- setTempStatusVal(values.join(",") as DeviceStatusType | "all");
- }
- }}
- >
-
- all
-
-
- active
-
-
- inactive
-
-
- old
-
-
-
-
-
-
-
-
-
-
- Apply
-
-
-
+ {navigation.state === 'loading' && (
+
+
+ )}
+
+
+ Exposure:
+ {
+ if (values.length === 0) {
+ setTempExposureVal('all')
+ } else if (
+ values.includes('all') &&
+ values.indexOf('all') === 0
+ ) {
+ const filteredValues = values.filter((value) => value !== 'all')
+ setTempExposureVal(
+ filteredValues.join(',') as DeviceExposureType | 'all',
+ )
+ } else if (values.includes('all')) {
+ setTempExposureVal('all')
+ } else {
+ setTempExposureVal(
+ values.join(',') as DeviceExposureType | 'all',
+ )
+ }
+ }}
+ >
+
+ all
+
+
+ indoor
+
+
+ outdoor
+
+
+ mobile
+
+
+
+
+ Status:
+ {
+ if (values.length === 0) {
+ setTempStatusVal('all')
+ } else if (
+ values.includes('all') &&
+ values.indexOf('all') === 0
+ ) {
+ const filteredValues = values.filter((value) => value !== 'all')
+ setTempStatusVal(
+ filteredValues.join(',') as DeviceStatusType | 'all',
+ )
+ } else if (values.includes('all')) {
+ setTempStatusVal('all')
+ } else {
+ setTempStatusVal(values.join(',') as DeviceStatusType | 'all')
+ }
+ }}
+ >
+
+ all
+
+
+ active
+
+
+ inactive
+
+
+ old
+
+
+
+
+
+
+
+
+
+
+ Apply
+
+
+
(
- searchParams.getAll("tags").flatMap((t) => t.split(",")),
- );
- const [newTag, setNewTag] = useState("");
- const [isChanged, setIsChanged] = useState(false);
+ const [tags, setTags] = useState(
+ searchParams.getAll('tags').flatMap((t) => t.split(',')),
+ )
+ const [newTag, setNewTag] = useState('')
+ const [isChanged, setIsChanged] = useState(false)
- useEffect(() => {
- setTags(searchParams.getAll("tags").flatMap((t) => t.split(",")));
- }, [searchParams]);
+ useEffect(() => {
+ setTags(searchParams.getAll('tags').flatMap((t) => t.split(',')))
+ }, [searchParams])
- useEffect(() => {
- const currentTags = searchParams
- .getAll("tags")
- .flatMap((t) => t.split(","));
- setIsChanged(JSON.stringify(tags) !== JSON.stringify(currentTags));
- }, [tags, searchParams]);
+ useEffect(() => {
+ const currentTags = searchParams.getAll('tags').flatMap((t) => t.split(','))
+ setIsChanged(JSON.stringify(tags) !== JSON.stringify(currentTags))
+ }, [tags, searchParams])
- const handleApplyChanges = () => {
- searchParams.delete("tags");
- if (tags.length > 0) {
- // Join all tags into a single string separated by commas
- searchParams.set("tags", tags.join(","));
- }
- setSearchParams(searchParams);
- setIsChanged(false);
- setOpen(false);
- };
+ const handleApplyChanges = () => {
+ searchParams.delete('tags')
+ if (tags.length > 0) {
+ // Join all tags into a single string separated by commas
+ searchParams.set('tags', tags.join(','))
+ }
+ setSearchParams(searchParams)
+ setIsChanged(false)
+ setOpen(false)
+ }
- const handleResetFilters = () => {
- setTags([]);
- searchParams.delete("tags");
- setSearchParams(searchParams);
- setIsChanged(false);
- };
+ const handleResetFilters = () => {
+ setTags([])
+ searchParams.delete('tags')
+ setSearchParams(searchParams)
+ setIsChanged(false)
+ }
- const handleAddTag = () => {
- if (newTag && !tags.includes(newTag)) {
- setTags([...tags, newTag]);
- setNewTag("");
- }
- };
+ const handleAddTag = () => {
+ if (newTag && !tags.includes(newTag)) {
+ setTags([...tags, newTag])
+ setNewTag('')
+ }
+ }
- const handleRemoveTag = (tagToRemove: string) => {
- setTags(tags.filter((tag) => tag !== tagToRemove));
- };
+ const handleRemoveTag = (tagToRemove: string) => {
+ setTags(tags.filter((tag) => tag !== tagToRemove))
+ }
- return (
-
- {navigation.state === "loading" && (
-
-
- )}
-
-
- Tags:
-
-
-
setNewTag(e.target.value)}
- onKeyPress={(e) => {
- if (e.key === "Enter") {
- e.preventDefault();
- handleAddTag();
- }
- }}
- />
-
-
-
-
- {tags.map((tag, index) => (
-
- {tag}
- handleRemoveTag(tag)}
- className="ml-2 text-xs"
- aria-label={`Remove ${tag} tag`}
- >
-
-
- ))}
-
-
-
-
-
-
-
-
- Apply
-
-
-
+ {navigation.state === 'loading' && (
+
+
+ )}
+
+
+ Tags:
+
+
+
setNewTag(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault()
+ handleAddTag()
+ }
+ }}
+ />
+
+
+
+
+ {tags.map((tag, index) => (
+
+ {tag}
+ handleRemoveTag(tag)}
+ className="ml-2 text-xs"
+ aria-label={`Remove ${tag} tag`}
+ >
+
+
+ ))}
+
+
+
+
+
+
+
+
+ Apply
+
+
+
(null);
- const [searchString, setSearchString] = useState("");
+ const [open, setOpen] = useState(false)
+ const inputRef = useRef(null)
+ const [searchString, setSearchString] = useState('')
- const { osem: mapRef } = useMap();
+ const { osem: mapRef } = useMap()
- const { t } = useTranslation("search");
+ const { t } = useTranslation('search')
- useEffect(() => {
- if (mapRef) {
- mapRef.on("click", () => setOpen(false));
- }
- }, [mapRef]);
+ useEffect(() => {
+ if (mapRef) {
+ mapRef.on('click', () => setOpen(false))
+ }
+ }, [mapRef])
- // register keyboard shortcuts
- useEffect(() => {
- const down = (e: KeyboardEvent) => {
- if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
- e.preventDefault();
- setOpen((prevState) => !prevState);
- }
- if (e.key === "Escape") {
- e.preventDefault();
- setOpen(false);
- }
- };
- document.addEventListener("keydown", down);
- return () => document.removeEventListener("keydown", down);
- }, []);
+ // register keyboard shortcuts
+ useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ setOpen((prevState) => !prevState)
+ }
+ if (e.key === 'Escape') {
+ e.preventDefault()
+ setOpen(false)
+ }
+ }
+ document.addEventListener('keydown', down)
+ return () => document.removeEventListener('keydown', down)
+ }, [])
- // focus input when opening
- useEffect(() => {
- if (open) {
- inputRef.current?.focus();
- } else {
- inputRef.current?.blur();
- setSearchString("");
- }
- }, [open]);
+ // focus input when opening
+ useEffect(() => {
+ if (open) {
+ inputRef.current?.focus()
+ } else {
+ inputRef.current?.blur()
+ setSearchString('')
+ }
+ }, [open])
- const isDesktop = useMediaQuery("(min-width: 768px)");
+ const isDesktop = useMediaQuery('(min-width: 768px)')
- return (
-
-
-
-
-
- ctrl + K
-
- )}
- {open && (
- {
- setSearchString("");
- setOpen(false);
- inputRef.current?.blur();
- }}
- className="h-6"
- />
- )}
-
-
-
- {open && (
-
-
- )}
-
-
-
- {!open && isDesktop && (
-
-
- )}
-
-
+
+
+
+
+ ctrl + K
+
+ )}
+ {open && (
+ {
+ setSearchString('')
+ setOpen(false)
+ inputRef.current?.blur()
+ }}
+ className="h-6"
+ />
+ )}
+
+
+
+ {open && (
+
+
+ )}
+
+
+
+ {!open && isDesktop && (
+
+
+ )}
+
+
Coming soon...
,
- },
- {
- title: "Phänomen",
- icon: IceCream2Icon,
- color: "bg-slate-500",
- component: Coming soon...
//Coming soon...
,
+ },
+ {
+ title: 'Phänomen',
+ icon: IceCream2Icon,
+ color: 'bg-slate-500',
+ component: Coming soon...
, //
-
- {sections.map((section, index) => (
-
{
- setCursor(index);
- }}
- >
- {section.title}
-
- ))}
-
-
{sections[cursor].component}
-
+
+ {sections.map((section, index) => (
+
{
+ setCursor(index)
+ }}
+ >
+ {section.title}
+
+ ))}
+
+
{sections[cursor].component}
+
();
- // const { t } = useTranslation("navbar");
- const loaderData = useLoaderData();
- const navigation = useNavigation();
- const [searchParams, setSearchParams] = useSearchParams();
- const [selectedCheckboxes, setSelectedCheckboxes] = useState([]); // Added state for selected checkboxes
+ const data = useLoaderData()
+ // const { t } = useTranslation("navbar");
+ const loaderData = useLoaderData()
+ const navigation = useNavigation()
+ const [searchParams, setSearchParams] = useSearchParams()
+ const [selectedCheckboxes, setSelectedCheckboxes] = useState([]) // Added state for selected checkboxes
- useEffect(() => {
- // When URL parameters change, update selected checkboxes accordingly
- const phenomenonParam = searchParams.get("phenomenon") || "all";
- const phenomenonArray =
- phenomenonParam === "all" ? [] : phenomenonParam.split(",");
- setSelectedCheckboxes(phenomenonArray);
- }, [searchParams]);
+ useEffect(() => {
+ // When URL parameters change, update selected checkboxes accordingly
+ const phenomenonParam = searchParams.get('phenomenon') || 'all'
+ const phenomenonArray =
+ phenomenonParam === 'all' ? [] : phenomenonParam.split(',')
+ setSelectedCheckboxes(phenomenonArray)
+ }, [searchParams])
- const handleCheckboxChange = (slug: string) => {
- const updatedCheckboxes = selectedCheckboxes.includes(slug)
- ? selectedCheckboxes.filter((checkbox) => checkbox !== slug)
- : [...selectedCheckboxes, slug];
+ const handleCheckboxChange = (slug: string) => {
+ const updatedCheckboxes = selectedCheckboxes.includes(slug)
+ ? selectedCheckboxes.filter((checkbox) => checkbox !== slug)
+ : [...selectedCheckboxes, slug]
- setSelectedCheckboxes(updatedCheckboxes);
+ setSelectedCheckboxes(updatedCheckboxes)
- // Update URL search parameters
- if (updatedCheckboxes.length === 0) {
- searchParams.delete("phenomenon");
- } else {
- searchParams.set("phenomenon", updatedCheckboxes.join(","));
- }
- setSearchParams(searchParams);
- };
+ // Update URL search parameters
+ if (updatedCheckboxes.length === 0) {
+ searchParams.delete('phenomenon')
+ } else {
+ searchParams.set('phenomenon', updatedCheckboxes.join(','))
+ }
+ setSearchParams(searchParams)
+ }
- return (
-
- {navigation.state === "loading" && (
-
-
- )}
- {/*
+ return (
+
+ {navigation.state === 'loading' && (
+
+
+ )}
+ {/*
{loaderData.phenomena.map(
(
@@ -91,7 +94,7 @@ export function PhenomenonSelect() {
*/}
- Coming soon
- Coming soon
+ ["className"];
+ className?: React.HTMLAttributes['className']
- dateRange: DateRange | undefined;
- setDateRange: (date: DateRange | undefined) => void;
+ dateRange: DateRange | undefined
+ setDateRange: (date: DateRange | undefined) => void
- singleDate: Date | undefined;
- setSingleDate: (date: Date | undefined) => void;
+ singleDate: Date | undefined
+ setSingleDate: (date: Date | undefined) => void
- isDialogOpen: boolean;
- setIsDialogOpen: (open: boolean) => void;
+ isDialogOpen: boolean
+ setIsDialogOpen: (open: boolean) => void
- setIsHovered: (hovered: boolean) => void;
+ setIsHovered: (hovered: boolean) => void
- timeState: string | undefined;
- setTimeState: (value: string) => void;
+ timeState: string | undefined
+ setTimeState: (value: string) => void
- onChange: (timerange: any) => void;
- value: any;
+ onChange: (timerange: any) => void
+ value: any
}
export function TimeFilter(props: TimeFilterProps) {
- // const submit = useSubmit();
- // const [searchParams] = useSearchParams();
- const { toast } = useToast();
+ // const submit = useSubmit();
+ // const [searchParams] = useSearchParams();
+ const { toast } = useToast()
- const { t } = useTranslation("navbar");
- const userLocaleString = getUserLocale();
- const userLocale = userLocaleString === "de" ? de : enGB;
+ const { t } = useTranslation('navbar')
+ const userLocaleString = getUserLocale()
+ const userLocale = userLocaleString === 'de' ? de : enGB
- const today = new Date();
+ const today = new Date()
- return (
-
-
-
- props.setIsDialogOpen(true)}
- >
- Live
- ) : props.timeState === "pointintime" ? (
- props.singleDate ? (
- <>
- {format(
- props.singleDate,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}
-
- ) : (
- t("date_picker_label")
- )
- ) : props.timeState === "timeperiod" ? (
- props.dateRange?.from ? (
- props.dateRange.to ? (
- <>
- {format(
- props.dateRange.from,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}{" "}
- -{" "}
- {format(
- props.dateRange.to,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}
-
- ) : (
- format(
- props.dateRange.from,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )
- )
- ) : (
- t("date_range_picker_label")
- )
- ) : null}
-
-
- props.setIsHovered(false)}
- >
-
-
-
-
-
-
-
-
-
-
-
- {t("live_description")}
-
-
+
+
+
+
+
["className"];
+ className?: React.HTMLAttributes['className']
- dateRange: DateRange | undefined;
- setDateRange: (date: DateRange | undefined) => void;
+ dateRange: DateRange | undefined
+ setDateRange: (date: DateRange | undefined) => void
- singleDate: Date | undefined;
- setSingleDate: (date: Date | undefined) => void;
+ singleDate: Date | undefined
+ setSingleDate: (date: Date | undefined) => void
- isDialogOpen: boolean;
- setIsDialogOpen: (open: boolean) => void;
+ isDialogOpen: boolean
+ setIsDialogOpen: (open: boolean) => void
- setIsHovered: (hovered: boolean) => void;
+ setIsHovered: (hovered: boolean) => void
- timeState: string;
- setTimeState: (value: string) => void;
+ timeState: string
+ setTimeState: (value: string) => void
- onChange: (timerange: any) => void;
- value: any;
+ onChange: (timerange: any) => void
+ value: any
}
export function TimeFilter(props: TimeFilterProps) {
- // const submit = useSubmit();
- // const [searchParams] = useSearchParams();
- const { toast } = useToast();
+ // const submit = useSubmit();
+ // const [searchParams] = useSearchParams();
+ const { toast } = useToast()
- const { t } = useTranslation("navbar");
- const userLocaleString = getUserLocale();
- const userLocale = userLocaleString === "de" ? de : enGB;
+ const { t } = useTranslation('navbar')
+ const userLocaleString = getUserLocale()
+ const userLocale = userLocaleString === 'de' ? de : enGB
- const today = new Date();
+ const today = new Date()
- return (
-
-
-
-
-
-
-
-
-
-
-
- {t("live_description")}
-
-
+
+
+ )
}
diff --git a/app/components/header/nav-bar/use-keyboard-nav.tsx b/app/components/header/nav-bar/use-keyboard-nav.tsx
index 34b14832f..9a12b7a84 100644
--- a/app/components/header/nav-bar/use-keyboard-nav.tsx
+++ b/app/components/header/nav-bar/use-keyboard-nav.tsx
@@ -1,63 +1,63 @@
-import { type Key, useState, useEffect } from "react";
+import { type Key, useState, useEffect } from 'react'
export default function useKeyboardNav(
- initCursorVal: number = 0,
- cursorMin: number = 0,
- cursorMax: number = 0
+ initCursorVal: number = 0,
+ cursorMin: number = 0,
+ cursorMax: number = 0,
) {
- const useKeyPress = function (targetKey: Key) {
- const [keyPressed, setKeyPressed] = useState(false);
-
- useEffect(() => {
- const downHandler = ({ key }: { key: string }) => {
- if (key === targetKey) {
- setKeyPressed(true);
- }
- };
-
- const upHandler = ({ key }: { key: string }) => {
- if (key === targetKey) {
- setKeyPressed(false);
- }
- };
-
- window.addEventListener("keydown", downHandler);
- window.addEventListener("keyup", upHandler);
-
- return () => {
- window.removeEventListener("keydown", downHandler);
- window.removeEventListener("keyup", upHandler);
- };
- }, [targetKey]);
-
- return keyPressed;
- };
-
- const downPress = useKeyPress("ArrowDown");
- const upPress = useKeyPress("ArrowUp");
- const enterPress = useKeyPress("Enter");
- const controlPress = useKeyPress("Control");
- const metaPress = useKeyPress("Meta");
- const [cursor, setCursor] = useState(initCursorVal);
-
- useEffect(() => {
- if (downPress && cursor < cursorMax - 1) {
- setCursor(cursor + 1);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [downPress, cursorMax]);
- useEffect(() => {
- if (upPress && cursor > 0) {
- setCursor(cursor - 1);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [upPress, cursorMin]);
-
- return {
- cursor,
- setCursor,
- enterPress,
- controlPress,
- metaPress,
- };
+ const useKeyPress = function (targetKey: Key) {
+ const [keyPressed, setKeyPressed] = useState(false)
+
+ useEffect(() => {
+ const downHandler = ({ key }: { key: string }) => {
+ if (key === targetKey) {
+ setKeyPressed(true)
+ }
+ }
+
+ const upHandler = ({ key }: { key: string }) => {
+ if (key === targetKey) {
+ setKeyPressed(false)
+ }
+ }
+
+ window.addEventListener('keydown', downHandler)
+ window.addEventListener('keyup', upHandler)
+
+ return () => {
+ window.removeEventListener('keydown', downHandler)
+ window.removeEventListener('keyup', upHandler)
+ }
+ }, [targetKey])
+
+ return keyPressed
+ }
+
+ const downPress = useKeyPress('ArrowDown')
+ const upPress = useKeyPress('ArrowUp')
+ const enterPress = useKeyPress('Enter')
+ const controlPress = useKeyPress('Control')
+ const metaPress = useKeyPress('Meta')
+ const [cursor, setCursor] = useState(initCursorVal)
+
+ useEffect(() => {
+ if (downPress && cursor < cursorMax - 1) {
+ setCursor(cursor + 1)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [downPress, cursorMax])
+ useEffect(() => {
+ if (upPress && cursor > 0) {
+ setCursor(cursor - 1)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [upPress, cursorMin])
+
+ return {
+ cursor,
+ setCursor,
+ enterPress,
+ controlPress,
+ metaPress,
+ }
}
diff --git a/app/components/header/notification/index.tsx b/app/components/header/notification/index.tsx
index c00ef1b8f..2ff3b2fe9 100644
--- a/app/components/header/notification/index.tsx
+++ b/app/components/header/notification/index.tsx
@@ -1,48 +1,49 @@
import {
- NovuProvider,
- PopoverNotificationCenter,
- NotificationBell, type IMessage
-} from "@novu/notification-center";
-import { useLoaderData } from "react-router";
-import { type loader } from "~/root";
+ NovuProvider,
+ PopoverNotificationCenter,
+ NotificationBell,
+ type IMessage,
+} from '@novu/notification-center'
+import { useLoaderData } from 'react-router'
+import { type loader } from '~/root'
function onNotificationClick(message: IMessage) {
- if (message?.cta?.data?.url) {
- //window.location.href = message.cta.data.url;
- window.open(message.cta.data.url, "_blank");
- }
+ if (message?.cta?.data?.url) {
+ //window.location.href = message.cta.data.url;
+ window.open(message.cta.data.url, '_blank')
+ }
}
export default function Notification() {
- const data = useLoaderData();
- // get theme from tailwind
- const [theme] = "light"; // useTheme();
- return (
-
-
- {
- //header content here
- return
;
- }}
- footer={() => {
- //footer content here
- return
;
- }}
- >
- {({ unseenCount }) =>
-
-
()
+ // get theme from tailwind
+ const [theme] = 'light' // useTheme();
+ return (
+
+
+ {
+ //header content here
+ return
+ }}
+ footer={() => {
+ //footer content here
+ return
+ }}
+ >
+ {({ unseenCount }) =>
+
+
, "className">) {
- return , 'className'>) {
+ return (null);
-
- const colorInterpolator = (t: number) =>
- `rgba(${50 + Math.floor(t * 50)}, ${100 + Math.floor(t * 100)}, 255, ${Math.sqrt(1 - t)})`;
-
- // Transform latestDevices into the format required by Globe's ringsData
- const sensorData = latestDevices.map((device) => ({
- lat: device.latitude,
- lng: device.longitude,
- maxR: 10,
- propagationSpeed: 5,
- repeatPeriod: 1000,
- }));
-
- useEffect(() => {
- if (globeEl.current) {
- globeEl.current.controls().autoRotate = true;
- globeEl.current.controls().autoRotateSpeed = 1.0;
- globeEl.current.controls().enableZoom = false;
- }
- }, []);
-
- return (
- colorInterpolator}
- ringMaxRadius="maxR"
- ringPropagationSpeed="propagationSpeed"
- ringRepeatPeriod="repeatPeriod"
- />
- );
-};
+ const globeEl = useRef(null)
+
+ const colorInterpolator = (t: number) =>
+ `rgba(${50 + Math.floor(t * 50)}, ${100 + Math.floor(t * 100)}, 255, ${Math.sqrt(1 - t)})`
+
+ // Transform latestDevices into the format required by Globe's ringsData
+ const sensorData = latestDevices.map((device) => ({
+ lat: device.latitude,
+ lng: device.longitude,
+ maxR: 10,
+ propagationSpeed: 5,
+ repeatPeriod: 1000,
+ }))
+
+ useEffect(() => {
+ if (globeEl.current) {
+ globeEl.current.controls().autoRotate = true
+ globeEl.current.controls().autoRotateSpeed = 1.0
+ globeEl.current.controls().enableZoom = false
+ }
+ }, [])
+
+ return (
+ colorInterpolator}
+ ringMaxRadius="maxR"
+ ringPropagationSpeed="propagationSpeed"
+ ringRepeatPeriod="repeatPeriod"
+ />
+ )
+}
diff --git a/app/components/landing/header/header.tsx b/app/components/landing/header/header.tsx
index e11e23efa..79efc9cdc 100644
--- a/app/components/landing/header/header.tsx
+++ b/app/components/landing/header/header.tsx
@@ -1,131 +1,131 @@
-import { useState } from "react";
-import { Link } from "react-router";
+import { useState } from 'react'
+import { Link } from 'react-router'
// import { ModeToggle } from "../../mode-toggle";
-import LanguageSelector from "./language-selector";
-import { useTranslation } from "react-i18next";
+import LanguageSelector from './language-selector'
+import { useTranslation } from 'react-i18next'
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",
- },
-];
+ {
+ 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);
+ const [openMenu, setOpenMenu] = useState(false)
- const { t } = useTranslation("header");
+ const { t } = useTranslation('header')
- return (
-
- );
+ return (
+
+ )
}
diff --git a/app/components/landing/sections/connect.tsx b/app/components/landing/sections/connect.tsx
index 80dabba97..50d5a8a44 100644
--- a/app/components/landing/sections/connect.tsx
+++ b/app/components/landing/sections/connect.tsx
@@ -1,70 +1,70 @@
-import { BookA, Wrench } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { BookA, Wrench } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
export default function Connect() {
- const { t } = useTranslation('connect')
- return (
-
-
-
- {t("title")}
-
- {t("description")}
-
-
-
-
- );
+ const { t } = useTranslation('connect')
+ return (
+
+
+
+ {t('title')}
+
+ {t('description')}
+
+
+
+
+ )
}
diff --git a/app/components/landing/sections/features-card.tsx b/app/components/landing/sections/features-card.tsx
index 7b85ed279..289b42ce2 100644
--- a/app/components/landing/sections/features-card.tsx
+++ b/app/components/landing/sections/features-card.tsx
@@ -1,18 +1,18 @@
-import { type Feature } from "~/lib/directus";
+import { type Feature } from '~/lib/directus'
export default function FeatureCard(item: Feature) {
- return (
-
-
- {item.title}
-
-
{item.description}
-
-
-
-
+
+ {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 },
- }}
- >
-
-
-
-
-
+
+ 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 },
+ }}
+ >
+
+
+
+
+
-
-
- {t("features")}
-
- {t("description")}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+ const { t } = useTranslation('features')
+ return (
+
+
+
+ {t('features')}
+
+ {t('description')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
}
diff --git a/app/components/landing/sections/integrations.tsx b/app/components/landing/sections/integrations.tsx
index 184f54259..f47ad975b 100644
--- a/app/components/landing/sections/integrations.tsx
+++ b/app/components/landing/sections/integrations.tsx
@@ -1,59 +1,56 @@
-import { ArrowUpDown, RadioTower, Unplug } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { ArrowUpDown, RadioTower, Unplug } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
export default function Integrations() {
- const { t } = useTranslation('integrations')
- return (
-
-
-
- {t("title")}
-
- {t("description")}
-
-
-
-
- );
+ const { t } = useTranslation('integrations')
+ return (
+
+
+
+ {t('title')}
+
+ {t('description')}
+
+
+
+
+ )
}
diff --git a/app/components/landing/sections/partners.tsx b/app/components/landing/sections/partners.tsx
index 7dbb3e64a..55947465b 100644
--- a/app/components/landing/sections/partners.tsx
+++ b/app/components/landing/sections/partners.tsx
@@ -1,73 +1,73 @@
-import { motion } from "framer-motion";
-import { useTranslation } from "react-i18next";
-import { type Partner } from "~/lib/directus";
+import { motion } from 'framer-motion'
+import { useTranslation } from 'react-i18next'
+import { type Partner } from '~/lib/directus'
type PartnersProps = {
- data: Partner[];
-};
+ data: Partner[]
+}
export default function Partners({ data }: PartnersProps) {
- const { t } = useTranslation('partners')
- return (
-
-
-
-
- {data.map((partner, index) => {
- return (
-
-
- );
- })}
-
-
- {t("hosted")}
-
-
-
+
+
+
+ {data.map((partner, index) => {
+ return (
+
+
+ )
+ })}
+
+
+ {t('hosted')}
+
+
+
-
-
-
{t("Pricing")}
-
- {(t("kidding"))}
-
-
-
- );
+ const { t } = useTranslation('pricing-plans')
+ return (
+
+
+
+
{t('Pricing')}
+
+ {t('kidding')}
+
+
+
+
+ )
}
diff --git a/app/components/landing/sections/tools.tsx b/app/components/landing/sections/tools.tsx
index fc485ffb2..2a84ece09 100644
--- a/app/components/landing/sections/tools.tsx
+++ b/app/components/landing/sections/tools.tsx
@@ -1,92 +1,92 @@
-import { motion } from "framer-motion";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useTranslation } from "react-i18next";
+import { motion } from 'framer-motion'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useTranslation } from 'react-i18next'
export default function Tools() {
- const { t } = useTranslation('tools')
- const tools = [
- {
- name: "Tool 1",
- video: "/landing/stock_video.mp4",
- id: 1,
- },
- {
- name: "Tool 2",
- video: "/landing/stock_video.mp4",
- id: 2,
- },
- {
- name: "Tool 3",
- video: "/landing/stock_video.mp4",
- id: 3,
- },
- {
- name: "Tool 4",
- video: "/landing/stock_video.mp4",
- id: 4,
- },
- {
- name: "Tool 5",
- video: "/landing/stock_video.mp4",
- id: 5,
- },
- ];
- return (
-
- );
+ const { t } = useTranslation('tools')
+ const tools = [
+ {
+ name: 'Tool 1',
+ video: '/landing/stock_video.mp4',
+ id: 1,
+ },
+ {
+ name: 'Tool 2',
+ video: '/landing/stock_video.mp4',
+ id: 2,
+ },
+ {
+ name: 'Tool 3',
+ video: '/landing/stock_video.mp4',
+ id: 3,
+ },
+ {
+ name: 'Tool 4',
+ video: '/landing/stock_video.mp4',
+ id: 4,
+ },
+ {
+ name: 'Tool 5',
+ video: '/landing/stock_video.mp4',
+ id: 5,
+ },
+ ]
+ return (
+
+ )
}
diff --git a/app/components/landing/stats.tsx b/app/components/landing/stats.tsx
index 1d94e0110..fe79afecb 100644
--- a/app/components/landing/stats.tsx
+++ b/app/components/landing/stats.tsx
@@ -1,61 +1,61 @@
-import { motion } from "framer-motion";
-import { useTranslation } from "react-i18next";
-import AnimatedCounter from "../ui/animated-counter";
+import { motion } from 'framer-motion'
+import { useTranslation } from 'react-i18next'
+import AnimatedCounter from '../ui/animated-counter'
export default function Stats(stats: number[]) {
- const { t } = useTranslation("stats");
+ const { t } = useTranslation('stats')
- const osemStats = [
- {
- id: 1,
- name: "devices",
- value: stats[0] / 1000,
- unit: "k",
- },
- {
- id: 2,
- name: "measurements_total",
- value: stats[1] / 1000000,
- unit: "m",
- },
- {
- id: 3,
- name: "measurements_per_minute",
- value: stats[2] / 1000,
- unit: "k",
- },
- ];
+ const osemStats = [
+ {
+ id: 1,
+ name: 'devices',
+ value: stats[0] / 1000,
+ unit: 'k',
+ },
+ {
+ id: 2,
+ name: 'measurements_total',
+ value: stats[1] / 1000000,
+ unit: 'm',
+ },
+ {
+ id: 3,
+ name: 'measurements_per_minute',
+ value: stats[2] / 1000,
+ unit: 'k',
+ },
+ ]
- return (
-
-
- {osemStats.map((stat) => (
-
-
-
-
-
-
-
- {stat.unit}
-
-
-
{t(stat.name)}
-
-
- ))}
-
-
+
+ {osemStats.map((stat) => (
+
+
+
+
+
+
+
+ {stat.unit}
+
+
+
{t(stat.name)}
+
+
+ ))}
+
+
();
- const navigate = useNavigate();
- const params = new URLSearchParams(data.filterParams);
+ const data = useLoaderData()
+ const navigate = useNavigate()
+ const params = new URLSearchParams(data.filterParams)
- // Validate filter values using the predefined enums
- const isValidFilter = (key: string, value: string) => {
- switch (key) {
- case "exposure":
- return DeviceExposureZodEnum.safeParse(value).success;
- case "status":
- return DeviceStatusZodEnum.safeParse(value).success;
- case "tags":
- return true; // No validation for tags
- default:
- return false; // Invalid key
- }
- };
+ // Validate filter values using the predefined enums
+ const isValidFilter = (key: string, value: string) => {
+ switch (key) {
+ case 'exposure':
+ return DeviceExposureZodEnum.safeParse(value).success
+ case 'status':
+ return DeviceStatusZodEnum.safeParse(value).success
+ case 'tags':
+ return true // No validation for tags
+ default:
+ return false // Invalid key
+ }
+ }
- // Update the search params to remove invalid filters
- const cleanSearchParams = () => {
- let modified = false;
- const newParams = new URLSearchParams(params);
+ // Update the search params to remove invalid filters
+ const cleanSearchParams = () => {
+ let modified = false
+ const newParams = new URLSearchParams(params)
- params.forEach((value, key) => {
- const values = value.split(","); // Handle comma-separated values
- const validValues = values.filter((v) => isValidFilter(key, v));
+ params.forEach((value, key) => {
+ const values = value.split(',') // Handle comma-separated values
+ const validValues = values.filter((v) => isValidFilter(key, v))
- if (validValues.length === 0) {
- // Remove entire parameter if no valid values
- newParams.delete(key);
- modified = true;
- } else if (validValues.length !== values.length) {
- // Update the parameter with only valid values
- newParams.set(key, validValues.join(","));
- modified = true;
- }
- });
+ if (validValues.length === 0) {
+ // Remove entire parameter if no valid values
+ newParams.delete(key)
+ modified = true
+ } else if (validValues.length !== values.length) {
+ // Update the parameter with only valid values
+ newParams.set(key, validValues.join(','))
+ modified = true
+ }
+ })
- if (modified) {
- // Update the URL without reloading the page
- void navigate(`?${newParams.toString()}`, { replace: true });
- }
- };
+ if (modified) {
+ // Update the URL without reloading the page
+ void navigate(`?${newParams.toString()}`, { replace: true })
+ }
+ }
- // Clean search params when the component mounts
- useEffect(() => {
- cleanSearchParams();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ // Clean search params when the component mounts
+ useEffect(() => {
+ cleanSearchParams()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- // Group valid filters by key
- const groupedFilters: { [key: string]: string[] } = {};
+ // Group valid filters by key
+ const groupedFilters: { [key: string]: string[] } = {}
- params.forEach((value, key) => {
- const values = value.split(",").filter((v) => isValidFilter(key, v));
- if (values.length > 0) {
- groupedFilters[key] = values; // Group valid values under the same key
- }
- });
+ params.forEach((value, key) => {
+ const values = value.split(',').filter((v) => isValidFilter(key, v))
+ if (values.length > 0) {
+ groupedFilters[key] = values // Group valid values under the same key
+ }
+ })
- // Don't render anything if there are no active valid filters
- if (Object.keys(groupedFilters).length === 0) {
- return null;
- }
+ // Don't render anything if there are no active valid filters
+ if (Object.keys(groupedFilters).length === 0) {
+ return null
+ }
- const onRemoveFilter = (key: string) => {
- const newParams = new URLSearchParams(params);
+ const onRemoveFilter = (key: string) => {
+ const newParams = new URLSearchParams(params)
- // Set the key to "all" and remove all other values
- newParams.delete(key);
+ // Set the key to "all" and remove all other values
+ newParams.delete(key)
- // Update the URL without reloading the page
- void navigate(`?${newParams.toString()}`, { replace: true });
- };
+ // Update the URL without reloading the page
+ void navigate(`?${newParams.toString()}`, { replace: true })
+ }
- return (
-
- {Object.entries(groupedFilters).map(([key, values]) => (
-
-
- {key}
-
-
- {values.map((value, index) => (
-
- {index > 0 && / }
- {value}
-
- ))}
-
-
onRemoveFilter(key)}
- className="ml-2 text-blue-500 hover:text-blue-700 focus:outline-none"
- aria-label={`Remove ${key} filter`}
- >
-
-
- ))}
-
-
- {"Total Devices: " + data.filteredDevices.features.length}
-
-
-
+ {Object.entries(groupedFilters).map(([key, values]) => (
+
+
+ {key}
+
+
+ {values.map((value, index) => (
+
+ {index > 0 && / }
+ {value}
+
+ ))}
+
+
onRemoveFilter(key)}
+ className="ml-2 text-blue-500 hover:text-blue-700 focus:outline-none"
+ aria-label={`Remove ${key} filter`}
+ >
+
+
+ ))}
+
+
+ {'Total Devices: ' + data.filteredDevices.features.length}
+
+
+
& {
- mapboxAccessToken: string | undefined;
- marker?: boolean | Omit;
+type GeocoderControlProps = Omit<
+ GeocoderOptions,
+ 'accessToken' | 'mapboxgl' | 'marker'
+> & {
+ mapboxAccessToken: string | undefined
+ marker?: boolean | Omit
- position: ControlPosition;
+ position: ControlPosition
- onLoading: (e: object) => void;
- onResults: (e: object) => void;
- onResult: (e: object) => void;
- onError: (e: object) => void;
-};
+ onLoading: (e: object) => void
+ onResults: (e: object) => void
+ onResult: (e: object) => void
+ onError: (e: object) => void
+}
export default function GeocoderControl(props: GeocoderControlProps) {
- const [marker, setMarker] = useState(null);
+ const [marker, setMarker] = useState(null)
- const geocoder = useControl(
- () => {
- const ctrl = new MapboxGeocoder({
- ...props,
- marker: false,
- accessToken: props.mapboxAccessToken || '',
- });
- ctrl.on('loading', props.onLoading);
- ctrl.on('results', props.onResults);
- ctrl.on('result', evt => {
- props.onResult(evt);
+ const geocoder = useControl(
+ () => {
+ const ctrl = new MapboxGeocoder({
+ ...props,
+ marker: false,
+ accessToken: props.mapboxAccessToken || '',
+ })
+ ctrl.on('loading', props.onLoading)
+ ctrl.on('results', props.onResults)
+ ctrl.on('result', (evt) => {
+ props.onResult(evt)
- const {result} = evt;
- const location =
- result &&
- (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates));
- if (location && props.marker) {
- setMarker(;
+ devices: FeatureCollection
}) {
- const { osem: mapRef } = useMap();
-
- // the viewport bounds and zoom level
- const [bounds, setBounds] = useState(
- mapRef?.getMap().getBounds().toArray().flat() as BBox
- );
- const [zoom, setZoom] = useState(mapRef?.getZoom() || 0);
-
- // get clusters
- const points: PointFeature[] = useMemo(() => {
- return devices.features.map((device) => ({
- type: "Feature",
- properties: {
- cluster: false,
- ...device.properties,
- },
- geometry: device.geometry,
- }));
- }, [devices.features]);
-
- // get bounds and zoom level from the map
- // debounce the change handler to prevent too many updates
- const debouncedChangeHandler = debounce(() => {
- if (!mapRef) return;
- setBounds(mapRef.getMap().getBounds().toArray().flat() as BBox);
- setZoom(mapRef.getZoom());
- }, DEBOUNCE_VALUE);
-
- // register the debounced change handler to map events
- useEffect(() => {
- if (!mapRef) return;
-
- mapRef?.getMap().on("load", debouncedChangeHandler);
- mapRef?.getMap().on("zoom", debouncedChangeHandler);
- mapRef?.getMap().on("move", debouncedChangeHandler);
- mapRef?.getMap().on("resize", debouncedChangeHandler);
- }, [debouncedChangeHandler, mapRef]);
-
- const { clusters, supercluster } = useSupercluster({
- points,
- bounds,
- zoom,
- options,
- });
-
- const clusterOnClick = useCallback(
- (cluster: DeviceClusterProperties) => {
- // supercluster from hook can be null or undefined
- if (!supercluster) return;
-
- const [longitude, latitude] = cluster.geometry.coordinates;
-
- const expansionZoom = Math.min(
- supercluster.getClusterExpansionZoom(cluster.id as number),
- 20
- );
-
- mapRef?.getMap().flyTo({
- center: [longitude, latitude],
- animate: true,
- speed: 1.6,
- zoom: expansionZoom,
- essential: true,
- });
- },
- [mapRef, supercluster]
- );
-
- const clusterMarker = useMemo(() => {
- return clusters.map((cluster) => {
- // every cluster point has coordinates
- const [longitude, latitude] = cluster.geometry.coordinates;
- // the point may be either a cluster or a crime point
- const { cluster: isCluster } = cluster.properties;
-
- // we have a cluster to render
- if (isCluster) {
- return (
-
-
- );
- }
-
- // we have a single device to render
- return (
- [] = useMemo(() => {
+ return devices.features.map((device) => ({
+ type: 'Feature',
+ properties: {
+ cluster: false,
+ ...device.properties,
+ },
+ geometry: device.geometry,
+ }))
+ }, [devices.features])
+
+ // get bounds and zoom level from the map
+ // debounce the change handler to prevent too many updates
+ const debouncedChangeHandler = debounce(() => {
+ if (!mapRef) return
+ setBounds(mapRef.getMap().getBounds().toArray().flat() as BBox)
+ setZoom(mapRef.getZoom())
+ }, DEBOUNCE_VALUE)
+
+ // register the debounced change handler to map events
+ useEffect(() => {
+ if (!mapRef) return
+
+ mapRef?.getMap().on('load', debouncedChangeHandler)
+ mapRef?.getMap().on('zoom', debouncedChangeHandler)
+ mapRef?.getMap().on('move', debouncedChangeHandler)
+ mapRef?.getMap().on('resize', debouncedChangeHandler)
+ }, [debouncedChangeHandler, mapRef])
+
+ const { clusters, supercluster } = useSupercluster({
+ points,
+ bounds,
+ zoom,
+ options,
+ })
+
+ const clusterOnClick = useCallback(
+ (cluster: DeviceClusterProperties) => {
+ // supercluster from hook can be null or undefined
+ if (!supercluster) return
+
+ const [longitude, latitude] = cluster.geometry.coordinates
+
+ const expansionZoom = Math.min(
+ supercluster.getClusterExpansionZoom(cluster.id as number),
+ 20,
+ )
+
+ mapRef?.getMap().flyTo({
+ center: [longitude, latitude],
+ animate: true,
+ speed: 1.6,
+ zoom: expansionZoom,
+ essential: true,
+ })
+ },
+ [mapRef, supercluster],
+ )
+
+ const clusterMarker = useMemo(() => {
+ return clusters.map((cluster) => {
+ // every cluster point has coordinates
+ const [longitude, latitude] = cluster.geometry.coordinates
+ // the point may be either a cluster or a crime point
+ const { cluster: isCluster } = cluster.properties
+
+ // we have a cluster to render
+ if (isCluster) {
+ return (
+
+
+ )
+ }
+
+ // we have a single device to render
+ return (
+ clusterOnClick(cluster)}>
-
- {counts.map((count, i) => {
- const start = offsets[i] / total;
- let end = (offsets[i] + count) / total;
+ return (
+ clusterOnClick(cluster)}>
+
+ {counts.map((count, i) => {
+ const start = offsets[i] / total
+ let end = (offsets[i] + count) / total
- if (end - start === 1) end -= 0.00001;
- const a0 = 2 * Math.PI * (start - 0.25);
- const a1 = 2 * Math.PI * (end - 0.25);
- const x0 = Math.cos(a0),
- y0 = Math.sin(a0);
- const x1 = Math.cos(a1),
- y1 = Math.sin(a1);
- const largeArc = end - start > 0.5 ? 1 : 0;
+ if (end - start === 1) end -= 0.00001
+ const a0 = 2 * Math.PI * (start - 0.25)
+ const a1 = 2 * Math.PI * (end - 0.25)
+ const x0 = Math.cos(a0),
+ y0 = Math.sin(a0)
+ const x1 = Math.cos(a1),
+ y1 = Math.sin(a1)
+ const largeArc = end - start > 0.5 ? 1 : 0
- return (
-
- {pointCount}
-
-
-
+ {pointCount}
+
+
+
();
- const { hoveredPoint, setHoveredPoint } = useContext(HoveredPointContext);
- const popupRef = useRef(null);
-
- const { osem: mapRef } = useMap();
-
- useEffect(() => {
- const sensorData = sensor.data! as unknown as {
- value: String;
- location: { x: number; y: number; id: number };
- createdAt: Date;
- }[];
-
- // create color palette from min and max values
- const minValue = Math.min(...sensorData.map((d) => Number(d.value)));
- const maxValue = Math.max(...sensorData.map((d) => Number(d.value)));
- const palette = createPalette(
- minValue,
- maxValue,
- minColor as string,
- maxColor as string,
- );
-
- // generate points from the sensor data
- // apply color from palette
- const points = sensorData.map((measurement) => {
- const tempPoint = point(
- [measurement.location.x, measurement.location.y],
- {
- value: Number(measurement.value),
- createdAt: new Date(measurement.createdAt),
- color: palette(Number(measurement.value)).hex(),
- locationId: measurement.location.id,
- },
- );
- return tempPoint;
- });
-
- if (points.length === 0) return;
-
- // generate a line from the points
- const line = lineString(points.map((point) => point.geometry.coordinates));
- const lines = multiLineString([line.geometry.coordinates]);
-
- setSourceData(
- featureCollection([...points, lines]),
- );
- }, [maxColor, minColor, sensor.data]);
-
- useEffect(() => {
- if (!mapRef || !sourceData) return;
-
- const bounds = bbox(sourceData).slice(0, 4) as [
- number,
- number,
- number,
- number,
- ];
- mapRef.fitBounds(bounds, {
- padding: {
- top: 100,
- bottom: 400,
- left: 500,
- right: 100,
- },
- });
- }, [mapRef, sourceData]);
-
- useEffect(() => {
- if (!mapRef) return;
-
- const map = mapRef.getMap();
-
- map.on("mousemove", "box-layer-point", (e) => {
- if (!e.features || e.features.length === 0) return;
-
- const feature = e.features[0];
- const { locationId } = feature.properties as CustomGeoJsonProperties;
-
- setHoveredPoint(locationId); // Update hoveredPoint dynamically
- });
-
- map.on("mouseleave", "box-layer-point", () => {
- setHoveredPoint(null); // Clear hoveredPoint
- });
- }, [mapRef, setHoveredPoint]);
-
- useEffect(() => {
- if (!mapRef) return;
-
- const map = mapRef.getMap();
-
- // Cleanup previous popup
- if (popupRef.current) {
- popupRef.current.remove();
- popupRef.current = null;
- }
-
- if (hoveredPoint !== null) {
- const feature = sourceData?.features.find(
- (feat) => feat.properties?.locationId === hoveredPoint,
- );
-
- if (feature && feature.geometry.type === "Point") {
- const { coordinates } = feature.geometry;
- const { value } = feature.properties as CustomGeoJsonProperties;
-
- popupRef.current = new mapboxgl.Popup({
- closeButton: false,
- closeOnClick: false,
- className: "highlight-popup",
- })
- .setLngLat(coordinates as [number, number])
- .setHTML(
- `
+ const [sourceData, setSourceData] = useState
()
+ const { hoveredPoint, setHoveredPoint } = useContext(HoveredPointContext)
+ const popupRef = useRef(null)
+
+ const { osem: mapRef } = useMap()
+
+ useEffect(() => {
+ const sensorData = sensor.data! as unknown as {
+ value: String
+ location: { x: number; y: number; id: number }
+ createdAt: Date
+ }[]
+
+ // create color palette from min and max values
+ const minValue = Math.min(...sensorData.map((d) => Number(d.value)))
+ const maxValue = Math.max(...sensorData.map((d) => Number(d.value)))
+ const palette = createPalette(
+ minValue,
+ maxValue,
+ minColor as string,
+ maxColor as string,
+ )
+
+ // generate points from the sensor data
+ // apply color from palette
+ const points = sensorData.map((measurement) => {
+ const tempPoint = point(
+ [measurement.location.x, measurement.location.y],
+ {
+ value: Number(measurement.value),
+ createdAt: new Date(measurement.createdAt),
+ color: palette(Number(measurement.value)).hex(),
+ locationId: measurement.location.id,
+ },
+ )
+ return tempPoint
+ })
+
+ if (points.length === 0) return
+
+ // generate a line from the points
+ const line = lineString(points.map((point) => point.geometry.coordinates))
+ const lines = multiLineString([line.geometry.coordinates])
+
+ setSourceData(
+ featureCollection([...points, lines]),
+ )
+ }, [maxColor, minColor, sensor.data])
+
+ useEffect(() => {
+ if (!mapRef || !sourceData) return
+
+ const bounds = bbox(sourceData).slice(0, 4) as [
+ number,
+ number,
+ number,
+ number,
+ ]
+ mapRef.fitBounds(bounds, {
+ padding: {
+ top: 100,
+ bottom: 400,
+ left: 500,
+ right: 100,
+ },
+ })
+ }, [mapRef, sourceData])
+
+ useEffect(() => {
+ if (!mapRef) return
+
+ const map = mapRef.getMap()
+
+ map.on('mousemove', 'box-layer-point', (e) => {
+ if (!e.features || e.features.length === 0) return
+
+ const feature = e.features[0]
+ const { locationId } = feature.properties as CustomGeoJsonProperties
+
+ setHoveredPoint(locationId) // Update hoveredPoint dynamically
+ })
+
+ map.on('mouseleave', 'box-layer-point', () => {
+ setHoveredPoint(null) // Clear hoveredPoint
+ })
+ }, [mapRef, setHoveredPoint])
+
+ useEffect(() => {
+ if (!mapRef) return
+
+ const map = mapRef.getMap()
+
+ // Cleanup previous popup
+ if (popupRef.current) {
+ popupRef.current.remove()
+ popupRef.current = null
+ }
+
+ if (hoveredPoint !== null) {
+ const feature = sourceData?.features.find(
+ (feat) => feat.properties?.locationId === hoveredPoint,
+ )
+
+ if (feature && feature.geometry.type === 'Point') {
+ const { coordinates } = feature.geometry
+ const { value } = feature.properties as CustomGeoJsonProperties
+
+ popupRef.current = new mapboxgl.Popup({
+ closeButton: false,
+ closeOnClick: false,
+ className: 'highlight-popup',
+ })
+ .setLngLat(coordinates as [number, number])
+ .setHTML(
+ `
${sensor.title}
${value}${sensor.unit}
`,
- )
- .addTo(map);
- }
- } else if (popupRef.current) {
- (popupRef.current as mapboxgl.Popup).remove();
- popupRef.current = null;
- }
- }, [hoveredPoint, sourceData, mapRef, sensor.title, sensor.unit]);
-
- if (!sourceData) return null;
-
- return (
- <>
-
-
-
- );
+ )
+ .addTo(map)
+ }
+ } else if (popupRef.current) {
+ ;(popupRef.current as mapboxgl.Popup).remove()
+ popupRef.current = null
+ }
+ }, [hoveredPoint, sourceData, mapRef, sensor.title, sensor.unit])
+
+ if (!sourceData) return null
+
+ return (
+ <>
+
+
+
+ )
}
diff --git a/app/components/map/layers/mobile/mobile-box-view.tsx b/app/components/map/layers/mobile/mobile-box-view.tsx
index 4bb8f217d..bce575415 100644
--- a/app/components/map/layers/mobile/mobile-box-view.tsx
+++ b/app/components/map/layers/mobile/mobile-box-view.tsx
@@ -1,154 +1,152 @@
-import { ArrowDownUp } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { calculateColorRange } from "./color-palette";
-import MobileBoxLayer from "./mobile-box-layer";
-import { Button } from "~/components/ui/button";
-import { type Sensor } from "~/schema";
+import { ArrowDownUp } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { calculateColorRange } from './color-palette'
+import MobileBoxLayer from './mobile-box-layer'
+import { Button } from '~/components/ui/button'
+import { type Sensor } from '~/schema'
interface SensorWithColor extends Sensor {
- color: string; // Add the color property
+ color: string // Add the color property
}
export default function MobileBoxView({
- sensors: initialSensors,
+ sensors: initialSensors,
}: {
- sensors: SensorWithColor[];
+ sensors: SensorWithColor[]
}) {
- console.log("🚀 ~ sensors:", initialSensors)
- const [sensors, setSensors] = useState(initialSensors);
- console.log("🚀 ~ sensors:", sensors)
+ console.log('🚀 ~ sensors:', initialSensors)
+ const [sensors, setSensors] = useState(initialSensors)
+ console.log('🚀 ~ sensors:', sensors)
- useEffect(() => {
- setSensors(initialSensors);
- }, [initialSensors]);
-
-
+ useEffect(() => {
+ setSensors(initialSensors)
+ }, [initialSensors])
- // Toggle the order of sensors
- const switchSensors = () => {
- setSensors((prevSensors) => [...prevSensors].reverse());
- };
+ // Toggle the order of sensors
+ const switchSensors = () => {
+ setSensors((prevSensors) => [...prevSensors].reverse())
+ }
- return (
-
- {sensors.map((sensor, index) => (
-
- {index === 1 && sensors.length === 2 && (
-
-
- )}
-
-
- ))}
-
+ {sensors.map((sensor, index) => (
+
+ {index === 1 && sensors.length === 2 && (
+
+
+ )}
+
+
+ ))}
+
{
- setMinColor(min);
- setMaxColor(max);
- }}
- />
- {index < 1 && (
- {
+ setMinColor(min)
+ setMaxColor(max)
+ }}
+ />
+ {index < 1 && (
+ (null);
- const maxColorInputRef = useRef(null);
+ const minColorInputRef = useRef(null)
+ const maxColorInputRef = useRef(null)
- const [minColor, setMinColor] = useState(lowColor);
- const [maxColor, setMaxColor] = useState(highColor);
+ const [minColor, setMinColor] = useState(lowColor)
+ const [maxColor, setMaxColor] = useState(highColor)
- useEffect(() => {
- onColorChange && onColorChange(minColor, maxColor);
- }, [minColor, maxColor, onColorChange]);
+ useEffect(() => {
+ onColorChange && onColorChange(minColor, maxColor)
+ }, [minColor, maxColor, onColorChange])
- const sensorData = sensor.data! as unknown as {
- value: String;
- location: { x: number; y: number; id: number };
- createdAt: Date;
- }[];
+ const sensorData = sensor.data! as unknown as {
+ value: String
+ location: { x: number; y: number; id: number }
+ createdAt: Date
+ }[]
- const minValue = Math.min(...sensorData.map((d) => Number(d.value)));
- const maxValue = Math.max(...sensorData.map((d) => Number(d.value)));
+ const minValue = Math.min(...sensorData.map((d) => Number(d.value)))
+ const maxValue = Math.max(...sensorData.map((d) => Number(d.value)))
- return (
-
- );
+ return (
+
+ )
}
diff --git a/app/components/map/layers/mobile/mobile-overview-layer.tsx b/app/components/map/layers/mobile/mobile-overview-layer.tsx
index 97c5fd63f..6afb59a44 100644
--- a/app/components/map/layers/mobile/mobile-overview-layer.tsx
+++ b/app/components/map/layers/mobile/mobile-overview-layer.tsx
@@ -18,23 +18,33 @@ const CLUSTER_DISTANCE_METERS = 8 // Distance threshold for clustering
const MIN_CLUSTER_SIZE = 15 // Minimum points to form a cluster
// Function to calculate distance between two points in meters
-function calculateDistance(point1: LocationPoint, point2: LocationPoint): number {
+function calculateDistance(
+ point1: LocationPoint,
+ point2: LocationPoint,
+): number {
const R = 6371000 // Earth's radius in meters
const lat1Rad = (point1.geometry.y * Math.PI) / 180
const lat2Rad = (point2.geometry.y * Math.PI) / 180
const deltaLatRad = ((point2.geometry.y - point1.geometry.y) * Math.PI) / 180
const deltaLonRad = ((point2.geometry.x - point1.geometry.x) * Math.PI) / 180
- const a = Math.sin(deltaLatRad / 2) * Math.sin(deltaLatRad / 2) +
- Math.cos(lat1Rad) * Math.cos(lat2Rad) *
- Math.sin(deltaLonRad / 2) * Math.sin(deltaLonRad / 2)
+ const a =
+ Math.sin(deltaLatRad / 2) * Math.sin(deltaLatRad / 2) +
+ Math.cos(lat1Rad) *
+ Math.cos(lat2Rad) *
+ Math.sin(deltaLonRad / 2) *
+ Math.sin(deltaLonRad / 2)
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
return R * c
}
// Cluster points within a single trip
-function clusterTripPoints(points: LocationPoint[], distanceThreshold: number, minClusterSize: number) {
+function clusterTripPoints(
+ points: LocationPoint[],
+ distanceThreshold: number,
+ minClusterSize: number,
+) {
const clusters: LocationPoint[][] = []
const visited = new Set()
@@ -60,7 +70,7 @@ function clusterTripPoints(points: LocationPoint[], distanceThreshold: number, m
clusters.push(cluster)
} else {
// Add individual points that don't form clusters
- cluster.forEach(point => clusters.push([point]))
+ cluster.forEach((point) => clusters.push([point]))
}
}
@@ -69,12 +79,16 @@ function clusterTripPoints(points: LocationPoint[], distanceThreshold: number, m
// Calculate cluster center and metadata
function calculateClusterCenter(cluster: LocationPoint[], clusterId: string) {
- const centerX = cluster.reduce((sum, point) => sum + point.geometry.x, 0) / cluster.length
- const centerY = cluster.reduce((sum, point) => sum + point.geometry.y, 0) / cluster.length
-
+ const centerX =
+ cluster.reduce((sum, point) => sum + point.geometry.x, 0) / cluster.length
+ const centerY =
+ cluster.reduce((sum, point) => sum + point.geometry.y, 0) / cluster.length
+
// Sort by timestamp to get earliest and latest
- const sortedByTime = cluster.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime())
-
+ const sortedByTime = cluster.sort(
+ (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+ )
+
return {
coordinates: [centerX, centerY],
pointCount: cluster.length,
@@ -82,7 +96,7 @@ function calculateClusterCenter(cluster: LocationPoint[], clusterId: string) {
endTime: sortedByTime[sortedByTime.length - 1].time,
isCluster: cluster.length > 1,
clusterId: clusterId,
- originalPoints: cluster // Keep reference to original points
+ originalPoints: cluster, // Keep reference to original points
}
}
@@ -115,20 +129,27 @@ export default function MobileOverviewLayer({
if (!trips || trips.length === 0) return []
return trips.map((trip, tripIndex) => {
- const clusters = clusterTripPoints(trip.points, CLUSTER_DISTANCE_METERS, MIN_CLUSTER_SIZE)
-
+ const clusters = clusterTripPoints(
+ trip.points,
+ CLUSTER_DISTANCE_METERS,
+ MIN_CLUSTER_SIZE,
+ )
+
return {
...trip,
- clusters: clusters.map((cluster, clusterIndex) =>
- calculateClusterCenter(cluster, `trip-${tripIndex}-cluster-${clusterIndex}`)
- )
+ clusters: clusters.map((cluster, clusterIndex) =>
+ calculateClusterCenter(
+ cluster,
+ `trip-${tripIndex}-cluster-${clusterIndex}`,
+ ),
+ ),
}
})
}, [trips])
const [sourceData, setSourceData] = useState | null>(null)
- const [expandedSourceData, setExpandedSourceData] = useState | null>(null)
-
+ const [expandedSourceData, setExpandedSourceData] =
+ useState | null>(null)
+
const { osem: mapRef } = useMap()
// Legend items state
@@ -172,7 +194,7 @@ export default function MobileOverviewLayer({
pointCount?: number
isCluster?: boolean
} | null>(null)
-
+
const [showOriginalColors, setShowOriginalColors] = useState(true)
useEffect(() => {
@@ -200,16 +222,16 @@ export default function MobileOverviewLayer({
const expandedPoints = clusteredTrips.flatMap((trip, tripIndex) =>
trip.clusters.flatMap((cluster) => {
if (!cluster.isCluster || !cluster.originalPoints) return []
-
+
return cluster.originalPoints.map((originalPoint) =>
point([originalPoint.geometry.x, originalPoint.geometry.y], {
color: colors[tripIndex],
tripNumber: tripIndex + 1,
timestamp: originalPoint.time,
clusterId: cluster.clusterId,
- })
+ }),
)
- })
+ }),
)
// Set legend items for the trips
@@ -253,7 +275,14 @@ export default function MobileOverviewLayer({
if (event.features && event.features.length > 0) {
const feature = event.features[0]
- const { tripNumber, startTime, endTime, pointCount, isCluster, clusterId } = feature.properties
+ const {
+ tripNumber,
+ startTime,
+ endTime,
+ pointCount,
+ isCluster,
+ clusterId,
+ } = feature.properties
setHighlightedTrip(tripNumber)
// Set hovered cluster if it's a cluster
@@ -264,13 +293,13 @@ export default function MobileOverviewLayer({
}
const [longitude, latitude] = feature.geometry.coordinates
- setPopupInfo({
- longitude,
- latitude,
- startTime,
- endTime,
+ setPopupInfo({
+ longitude,
+ latitude,
+ startTime,
+ endTime,
pointCount,
- isCluster
+ isCluster,
})
} else {
setHighlightedTrip(null)
@@ -329,39 +358,33 @@ export default function MobileOverviewLayer({
'interpolate',
['linear'],
['get', 'pointCount'],
- 1, 5, // Single point: radius 5
- 10, 8, // 10 points: radius 8
- 50, 12, // 50 points: radius 12
- 100, 16 // 100+ points: radius 16
+ 1,
+ 5, // Single point: radius 5
+ 10,
+ 8, // 10 points: radius 8
+ 50,
+ 12, // 50 points: radius 12
+ 100,
+ 16, // 100+ points: radius 16
],
- 3 // Non-cluster points: radius 3
+ 3, // Non-cluster points: radius 3
],
'circle-opacity': showOriginalColors
- ? [
- 'case',
- ['==', ['get', 'tripNumber'], highlightedTrip],
- 1,
- 0.5,
- ]
+ ? ['case', ['==', ['get', 'tripNumber'], highlightedTrip], 1, 0.5]
: 1,
'circle-stroke-width': [
'case',
['get', 'isCluster'],
2, // Clusters have stroke
- 0 // Individual points don't
+ 0, // Individual points don't
],
'circle-stroke-color': '#222',
'circle-stroke-opacity': showOriginalColors
- ? [
- 'case',
- ['==', ['get', 'tripNumber'], highlightedTrip],
- 1,
- 0.3,
- ]
+ ? ['case', ['==', ['get', 'tripNumber'], highlightedTrip], 1, 0.3]
: 1,
}}
/>
-
+
{/* Text layer for cluster point counts */}
+
)}
-
+
{highlightedTrip && popupInfo && (
-
- To
-
-
- {format(new Date(popupInfo.endTime), 'Pp')}
-
-
+
+ To
+
+
+ {format(new Date(popupInfo.endTime), 'Pp')}
+
+
)}
@@ -462,4 +485,3 @@ export default function MobileOverviewLayer({
)
}
-
diff --git a/app/components/map/legend.tsx b/app/components/map/legend.tsx
index c905f4af0..cf30e5eaf 100644
--- a/app/components/map/legend.tsx
+++ b/app/components/map/legend.tsx
@@ -67,7 +67,7 @@ export default function Legend({ title, values }: LegendProps) {
return (
(
top: 0,
left: 0,
}}
- touchZoomRotate={{around: 'center'}}
+ touchZoomRotate={{ around: 'center' }}
onLoad={handleMapLoad}
{...props}
>
diff --git a/app/components/mydevices/dt/data-table.tsx b/app/components/mydevices/dt/data-table.tsx
index fb1f8e39c..51711a664 100644
--- a/app/components/mydevices/dt/data-table.tsx
+++ b/app/components/mydevices/dt/data-table.tsx
@@ -47,32 +47,32 @@ export function DataTable
({
data,
}: DataTableProps) {
const [sorting, setSorting] = React.useState([
- { id: 'createdAt', desc: true }
+ { id: 'createdAt', desc: true },
])
const [columnFilters, setColumnFilters] = React.useState(
[],
)
- const table = useReactTable({
- data,
- columns,
- getCoreRowModel: getCoreRowModel(),
- getPaginationRowModel: getPaginationRowModel(),
- onSortingChange: setSorting,
- getSortedRowModel: getSortedRowModel(),
- onColumnFiltersChange: setColumnFilters,
- getFilteredRowModel: getFilteredRowModel(),
- state: {
- sorting,
- columnFilters,
- },
- initialState: {
- pagination: {
- pageSize: 5,
- },
- },
- });
- const tableColsWidth = [30, 30, 30, 40];
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ onColumnFiltersChange: setColumnFilters,
+ getFilteredRowModel: getFilteredRowModel(),
+ state: {
+ sorting,
+ columnFilters,
+ },
+ initialState: {
+ pagination: {
+ pageSize: 5,
+ },
+ },
+ })
+ const tableColsWidth = [30, 30, 30, 40]
const { t } = useTranslation('data-table')
@@ -133,7 +133,7 @@ export function DataTable({
{t('no_results')}
diff --git a/app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx b/app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx
index cf81b28d7..1a93dfdca 100644
--- a/app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx
+++ b/app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx
@@ -1,44 +1,44 @@
-import { useLocation, Link } from "react-router";
-import { buttonVariants } from "~/components/ui/button";
-import { cn } from "~/lib/utils";
+import { useLocation, Link } from 'react-router'
+import { buttonVariants } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
interface SidebarNavProps extends React.HTMLAttributes {
- items: {
- href: string;
- title: string;
- icon: any;
- }[];
+ items: {
+ href: string
+ title: string
+ icon: any
+ }[]
}
export function EditDviceSidebarNav({
- className,
- items,
- ...props
+ className,
+ items,
+ ...props
}: SidebarNavProps) {
- const pathname = useLocation().pathname;
- return (
-
- {items.map((item) => (
-
- );
+ const pathname = useLocation().pathname
+ return (
+
+ {items.map((item) => (
+
+ )
}
diff --git a/app/components/search/index.tsx b/app/components/search/index.tsx
index d04577770..bbac18590 100644
--- a/app/components/search/index.tsx
+++ b/app/components/search/index.tsx
@@ -1,127 +1,127 @@
-import getUserLocale from "get-user-locale";
-import { useEffect, useState } from "react";
-import { useTranslation, Trans } from "react-i18next";
-import SearchList from "./search-list";
+import getUserLocale from 'get-user-locale'
+import { useEffect, useState } from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import SearchList from './search-list'
interface SearchProps {
- searchString: string;
- devices: any;
+ searchString: string
+ devices: any
}
export default function Search(props: SearchProps) {
- let { t } = useTranslation("search");
+ let { t } = useTranslation('search')
- const userLocaleString = getUserLocale()?.toString() || "en";
- const [searchResultsLocation, setSearchResultsLocation] = useState([]);
- const [searchResultsDevice, setSearchResultsDevice] = useState([]);
+ const userLocaleString = getUserLocale()?.toString() || 'en'
+ const [searchResultsLocation, setSearchResultsLocation] = useState([])
+ const [searchResultsDevice, setSearchResultsDevice] = useState([])
- /**
- * One of the functions that is called when the user types in the search bar. It returns the search results for locations, retrived from the mapbox geocode API.
- *
- * @param searchstring string to search for locations on mapbox geocode API
- */
- function getLocations(searchstring: string) {
- var url: URL = new URL(ENV.MAPBOX_GEOCODING_API + `${searchstring}.json`);
+ /**
+ * One of the functions that is called when the user types in the search bar. It returns the search results for locations, retrived from the mapbox geocode API.
+ *
+ * @param searchstring string to search for locations on mapbox geocode API
+ */
+ function getLocations(searchstring: string) {
+ var url: URL = new URL(ENV.MAPBOX_GEOCODING_API + `${searchstring}.json`)
- url.search = new URLSearchParams({
- access_token: `${ENV.MAPBOX_ACCESS_TOKEN}`,
- limit: "4",
- language: userLocaleString,
- }).toString();
+ url.search = new URLSearchParams({
+ access_token: `${ENV.MAPBOX_ACCESS_TOKEN}`,
+ limit: '4',
+ language: userLocaleString,
+ }).toString()
- var requestOptions: RequestInit = {
- method: "GET",
- redirect: "follow",
- };
+ var requestOptions: RequestInit = {
+ method: 'GET',
+ redirect: 'follow',
+ }
- fetch(url, requestOptions)
- .then((response) => response.json())
- .then((data) => {
- if (data.features.length === 0) {
- setSearchResultsLocation([]);
- } else {
- data.features.forEach((feature: any) => {
- feature.type = "location";
- });
- setSearchResultsLocation(data.features);
- }
- })
- .catch((error) => console.log("error", error));
- }
+ fetch(url, requestOptions)
+ .then((response) => response.json())
+ .then((data) => {
+ if (data.features.length === 0) {
+ setSearchResultsLocation([])
+ } else {
+ data.features.forEach((feature: any) => {
+ feature.type = 'location'
+ })
+ setSearchResultsLocation(data.features)
+ }
+ })
+ .catch((error) => console.log('error', error))
+ }
- /**
- * One of the functions that is called when the user types in the search bar. It returns the search results for devices, retrived from the device list. The device list is proviided by the database in the /explore route and passed down to the search component.
- *
- * @param searchString string to search for devices in the device list
- */
- function getDevices(searchString: string) {
- var results: any[] = [];
- var deviceResults = 0;
+ /**
+ * One of the functions that is called when the user types in the search bar. It returns the search results for devices, retrived from the device list. The device list is proviided by the database in the /explore route and passed down to the search component.
+ *
+ * @param searchString string to search for devices in the device list
+ */
+ function getDevices(searchString: string) {
+ var results: any[] = []
+ var deviceResults = 0
- for (let index = 0; index < props.devices.features.length; index++) {
- const device = props.devices.features[index];
- if (deviceResults === 4) {
- setSearchResultsDevice(results);
- return;
- }
- if (
- device.properties.name
- .toLowerCase()
- .includes(searchString.toLowerCase()) ||
- device.properties.id.toLowerCase().includes(searchString.toLowerCase())
- ) {
- var newStructured = {
- display_name: device.properties.name,
- deviceId: device.properties.id,
- lng: device.properties.longitude,
- lat: device.properties.latitude,
- type: "device",
- };
- results.push(newStructured);
- deviceResults++;
- setSearchResultsDevice(results);
- }
- if (deviceResults === 0) {
- setSearchResultsDevice([]);
- }
- }
- }
+ for (let index = 0; index < props.devices.features.length; index++) {
+ const device = props.devices.features[index]
+ if (deviceResults === 4) {
+ setSearchResultsDevice(results)
+ return
+ }
+ if (
+ device.properties.name
+ .toLowerCase()
+ .includes(searchString.toLowerCase()) ||
+ device.properties.id.toLowerCase().includes(searchString.toLowerCase())
+ ) {
+ var newStructured = {
+ display_name: device.properties.name,
+ deviceId: device.properties.id,
+ lng: device.properties.longitude,
+ lat: device.properties.latitude,
+ type: 'device',
+ }
+ results.push(newStructured)
+ deviceResults++
+ setSearchResultsDevice(results)
+ }
+ if (deviceResults === 0) {
+ setSearchResultsDevice([])
+ }
+ }
+ }
- /**
- * useEffect hook that is called when the search string changes. It calls the getLocations and getDevices functions to get the search results for locations and devices.
- */
- useEffect(() => {
- if (props.searchString.length >= 2) {
- getLocations(props.searchString);
- getDevices(props.searchString);
- }
- if (props.searchString.length < 2) {
- setSearchResultsLocation([]);
- setSearchResultsDevice([]);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [props.searchString]);
+ /**
+ * useEffect hook that is called when the search string changes. It calls the getLocations and getDevices functions to get the search results for locations and devices.
+ */
+ useEffect(() => {
+ if (props.searchString.length >= 2) {
+ getLocations(props.searchString)
+ getDevices(props.searchString)
+ }
+ if (props.searchString.length < 2) {
+ setSearchResultsLocation([])
+ setSearchResultsDevice([])
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.searchString])
- if (searchResultsLocation.length > 0 || searchResultsDevice.length > 0)
- return (
-
- );
+ if (searchResultsLocation.length > 0 || searchResultsDevice.length > 0)
+ return (
+
+ )
- return null;
+ return null
}
diff --git a/app/components/search/search-list-item.tsx b/app/components/search/search-list-item.tsx
index ecfa1a8f6..764bbc611 100644
--- a/app/components/search/search-list-item.tsx
+++ b/app/components/search/search-list-item.tsx
@@ -1,56 +1,56 @@
-import { type VariantProps, cva } from "class-variance-authority";
-import { type HTMLProps } from "react";
+import { type VariantProps, cva } from 'class-variance-authority'
+import { type HTMLProps } from 'react'
export type HeroIcon = React.ComponentType<
- React.PropsWithoutRef> & {
- title?: string | undefined;
- titleId?: string | undefined;
- }
->;
+ React.PropsWithoutRef> & {
+ title?: string | undefined
+ titleId?: string | undefined
+ }
+>
interface SearchListItemProps
- extends VariantProps,
- HTMLProps {
- index: number;
- controlPress: boolean;
- icon: HeroIcon;
- name: string;
+ extends VariantProps,
+ HTMLProps {
+ index: number
+ controlPress: boolean
+ icon: HeroIcon
+ name: string
}
const searchListItemStyle = cva(
- "relative my-1 flex gap-2 h-8 px-2 items-center rounded-lg data-[active=true]:bg-light-green data-[active=true]:text-white",
- {
- variants: {
- active: {
- true: "bg-light-green text-white",
- },
- },
- }
-);
+ 'relative my-1 flex h-8 items-center gap-2 rounded-lg px-2 data-[active=true]:bg-light-green data-[active=true]:text-white',
+ {
+ variants: {
+ active: {
+ true: 'bg-light-green text-white',
+ },
+ },
+ },
+)
export default function SearchListItem({
- active,
- index,
- controlPress,
- icon,
- name,
- ...props
+ active,
+ index,
+ controlPress,
+ icon,
+ name,
+ ...props
}: SearchListItemProps) {
- const Icon = icon;
+ const Icon = icon
- return (
-
- {controlPress && (
-
- {index + 1}
-
- )}
-
-
-
- {name}
-
-
+ {controlPress && (
+
+ {index + 1}
+
+ )}
+
+
+
+ {name}
+
+
{
- items: {
- href: string;
- title: string;
- }[];
+ items: {
+ href: string
+ title: string
+ }[]
}
export function SidebarSettingsNav({
- className,
- items,
- ...props
+ className,
+ items,
+ ...props
}: SidebarNavProps) {
- return (
-
- {items.map((item) => (
-
- isPending
- ? ""
- : isActive
- ? "bg-muted hover:bg-muted"
- : "hover:bg-transparent hover:underline"
- }
- >
- {item.title}
-
- ))}
-
- );
+ return (
+
+ {items.map((item) => (
+
+ isPending
+ ? ''
+ : isActive
+ ? 'bg-muted hover:bg-muted'
+ : 'hover:bg-transparent hover:underline'
+ }
+ >
+ {item.title}
+
+ ))}
+
+ )
}
diff --git a/app/components/spinner/index.tsx b/app/components/spinner/index.tsx
index 21c99478a..377c527da 100644
--- a/app/components/spinner/index.tsx
+++ b/app/components/spinner/index.tsx
@@ -1,44 +1,44 @@
export default function Spinner() {
- return (
- <>
-
-
- );
+ return (
+ <>
+
+
+ )
}
diff --git a/app/components/ui/accordion.tsx b/app/components/ui/accordion.tsx
index 5d1474263..614d9a41f 100644
--- a/app/components/ui/accordion.tsx
+++ b/app/components/ui/accordion.tsx
@@ -1,59 +1,59 @@
-"use client"
+'use client'
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-import * as React from "react"
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Accordion = AccordionPrimitive.Root
const AccordionItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- svg]:rotate-180",
- className
- )}
- {...props}
- >
- {children}
-
-
+
+ svg]:rotate-180',
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- {children}
-
+
+ {children}
+
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
diff --git a/app/components/ui/alert-dialog.tsx b/app/components/ui/alert-dialog.tsx
index 34f153c61..1aa744981 100644
--- a/app/components/ui/alert-dialog.tsx
+++ b/app/components/ui/alert-dialog.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import * as React from "react"
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
-import { buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
const AlertDialog = AlertDialogPrimitive.Root
@@ -13,129 +13,129 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
const AlertDialogPortal = AlertDialogPrimitive.Portal
const AlertDialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
+
+
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
const AlertDialogHeader = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
+
)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+AlertDialogHeader.displayName = 'AlertDialogHeader'
const AlertDialogFooter = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
+
)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = 'AlertDialogFooter'
const AlertDialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- {rounded} ;
+ const count = useMotionValue(from)
+ const rounded = useTransform(count, (latest) => Math.round(latest))
+
+ const ref = useRef(null)
+ const inView = useInView(ref)
+
+ useEffect(() => {
+ let timeoutId: number | undefined
+
+ const updateCount = () => {
+ if (count.get() !== to) {
+ animate(count, to, { duration: 0.15 })
+ requestAnimationFrame(updateCount)
+ }
+ }
+
+ if (inView) {
+ timeoutId = window.setTimeout(() => {
+ requestAnimationFrame(updateCount)
+ }, 450)
+ }
+
+ return () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId)
+ }
+ }
+ }, [count, inView, to])
+
+ return {rounded}
}
-export default AnimatedCounter;
+export default AnimatedCounter
diff --git a/app/components/ui/aspect-ratio.tsx b/app/components/ui/aspect-ratio.tsx
index d6a5226f5..794c6f4cd 100644
--- a/app/components/ui/aspect-ratio.tsx
+++ b/app/components/ui/aspect-ratio.tsx
@@ -1,6 +1,6 @@
-"use client"
+'use client'
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
const AspectRatio = AspectRatioPrimitive.Root
diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
index 67875a403..06847b0ba 100644
--- a/app/components/ui/avatar.tsx
+++ b/app/components/ui/avatar.tsx
@@ -1,49 +1,49 @@
-"use client"
+'use client'
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import * as React from "react"
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Avatar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- VariantProps {}
+ extends React.HTMLAttributes,
+ VariantProps {}
function Badge({ className, variant, ...props }: BadgeProps) {
- return (
-
- )
+ return (
+
+ )
}
export { Badge, badgeVariants }
diff --git a/app/components/ui/breadcrumb.tsx b/app/components/ui/breadcrumb.tsx
index ee0a07751..4534724e7 100644
--- a/app/components/ui/breadcrumb.tsx
+++ b/app/components/ui/breadcrumb.tsx
@@ -1,115 +1,118 @@
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-import * as React from "react"
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Breadcrumb = React.forwardRef<
- HTMLElement,
- React.ComponentPropsWithoutRef<"nav"> & {
- separator?: React.ReactNode
- }
+ HTMLElement,
+ React.ComponentPropsWithoutRef<'nav'> & {
+ separator?: React.ReactNode
+ }
>(({ ...props }, ref) => svg]:w-3.5 [&>svg]:h-3.5", className)}
- {...props}
- >
- {children ??
+ children,
+ className,
+ ...props
+}: React.ComponentProps<'li'>) => (
+ svg]:h-3.5 [&>svg]:w-3.5', className)}
+ {...props}
+ >
+ {children ??
)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
const BreadcrumbEllipsis = ({
- className,
- ...props
-}: React.ComponentProps<"span">) => (
-
- More
-
+ className,
+ ...props
+}: React.ComponentProps<'span'>) => (
+
+ More
+
)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
export {
- Breadcrumb,
- BreadcrumbList,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbPage,
- BreadcrumbSeparator,
- BreadcrumbEllipsis,
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
}
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 22cda64ba..efc496a2b 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -1,56 +1,58 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import * as React from "react"
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
- {
- variants: {
- variant: {
- default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
- destructive:
- "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
- outline:
- "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
- secondary:
- "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
- ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
- link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
- },
- size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90',
+ destructive:
+ 'hover:bg-red-500/90 dark:hover:bg-red-900/90 bg-red-500 text-slate-50 dark:bg-red-900 dark:text-slate-50',
+ outline:
+ 'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+ secondary:
+ 'bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
+ ghost:
+ 'hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+ link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50',
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
)
export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
}
const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
-
function Calendar({
- className,
- classNames,
- showOutsideDays = true,
- ...props
+ className,
+ classNames,
+ showOutsideDays = true,
+ ...props
}: CalendarProps) {
- return (
- (
- (
+
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
-Card.displayName = "Card"
+Card.displayName = 'Card'
const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = 'CardHeader'
const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = 'CardDescription'
const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'
const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = 'CardFooter'
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
index 51a7c5a17..a9334f0d4 100644
--- a/app/components/ui/checkbox.tsx
+++ b/app/components/ui/checkbox.tsx
@@ -1,29 +1,29 @@
-"use client"
+'use client'
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-import * as React from "react"
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const Checkbox = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-
-
+
+
+
+
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
diff --git a/app/components/ui/command.tsx b/app/components/ui/command.tsx
index df7b1b9ce..a3c419040 100644
--- a/app/components/ui/command.tsx
+++ b/app/components/ui/command.tsx
@@ -1,156 +1,156 @@
-"use client";
+'use client'
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
-import * as React from "react";
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import * as React from 'react'
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
const Command = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-
- {children}
-
-
-
- );
-};
+ return (
+
+
+
+ {children}
+
+
+
+ )
+}
const CommandInput = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>((props, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ) => {
- return (
-
-
- {children}
-
-
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+
+ {children}
+
+
+)
+DialogPortal.displayName = DialogPrimitive.Portal.displayName
const DialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
- {children}
-
- Close
-
-
-
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+
+ {children}
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
-);
-DialogHeader.displayName = "DialogHeader";
+
+)
+DialogHeader.displayName = 'DialogHeader'
const DialogFooter = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
-);
-DialogFooter.displayName = "DialogFooter";
+
+)
+DialogFooter.displayName = 'DialogFooter'
const DialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
))
-DrawerContent.displayName = "DrawerContent"
+DrawerContent.displayName = 'DrawerContent'
const DrawerHeader = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
+
)
-DrawerHeader.displayName = "DrawerHeader"
+DrawerHeader.displayName = 'DrawerHeader'
const DrawerFooter = ({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) => (
-
+
)
-DrawerFooter.displayName = "DrawerFooter"
+DrawerFooter.displayName = 'DrawerFooter'
const DrawerTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
>(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
+
+ {children}
+
))
DropdownMenuSubTrigger.displayName =
- DropdownMenuPrimitive.SubTrigger.displayName
+ DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, sideOffset = 4, ...props }, ref) => (
-
-
+
+
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
>(({ className, inset, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
- {children}
-
+
+
+
+
+
+ {children}
+
))
DropdownMenuCheckboxItem.displayName =
- DropdownMenuPrimitive.CheckboxItem.displayName
+ DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
-
-
-
- {children}
-
+
+
+
+
+
+ {children}
+
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
>(({ className, inset, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ) => {
- return (
- = FieldPath
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
> = {
- name: TName;
-};
+ name: TName
+}
const FormFieldContext = React.createContext(
- {} as FormFieldContextValue
-);
+ {} as FormFieldContextValue,
+)
const FormField = <
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
>({
- ...props
+ ...props
}: ControllerProps) => {
- return (
-
-
- );
-};
+ return (
+
+
+ )
+}
const useFormField = () => {
- const fieldContext = React.useContext(FormFieldContext);
- const itemContext = React.useContext(FormItemContext);
- const { getFieldState, formState } = useFormContext();
+ const fieldContext = React.useContext(FormFieldContext)
+ const itemContext = React.useContext(FormItemContext)
+ const { getFieldState, formState } = useFormContext()
- const fieldState = getFieldState(fieldContext.name, formState);
+ const fieldState = getFieldState(fieldContext.name, formState)
- if (!fieldContext) {
- throw new Error("useFormField should be used within ");
- }
+ if (!fieldContext) {
+ throw new Error('useFormField should be used within ')
+ }
- const { id } = itemContext;
+ const { id } = itemContext
- return {
- id,
- name: fieldContext.name,
- formItemId: `${id}-form-item`,
- formDescriptionId: `${id}-form-item-description`,
- formMessageId: `${id}-form-item-message`,
- ...fieldState,
- };
-};
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}
type FormItemContextValue = {
- id: string;
-};
+ id: string
+}
const FormItemContext = React.createContext(
- {} as FormItemContextValue
-);
+ {} as FormItemContextValue,
+)
const FormItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const id = React.useId();
+ const id = React.useId()
- return (
-
-
-
- );
-});
-FormItem.displayName = "FormItem";
+ return (
+
+
+
+ )
+})
+FormItem.displayName = 'FormItem'
const FormLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
- const { error, formItemId } = useFormField();
-
- return (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ ...props }, ref) => {
- const { error, formItemId, formDescriptionId, formMessageId } =
- useFormField();
-
- return (
-
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const { formDescriptionId } = useFormField();
-
- return (
-
- );
-});
-FormDescription.displayName = "FormDescription";
+ const { formDescriptionId } = useFormField()
+
+ return (
+
+ )
+})
+FormDescription.displayName = 'FormDescription'
const FormMessage = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, children, ...props }, ref) => {
- const { error, formMessageId } = useFormField();
- const body = error ? String(error?.message) : children;
-
- if (!body) {
- return null;
- }
-
- return (
-
- {body}
-
- );
-});
-FormMessage.displayName = "FormMessage";
+ const { error, formMessageId } = useFormField()
+ const body = error ? String(error?.message) : children
+
+ if (!body) {
+ return null
+ }
+
+ return (
+
+ {body}
+
+ )
+})
+FormMessage.displayName = 'FormMessage'
export {
- useFormField,
- Form,
- FormItem,
- FormLabel,
- FormControl,
- FormDescription,
- FormMessage,
- FormField,
-};
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+}
diff --git a/app/components/ui/hover-card.tsx b/app/components/ui/hover-card.tsx
index 22ee651a6..9ecb05f0d 100644
--- a/app/components/ui/hover-card.tsx
+++ b/app/components/ui/hover-card.tsx
@@ -1,28 +1,28 @@
-"use client"
+'use client'
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-import * as React from "react"
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const HoverCard = HoverCardPrimitive.Root
const HoverCardTrigger = HoverCardPrimitive.Trigger
const HoverCardContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
- ,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+ {}
+ extends React.InputHTMLAttributes {}
const Input = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
- ,
- React.ComponentPropsWithoutRef &
- VariantProps
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-
-
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName
diff --git a/app/components/ui/radio-group.tsx b/app/components/ui/radio-group.tsx
index ce4592580..b183ad6c5 100644
--- a/app/components/ui/radio-group.tsx
+++ b/app/components/ui/radio-group.tsx
@@ -1,43 +1,43 @@
-"use client"
+'use client'
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-import * as React from "react"
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
const RadioGroup = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
- return (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef
- 
- 
- 
-