hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: lint/format all files (#604)

Browse Source 
* chore: lint/format all files

* Fix config sidebar button state (#602)

* chore: Update deno.lock version and add Radix UI slider component (#601)

* fix: improve how table addresses even/odd rows

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>
Co-authored-by: Kamil Dzieniszewski <kamil.dzieniszewski@gmail.com>
This commit is contained in:
Dan Ditomaso
2025-05-04 15:55:04 -04:00
committed by GitHub
co-authored by philon- Kamil Dzieniszewski
parent b7bdb1a502
commit 480ca46a95
104 changed files with 3104 additions and 2527 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Connect/BLE.tsx
+5 -5
View File
@@ -9,10 +9,12 @@ import { BleConnection, ServiceUuid } from "@meshtastic/js";
import { useCallback, useEffect, useState } from "react";
import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) => {
export const BLE = (
{ setConnectionInProgress, closeDialog }: TabElementProps,
) => {
const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
const { addDevice } = useDeviceStore();
const messageStore = useMessageStore()
const messageStore = useMessageStore();
const { setSelectedDevice } = useAppStore();
const updateBleDeviceList = useCallback(async (): Promise<void> => {
@@ -59,8 +61,6 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
<Button
variant="default"
onClick={async () => {
await navigator.bluetooth
.requestDevice({
filters: [{ services: [ServiceUuid] }],
@@ -82,4 +82,4 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
</Button>
</div>
);
};
};
src/components/PageComponents/Connect/HTTP.test.tsx
+13 -11
View File
@@ -1,15 +1,17 @@
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
import { MeshDevice } from "@meshtastic/core";
import { TransportHTTP } from "@meshtastic/transport-http";
import { vi, describe, it, expect } from "vitest";
import { describe, expect, it, vi } from "vitest";
vi.mock("@core/stores/appStore.ts", () => ({
useAppStore: vi.fn(() => ({ setSelectedDevice: vi.fn() })),
}));
vi.mock("@core/stores/deviceStore.ts", () => ({
useDeviceStore: vi.fn(() => ({ addDevice: vi.fn(() => ({ addConnection: vi.fn() })) })),
useDeviceStore: vi.fn(() => ({
addDevice: vi.fn(() => ({ addConnection: vi.fn() })),
})),
}));
vi.mock("@core/utils/randId.ts", () => ({
@@ -28,13 +30,13 @@ vi.mock("@meshtastic/core", () => ({
})),
}));
describe("HTTP Component", () => {
it("renders correctly", () => {
render(<HTTP closeDialog={vi.fn()} />);
expect(screen.getByText("IP Address/Hostname")).toBeInTheDocument();
expect(screen.getByRole("textbox")).toBeInTheDocument();
expect(screen.getByPlaceholderText("000.000.000.000 / meshtastic.local")).toBeInTheDocument();
expect(screen.getByPlaceholderText("000.000.000.000 / meshtastic.local"))
.toBeInTheDocument();
expect(screen.getByText("Use HTTPS")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
});
@@ -42,8 +44,9 @@ describe("HTTP Component", () => {
it("allows input field to be updated", () => {
render(<HTTP closeDialog={vi.fn()} />);
const inputField = screen.getByRole("textbox");
fireEvent.change(inputField, { target: { value: 'meshtastic.local' } })
expect(screen.getByPlaceholderText("000.000.000.000 / meshtastic.local")).toBeInTheDocument();
fireEvent.change(inputField, { target: { value: "meshtastic.local" } });
expect(screen.getByPlaceholderText("000.000.000.000 / meshtastic.local"))
.toBeInTheDocument();
});
it("toggles HTTPS switch and updates prefix", () => {
@@ -52,10 +55,10 @@ describe("HTTP Component", () => {
const switchInput = screen.getByRole("switch");
expect(screen.getByText("http://")).toBeInTheDocument();
fireEvent.click(switchInput)
fireEvent.click(switchInput);
expect(screen.getByText("https://")).toBeInTheDocument();
fireEvent.click(switchInput)
fireEvent.click(switchInput);
expect(switchInput).not.toBeChecked();
expect(screen.getByText("http://")).toBeInTheDocument();
});
@@ -89,8 +92,7 @@ describe("HTTP Component", () => {
expect(MeshDevice).toBeCalled();
});
} catch (e) {
console.error(e)
console.error(e);
}
});
});
src/components/PageComponents/Connect/HTTP.tsx
+27 -12
View File
@@ -11,7 +11,7 @@ import { randId } from "@core/utils/randId.ts";
import { MeshDevice } from "@meshtastic/core";
import { TransportHTTP } from "@meshtastic/transport-http";
import { useState } from "react";
import { useForm, useController } from "react-hook-form";
import { useController, useForm } from "react-hook-form";
import { AlertTriangle } from "lucide-react";
import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
@@ -20,7 +20,10 @@ interface FormData {
tls: boolean;
}
export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgress }: TabElementProps) => {
export const HTTP = (
{ closeDialog, setConnectionInProgress, connectionInProgress }:
TabElementProps,
) => {
const isURLHTTPS = location.protocol === "https:";
const { addDevice } = useDeviceStore();
@@ -30,8 +33,8 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
const { control, handleSubmit, register } = useForm<FormData>({
defaultValues: {
ip: ["client.meshtastic.org", "localhost"].includes(
globalThis.location.hostname,
)
globalThis.location.hostname,
)
? "meshtastic.local"
: globalThis.location.host,
tls: isURLHTTPS ? true : false,
@@ -42,7 +45,9 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
field: { value: tlsValue, onChange: setTLS },
} = useController({ name: "tls", control });
const [connectionError, setConnectionError] = useState<{ host: string; secure: boolean } | null>(null);
const [connectionError, setConnectionError] = useState<
{ host: string; secure: boolean } | null
>(null);
const onSubmit = handleSubmit(async (data) => {
setConnectionInProgress(true);
@@ -91,21 +96,31 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
{connectionError && (
<div className="mt-2 mb-2 p-3 rounded-md bg-amber-100 border border-amber-300 dark:bg-amber-100 dark:border-amber-300">
<div className="flex gap-2 items-start">
<AlertTriangle className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-600" size={20} />
<AlertTriangle
className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-600"
size={20}
/>
<div>
<p className="text-sm font-medium text-amber-800 dark:text-amber-800">
Connection Failed
</p>
<p className="text-xs mt-1 text-amber-700 dark:text-amber-700">
Could not connect to the device. {connectionError.secure && "If using HTTPS, you may need to accept a self-signed certificate first. "}
Could not connect to the device. {connectionError.secure &&
"If using HTTPS, you may need to accept a self-signed certificate first. "}
Please open{" "}
<Link
href={`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
href={`${
connectionError.secure ? "https" : "http"
}://${connectionError.host}`}
className="underline font-medium text-amber-800 dark:text-amber-800"
>
{`${connectionError.secure ? "https" : "http"}://${connectionError.host}`}
{`${
connectionError.secure ? "https" : "http"
}://${connectionError.host}`}
</Link>{" "}
in a new tab{connectionError.secure ? ", accept any TLS warnings if prompted, then try again" : ""}.{" "}
in a new tab{connectionError.secure
? ", accept any TLS warnings if prompted, then try again"
: ""}.{" "}
<Link
href="https://meshtastic.org/docs/software/web-client/#http"
className="underline font-medium text-amber-800 dark:text-amber-800"
@@ -120,10 +135,10 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
</div>
<Button
type="submit"
variant={"default"}
variant="default"
>
<span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
</Button>
</form>
);
};
};
src/components/PageComponents/Connect/Serial.tsx
+7 -4
View File
@@ -10,10 +10,12 @@ import { TransportWebSerial } from "@meshtastic/transport-web-serial";
import { useCallback, useEffect, useState } from "react";
import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps) => {
export const Serial = (
{ setConnectionInProgress, closeDialog }: TabElementProps,
) => {
const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
const { addDevice } = useDeviceStore();
const messageStore = useMessageStore()
const messageStore = useMessageStore();
const { setSelectedDevice } = useAppStore();
const updateSerialPortList = useCallback(async () => {
@@ -58,8 +60,9 @@ export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps
await onConnect(port);
}}
>
{`# ${index} - ${usbVendorId ?? "UNK"} - ${usbProductId ?? "UNK"
}`}
{`# ${index} - ${usbVendorId ?? "UNK"} - ${
usbProductId ?? "UNK"
}`}
</Button>
);
})}