mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Updated form toasts

pull/43/head
Sacha Weatherstone 4 years ago
parent
04f5eeaf47
commit
9e331de44e
17 changed files with 377 additions and 314 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/components/PageComponents/Channel.tsx
  2. 42
      src/components/PageComponents/Config/Bluetooth.tsx
  3. 43
      src/components/PageComponents/Config/Device.tsx
  4. 43
      src/components/PageComponents/Config/Display.tsx
  5. 42
      src/components/PageComponents/Config/LoRa.tsx
  6. 43
      src/components/PageComponents/Config/Network.tsx
  7. 42
      src/components/PageComponents/Config/Position.tsx
  8. 43
      src/components/PageComponents/Config/Power.tsx
  9. 27
      src/components/PageComponents/Config/User.tsx
  10. 43
      src/components/PageComponents/ModuleConfig/CannedMessage.tsx
  11. 44
      src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
  12. 43
      src/components/PageComponents/ModuleConfig/MQTT.tsx
  13. 44
      src/components/PageComponents/ModuleConfig/RangeTest.tsx
  14. 44
      src/components/PageComponents/ModuleConfig/Serial.tsx
  15. 44
      src/components/PageComponents/ModuleConfig/StoreForward.tsx
  16. 43
      src/components/PageComponents/ModuleConfig/Telemetry.tsx
  17. 8
      src/components/form/Form.tsx

53
src/components/PageComponents/Channel.tsx
View File

@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import { fromByteArray, toByteArray } from "base64-js"; import { fromByteArray, toByteArray } from "base64-js";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Form } from "@components/form/Form"; import { Form } from "@components/form/Form";
@ -23,7 +24,6 @@ export interface SettingsPanelProps {
export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
const { connection } = useDevice(); const { connection } = useDevice();
const [loading, setLoading] = useState(false);
const [keySize, setKeySize] = useState<128 | 256>(256); const [keySize, setKeySize] = useState<128 | 256>(256);
const [pskHidden, setPskHidden] = useState(true); const [pskHidden, setPskHidden] = useState(true);
@ -62,27 +62,35 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
}); });
}, [channel, reset]); }, [channel, reset]);
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
const channelData = Protobuf.Channel.create({ void toast.promise(
role: connection.setChannel(
channel?.role === Protobuf.Channel_Role.PRIMARY {
? Protobuf.Channel_Role.PRIMARY role:
: data.enabled channel?.role === Protobuf.Channel_Role.PRIMARY
? Protobuf.Channel_Role.SECONDARY ? Protobuf.Channel_Role.PRIMARY
: Protobuf.Channel_Role.DISABLED, : data.enabled
index: channel?.index, ? Protobuf.Channel_Role.SECONDARY
settings: { : Protobuf.Channel_Role.DISABLED,
...data, index: channel?.index,
psk: toByteArray(data.psk ?? ""), settings: {
}, ...data,
}); psk: toByteArray(data.psk ?? ""),
},
await connection?.setChannel(channelData, (): Promise<void> => { },
reset({ ...data }); (): Promise<void> => {
setLoading(false); reset({ ...data });
return Promise.resolve(); return Promise.resolve();
}); }
),
{
loading: "Saving...",
success: "Saved Channel",
error: "No response received",
}
);
}
}); });
return ( return (
@ -108,7 +116,6 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)), psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
}) })
} }
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

