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

fix import paths, remove old form elements

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-02-13 15:46:45 +10:00
parent 270718148a
commit 292bd59099
45 changed files with 323 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Channel.tsx
+40 -29
View File
@@ -2,12 +2,13 @@ import { useEffect, useState } from "react";
import { fromByteArray, toByteArray } from "base64-js";
import { Controller, useForm } from "react-hook-form";
import { ChannelSettingsValidation } from "@app/validation/channelSettings.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { Input } from "@components/UI/Input.js";
import { Switch } from "@components/UI/Switch.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { RefreshCwIcon, EyeIcon, EyeOffIcon } from "lucide-react";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { Label } from "@radix-ui/react-label";
export interface SettingsPanelProps {
channel: Protobuf.Channel;
@@ -94,18 +95,21 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
name="enabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Enabled"
description="Description"
checked={value}
{...rest}
/>
<>
<Label>Enabled</Label>
<Switch
// label="Enabled"
// description="Description"
checked={value}
{...rest}
/>
</>
)}
/>
<Label>Name</Label>
<Input
label="Name"
description="Max transmit power in dBm"
error={errors.name?.message}
// description="Max transmit power in dBm"
// error={errors.name?.message}
{...register("name")}
/>
</>
@@ -131,42 +135,49 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
<option value={128}>128 Bit</option>
<option value={256}>256 Bit</option>
</Select> */}
<Label>Pre-Shared Key</Label>
<Input
width="100%"
label="Pre-Shared Key"
description="Channel key to encrypt data"
// width="100%"
// label="Pre-Shared Key"
// description="Channel key to encrypt data"
type={pskHidden ? "password" : "text"}
action={{
icon: pskHidden ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />,
action: () => {
icon: pskHidden ? EyeIcon : EyeOffIcon,
onClick: () => {
setPskHidden(!pskHidden);
}
}}
error={errors.psk?.message}
// error={errors.psk?.message}
{...register("psk")}
/>
<Controller
name="uplinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Uplink Enabled"
description="Send packets to designated MQTT server"
checked={value}
{...rest}
/>
<>
<Label>Uplink Enabled</Label>
<Switch
// label="Uplink Enabled"
// description="Send packets to designated MQTT server"
checked={value}
{...rest}
/>
</>
)}
/>
<Controller
name="downlinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Downlink Enabled"
description="Recieve packets to designated MQTT server"
checked={value}
{...rest}
/>
<>
<Label>Downlink Enabled</Label>
<Switch
// label="Downlink Enabled"
// description="Recieve packets to designated MQTT server"
checked={value}
{...rest}
/>
</>
)}
/>
</form>
src/components/PageComponents/Config/Bluetooth.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Bluetooth = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
src/components/PageComponents/Config/Device.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { DeviceValidation } from "@app/validation/config/device.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
src/components/PageComponents/Config/Display.tsx
+3 -2
View File
@@ -1,7 +1,7 @@
import type { DisplayValidation } from "@app/validation/config/display.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -30,7 +30,8 @@ export const Display = (): JSX.Element => {
type: "number",
name: "screenOnSecs",
label: "Screen Timeout",
description: "Turn off the display after this long"
description: "Turn off the display after this long",
suffix: "seconds"
},
{
type: "select",
src/components/PageComponents/Config/LoRa.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { LoRaValidation } from "@app/validation/config/lora.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const LoRa = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
src/components/PageComponents/Config/Network.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { NetworkValidation } from "@app/validation/config/network.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Network = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
src/components/PageComponents/Config/Position.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { PositionValidation } from "@app/validation/config/position.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Position = (): JSX.Element => {
const { config, nodes, hardware, setWorkingConfig } = useDevice();
src/components/PageComponents/Config/Power.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { PowerValidation } from "@app/validation/config/power.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
src/components/PageComponents/Connect/HTTP.tsx
+16 -10
View File
@@ -1,12 +1,14 @@
import { Controller, useForm, useWatch } from "react-hook-form";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { Input } from "@components/UI/Input.js";
import { Switch } from "@components/UI/Switch.js";
import { Button } from "@components/UI/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
import { subscribeAll } from "@core/subscriptions.js";
import { randId } from "@core/utils/randId.js";
import { IHTTPConnection } from "@meshtastic/meshtasticjs";
import { Label } from "@components/UI/Label.js";
import { SelectLabel } from "@components/UI/Select.js";
export const HTTP = (): JSX.Element => {
const { addDevice } = useDeviceStore();
@@ -50,8 +52,9 @@ export const HTTP = (): JSX.Element => {
// eslint-disable-next-line @typescript-eslint/no-misused-promises
<form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
<div className="flex h-48 flex-col gap-2">
<Label>IP Address/Hostname</Label>
<Input
label="IP Address/Hostname"
// label="IP Address/Hostname"
prefix={TLSEnabled ? "https://" : "http://"}
placeholder="000.000.000.000 / meshtastic.local"
{...register("ip")}
@@ -60,13 +63,16 @@ export const HTTP = (): JSX.Element => {
name="tls"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Use TLS"
description="Description"
disabled={location.protocol === "https:"}
checked={value}
{...rest}
/>
<>
<Label>Use TLS</Label>
<Switch
// label="Use TLS"
// description="Description"
disabled={location.protocol === "https:"}
checked={value}
{...rest}
/>
</>
)}
/>
</div>
src/components/PageComponents/Messages/NewLocationMessage.tsx
-46
View File
@@ -1,46 +0,0 @@
import { Input } from "@components/form/Input.js";
import { Button } from "@components/UI/Button.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
enum LocationType {
MGRS,
LatLng,
DecimalDegrees
}
export const NewLocationMessage = (): JSX.Element => {
const { connection } = useDevice();
return (
<div className="m-4 w-96">
<form
onSubmit={(e): void => {
e.preventDefault();
}}
>
<Input label="Name" />
<Input label="Description" />
{/* <Select label="Type" value={LocationType.MGRS}>
{renderOptions(LocationType)}
</Select> */}
<Input label="Coordinates" />
<Button
onClick={() => {
void connection?.sendWaypoint(
new Protobuf.Waypoint({
latitudeI: Math.floor(3.89103 * 1e7),
longitudeI: Math.floor(105.87005 * 1e7),
name: "TEST",
description: "This is a description"
}),
"broadcast"
);
}}
>
Send
</Button>
</form>
</div>
);
};
src/components/PageComponents/ModuleConfig/Audio.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Audio = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const CannedMessage = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const ExternalNotification = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/MQTT.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
import { useDevice } from "@app/core/stores/deviceStore.js";
export const MQTT = (): JSX.Element => {
src/components/PageComponents/ModuleConfig/RangeTest.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const RangeTest = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/Serial.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Serial = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/StoreForward.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const StoreForward = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
src/components/PageComponents/ModuleConfig/Telemetry.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@app/components/DynamicForm.js";
import { DynamicForm } from "@components/DynamicForm.js";
export const Telemetry = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();