Browse Source

Align web client to use the same terminology for nodes. Changing peers to nodes. This is inline with both the Android and iOS Apps.

pull/168/head
David Power 2 years ago
parent
commit
f6123d0753
  1. 4
      src/PageRouter.tsx
  2. 8
      src/components/CommandPalette.tsx
  3. 4
      src/components/Sidebar.tsx
  4. 2
      src/components/UI/Checkbox.tsx
  5. 2
      src/components/UI/Label.tsx
  6. 2
      src/components/UI/Switch.tsx
  7. 12
      src/core/stores/deviceStore.ts
  8. 2
      src/pages/Messages.tsx
  9. 2
      src/pages/Nodes.tsx

4
src/PageRouter.tsx

@ -3,7 +3,7 @@ import { ChannelsPage } from "@pages/Channels.js";
import { ConfigPage } from "@pages/Config/index.js"; import { ConfigPage } from "@pages/Config/index.js";
import { MapPage } from "@pages/Map.js"; import { MapPage } from "@pages/Map.js";
import { MessagesPage } from "@pages/Messages.js"; import { MessagesPage } from "@pages/Messages.js";
import { PeersPage } from "@pages/Peers.js"; import { NodesPage } from "@pages/Nodes.js";
export const PageRouter = (): JSX.Element => { export const PageRouter = (): JSX.Element => {
const { activePage } = useDevice(); const { activePage } = useDevice();
@ -13,7 +13,7 @@ export const PageRouter = (): JSX.Element => {
{activePage === "map" && <MapPage />} {activePage === "map" && <MapPage />}
{activePage === "config" && <ConfigPage />} {activePage === "config" && <ConfigPage />}
{activePage === "channels" && <ChannelsPage />} {activePage === "channels" && <ChannelsPage />}
{activePage === "peers" && <PeersPage />} {activePage === "nodes" && <NodesPage />}
</> </>
); );
}; };

8
src/components/CommandPalette.tsx

@ -104,10 +104,10 @@ export const CommandPalette = (): JSX.Element => {
}, },
}, },
{ {
label: "Peers", label: "Nodes",
icon: UsersIcon, icon: UsersIcon,
action() { action() {
setActivePage("peers"); setActivePage("nodes");
}, },
}, },
], ],
@ -193,10 +193,10 @@ export const CommandPalette = (): JSX.Element => {
}, },
}, },
{ {
label: "Reset Peers", label: "Reset Nodes",
icon: TrashIcon, icon: TrashIcon,
action() { action() {
connection?.resetPeers(); connection?.resetNodes();
}, },
}, },
{ {

4
src/components/Sidebar.tsx

@ -50,9 +50,9 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
page: "channels", page: "channels",
}, },
{ {
name: "Peers", name: "Nodes",
icon: UsersIcon, icon: UsersIcon,
page: "peers", page: "nodes",
}, },
]; ];

2
src/components/UI/Checkbox.tsx

@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", "node h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
className, className,
)} )}
{...props} {...props}

2
src/components/UI/Label.tsx

@ -10,7 +10,7 @@ const Label = React.forwardRef<
<LabelPrimitive.Root <LabelPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", "text-sm font-medium leading-none node-disabled:cursor-not-allowed node-disabled:opacity-70",
className, className,
)} )}
{...props} {...props}

2
src/components/UI/Switch.tsx

@ -9,7 +9,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700", "node inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700",
className, className,
)} )}
{...props} {...props}

12
src/core/stores/deviceStore.ts

@ -5,7 +5,7 @@ import { create } from "zustand";
import { Protobuf, Types } from "@meshtastic/js"; import { Protobuf, Types } from "@meshtastic/js";
export type Page = "messages" | "map" | "config" | "channels" | "peers"; export type Page = "messages" | "map" | "config" | "channels" | "nodes";
export interface MessageWithState extends Types.PacketMetadata<string> { export interface MessageWithState extends Types.PacketMetadata<string> {
state: MessageState; state: MessageState;
@ -43,7 +43,7 @@ export interface Device {
}; };
connection?: Types.ConnectionType; connection?: Types.ConnectionType;
activePage: Page; activePage: Page;
activePeer: number; activeNode: number;
waypoints: Protobuf.Mesh.Waypoint[]; waypoints: Protobuf.Mesh.Waypoint[];
// currentMetrics: Protobuf.DeviceMetrics; // currentMetrics: Protobuf.DeviceMetrics;
pendingSettingsChanges: boolean; pendingSettingsChanges: boolean;
@ -64,7 +64,7 @@ export interface Device {
setHardware: (hardware: Protobuf.Mesh.MyNodeInfo) => void; setHardware: (hardware: Protobuf.Mesh.MyNodeInfo) => void;
// setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => void; // setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => void;
setActivePage: (page: Page) => void; setActivePage: (page: Page) => void;
setActivePeer: (peer: number) => void; setActiveNode: (node: number) => void;
setPendingSettingsChanges: (state: boolean) => void; setPendingSettingsChanges: (state: boolean) => void;
addChannel: (channel: Protobuf.Channel.Channel) => void; addChannel: (channel: Protobuf.Channel.Channel) => void;
addWaypoint: (waypoint: Protobuf.Mesh.Waypoint) => void; addWaypoint: (waypoint: Protobuf.Mesh.Waypoint) => void;
@ -121,7 +121,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
}, },
connection: undefined, connection: undefined,
activePage: "messages", activePage: "messages",
activePeer: 0, activeNode: 0,
waypoints: [], waypoints: [],
// currentMetrics: new Protobuf.DeviceMetrics(), // currentMetrics: new Protobuf.DeviceMetrics(),
dialog: { dialog: {
@ -409,12 +409,12 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
}), }),
); );
}, },
setActivePeer: (peer) => { setActiveNode: (node) => {
set( set(
produce<DeviceState>((draft) => { produce<DeviceState>((draft) => {
const device = draft.devices.get(id); const device = draft.devices.get(id);
if (device) { if (device) {
device.activePeer = peer; device.activeNode = node;
} }
}), }),
); );

2
src/pages/Messages.tsx

@ -49,7 +49,7 @@ export const MessagesPage = (): JSX.Element => {
/> />
))} ))}
</SidebarSection> </SidebarSection>
<SidebarSection label="Peers"> <SidebarSection label="Nodes">
{filteredNodes.map((node) => ( {filteredNodes.map((node) => (
<SidebarButton <SidebarButton
key={node.num} key={node.num}

2
src/pages/Peers.tsx → src/pages/Nodes.tsx

@ -7,7 +7,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
import { Protobuf } from "@meshtastic/js"; import { Protobuf } from "@meshtastic/js";
import { base16 } from "rfc4648"; import { base16 } from "rfc4648";
export const PeersPage = (): JSX.Element => { export const NodesPage = (): JSX.Element => {
const { nodes, hardware } = useDevice(); const { nodes, hardware } = useDevice();
const filteredNodes = Array.from(nodes.values()).filter( const filteredNodes = Array.from(nodes.values()).filter(
Loading…
Cancel
Save