42
src/components/PageComponents/Config/Bluetooth.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Bluetooth = (): JSX.Element => { export const Bluetooth = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
@ -34,21 +33,27 @@ export const Bluetooth = (): JSX.Element => {
}, [reset, config.bluetooth]); }, [reset, config.bluetooth]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "bluetooth", payloadVariant: {
bluetooth: data, oneofKind: "bluetooth",
}, bluetooth: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Bluetooth Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Bluetooth Config, Restarting Node",
error: "No response received",
}
);
}
}); });
const pairingMode = useWatch({ const pairingMode = useWatch({
@ -62,7 +67,6 @@ export const Bluetooth = (): JSX.Element => {
title="Bluetooth Config" title="Bluetooth Config"
breadcrumbs={["Config", "Bluetooth"]} breadcrumbs={["Config", "Bluetooth"]}
reset={() => reset(config.bluetooth)} reset={() => reset(config.bluetooth)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/Config/Device.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -15,7 +15,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Device = (): JSX.Element => { export const Device = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -32,28 +31,34 @@ export const Device = (): JSX.Element => {
}, [reset, config.device]); }, [reset, config.device]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "device", payloadVariant: {
device: data, oneofKind: "device",
}, device: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Device Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Device Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Device Config" title="Device Config"
breadcrumbs={["Config", "Device"]} breadcrumbs={["Config", "Device"]}
reset={() => reset(config.device)} reset={() => reset(config.device)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/Config/Display.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Display = (): JSX.Element => { export const Display = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -33,28 +32,34 @@ export const Display = (): JSX.Element => {
}, [reset, config.display]); }, [reset, config.display]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "display", payloadVariant: {
display: data, oneofKind: "display",
}, display: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Display Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Display Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Display Config" title="Display Config"
breadcrumbs={["Config", "Display"]} breadcrumbs={["Config", "Display"]}
reset={() => reset(config.display)} reset={() => reset(config.display)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

42
src/components/PageComponents/Config/LoRa.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const LoRa = (): JSX.Element => { export const LoRa = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
@ -40,21 +39,27 @@ export const LoRa = (): JSX.Element => {
}, [reset, config.lora]); }, [reset, config.lora]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "lora", payloadVariant: {
lora: data, oneofKind: "lora",
}, lora: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved LoRa Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved LoRa Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
@ -62,7 +67,6 @@ export const LoRa = (): JSX.Element => {
title="LoRa Config" title="LoRa Config"
breadcrumbs={["Config", "LoRa"]} breadcrumbs={["Config", "LoRa"]}
reset={() => reset(config.lora)} reset={() => reset(config.lora)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/Config/Network.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Network = (): JSX.Element => { export const Network = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -39,28 +38,34 @@ export const Network = (): JSX.Element => {
}, [reset, config.network]); }, [reset, config.network]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "network", payloadVariant: {
network: data, oneofKind: "network",
}, network: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Network Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Network Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Network Config" title="Network Config"
breadcrumbs={["Config", "Network"]} breadcrumbs={["Config", "Network"]}
reset={() => reset(config.network)} reset={() => reset(config.network)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

42
src/components/PageComponents/Config/Position.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const Position = (): JSX.Element => { export const Position = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -30,21 +29,27 @@ export const Position = (): JSX.Element => {
}, [reset, config.position]); }, [reset, config.position]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "position", payloadVariant: {
position: data, oneofKind: "position",
}, position: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Position Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Position Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
@ -52,7 +57,6 @@ export const Position = (): JSX.Element => {
title="Position Config" title="Position Config"
breadcrumbs={["Config", "Position"]} breadcrumbs={["Config", "Position"]}
reset={() => reset(config.position)} reset={() => reset(config.position)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/Config/Power.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const Power = (): JSX.Element => { export const Power = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -30,28 +29,34 @@ export const Power = (): JSX.Element => {
}, [reset, config.power]); }, [reset, config.power]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setConfig( void toast.promise(
{ connection.setConfig(
payloadVariant: { {
oneofKind: "power", payloadVariant: {
power: data, oneofKind: "power",
}, power: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Power Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Power Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Power Config" title="Power Config"
breadcrumbs={["Config", "Power"]} breadcrumbs={["Config", "Power"]}
reset={() => reset(config.power)} reset={() => reset(config.power)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

27
src/components/PageComponents/Config/User.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { base16 } from "rfc4648"; import { base16 } from "rfc4648";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
@ -17,7 +17,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const User = (): JSX.Element => { export const User = (): JSX.Element => {
const { hardware, nodes, connection } = useDevice(); const { hardware, nodes, connection } = useDevice();
const [loading, setLoading] = useState(false);
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
@ -41,15 +40,18 @@ export const User = (): JSX.Element => {
}, [reset, myNode]); }, [reset, myNode]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection && myNode?.data.user) {
void toast.promise(
if (myNode?.data.user) { connection.setOwner({ ...myNode.data.user, ...data }, async () => {
void connection?.setOwner({ ...myNode.data.user, ...data }, async () => { reset({ ...data });
reset({ ...data }); await Promise.resolve();
setLoading(false); }),
toast.success("Saved User Config, Restarting Node"); {
await Promise.resolve(); loading: "Saving...",
}); success: "Saved User, Restarting Node",
error: "No response received",
}
);
} }
}); });
@ -64,7 +66,6 @@ export const User = (): JSX.Element => {
isLicensed: myNode?.data.user?.isLicensed, isLicensed: myNode?.data.user?.isLicensed,
}); });
}} }}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const CannedMessage = (): JSX.Element => { export const CannedMessage = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -39,28 +38,34 @@ export const CannedMessage = (): JSX.Element => {
}, [reset, moduleConfig.cannedMessage]); }, [reset, moduleConfig.cannedMessage]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "cannedMessage", payloadVariant: {
cannedMessage: data, oneofKind: "cannedMessage",
}, cannedMessage: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Canned Message Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Canned Message Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Canned Message Config" title="Canned Message Config"
breadcrumbs={["Module Config", "Canned Message"]} breadcrumbs={["Module Config", "Canned Message"]}
reset={() => reset(moduleConfig.cannedMessage)} reset={() => reset(moduleConfig.cannedMessage)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

44
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const ExternalNotification = (): JSX.Element => { export const ExternalNotification = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -28,22 +27,28 @@ export const ExternalNotification = (): JSX.Element => {
reset(moduleConfig.externalNotification); reset(moduleConfig.externalNotification);
}, [reset, moduleConfig.externalNotification]); }, [reset, moduleConfig.externalNotification]);
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
await connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "externalNotification", payloadVariant: {
externalNotification: data, oneofKind: "externalNotification",
}, externalNotification: data,
}, },
async (): Promise<void> => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved External Notification Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved External Notification Config, Restarting Node",
error: "No response received",
}
);
}
}); });
const moduleEnabled = useWatch({ const moduleEnabled = useWatch({
@ -57,7 +62,6 @@ export const ExternalNotification = (): JSX.Element => {
title="External Notification Config" title="External Notification Config"
breadcrumbs={["Module Config", "External Notification"]} breadcrumbs={["Module Config", "External Notification"]}
reset={() => reset(moduleConfig.externalNotification)} reset={() => reset(moduleConfig.externalNotification)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/ModuleConfig/MQTT.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const MQTT = (): JSX.Element => { export const MQTT = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -36,28 +35,34 @@ export const MQTT = (): JSX.Element => {
}, [reset, moduleConfig.mqtt]); }, [reset, moduleConfig.mqtt]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "mqtt", payloadVariant: {
mqtt: data, oneofKind: "mqtt",
}, mqtt: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved MQTT Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved MQTT Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="MQTT Config" title="MQTT Config"
breadcrumbs={["Module Config", "MQTT"]} breadcrumbs={["Module Config", "MQTT"]}
reset={() => reset(moduleConfig.mqtt)} reset={() => reset(moduleConfig.mqtt)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

44
src/components/PageComponents/ModuleConfig/RangeTest.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const RangeTest = (): JSX.Element => { export const RangeTest = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -29,22 +28,28 @@ export const RangeTest = (): JSX.Element => {
reset(moduleConfig.rangeTest); reset(moduleConfig.rangeTest);
}, [reset, moduleConfig.rangeTest]); }, [reset, moduleConfig.rangeTest]);
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
await connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "rangeTest", payloadVariant: {
rangeTest: data, oneofKind: "rangeTest",
}, rangeTest: data,
}, },
async (): Promise<void> => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Range Test Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Range Test Config, Restarting Node",
error: "No response received",
}
);
}
}); });
const moduleEnabled = useWatch({ const moduleEnabled = useWatch({
@ -58,7 +63,6 @@ export const RangeTest = (): JSX.Element => {
title="Range Test Config" title="Range Test Config"
breadcrumbs={["Module Config", "Range Test"]} breadcrumbs={["Module Config", "Range Test"]}
reset={() => reset(moduleConfig.rangeTest)} reset={() => reset(moduleConfig.rangeTest)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

44
src/components/PageComponents/ModuleConfig/Serial.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const Serial = (): JSX.Element => { export const Serial = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -29,22 +28,28 @@ export const Serial = (): JSX.Element => {
reset(moduleConfig.serial); reset(moduleConfig.serial);
}, [reset, moduleConfig.serial]); }, [reset, moduleConfig.serial]);
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
await connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "serial", payloadVariant: {
serial: data, oneofKind: "serial",
}, serial: data,
}, },
async (): Promise<void> => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Serial Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Serial Config, Restarting Node",
error: "No response received",
}
);
}
}); });
const moduleEnabled = useWatch({ const moduleEnabled = useWatch({
@ -58,7 +63,6 @@ export const Serial = (): JSX.Element => {
title="Serial Config" title="Serial Config"
breadcrumbs={["Module Config", "Serial"]} breadcrumbs={["Module Config", "Serial"]}
reset={() => reset(moduleConfig.serial)} reset={() => reset(moduleConfig.serial)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

44
src/components/PageComponents/ModuleConfig/StoreForward.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const StoreForward = (): JSX.Element => { export const StoreForward = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -29,22 +28,28 @@ export const StoreForward = (): JSX.Element => {
reset(moduleConfig.storeForward); reset(moduleConfig.storeForward);
}, [reset, moduleConfig.storeForward]); }, [reset, moduleConfig.storeForward]);
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
await connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "storeForward", payloadVariant: {
storeForward: data, oneofKind: "storeForward",
}, storeForward: data,
}, },
async (): Promise<void> => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Stora & Forward Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Store & Forward Config, Restarting Node",
error: "No response received",
}
);
}
}); });
const moduleEnabled = useWatch({ const moduleEnabled = useWatch({
@ -58,7 +63,6 @@ export const StoreForward = (): JSX.Element => {
title="Store & Forward Config" title="Store & Forward Config"
breadcrumbs={["Module Config", "Store & Forward"]} breadcrumbs={["Module Config", "Store & Forward"]}
reset={() => reset(moduleConfig.storeForward)} reset={() => reset(moduleConfig.storeForward)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

43
src/components/PageComponents/ModuleConfig/Telemetry.tsx
View File

@ -1,8 +1,8 @@
import type React from "react"; import type React from "react";
import { useEffect, useState } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import toast from "react-hot-toast"; import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const Telemetry = (): JSX.Element => { export const Telemetry = (): JSX.Element => {
const { moduleConfig, connection } = useDevice(); const { moduleConfig, connection } = useDevice();
const [loading, setLoading] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -30,28 +29,34 @@ export const Telemetry = (): JSX.Element => {
}, [reset, moduleConfig.telemetry]); }, [reset, moduleConfig.telemetry]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
setLoading(true); if (connection) {
void connection?.setModuleConfig( void toast.promise(
{ connection.setModuleConfig(
payloadVariant: { {
oneofKind: "telemetry", payloadVariant: {
telemetry: data, oneofKind: "telemetry",
}, telemetry: data,
}, },
async () => { },
reset({ ...data }); async () => {
setLoading(false); reset({ ...data });
toast.success("Saved Telemetry Config, Restarting Node"); await Promise.resolve();
await Promise.resolve(); }
} ),
); {
loading: "Saving...",
success: "Saved Telemetry Config, Restarting Node",
error: "No response received",
}
);
}
}); });
return ( return (
<Form <Form
title="Telemetry Config" title="Telemetry Config"
breadcrumbs={["Module Config", "Telemetry"]} breadcrumbs={["Module Config", "Telemetry"]}
reset={() => reset(moduleConfig.telemetry)} reset={() => reset(moduleConfig.telemetry)}
loading={loading}
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >

8
src/components/form/Form.tsx
View File

@ -5,7 +5,6 @@ import { FiSave } from "react-icons/fi";
import { Button } from "@components/Button.js"; import { Button } from "@components/Button.js";
import { import {
ArrowPathIcon,
ArrowUturnLeftIcon, ArrowUturnLeftIcon,
ChevronRightIcon, ChevronRightIcon,
HomeIcon, HomeIcon,
@ -16,7 +15,6 @@ export interface FormProps extends HTMLProps<HTMLFormElement> {
breadcrumbs: string[]; breadcrumbs: string[];
reset: () => void; reset: () => void;
onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>; onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
loading: boolean;
dirty: boolean; dirty: boolean;
} }
@ -24,7 +22,6 @@ export const Form = ({
title, title,
breadcrumbs, breadcrumbs,
reset, reset,
loading,
dirty, dirty,
children, children,
onSubmit, onSubmit,
@ -33,11 +30,6 @@ export const Form = ({
return ( return (
// eslint-disable-next-line @typescript-eslint/no-misused-promises // eslint-disable-next-line @typescript-eslint/no-misused-promises
<form className="w-full" onSubmit={onSubmit} {...props}> <form className="w-full" onSubmit={onSubmit} {...props}>
{loading && (
<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 bg-gray-700 p-4"> <div className="select-none rounded-md bg-gray-700 p-4">
<ol className="flex gap-4"> <ol className="flex gap-4">
<li className="cursor-pointer text-gray-400 hover:text-gray-200"> <li className="cursor-pointer text-gray-400 hover:text-gray-200">

Write Preview
Loading…
Cancel
Save