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-11-27 22:50:46 +10:00
parent a9561fe622
commit e457cef3da
79 changed files with 2100 additions and 1284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Channels.tsx
+17 -3
View File
@@ -4,7 +4,10 @@ import { Channel } from "@app/components/PageComponents/Channel.js";
import { Button } from "@components/Button.js";
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
import { useDevice } from "@core/providers/useDevice.js";
import { QrCodeIcon } from "@heroicons/react/24/outline";
import {
ArrowDownOnSquareStackIcon,
QrCodeIcon
} from "@heroicons/react/24/outline";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const ChannelsPage = (): JSX.Element => {
@@ -17,7 +20,7 @@ export const ChannelsPage = (): JSX.Element => {
: channel.config.role === Protobuf.Channel_Role.PRIMARY
? "Primary"
: `Channel: ${channel.config.index}`,
element: () => <Channel channel={channel.config} />,
element: () => <Channel channel={channel.config} />
};
});
@@ -25,6 +28,17 @@ export const ChannelsPage = (): JSX.Element => {
<TabbedContent
tabs={tabs}
actions={[
() => (
<Button
variant="secondary"
iconBefore={<ArrowDownOnSquareStackIcon className="w-4" />}
onClick={() => {
setQRDialogOpen(true);
}}
>
Import
</Button>
),
() => (
<Button
variant="secondary"
@@ -35,7 +49,7 @@ export const ChannelsPage = (): JSX.Element => {
>
QR Code
</Button>
),
)
]}
/>
);
src/pages/Config/AppConfig.tsx
+4 -14
View File
@@ -1,25 +1,15 @@
import type React from "react";
import { Fragment } from "react";
import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
import { Map } from "@components/PageComponents/AppConfig/Map.js";
import { Tab } from "@headlessui/react";
export const AppConfig = (): JSX.Element => {
const configSections = [
{
label: "Interface",
element: MQTT,
},
{
label: "Logging",
element: Serial,
},
{
label: "Language",
element: ExternalNotification,
},
label: "Map",
element: Map
}
];
return (
src/pages/Config/DeviceConfig.tsx
+9 -9
View File
@@ -18,37 +18,37 @@ export const DeviceConfig = (): JSX.Element => {
const configSections = [
{
label: "User",
element: User,
element: User
},
{
label: "Device",
element: Device,
element: Device
},
{
label: "Position",
element: Position,
element: Position
},
{
label: "Power",
element: Power,
element: Power
},
{
label: "Network",
element: Network,
disabled: !hardware.hasWifi,
disabled: !hardware.hasWifi
},
{
label: "Display",
element: Display,
element: Display
},
{
label: "LoRa",
element: LoRa,
element: LoRa
},
{
label: "Bluetooth",
element: Bluetooth,
},
element: Bluetooth
}
];
return (
src/pages/Config/ModuleConfig.tsx
+9 -11
View File
@@ -1,5 +1,5 @@
import type React from "react";
import { Fragment, useState } from "react";
import { Fragment } from "react";
import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
@@ -11,37 +11,35 @@ import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js"
import { Tab } from "@headlessui/react";
export const ModuleConfig = (): JSX.Element => {
const [selectedIndex, setSelectedIndex] = useState(0);
const configSections = [
{
label: "MQTT",
element: MQTT,
element: MQTT
},
{
label: "Serial",
element: Serial,
element: Serial
},
{
label: "External Notification",
element: ExternalNotification,
element: ExternalNotification
},
{
label: "Store & Forward",
element: StoreForward,
element: StoreForward
},
{
label: "Range Test",
element: RangeTest,
element: RangeTest
},
{
label: "Telemetry",
element: Telemetry,
element: Telemetry
},
{
label: "Canned Message",
element: CannedMessage,
},
element: CannedMessage
}
];
return (
src/pages/Config/index.tsx
+5 -5
View File
@@ -4,7 +4,7 @@ import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
import {
Cog8ToothIcon,
CubeTransparentIcon,
WindowIcon,
WindowIcon
} from "@heroicons/react/24/outline";
import { AppConfig } from "@pages/Config/AppConfig.js";
import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
@@ -15,18 +15,18 @@ export const ConfigPage = (): JSX.Element => {
{
name: "Device Config",
icon: <Cog8ToothIcon className="h-4" />,
element: DeviceConfig,
element: DeviceConfig
},
{
name: "Module Config",
icon: <CubeTransparentIcon className="h-4" />,
element: ModuleConfig,
element: ModuleConfig
},
{
name: "App Config",
icon: <WindowIcon className="h-4" />,
element: AppConfig,
},
element: AppConfig
}
];
return <TabbedContent tabs={tabs} />;
src/pages/Extensions/Index.tsx
+5 -5
View File
@@ -5,7 +5,7 @@ import { useDevice } from "@core/providers/useDevice.js";
import {
CloudIcon,
DocumentIcon,
SignalIcon,
SignalIcon
} from "@heroicons/react/24/outline";
import { Environment } from "@pages/Extensions/Environment.js";
import { FileBrowser } from "@pages/Extensions/FileBrowser";
@@ -18,19 +18,19 @@ export const ExtensionsPage = (): JSX.Element => {
name: "File Browser",
icon: <DocumentIcon className="h-4" />,
element: FileBrowser,
disabled: !hardware.hasWifi,
disabled: !hardware.hasWifi
},
{
name: "Range Test",
icon: <SignalIcon className="h-4" />,
element: FileBrowser,
disabled: !hardware.hasWifi,
disabled: !hardware.hasWifi
},
{
name: "Environment",
icon: <CloudIcon className="h-4" />,
element: Environment,
},
element: Environment
}
];
return <TabbedContent tabs={tabs} />;
src/pages/Info.tsx
+9 -9
View File
@@ -5,7 +5,7 @@ import { JSONTree } from "react-json-tree";
import {
TabbedContent,
TabType,
TabType
} from "@app/components/layout/page/TabbedContent.js";
import { useDevice } from "@core/providers/useDevice.js";
import { EyeIcon } from "@heroicons/react/24/outline";
@@ -24,32 +24,32 @@ export const InfoPage = (): JSX.Element => {
{
name: "Config",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={config} />,
element: () => <JSONTree theme="monokai" data={config} />
},
{
name: "Module Config",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={moduleConfig} />,
element: () => <JSONTree theme="monokai" data={moduleConfig} />
},
{
name: "Hardware",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={hardware} />,
element: () => <JSONTree theme="monokai" data={hardware} />
},
{
name: "Nodes",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={nodes} />,
element: () => <JSONTree theme="monokai" data={nodes} />
},
{
name: "Waypoints",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={waypoints} />,
element: () => <JSONTree theme="monokai" data={waypoints} />
},
{
name: "Connection",
icon: <EyeIcon className="h-4" />,
element: () => <JSONTree theme="monokai" data={connection} />,
element: () => <JSONTree theme="monokai" data={connection} />
},
{
name: "Serial Logs",
@@ -62,8 +62,8 @@ export const InfoPage = (): JSX.Element => {
</div>
))}
</div>
),
},
)
}
];
return <TabbedContent tabs={tabs} />;
src/pages/Map.tsx
+16 -5
View File
@@ -1,25 +1,27 @@
import type React from "react";
import maplibregl from "maplibre-gl";
import { Map, Marker, useMap } from "react-map-gl";
import { Layer, Map, Marker, Source, useMap } from "react-map-gl";
import { base16 } from "rfc4648";
import { Card } from "@app/components/Card.js";
import { IconButton } from "@app/components/IconButton.js";
import { Mono } from "@app/components/Mono.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import {
EllipsisHorizontalCircleIcon,
MapPinIcon,
MapPinIcon
} from "@heroicons/react/24/outline";
export const MapPage = (): JSX.Element => {
const { nodes, waypoints } = useDevice();
const { rasterSources } = useAppStore();
const { current: map } = useMap();
return (
<div className="flex-grow">
<div className="h-full flex-grow">
<div className="absolute right-0 top-0 z-10 m-2">
<Card className="flex-col p-3">
<div className="p-1 text-lg font-medium">Title</div>
@@ -51,9 +53,9 @@ export const MapPage = (): JSX.Element => {
map?.flyTo({
center: [
n.data.position.longitudeI / 1e7,
n.data.position.latitudeI / 1e7,
n.data.position.latitudeI / 1e7
],
zoom: 10,
zoom: 10
});
}
}}
@@ -62,6 +64,10 @@ export const MapPage = (): JSX.Element => {
</div>
))}
</div>
{/* */}
{rasterSources.map((source, index) => (
<div key={index}>{source.title}Tst</div>
))}
</Card>
</div>
<Map
@@ -81,6 +87,11 @@ export const MapPage = (): JSX.Element => {
</div>
</Marker>
))}
{rasterSources.map((source, index) => (
<Source key={index} type="raster" {...source}>
<Layer type="raster" />
</Source>
))}
{nodes.map((n) => {
if (n.data.position?.latitudeI) {
return (
src/pages/Messages.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import type React from "react";
import { IconButton } from "@app/components/IconButton.js";
import {
TabbedContent,
TabType,
TabType
} from "@components/layout/page/TabbedContent.js";
import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
import { useDevice } from "@core/providers/useDevice.js";
@@ -21,7 +21,7 @@ export const MessagesPage = (): JSX.Element => {
? "Primary"
: `Ch ${channel.config.index}`,
element: () => <ChannelChat channel={channel} />,
disabled: channel.config.role === Protobuf.Channel_Role.DISABLED,
disabled: channel.config.role === Protobuf.Channel_Role.DISABLED
};
});
@@ -38,7 +38,7 @@ export const MessagesPage = (): JSX.Element => {
setActivePage("channels");
}}
/>
),
)
]}
/>
</div>
src/pages/Peers.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ export const PeersPage = (): JSX.Element => {
onClick={() => {
if (connection) {
void toast.promise(
connection.getMetadata(node.data.num),
connection.getMetadata({ nodeNum: node.data.num }),
{
loading: "Requesting Metadata...",
success: "Recieved Metadata",