mirror of
https://github.com/meshtastic/web.git
synced 2026-01-26 16:29:24 -05:00
Lint files
This commit is contained in:
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
3
prettier.config.cjs
Normal file
3
prettier.config.cjs
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
plugins: [require('prettier-plugin-tailwindcss')],
|
||||
}
|
||||
@@ -19,7 +19,7 @@ export const App = (): JSX.Element => {
|
||||
const device = getDevice(selectedDevice);
|
||||
|
||||
return (
|
||||
<div className="h-full flex w-full">
|
||||
<div className="flex h-full w-full">
|
||||
<DeviceSelector />
|
||||
|
||||
{device && (
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type React from 'react';
|
||||
import type React from "react";
|
||||
|
||||
import { DeviceContext } from '@core/providers/useDevice.js';
|
||||
import type { Device } from '@core/stores/deviceStore.js';
|
||||
import { DeviceContext } from "@core/providers/useDevice.js";
|
||||
import type { Device } from "@core/stores/deviceStore.js";
|
||||
|
||||
export interface DeviceProps {
|
||||
children: React.ReactNode;
|
||||
|
||||
@@ -19,7 +19,7 @@ export const Button = ({
|
||||
}: ButtonProps): JSX.Element => {
|
||||
return (
|
||||
<button
|
||||
className={`px-3 w-full rounded-md flex border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
|
||||
className={`flex w-full rounded-md border border-transparent px-3 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
|
||||
variant === "primary"
|
||||
? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
|
||||
: "bg-orange-100 text-orange-700 hover:bg-orange-200"
|
||||
@@ -33,7 +33,7 @@ export const Button = ({
|
||||
disabled={disabled}
|
||||
{...rest}
|
||||
>
|
||||
<div className="flex items-center m-auto gap-2 font-medium">
|
||||
<div className="m-auto flex items-center gap-2 font-medium">
|
||||
{iconBefore}
|
||||
{children}
|
||||
{iconAfter}
|
||||
|
||||
@@ -10,7 +10,7 @@ export const DeviceSelector = (): JSX.Element => {
|
||||
const { selectedDevice, setSelectedDevice } = useAppStore();
|
||||
|
||||
return (
|
||||
<div className="flex bg-slate-50 w-16 items-center whitespace-nowrap py-12 text-sm [writing-mode:vertical-rl] h-full">
|
||||
<div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 text-sm [writing-mode:vertical-rl]">
|
||||
<span className="font-mono text-slate-500">Connected Devices</span>
|
||||
<span className="mt-6 flex gap-4 font-bold text-slate-900">
|
||||
{getDevices().map((device) => (
|
||||
@@ -19,11 +19,11 @@ export const DeviceSelector = (): JSX.Element => {
|
||||
onClick={() => {
|
||||
setSelectedDevice(device.id);
|
||||
}}
|
||||
className="group flex w-8 h-8 p-0.5 cursor-pointer drop-shadow-md"
|
||||
className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
|
||||
>
|
||||
<Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
|
||||
<div
|
||||
className={`absolute -left-1.5 w-0.5 h-7 rounded-full group-hover:bg-orange-300 ${
|
||||
className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-orange-300 ${
|
||||
device.id === selectedDevice
|
||||
? "bg-orange-400"
|
||||
: "bg-transparent"
|
||||
@@ -35,14 +35,14 @@ export const DeviceSelector = (): JSX.Element => {
|
||||
onClick={() => {
|
||||
setSelectedDevice(0);
|
||||
}}
|
||||
className={`w-8 h-8 p-2 border-dashed border-2 rounded-md hover:border-orange-300 cursor-pointer ${
|
||||
className={`h-8 w-8 cursor-pointer rounded-md border-2 border-dashed p-2 hover:border-orange-300 ${
|
||||
selectedDevice === 0 ? "border-orange-400" : "border-slate-200"
|
||||
}`}
|
||||
>
|
||||
<PlusIcon />
|
||||
</div>
|
||||
</span>
|
||||
<img src="Logo_Black.svg" className="px-3 mt-auto" />
|
||||
<img src="Logo_Black.svg" className="mt-auto px-3" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -58,7 +58,7 @@ export const QRDialog = ({
|
||||
</Dialog.Description>
|
||||
<div className="flex">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-lg">Channels to include</span>
|
||||
<span className="text-lg font-medium">Channels to include</span>
|
||||
<span className="text-sm text-slate-600">
|
||||
The current LoRa configuration will also be shared.
|
||||
</span>
|
||||
@@ -86,8 +86,8 @@ export const QRDialog = ({
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col flex-grow m-2">
|
||||
<div className="flex m-auto">
|
||||
<div className="m-2 flex flex-grow flex-col">
|
||||
<div className="m-auto flex">
|
||||
<QRCode value={QRCodeURL} size={250} qrStyle="dots" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
|
||||
@@ -17,7 +17,7 @@ export const IconButton = ({
|
||||
}: IconButtonProps): JSX.Element => {
|
||||
return (
|
||||
<button
|
||||
className={`flex border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
|
||||
className={`flex rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${
|
||||
variant === "primary"
|
||||
? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
|
||||
: "bg-orange-100 text-orange-700 hover:bg-orange-200"
|
||||
|
||||
@@ -27,7 +27,7 @@ export const NewDevice = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-96 h-96 m-auto">
|
||||
<div className="m-auto h-96 w-96">
|
||||
<TabbedContent tabs={tabs} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -35,8 +35,8 @@ export const BLE = (): JSX.Element => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-4 gap-2 w-full">
|
||||
<div className="flex gap-2 flex-col h-48 overflow-y-auto">
|
||||
<div className="flex w-full flex-col gap-2 p-4">
|
||||
<div className="flex h-48 flex-col gap-2 overflow-y-auto">
|
||||
{bleDevices.map((device, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
|
||||
@@ -48,8 +48,8 @@ export const HTTP = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
<form className="w-full p-4 gap-2 flex flex-col" onSubmit={onSubmit}>
|
||||
<div className="h-48 flex flex-col gap-2">
|
||||
<form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
|
||||
<div className="flex h-48 flex-col gap-2">
|
||||
<Input
|
||||
label="IP Address/Hostname"
|
||||
prefix={TLSEnabled ? "https://" : "http://"}
|
||||
|
||||
@@ -46,8 +46,8 @@ export const Serial = (): JSX.Element => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-4 gap-2 w-full">
|
||||
<div className="flex gap-2 flex-col h-48 overflow-y-auto">
|
||||
<div className="flex w-full flex-col gap-2 p-4">
|
||||
<div className="flex h-48 flex-col gap-2 overflow-y-auto">
|
||||
{serialPorts.map((port, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
|
||||
@@ -31,8 +31,8 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-grow">
|
||||
<div className="flex flex-col flex-grow">
|
||||
<div className="flex flex-grow flex-col">
|
||||
<div className="flex flex-grow flex-col">
|
||||
{channel.messages.map((message, index) => (
|
||||
<Message
|
||||
key={index}
|
||||
|
||||
@@ -29,17 +29,17 @@ export const Message = ({
|
||||
};
|
||||
|
||||
return lastMsgSameUser ? (
|
||||
<div className="flex ml-4">
|
||||
<div className="ml-4 flex">
|
||||
{message.ack ? (
|
||||
<CheckCircleIcon className="my-auto text-slate-200 h-4" />
|
||||
<CheckCircleIcon className="my-auto h-4 text-slate-200" />
|
||||
) : (
|
||||
<EllipsisHorizontalCircleIcon className="my-auto text-slate-200 h-4" />
|
||||
<EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
|
||||
)}
|
||||
{"waypointID" in message ? (
|
||||
<WaypointMessage waypointID={message.waypointID} />
|
||||
) : (
|
||||
<span
|
||||
className={`ml-4 pl-2 border-l-2 border-l-slate-200 ${
|
||||
className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
|
||||
message.ack ? "text-black" : "text-slate-500"
|
||||
}`}
|
||||
>
|
||||
@@ -48,9 +48,9 @@ export const Message = ({
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-4 gap-2 mt-2">
|
||||
<div className="mx-4 mt-2 gap-2">
|
||||
<div className="flex gap-2">
|
||||
<div className="cursor-pointer w-6" onClick={openPeer}>
|
||||
<div className="w-6 cursor-pointer" onClick={openPeer}>
|
||||
<Hashicon value={(sender?.num ?? 0).toString()} size={32} />
|
||||
</div>
|
||||
<span
|
||||
@@ -68,15 +68,15 @@ export const Message = ({
|
||||
</div>
|
||||
<div className="flex">
|
||||
{message.ack ? (
|
||||
<CheckCircleIcon className="my-auto text-slate-200 h-4" />
|
||||
<CheckCircleIcon className="my-auto h-4 text-slate-200" />
|
||||
) : (
|
||||
<EllipsisHorizontalCircleIcon className="my-auto text-slate-200 h-4" />
|
||||
<EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
|
||||
)}
|
||||
{"waypointID" in message ? (
|
||||
<WaypointMessage waypointID={message.waypointID} />
|
||||
) : (
|
||||
<span
|
||||
className={`ml-4 pl-2 border-l-2 border-l-slate-200 ${
|
||||
className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
|
||||
message.ack ? "text-black" : "text-slate-500"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const NewLocationMessage = (): JSX.Element => {
|
||||
const { connection } = useDevice();
|
||||
|
||||
return (
|
||||
<div className="w-96 m-4">
|
||||
<div className="m-4 w-96">
|
||||
<form
|
||||
onSubmit={(e): void => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -15,13 +15,13 @@ export const WaypointMessage = ({
|
||||
const waypoint = waypoints.find((wp) => wp.id === waypointID);
|
||||
|
||||
return (
|
||||
<div className="ml-4 pl-2 border-l-slate-200 border-l-2">
|
||||
<div className="gap-2 flex rounded-md p-2 shadow-md shadow-orange-300">
|
||||
<div className="ml-4 border-l-2 border-l-slate-200 pl-2">
|
||||
<div className="flex gap-2 rounded-md p-2 shadow-md shadow-orange-300">
|
||||
<MapPinIcon className="m-auto w-6 text-slate-600" />
|
||||
<div>
|
||||
<div className="flex gap-2">
|
||||
<div className="font-bold">{waypoint?.name}</div>
|
||||
<span className="text-sm font-mono text-slate-500">
|
||||
<span className="font-mono text-sm text-slate-500">
|
||||
{toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -54,7 +54,7 @@ export const PageNav = (): JSX.Element => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex bg-slate-50 w-12 items-center whitespace-nowrap py-4 text-sm [writing-mode:vertical-rl] h-full border-r border-slate-200 flex-shrink-0">
|
||||
<div className="flex h-full w-12 flex-shrink-0 items-center whitespace-nowrap border-r border-slate-200 bg-slate-50 py-4 text-sm [writing-mode:vertical-rl]">
|
||||
<span className="mt-6 flex gap-4 font-bold text-slate-500">
|
||||
{pages.map((Link) => (
|
||||
<div
|
||||
@@ -62,7 +62,7 @@ export const PageNav = (): JSX.Element => {
|
||||
onClick={() => {
|
||||
setActivePage(Link.page);
|
||||
}}
|
||||
className={`w-8 h-8 p-1 border-2 rounded-md hover:border-orange-300 cursor-pointer ${
|
||||
className={`h-8 w-8 cursor-pointer rounded-md border-2 p-1 hover:border-orange-300 ${
|
||||
Link.page === activePage
|
||||
? "border-orange-400"
|
||||
: "border-slate-200"
|
||||
|
||||
@@ -17,7 +17,7 @@ export const Sidebar = (): JSX.Element => {
|
||||
const { selectedDevice, setSelectedDevice } = useAppStore();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col relative bg-slate-50 w-80 p-2 border-x border-slate-200 gap-2 flex-shrink-0">
|
||||
<div className="relative flex w-80 flex-shrink-0 flex-col gap-2 border-x border-slate-200 bg-slate-50 p-2">
|
||||
<DeviceWidget
|
||||
name={
|
||||
nodes.find((n) => n.data.num === hardware.myNodeNum)?.data.user
|
||||
@@ -55,7 +55,7 @@ export const Sidebar = (): JSX.Element => {
|
||||
<dl className="mt-2 divide-y divide-gray-200 border-t border-b border-gray-200">
|
||||
<div className="flex justify-between py-3 text-sm font-medium">
|
||||
<dt className="text-gray-500">Firmware version</dt>
|
||||
<dd className="whitespace-nowrap text-gray-900 hover:underline hover:text-orange-400 cursor-pointer">
|
||||
<dd className="cursor-pointer whitespace-nowrap text-gray-900 hover:text-orange-400 hover:underline">
|
||||
{hardware.firmwareVersion}
|
||||
</dd>
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@ export const Sidebar = (): JSX.Element => {
|
||||
<dt className="text-gray-500">Bitrate</dt>
|
||||
<dd className="whitespace-nowrap text-gray-900">
|
||||
{hardware.bitrate.toFixed(2)}
|
||||
<span className="font-mono text-slate-500 text-sm ">bps</span>
|
||||
<span className="font-mono text-sm text-slate-500 ">bps</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,9 +32,9 @@ export const ConfiguringWidget = (): JSX.Element => {
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
|
||||
<div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
|
||||
<p className="text-xl font-bold">Connecting to device</p>
|
||||
<ol className="flex flex-col overflow-hidden gap-3">
|
||||
<ol className="flex flex-col gap-3 overflow-hidden">
|
||||
<StatusIndicator
|
||||
title="Device Info"
|
||||
current={hardware.myNodeNum ? 1 : 0}
|
||||
@@ -58,7 +58,7 @@ export const ConfiguringWidget = (): JSX.Element => {
|
||||
/>
|
||||
</ol>
|
||||
<div
|
||||
className="mt-2 rounded-md bg-[#dabb6b] p-1 ring-[#f9e3aa] cursor-pointer text-center"
|
||||
className="mt-2 cursor-pointer rounded-md bg-[#dabb6b] p-1 text-center ring-[#f9e3aa]"
|
||||
onClick={() => {
|
||||
void connection?.configure();
|
||||
}}
|
||||
@@ -89,12 +89,12 @@ const StatusIndicator = ({
|
||||
/>
|
||||
<div className="flex">
|
||||
<div
|
||||
className={`flex relative z-10 h-5 w-5 rounded-full border-2 ${
|
||||
className={`relative z-10 flex h-5 w-5 rounded-full border-2 ${
|
||||
current === 0
|
||||
? "border-[#dabb6b] bg-[#f9e3aa]"
|
||||
: current >= total
|
||||
? "bg-green-500 border-green-500"
|
||||
: "bg-[#f9e3aa] border-green-500"
|
||||
? "border-green-500 bg-green-500"
|
||||
: "border-green-500 bg-[#f9e3aa]"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
@@ -104,7 +104,7 @@ const StatusIndicator = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="flex text-sm ml-4 gap-1">
|
||||
<span className="ml-4 flex gap-1 text-sm">
|
||||
<span className="font-medium">{title}</span>
|
||||
<span className="font-mono text-slate-500">
|
||||
({current}
|
||||
|
||||
@@ -21,19 +21,19 @@ export const DeviceWidget = ({
|
||||
reconnect,
|
||||
}: DeviceWidgetProps): JSX.Element => {
|
||||
return (
|
||||
<div className="relative rounded-xl bg-emerald-400 overflow-hidden">
|
||||
<div className="absolute w-full h-full bottom-20">
|
||||
<div className="relative overflow-hidden rounded-xl bg-emerald-400">
|
||||
<div className="absolute bottom-20 h-full w-full">
|
||||
<Hashicon size={350} value={nodeNum} />
|
||||
</div>
|
||||
<div className="flex backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30 p-3">
|
||||
<div className="flex p-3 backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30">
|
||||
<div className="drop-shadow-md">
|
||||
<Hashicon size={96} value={nodeNum} />
|
||||
</div>
|
||||
<div className="w-full flex flex-col">
|
||||
<span className="font-bold text-slate-200 ml-auto text-xl whitespace-nowrap">
|
||||
<div className="flex w-full flex-col">
|
||||
<span className="ml-auto whitespace-nowrap text-xl font-bold text-slate-200">
|
||||
{name}
|
||||
</span>
|
||||
<div className="ml-auto my-auto">
|
||||
<div className="my-auto ml-auto">
|
||||
<Button
|
||||
onClick={disconnected ? reconnect : disconnect}
|
||||
variant={disconnected ? "secondary" : "primary"}
|
||||
|
||||
@@ -4,7 +4,7 @@ export interface NodeInfoWidgetProps {}
|
||||
|
||||
export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
|
||||
return (
|
||||
<div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
|
||||
<div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
|
||||
node info
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ export interface PeersWidgetProps {}
|
||||
|
||||
export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
|
||||
return (
|
||||
<div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
|
||||
<div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
|
||||
Peers
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ export interface PositionWidgetProps {}
|
||||
|
||||
export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
|
||||
return (
|
||||
<div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
|
||||
<div className="mb-4 flex flex-col space-y-3 rounded-2xl bg-[#f9e3aa] p-6 text-sm text-black">
|
||||
position
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -34,29 +34,29 @@ export const Form = ({
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
<form className="w-full" onSubmit={onSubmit} {...props}>
|
||||
{loading && (
|
||||
<div className="absolute flex w-full h-full bg-slate-600 rounded-md z-10">
|
||||
<ArrowPathIcon className="h-8 animate-spin m-auto" />
|
||||
<div className="absolute z-10 flex h-full w-full rounded-md bg-slate-600">
|
||||
<ArrowPathIcon className="m-auto h-8 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="select-none rounded-md p-4 bg-gray-700">
|
||||
<div className="select-none rounded-md bg-gray-700 p-4">
|
||||
<ol className="flex gap-4">
|
||||
<li className="text-gray-400 hover:text-gray-200 cursor-pointer">
|
||||
<li className="cursor-pointer text-gray-400 hover:text-gray-200">
|
||||
<HomeIcon className="h-5 w-5 flex-shrink-0 text-gray-400" />
|
||||
</li>
|
||||
{breadcrumbs.map((breadcrumb, index) => (
|
||||
<li key={index} className="flex gap-4">
|
||||
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-500" />
|
||||
<span className="text-sm font-medium text-gray-400 hover:text-gray-200 cursor-pointer">
|
||||
<span className="cursor-pointer text-sm font-medium text-gray-400 hover:text-gray-200">
|
||||
{breadcrumb}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="mt-2 flex items-center">
|
||||
<h2 className="font-bold text-white truncate text-3xl tracking-tight">
|
||||
<h2 className="truncate text-3xl font-bold tracking-tight text-white">
|
||||
{title}
|
||||
</h2>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<div className="ml-auto flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -73,7 +73,7 @@ export const Form = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col p-2 gap-3">{children}</div>
|
||||
<div className="flex flex-col gap-3 p-2">{children}</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -32,7 +32,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
className={`block w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 h-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${
|
||||
className={`block h-10 w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${
|
||||
prefix ? "rounded-l-none" : ""
|
||||
} ${action ? "rounded-r-none" : ""}`}
|
||||
{...rest}
|
||||
|
||||
@@ -20,13 +20,13 @@ export const TabbedContent = ({
|
||||
actions,
|
||||
}: TabbedContentProps): JSX.Element => {
|
||||
return (
|
||||
<Tab.Group as="div" className="flex flex-col gap-2 p-4 flex-grow">
|
||||
<Tab.Group as="div" className="flex flex-grow flex-col gap-2 p-4">
|
||||
<Tab.List className="flex gap-4 border-b pb-3">
|
||||
{tabs.map((entry, index) => (
|
||||
<Tab key={index}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex gap-3 h-10 font-medium text-sm rounded-md cursor-pointer px-3 ${
|
||||
className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${
|
||||
selected
|
||||
? "bg-gray-100 text-gray-700"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
import type { Device } from '@core/stores/deviceStore.js';
|
||||
import type { Device } from "@core/stores/deviceStore.js";
|
||||
|
||||
export const DeviceContext = createContext<Device | undefined>(undefined);
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import create from 'zustand';
|
||||
import create from "zustand";
|
||||
|
||||
interface AppState {
|
||||
selectedDevice: number;
|
||||
|
||||
@@ -23,13 +23,13 @@ export const AppConfig = (): JSX.Element => {
|
||||
];
|
||||
|
||||
return (
|
||||
<Tab.Group as="div" className="flex gap-3 w-full">
|
||||
<Tab.List className="flex flex-col w-44 gap-1">
|
||||
<Tab.Group as="div" className="flex w-full gap-3">
|
||||
<Tab.List className="flex w-44 flex-col gap-1">
|
||||
{configSections.map((Config, index) => (
|
||||
<Tab key={index} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
|
||||
className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
|
||||
selected
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
||||
|
||||
@@ -52,13 +52,13 @@ export const DeviceConfig = (): JSX.Element => {
|
||||
];
|
||||
|
||||
return (
|
||||
<Tab.Group as="div" className="flex gap-3 w-full">
|
||||
<Tab.List className="flex flex-col w-44 gap-1">
|
||||
<Tab.Group as="div" className="flex w-full gap-3">
|
||||
<Tab.List className="flex w-44 flex-col gap-1">
|
||||
{configSections.map((Config, index) => (
|
||||
<Tab key={index} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
|
||||
className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
|
||||
selected
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
||||
|
||||
@@ -45,13 +45,13 @@ export const ModuleConfig = (): JSX.Element => {
|
||||
];
|
||||
|
||||
return (
|
||||
<Tab.Group as="div" className="flex gap-3 w-full">
|
||||
<Tab.List className="flex flex-col gap-1 w-44">
|
||||
<Tab.Group as="div" className="flex w-full gap-3">
|
||||
<Tab.List className="flex w-44 flex-col gap-1">
|
||||
{configSections.map((Config, index) => (
|
||||
<Tab key={index} as={Fragment}>
|
||||
{({ selected }) => (
|
||||
<div
|
||||
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md cursor-pointer ${
|
||||
className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
|
||||
selected
|
||||
? "bg-gray-100 text-gray-900"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
||||
|
||||
@@ -14,8 +14,8 @@ export const MapPage = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<div className="flex-grow">
|
||||
<div className="absolute z-10 right-0 top-0 m-2 rounded-md p-2 shadow-md bg-white">
|
||||
<div className="font-medium text-lg p-1">Title</div>
|
||||
<div className="absolute right-0 top-0 z-10 m-2 rounded-md bg-white p-2 shadow-md">
|
||||
<div className="p-1 text-lg font-medium">Title</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{nodes.map((n) => (
|
||||
<div key={n.data.num} className="flex gap-2">
|
||||
|
||||
@@ -35,7 +35,7 @@ export const MessagesPage = (): JSX.Element => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<div className="flex w-full flex-col">
|
||||
<TabbedContent
|
||||
tabs={tabs}
|
||||
actions={[
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { IsBoolean, IsEnum } from 'class-validator';
|
||||
import { IsBoolean, IsEnum } from "class-validator";
|
||||
|
||||
import { Protobuf } from '@meshtastic/meshtasticjs';
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export class DeviceValidation implements Protobuf.Config_DeviceConfig {
|
||||
@IsEnum(Protobuf.Config_DeviceConfig_Role)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { IsBoolean, IsInt } from 'class-validator';
|
||||
import { IsBoolean, IsInt } from "class-validator";
|
||||
|
||||
import type { Protobuf } from '@meshtastic/meshtasticjs';
|
||||
import type { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export class PositionValidation implements Protobuf.Config_PositionConfig {
|
||||
@IsInt()
|
||||
|
||||
Reference in New Issue
Block a user