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 type { Protobuf } from "@meshtastic/js"; |
|||
import { |
|||
AlertCircleIcon, |
|||
CheckCircle2Icon, |
|||
CircleEllipsisIcon, |
|||
} from "lucide-react"; |
|||
import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react"; |
|||
import type { LucideIcon } from "lucide-react"; |
|||
import { useMemo } from "react"; |
|||
|
|||
export interface MessageProps { |
|||
const MESSAGE_STATES = { |
|||
ACK: "ack", |
|||
WAITING: "waiting", |
|||
FAILED: "failed", |
|||
} as const; |
|||
|
|||
type MessageState = MessageWithState["state"]; |
|||
|
|||
interface MessageProps { |
|||
lastMsgSameUser: boolean; |
|||
message: MessageWithState; |
|||
sender?: Protobuf.Mesh.NodeInfo; |
|||
sender: Protobuf.Mesh.NodeInfo; |
|||
} |
|||
|
|||
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
|||
return lastMsgSameUser ? ( |
|||
<div className="ml-5 flex"> |
|||
{message.state === "ack" ? ( |
|||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
|||
) : message.state === "waiting" ? ( |
|||
<CircleEllipsisIcon size={16} className="my-auto text-textSecondary" /> |
|||
) : ( |
|||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
|||
)} |
|||
<span |
|||
className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${ |
|||
message.state === "ack" ? "text-textPrimary" : "text-textSecondary" |
|||
}`}
|
|||
interface StatusTooltipProps { |
|||
state: MessageState; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
interface StatusIconProps { |
|||
state: MessageState; |
|||
className?: string; |
|||
} |
|||
|
|||
const STATUS_TEXT_MAP: Record<MessageState, string> = { |
|||
[MESSAGE_STATES.ACK]: "Message delivered", |
|||
[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} |
|||
</span> |
|||
</div> |
|||
) : ( |
|||
<div className="mx-4 mt-2 gap-2"> |
|||
<div className="flex gap-2"> |
|||
<div className="w-6 cursor-pointer"> |
|||
<Avatar text={sender?.user?.shortName ?? "UNK"} /> |
|||
</div> |
|||
<span className="cursor-pointer font-medium text-textPrimary"> |
|||
{sender?.user?.longName ?? "UNK"} |
|||
</span> |
|||
<span className="mt-1 font-mono text-xs text-textSecondary"> |
|||
{message.rxTime.toLocaleDateString()} |
|||
{getStatusText(state)} |
|||
<TooltipArrow className="fill-slate-800" /> |
|||
</TooltipContent> |
|||
</Tooltip> |
|||
</TooltipProvider> |
|||
); |
|||
|
|||
const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => { |
|||
const isFailed = state === MESSAGE_STATES.FAILED; |
|||
const iconClass = cn( |
|||
className, |
|||
"text-gray-500 dark:text-gray-400 w-4 h-4 flex-shrink-0", |
|||
); |
|||
|
|||
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 className="mt-1 font-mono text-xs text-textSecondary"> |
|||
{message.rxTime.toLocaleTimeString(undefined, { |
|||
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono"> |
|||
{date.toLocaleTimeString(undefined, { |
|||
hour: "2-digit", |
|||
minute: "2-digit", |
|||
})} |
|||
</span> |
|||
</div> |
|||
<div className="ml-1 flex"> |
|||
{message.state === "ack" ? ( |
|||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" /> |
|||
) : message.state === "waiting" ? ( |
|||
<CircleEllipsisIcon |
|||
size={16} |
|||
className="my-auto text-textSecondary" |
|||
/> |
|||
) : ( |
|||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" /> |
|||
); |
|||
|
|||
export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => { |
|||
const { getDevices } = useDeviceStore(); |
|||
|
|||
const isDeviceUser = useMemo( |
|||
() => |
|||
getDevices() |
|||
.map((device) => device.nodes.get(device.hardware.myNodeNum)?.num) |
|||
.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> |
|||
</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