Tilen Komel
1 year ago
21 changed files with 679 additions and 283 deletions
@ -0,0 +1,60 @@ |
|||||
|
import type { |
||||
|
BaseFormBuilderProps, |
||||
|
GenericFormElementProps, |
||||
|
} from "@components/Form/DynamicForm.tsx"; |
||||
|
import type { FieldValues } from "react-hook-form"; |
||||
|
import { MultiSelect, MultiSelectItem } from "../UI/MultiSelect"; |
||||
|
|
||||
|
export interface MultiSelectFieldProps<T> extends BaseFormBuilderProps<T> { |
||||
|
type: "multiSelect"; |
||||
|
placeholder?: string; |
||||
|
onValueChange: (name: string) => void; |
||||
|
isChecked: (name: string) => boolean; |
||||
|
value: string[]; |
||||
|
properties: BaseFormBuilderProps<T>["properties"] & { |
||||
|
enumValue: { |
||||
|
[s: string]: string | number; |
||||
|
}; |
||||
|
formatEnumName?: boolean; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export function MultiSelectInput<T extends FieldValues>({ |
||||
|
field, |
||||
|
}: GenericFormElementProps<T, MultiSelectFieldProps<T>>) { |
||||
|
const { enumValue, formatEnumName, ...remainingProperties } = |
||||
|
field.properties; |
||||
|
|
||||
|
// Make sure to filter out the UNSET value, as it shouldn't be shown in the UI
|
||||
|
const optionsEnumValues = enumValue |
||||
|
? Object.entries(enumValue) |
||||
|
.filter((value) => typeof value[1] === "number") |
||||
|
.filter((value) => value[0] !== "UNSET") |
||||
|
: []; |
||||
|
|
||||
|
const formatName = (name: string) => { |
||||
|
if (!formatEnumName) return name; |
||||
|
return name |
||||
|
.replace(/_/g, " ") |
||||
|
.toLowerCase() |
||||
|
.split(" ") |
||||
|
.map((s) => s.charAt(0).toUpperCase() + s.substring(1)) |
||||
|
.join(" "); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<MultiSelect {...remainingProperties}> |
||||
|
{optionsEnumValues.map(([name, value]) => ( |
||||
|
<MultiSelectItem |
||||
|
key={name} |
||||
|
name={name} |
||||
|
value={value.toString()} |
||||
|
checked={field.isChecked(name)} |
||||
|
onCheckedChange={() => field.onValueChange(name)} |
||||
|
> |
||||
|
{formatEnumName ? formatName(name) : name} |
||||
|
</MultiSelectItem> |
||||
|
))} |
||||
|
</MultiSelect> |
||||
|
); |
||||
|
} |
||||
@ -1,74 +1,169 @@ |
|||||
import type { MessageWithState } from "@app/core/stores/deviceStore.ts"; |
import { |
||||
|
Tooltip, |
||||
|
TooltipArrow, |
||||
|
TooltipContent, |
||||
|
TooltipProvider, |
||||
|
TooltipTrigger, |
||||
|
} from "@app/components/UI/Tooltip"; |
||||
|
import { useAppStore } from "@app/core/stores/appStore"; |
||||
|
import { |
||||
|
type MessageWithState, |
||||
|
useDeviceStore, |
||||
|
} from "@app/core/stores/deviceStore.ts"; |
||||
|
import { cn } from "@app/core/utils/cn"; |
||||
import { Avatar } from "@components/UI/Avatar"; |
import { Avatar } from "@components/UI/Avatar"; |
||||
import type { Protobuf } from "@meshtastic/js"; |
import type { Protobuf } from "@meshtastic/js"; |
||||
import { |
import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react"; |
||||
AlertCircleIcon, |
import type { LucideIcon } from "lucide-react"; |
||||
CheckCircle2Icon, |
import { useMemo } from "react"; |
||||
CircleEllipsisIcon, |
|
||||
} from "lucide-react"; |
|
||||
|
|
||||
export interface MessageProps { |
const MESSAGE_STATES = { |
||||
|
ACK: "ack", |
||||
|
WAITING: "waiting", |
||||
|
FAILED: "failed", |
||||
|
} as const; |
||||
|
|
||||
|
type MessageState = MessageWithState["state"]; |
||||
|
|
||||
|
interface MessageProps { |
||||
lastMsgSameUser: boolean; |
lastMsgSameUser: boolean; |
||||
message: MessageWithState; |
message: MessageWithState; |
||||
sender?: Protobuf.Mesh.NodeInfo; |
sender: Protobuf.Mesh.NodeInfo; |
||||
} |
} |
||||
|
|
||||
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
interface StatusTooltipProps { |
||||
return lastMsgSameUser ? ( |
state: MessageState; |
||||
<div className="ml-5 flex"> |
children: React.ReactNode; |
||||
{message.state === "ack" ? ( |
} |
||||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
|
||||
) : message.state === "waiting" ? ( |
interface StatusIconProps { |
||||
<CircleEllipsisIcon size={16} className="my-auto text-textSecondary" /> |
state: MessageState; |
||||
) : ( |
className?: string; |
||||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
} |
||||
)} |
|
||||
<span |
const STATUS_TEXT_MAP: Record<MessageState, string> = { |
||||
className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${ |
[MESSAGE_STATES.ACK]: "Message delivered", |
||||
message.state === "ack" ? "text-textPrimary" : "text-textSecondary" |
[MESSAGE_STATES.WAITING]: "Waiting for delivery", |
||||
}`}
|
[MESSAGE_STATES.FAILED]: "Delivery failed", |
||||
|
} as const; |
||||
|
|
||||
|
const STATUS_ICON_MAP: Record<MessageState, LucideIcon> = { |
||||
|
[MESSAGE_STATES.ACK]: CheckCircle2, |
||||
|
[MESSAGE_STATES.WAITING]: CircleEllipsis, |
||||
|
[MESSAGE_STATES.FAILED]: AlertCircle, |
||||
|
} as const; |
||||
|
|
||||
|
const getStatusText = (state: MessageState): string => STATUS_TEXT_MAP[state]; |
||||
|
|
||||
|
const StatusTooltip = ({ state, children }: StatusTooltipProps) => ( |
||||
|
<TooltipProvider> |
||||
|
<Tooltip> |
||||
|
<TooltipTrigger asChild>{children}</TooltipTrigger> |
||||
|
<TooltipContent |
||||
|
className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95" |
||||
|
side="top" |
||||
|
align="center" |
||||
|
sideOffset={5} |
||||
> |
> |
||||
{message.data} |
{getStatusText(state)} |
||||
</span> |
<TooltipArrow className="fill-slate-800" /> |
||||
</div> |
</TooltipContent> |
||||
) : ( |
</Tooltip> |
||||
<div className="mx-4 mt-2 gap-2"> |
</TooltipProvider> |
||||
<div className="flex gap-2"> |
); |
||||
<div className="w-6 cursor-pointer"> |
|
||||
<Avatar text={sender?.user?.shortName ?? "UNK"} /> |
const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => { |
||||
</div> |
const isFailed = state === MESSAGE_STATES.FAILED; |
||||
<span className="cursor-pointer font-medium text-textPrimary"> |
const iconClass = cn( |
||||
{sender?.user?.longName ?? "UNK"} |
className, |
||||
</span> |
"text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0", |
||||
<span className="mt-1 font-mono text-xs text-textSecondary"> |
); |
||||
{message.rxTime.toLocaleDateString()} |
|
||||
|
const Icon = STATUS_ICON_MAP[state]; |
||||
|
return ( |
||||
|
<StatusTooltip state={state}> |
||||
|
<Icon |
||||
|
className={iconClass} |
||||
|
{...otherProps} |
||||
|
color={isFailed ? "red" : "currentColor"} |
||||
|
/> |
||||
|
</StatusTooltip> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const getMessageTextStyles = (state: MessageState) => { |
||||
|
const isAcknowledged = state === MESSAGE_STATES.ACK; |
||||
|
const isFailed = state === MESSAGE_STATES.FAILED; |
||||
|
const isWaiting = state === MESSAGE_STATES.WAITING; |
||||
|
|
||||
|
return cn( |
||||
|
"break-words overflow-hidden", |
||||
|
isAcknowledged |
||||
|
? "text-black dark:text-white" |
||||
|
: "text-black dark:text-gray-400", |
||||
|
isFailed && "text-red-500 dark:text-red-500", |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const TimeDisplay = ({ |
||||
|
date, |
||||
|
className, |
||||
|
}: { date: Date; className?: string }) => ( |
||||
|
<div className={cn("flex items-center gap-2 flex-shrink-0", className)}> |
||||
|
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono"> |
||||
|
{date.toLocaleDateString()} |
||||
</span> |
</span> |
||||
<span className="mt-1 font-mono text-xs text-textSecondary"> |
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono"> |
||||
{message.rxTime.toLocaleTimeString(undefined, { |
{date.toLocaleTimeString(undefined, { |
||||
hour: "2-digit", |
hour: "2-digit", |
||||
minute: "2-digit", |
minute: "2-digit", |
||||
})} |
})} |
||||
</span> |
</span> |
||||
</div> |
</div> |
||||
<div className="ml-1 flex"> |
); |
||||
{message.state === "ack" ? ( |
|
||||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
||||
) : message.state === "waiting" ? ( |
const { getDevices } = useDeviceStore(); |
||||
<CircleEllipsisIcon |
|
||||
size={16} |
const isDeviceUser = useMemo( |
||||
className="my-auto text-textSecondary" |
() => |
||||
/> |
getDevices() |
||||
) : ( |
.map((device) => device.nodes.get(device.hardware.myNodeNum)?.num) |
||||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
.includes(message.from), |
||||
|
[getDevices, message.from], |
||||
|
); |
||||
|
const messageUser = sender?.user; |
||||
|
|
||||
|
const messageTextClass = getMessageTextStyles(message.state); |
||||
|
|
||||
|
return ( |
||||
|
<div className="flex flex-col w-full px-4 justify-start"> |
||||
|
<div |
||||
|
className={cn( |
||||
|
"flex flex-col flex-wrap items-start py-1", |
||||
|
isDeviceUser && "items-end", |
||||
)} |
)} |
||||
<span |
|
||||
className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${ |
|
||||
message.state === "ack" ? "text-textPrimary" : "text-textSecondary" |
|
||||
}`}
|
|
||||
> |
> |
||||
{message.data} |
<div className="flex items-center gap-2 mb-2"> |
||||
|
{!lastMsgSameUser ? ( |
||||
|
<div className="flex place-items-center gap-2 mb-1"> |
||||
|
<Avatar text={messageUser?.shortName} /> |
||||
|
<div className="flex flex-col"> |
||||
|
<span className="font-medium text-gray-900 dark:text-white truncate"> |
||||
|
{messageUser?.longName} |
||||
</span> |
</span> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
) : null} |
||||
|
</div> |
||||
|
<TimeDisplay date={message.rxTime} /> |
||||
|
<div className="flex place-items-center gap-2 pb-2"> |
||||
|
<div className={cn(isDeviceUser && "pl-11", messageTextClass)}> |
||||
|
{message.data} |
||||
|
</div> |
||||
|
<StatusIcon state={message.state} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
); |
); |
||||
}; |
}; |
||||
|
|||||
@ -0,0 +1,57 @@ |
|||||
|
import { cn } from "@app/core/utils/cn"; |
||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; |
||||
|
import { Check } from "lucide-react"; |
||||
|
|
||||
|
interface MultiSelectProps { |
||||
|
children: React.ReactNode; |
||||
|
className?: string; |
||||
|
} |
||||
|
|
||||
|
const MultiSelect = ({ children, className = "" }: MultiSelectProps) => { |
||||
|
return ( |
||||
|
<div className={cn("flex flex-wrap gap-2", className)}>{children}</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
interface MultiSelectItemProps { |
||||
|
name: string; |
||||
|
value: string; |
||||
|
checked: boolean; |
||||
|
onCheckedChange: (name: string, value: boolean) => void; |
||||
|
children: React.ReactNode; |
||||
|
className?: string; |
||||
|
} |
||||
|
|
||||
|
const MultiSelectItem = ({ |
||||
|
name, |
||||
|
value, |
||||
|
checked, |
||||
|
onCheckedChange, |
||||
|
children, |
||||
|
className = "", |
||||
|
}: MultiSelectItemProps) => { |
||||
|
return ( |
||||
|
<CheckboxPrimitive.Root |
||||
|
name={name} |
||||
|
id={value} |
||||
|
checked={checked} |
||||
|
onCheckedChange={(val) => onCheckedChange(name, !!val)} |
||||
|
className={cn( |
||||
|
` |
||||
|
inline-flex items-center rounded-md px-3 py-2 text-sm transition-colors |
||||
|
border border-slate-300 |
||||
|
hover:bg-slate-100 dark:hover:bg-slate-800 |
||||
|
focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 |
||||
|
data-[state=checked]:bg-slate-100 dark:data-[state=checked]:bg-slate-700`,
|
||||
|
className, |
||||
|
)} |
||||
|
> |
||||
|
<CheckboxPrimitive.Indicator className="mr-2"> |
||||
|
<Check className="h-4 w-4 animate-in zoom-in duration-200" /> |
||||
|
</CheckboxPrimitive.Indicator> |
||||
|
{children} |
||||
|
</CheckboxPrimitive.Root> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export { MultiSelect, MultiSelectItem }; |
||||
@ -0,0 +1,120 @@ |
|||||
|
import { useCallback, useMemo, useState } from "react"; |
||||
|
|
||||
|
const FLAGS = { |
||||
|
UNSET: 0, |
||||
|
Altitude: 1, |
||||
|
"Altitude is Mean Sea Level": 2, |
||||
|
"Altitude Geoidal Seperation": 4, |
||||
|
"Dilution of precision (DOP) PDOP used by default": 8, |
||||
|
"If DOP is set, use HDOP / VDOP values instead of PDOP": 16, |
||||
|
"Number of satellites": 32, |
||||
|
"Sequence number": 64, |
||||
|
Timestamp: 128, |
||||
|
"Vehicle heading": 256, |
||||
|
"Vehicle speed": 512, |
||||
|
} as const; |
||||
|
|
||||
|
export type FlagName = keyof typeof FLAGS; |
||||
|
type FlagsObject = typeof FLAGS; |
||||
|
|
||||
|
type UsePositionFlagsProps = { |
||||
|
decode: (value: number) => FlagName[]; |
||||
|
encode: (flagNames: FlagName[]) => number; |
||||
|
hasFlag: (value: number, flagName: FlagName) => boolean; |
||||
|
getAllFlags: () => FlagsObject; |
||||
|
isValidValue: (value: number) => boolean; |
||||
|
flagsValue: number; |
||||
|
activeFlags: FlagName[]; |
||||
|
toggleFlag: (flagName: FlagName) => void; |
||||
|
setFlag: (flagName: FlagName, enabled: boolean) => void; |
||||
|
setFlags: (value: number) => void; |
||||
|
clearFlags: () => void; |
||||
|
}; |
||||
|
|
||||
|
export const usePositionFlags = (initialValue = 0): UsePositionFlagsProps => { |
||||
|
const [flagsValue, setFlagsValue] = useState<number>(initialValue); |
||||
|
|
||||
|
const utils = useMemo(() => { |
||||
|
const decode = (value: number): FlagName[] => { |
||||
|
if (value === 0) return ["UNSET"]; |
||||
|
|
||||
|
const activeFlags: FlagName[] = []; |
||||
|
for (const [name, flagValue] of Object.entries(FLAGS)) { |
||||
|
if (flagValue !== 0 && (value & flagValue) === flagValue) { |
||||
|
activeFlags.push(name as FlagName); |
||||
|
} |
||||
|
} |
||||
|
return activeFlags; |
||||
|
}; |
||||
|
|
||||
|
const encode = (flagNames: FlagName[]): number => { |
||||
|
if (flagNames.includes("UNSET")) { |
||||
|
return 0; |
||||
|
} |
||||
|
return flagNames.reduce((acc, name) => { |
||||
|
const value = FLAGS[name]; |
||||
|
return acc | value; |
||||
|
}, 0); |
||||
|
}; |
||||
|
|
||||
|
const hasFlag = (value: number, flagName: FlagName): boolean => { |
||||
|
const flagValue = FLAGS[flagName]; |
||||
|
return (value & flagValue) === flagValue; |
||||
|
}; |
||||
|
|
||||
|
const getAllFlags = (): FlagsObject => { |
||||
|
return FLAGS; |
||||
|
}; |
||||
|
|
||||
|
const isValidValue = (value: number): boolean => { |
||||
|
const maxValue = Object.values(FLAGS) |
||||
|
.filter((val) => val !== 0) // Exclude UNSET (0) from the calculation
|
||||
|
.reduce((acc, val) => acc | val, 0); |
||||
|
return Number.isInteger(value) && value >= 0 && value <= maxValue; |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
decode, |
||||
|
encode, |
||||
|
hasFlag, |
||||
|
getAllFlags, |
||||
|
isValidValue, |
||||
|
}; |
||||
|
}, []); |
||||
|
|
||||
|
const toggleFlag = useCallback((flagName: FlagName) => { |
||||
|
const flagValue = FLAGS[flagName]; |
||||
|
setFlagsValue((prev) => prev ^ flagValue); |
||||
|
}, []); |
||||
|
|
||||
|
const setFlag = useCallback((flagName: FlagName, enabled: boolean) => { |
||||
|
const flagValue = FLAGS[flagName]; |
||||
|
setFlagsValue((prev) => (enabled ? prev | flagValue : prev & ~flagValue)); |
||||
|
}, []); |
||||
|
|
||||
|
const setFlags = useCallback( |
||||
|
(value: number) => { |
||||
|
if (!utils.isValidValue(value)) { |
||||
|
throw new Error(`Invalid flags value: ${value}`); |
||||
|
} |
||||
|
setFlagsValue(value); |
||||
|
}, |
||||
|
[utils], |
||||
|
); |
||||
|
|
||||
|
const clearFlags = useCallback(() => { |
||||
|
setFlagsValue(0); |
||||
|
}, []); |
||||
|
|
||||
|
const activeFlags = utils.decode(flagsValue); |
||||
|
|
||||
|
return { |
||||
|
...utils, |
||||
|
flagsValue, |
||||
|
activeFlags, |
||||
|
toggleFlag, |
||||
|
setFlag, |
||||
|
setFlags, |
||||
|
clearFlags, |
||||
|
}; |
||||
|
}; |
||||
@ -0,0 +1,31 @@ |
|||||
|
interface PluralForms { |
||||
|
one: string; |
||||
|
other: string; |
||||
|
[key: string]: string; |
||||
|
} |
||||
|
|
||||
|
interface FormatOptions { |
||||
|
locale?: string; |
||||
|
pluralRules?: Intl.PluralRulesOptions; |
||||
|
numberFormat?: Intl.NumberFormatOptions; |
||||
|
} |
||||
|
|
||||
|
export function formatQuantity( |
||||
|
value: number, |
||||
|
forms: PluralForms, |
||||
|
options: FormatOptions = {}, |
||||
|
) { |
||||
|
const { |
||||
|
locale = "en-US", |
||||
|
pluralRules: pluralOptions = { type: "cardinal" }, |
||||
|
numberFormat: numberOptions = {}, |
||||
|
} = options; |
||||
|
|
||||
|
const pluralRules = new Intl.PluralRules(locale, pluralOptions); |
||||
|
const numberFormat = new Intl.NumberFormat(locale, numberOptions); |
||||
|
|
||||
|
const pluralCategory = pluralRules.select(value); |
||||
|
const word = forms[pluralCategory]; |
||||
|
|
||||
|
return `${numberFormat.format(value)} ${word}`; |
||||
|
} |
||||
Loading…
Reference in new issue