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

WIP updates

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-08-09 08:33:54 +10:00
parent ae5ff4f9de
commit ed9ee28745
13 changed files with 239 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Config/Display.tsx
+17 -2
View File
@@ -1,8 +1,8 @@
import type React from "react";
import { useEffect, useState } from "react";
import { SelectField, TextInputField } from "evergreen-ui";
import { useForm } from "react-hook-form";
import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
import { Controller, useForm } from "react-hook-form";
import { DisplayValidation } from "@app/validation/config/display.js";
import { Form } from "@components/form/Form";
@@ -19,6 +19,7 @@ export const Display = (): JSX.Element => {
handleSubmit,
formState: { errors, isDirty },
reset,
control,
} = useForm<Protobuf.Config_DisplayConfig>({
defaultValues: config.display,
resolver: classValidatorResolver(DisplayValidation),
@@ -67,6 +68,20 @@ export const Display = (): JSX.Element => {
>
{renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
</SelectField>
<FormField
label="Compass North Top"
description="Description"
isInvalid={!!errors.compassNorthTop?.message}
validationMessage={errors.compassNorthTop?.message}
>
<Controller
name="compassNorthTop"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
</Form>
);
};
src/components/PageComponents/Config/WiFi copy.tsx
-94
View File
@@ -1,94 +0,0 @@
import type React from "react";
import { useEffect, useState } from "react";
import { FormField, Switch, TextInputField, toaster } from "evergreen-ui";
import { Controller, useForm } from "react-hook-form";
import { WiFiValidation } from "@app/validation/config/wifi.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/stores/deviceStore.js";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
export const WiFi = (): JSX.Element => {
const { config, connection } = useDevice();
const [loading, setLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset,
} = useForm<WiFiValidation>({
defaultValues: config.wifi,
resolver: classValidatorResolver(WiFiValidation),
});
useEffect(() => {
reset(config.wifi);
}, [reset, config.wifi]);
const onSubmit = handleSubmit((data) => {
setLoading(true);
void connection?.setConfig(
{
payloadVariant: {
oneofKind: "wifi",
wifi: data,
},
},
async () => {
toaster.success("Your source is now sending data");
reset({ ...data });
setLoading(false);
await Promise.resolve();
}
);
});
return (
<Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
<TextInputField
label="SSID"
description="This is a description."
isInvalid={!!errors.ssid?.message}
validationMessage={errors.ssid?.message}
{...register("ssid", { valueAsNumber: true })}
/>
<TextInputField
label="PSK"
description="This is a description."
type="password"
isInvalid={!!errors.psk?.message}
validationMessage={errors.psk?.message}
{...register("psk", { valueAsNumber: true })}
/>
<FormField
label="Enable WiFi AP"
description="Description"
isInvalid={!!errors.apMode?.message}
validationMessage={errors.apMode?.message}
>
<Controller
name="apMode"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
<FormField
label="Don't broadcast SSID"
description="Description"
isInvalid={!!errors.apHidden?.message}
validationMessage={errors.apHidden?.message}
>
<Controller
name="apHidden"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
</Form>
);
};
src/components/PageComponents/Config/WiFi.tsx
+37 -32
View File
@@ -1,13 +1,21 @@
import type React from "react";
import { useEffect, useState } from "react";
import { FormField, Switch, TextInputField, toaster } from "evergreen-ui";
import { Controller, useForm } from "react-hook-form";
import {
FormField,
SelectField,
Switch,
TextInputField,
toaster,
} from "evergreen-ui";
import { Controller, useForm, useWatch } from "react-hook-form";
import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
import { WiFiValidation } from "@app/validation/config/wifi.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/stores/deviceStore.js";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const WiFi = (): JSX.Element => {
const { config, connection } = useDevice();
@@ -23,6 +31,12 @@ export const WiFi = (): JSX.Element => {
resolver: classValidatorResolver(WiFiValidation),
});
const wifiEnabled = useWatch({
control,
name: "enabled",
defaultValue: false,
});
useEffect(() => {
reset(config.wifi);
}, [reset, config.wifi]);
@@ -46,6 +60,27 @@ export const WiFi = (): JSX.Element => {
});
return (
<Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
<FormField
label="WiFi Enabled"
description="Description"
isInvalid={!!errors.enabled?.message}
validationMessage={errors.enabled?.message}
>
<Controller
name="enabled"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
<SelectField
label="WiFi Mode"
description="This is a description."
{...register("mode", { valueAsNumber: true })}
>
{renderOptions(Protobuf.Config_WiFiConfig_WiFiMode)}
</SelectField>
<TextInputField
label="SSID"
description="This is a description."
@@ -53,7 +88,6 @@ export const WiFi = (): JSX.Element => {
validationMessage={errors.ssid?.message}
{...register("ssid")}
/>
<TextInputField
label="PSK"
type="password"
@@ -62,35 +96,6 @@ export const WiFi = (): JSX.Element => {
validationMessage={errors.psk?.message}
{...register("psk")}
/>
<FormField
label="Enable WiFi AP"
description="Description"
isInvalid={!!errors.apMode?.message}
validationMessage={errors.apMode?.message}
>
<Controller
name="apMode"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
<FormField
label="Don't broadcast SSID"
description="Description"
isInvalid={!!errors.apHidden?.message}
validationMessage={errors.apHidden?.message}
>
<Controller
name="apHidden"
control={control}
render={({ field: { value, ...field } }) => (
<Switch height={24} marginLeft="auto" checked={value} {...field} />
)}
/>
</FormField>
</Form>
);
};
src/components/layout/Sidebar/index.tsx
+2
View File
@@ -82,6 +82,7 @@ export const Sidebar = (): JSX.Element => {
{navLinks.map((Link) => (
<Tab
key={Link.name}
userSelect="none"
gap={majorScale(2)}
disabled={Link.disabled}
direction="vertical"
@@ -95,6 +96,7 @@ export const Sidebar = (): JSX.Element => {
</Tab>
))}
<Tab
userSelect="none"
gap={5}
direction="vertical"
isSelected={PeersDialogOpen}
src/core/stores/deviceStore.ts
+45 -27
View File
@@ -14,7 +14,7 @@ export type Page =
| "info";
export interface MessageWithAck {
message: Types.TextPacket;
message: Types.MessagePacket;
ack: boolean;
received: Date;
}
@@ -26,8 +26,8 @@ export interface Channel {
}
export interface Node {
deviceMetrics: Protobuf.DeviceMetrics;
environmentMetrics: Protobuf.EnvironmentMetrics;
deviceMetrics: Protobuf.DeviceMetrics[];
environmentMetrics: Protobuf.EnvironmentMetrics[];
data: Protobuf.NodeInfo;
}
@@ -40,8 +40,9 @@ export interface Device {
hardware: Protobuf.MyNodeInfo;
nodes: Node[];
connection?: IConnection;
activeChat: number;
activePage: Page;
peerInfoOpen: boolean;
activePeer: number;
setReady(ready: boolean): void;
setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -50,8 +51,9 @@ export interface Device {
setModuleConfig: (config: Protobuf.ModuleConfig) => void;
setHardware: (hardware: Protobuf.MyNodeInfo) => void;
setMetrics: (metrics: Types.TelemetryPacket) => void;
setActiveChat: (chatIndex: number) => void;
setActivePage: (page: Page) => void;
setPeerInfoOpen: (open: boolean) => void;
setActivePeer: (peer: number) => void;
addNodeInfo: (nodeInfo: Types.NodeInfoPacket) => void;
addUser: (user: Types.UserPacket) => void;
addPosition: (position: Types.PositionPacket) => void;
@@ -85,8 +87,9 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
hardware: Protobuf.MyNodeInfo.create(),
nodes: [],
connection: undefined,
activeChat: 0,
activePage: "messages",
peerInfoOpen: false,
activePeer: 0,
setReady: (ready: boolean) => {
set(
@@ -219,8 +222,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
snr: metrics.packet.rxSnr,
lastHeard: new Date().getSeconds(),
}),
deviceMetrics: Protobuf.DeviceMetrics.create(),
environmentMetrics: Protobuf.EnvironmentMetrics.create(),
deviceMetrics: [],
environmentMetrics: [],
};
device.nodes.push(node);
@@ -228,27 +231,20 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (node) {
switch (metrics.data.variant.oneofKind) {
case "deviceMetrics":
node.deviceMetrics = metrics.data.variant.deviceMetrics;
node.deviceMetrics.push(
metrics.data.variant.deviceMetrics
);
break;
case "environmentMetrics":
node.environmentMetrics =
metrics.data.variant.environmentMetrics;
node.environmentMetrics.push(
metrics.data.variant.environmentMetrics
);
break;
}
}
})
);
},
setActiveChat: (chatIndex) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.activeChat = chatIndex;
}
})
);
},
setActivePage: (page) => {
set(
produce<DeviceState>((draft) => {
@@ -277,14 +273,34 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
} else {
device.nodes.push({
data: Protobuf.NodeInfo.create(nodeInfo.data),
deviceMetrics: Protobuf.DeviceMetrics.create(),
environmentMetrics: Protobuf.EnvironmentMetrics.create(),
deviceMetrics: [],
environmentMetrics: [],
});
}
}
})
);
},
setPeerInfoOpen: (open) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.peerInfoOpen = open;
}
})
);
},
setActivePeer: (peer) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.activePeer = peer;
}
})
);
},
addUser: (user) => {
set(
produce<DeviceState>((draft) => {
@@ -307,8 +323,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
snr: user.packet.rxSnr,
user: user.data,
}),
deviceMetrics: Protobuf.DeviceMetrics.create(),
environmentMetrics: Protobuf.EnvironmentMetrics.create(),
deviceMetrics: [],
environmentMetrics: [],
});
}
}
@@ -336,8 +352,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
num: position.packet.from,
position: position.data,
}),
deviceMetrics: Protobuf.DeviceMetrics.create(),
environmentMetrics: Protobuf.EnvironmentMetrics.create(),
deviceMetrics: [],
environmentMetrics: [],
});
}
}
@@ -369,6 +385,8 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
);
},
ackMessage: (channelIndex: number, messageId: number) => {
console.log("ack called");
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
src/core/subscriptions.ts
+7 -7
View File
@@ -12,14 +12,14 @@ export const subscribeAll = (device: Device, connection: IConnection) => {
// onLogEvent
// onMeshHeartbeat
// onRoutingPacket
// onTelemetryPacket
connection.onRoutingPacket.subscribe((routingPacket) => {
console.log(routingPacket);
});
connection.onTelemetryPacket.subscribe((telemetryPacket) => {
console.log(telemetryPacket.data.variant);
device.setMetrics(telemetryPacket);
});
@@ -63,12 +63,12 @@ export const subscribeAll = (device: Device, connection: IConnection) => {
device.setModuleConfig(moduleConfig.data);
});
connection.onTextPacket.subscribe((message) => {
connection.onMessagePacket.subscribe((messagePacket) => {
device.addMessage({
message: message,
ack: message.packet.from !== device.hardware.myNodeNum,
received: message.packet.rxTime
? new Date(message.packet.rxTime * 1000)
message: messagePacket,
ack: messagePacket.packet.from !== device.hardware.myNodeNum,
received: messagePacket.packet.rxTime
? new Date(messagePacket.packet.rxTime * 1000)
: new Date(),
});
});
src/pages/Info/index.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import type React from "react";
import { Pane } from "evergreen-ui";
import JSONPretty from "react-json-pretty";
import { useDevice } from "@app/core/stores/deviceStore.js";
@@ -11,8 +12,8 @@ export const InfoPage = (): JSX.Element => {
return (
<Pane>
{JSON.stringify(myNode)}
{JSON.stringify(hardware)}
<JSONPretty data={myNode} />
<JSONPretty data={hardware} />
</Pane>
);
};
src/pages/Messages/LocationMessage.tsx
+33
View File
@@ -0,0 +1,33 @@
import type React from "react";
import { LocateIcon, majorScale, minorScale, Pane, Text } from "evergreen-ui";
import { toMGRS } from "@app/core/utils/toMGRS.js";
import type { Protobuf } from "@meshtastic/meshtasticjs";
export interface LocationMessageProps {
location: Protobuf.Location;
}
export const LocationMessage = ({
location,
}: LocationMessageProps): JSX.Element => {
return (
<Pane
marginLeft={majorScale(2)}
paddingLeft={majorScale(1)}
borderLeft="3px solid #e6e6e6"
>
<Pane
gap={majorScale(1)}
display="flex"
borderRadius={majorScale(1)}
elevation={1}
padding={minorScale(1)}
>
<LocateIcon color="#474d66" marginY="auto" />
<Text>{toMGRS(location.latitudeI, location.longitudeI)}</Text>
</Pane>
</Pane>
);
};
src/pages/Messages/Message.tsx
+60 -70
View File
@@ -1,21 +1,23 @@
import type React from "react";
import {
CircleIcon,
FullCircleIcon,
majorScale,
Pane,
Pulsar,
Small,
Strong,
Text,
TimeIcon,
} from "evergreen-ui";
import { Hashicon } from "@emeraldpay/hashicon-react";
import type { Protobuf } from "@meshtastic/meshtasticjs";
import type { Protobuf, Types } from "@meshtastic/meshtasticjs";
import { LocationMessage } from "./LocationMessage.js";
export interface MessageProps {
lastMsgSameUser: boolean;
message: string;
messagePacket: Types.MessagePacket;
ack: boolean;
rxTime: Date;
sender?: Protobuf.NodeInfo;
@@ -23,78 +25,66 @@ export interface MessageProps {
export const Message = ({
lastMsgSameUser,
message,
messagePacket,
ack,
rxTime,
sender,
}: MessageProps): JSX.Element => {
return (
<Pane marginBottom={majorScale(1)} className="group hover:bg-gray-200">
{lastMsgSameUser ? (
<Pane
marginX={majorScale(2)}
display="flex"
justifyContent="space-between"
marginTop={-majorScale(1)}
className={`${lastMsgSameUser ? "" : "py-1"}`}
>
<Pane
display="flex"
position="relative"
gap={majorScale(1)}
className="gap-2"
>
<Small
marginY="auto"
marginLeft="auto"
width={majorScale(3)}
paddingTop={majorScale(1)}
className="pt-1 text-transparent group-hover:text-gray-500"
>
{rxTime
.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})
.replace("AM", "")
.replace("PM", "")}
</Small>
<Text marginY="auto" className={`${ack ? "" : "animate-pulse"}`}>
{message}
</Text>
<Pulsar />
</Pane>
<Pane
display="flex"
gap={majorScale(1)}
paddingTop={majorScale(1)}
className="text-transparent group-hover:text-gray-500"
>
<TimeIcon />
<Small>25s</Small>
</Pane>
</Pane>
return lastMsgSameUser ? (
<Pane display="flex" marginLeft={majorScale(3)}>
{ack ? (
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
) : (
<Pane display="flex" marginX={majorScale(2)} gap={majorScale(1)}>
<Pane marginY="auto" width={majorScale(3)}>
<Hashicon value={(sender?.num ?? 0).toString()} size={32} />
</Pane>
<Pane>
<Pane display="flex" gap={majorScale(1)}>
<Strong cursor="default" size={500} className="hover:underline">
{sender?.user?.longName ?? "UNK"}
</Strong>
<Small marginY="auto">
{rxTime.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
</Small>
</Pane>
<Text className={`${ack ? "" : "animate-pulse"}`}>{message}</Text>
</Pane>
</Pane>
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
)}
{messagePacket.location ? (
<LocationMessage location={messagePacket.location} />
) : (
<Text
color={ack ? "#474d66" : "#9c9fab"}
marginLeft={majorScale(2)}
paddingLeft={majorScale(1)}
borderLeft="3px solid #e6e6e6"
>
{messagePacket.text}
</Text>
)}
</Pane>
) : (
<Pane marginX={majorScale(2)} gap={majorScale(1)} marginTop={majorScale(1)}>
<Pane display="flex" gap={majorScale(1)}>
<Pane width={majorScale(3)}>
<Hashicon value={(sender?.num ?? 0).toString()} size={32} />
</Pane>
<Strong cursor="default" size={500}>
{sender?.user?.longName ?? "UNK"}
</Strong>
<Small>
{rxTime.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
</Small>
</Pane>
<Pane display="flex" marginLeft={majorScale(1)}>
{ack ? (
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
) : (
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
)}
{messagePacket.location ? (
<LocationMessage location={messagePacket.location} />
) : (
<Text
color={ack ? "#474d66" : "#9c9fab"}
marginLeft={majorScale(2)}
paddingLeft={majorScale(1)}
borderLeft="3px solid #e6e6e6"
>
{messagePacket.text}
</Text>
)}
</Pane>
</Pane>
);
};
src/validation/config/display.ts
+4 -1
View File
@@ -1,4 +1,4 @@
import { IsEnum, IsInt } from "class-validator";
import { IsBoolean, IsEnum, IsInt } from "class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -11,4 +11,7 @@ export class DisplayValidation implements Protobuf.Config_DisplayConfig {
@IsInt()
autoScreenCarouselSecs: number;
@IsBoolean()
compassNorthTop: boolean;
}
src/validation/config/wifi.ts
+8 -6
View File
@@ -1,15 +1,17 @@
import { Length } from "class-validator";
import { IsBoolean, IsEnum, Length } from "class-validator";
import type { Protobuf } from "@meshtastic/meshtasticjs";
import { Protobuf } from "@meshtastic/meshtasticjs";
export class WiFiValidation implements Protobuf.Config_WiFiConfig {
@IsBoolean()
enabled: boolean;
@IsEnum(Protobuf.Config_WiFiConfig_WiFiMode)
mode: Protobuf.Config_WiFiConfig_WiFiMode;
@Length(1, 33)
ssid: string;
@Length(8, 64)
psk: string;
apMode: boolean;
apHidden: boolean;
}