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

fix build

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-08-09 09:13:27 +10:00
parent ed9ee28745
commit 1f2637eb12
10 changed files with 189 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SlideSheets/NewDevice.tsx
+14 -17
View File
@@ -10,12 +10,12 @@ import {
Tab,
Tablist,
} from "evergreen-ui";
import type { IconType } from "react-icons";
import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
import { BLE } from "../connect/BLE.js";
import { HTTP } from "../connect/HTTP.js";
import { Serial } from "../connect/Serial.js";
import type { TabType } from "../layout/page/TabbedContent.js";
export interface NewDeviceProps {
open: boolean;
@@ -28,35 +28,32 @@ export interface CloseProps {
export type connType = "http" | "ble" | "serial";
export interface Tab {
name: connType;
icon: IconType;
displayName: string;
export interface ConnTab extends Omit<TabType, "element"> {
connType: connType;
element: ({ close }: CloseProps) => JSX.Element;
disabled?: boolean;
}
export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
const [selectedConnType, setSelectedConnType] = useState<connType>("ble");
const tabs: Tab[] = [
const tabs: ConnTab[] = [
{
name: "ble",
connType: "ble",
icon: FiBluetooth,
displayName: "BLE",
name: "BLE",
element: BLE,
disabled: !navigator.bluetooth,
},
{
name: "http",
connType: "http",
icon: FiWifi,
displayName: "HTTP",
name: "HTTP",
element: HTTP,
},
{
name: "serial",
connType: "serial",
icon: FiTerminal,
displayName: "Serial",
name: "Serial",
element: Serial,
disabled: !navigator.serial,
},
@@ -85,13 +82,13 @@ export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
<Tab
key={index}
gap={5}
isSelected={selectedConnType === TabData.name}
onSelect={() => setSelectedConnType(TabData.name)}
isSelected={selectedConnType === TabData.connType}
onSelect={() => setSelectedConnType(TabData.connType)}
disabled={TabData.disabled}
>
<>
<TabData.icon />
{TabData.displayName}
{TabData.name}
</>
</Tab>
))}
@@ -106,7 +103,7 @@ export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
backgroundColor="white"
elevation={1}
flexGrow={1}
display={selectedConnType === TabData.name ? "block" : "none"}
display={selectedConnType === TabData.connType ? "block" : "none"}
>
{!TabData.disabled && <TabData.element close={onClose} />}
</Pane>
src/components/layout/page/SlideSheetTabbedContent.tsx
+78
View File
@@ -0,0 +1,78 @@
import type React from "react";
import { useState } from "react";
import {
Heading,
IconComponent,
majorScale,
Pane,
Paragraph,
Tab,
Tablist,
} from "evergreen-ui";
import type { IconType } from "react-icons";
export interface TabType {
name: string;
icon: IconComponent | IconType;
element: () => JSX.Element;
disabled?: boolean;
}
export interface SlideSheetTabbedContentProps {
heading: string;
description: string;
tabs: TabType[];
}
export const SlideSheetTabbedContent = ({
heading,
description,
tabs,
}: SlideSheetTabbedContentProps): JSX.Element => {
const [selectedTab, setSelectedTab] = useState(0);
return (
<>
<Pane zIndex={1} flexShrink={0} elevation={1} backgroundColor="white">
<Pane padding={16} borderBottom="muted">
<Heading size={600}>{heading}</Heading>
<Paragraph size={400} color="muted">
{description}
</Paragraph>
</Pane>
<Pane display="flex" padding={8}>
<Tablist>
{tabs.map((Entry, index) => (
<Tab
key={index}
userSelect="none"
disabled={Entry.disabled}
gap={5}
onSelect={() => setSelectedTab(index)}
isSelected={selectedTab === index}
>
<Entry.icon />
{Entry.name}
</Tab>
))}
</Tablist>
</Pane>
</Pane>
<Pane display="flex" overflowY="scroll" background="tint1" padding={16}>
{tabs.map((Entry, index) => (
<Pane
key={index}
borderRadius={majorScale(1)}
backgroundColor="white"
elevation={1}
flexGrow={1}
display={selectedTab === index ? "block" : "none"}
>
{!Entry.disabled && <Entry.element />}
</Pane>
))}
</Pane>
</>
);
};
src/components/layout/page/TabbedContent.tsx
+16 -16
View File
@@ -1,28 +1,27 @@
import type React from "react";
import { useState } from "react";
import { IconComponent, majorScale, Pane, Tab, Tablist } from "evergreen-ui";
import type { IconType } from "react-icons";
export interface Tab {
key: number;
export interface TabType {
name: string;
icon: IconComponent;
icon: IconComponent | IconType;
element: () => JSX.Element;
disabled?: boolean;
}
export interface TabbedContentProps {
active: number;
setActive: (index: number) => void;
tabs: Tab[];
tabs: TabType[];
actions?: (() => JSX.Element)[];
}
export const TabbedContent = ({
active,
setActive,
tabs,
actions,
}: TabbedContentProps): JSX.Element => {
const [selectedTab, setSelectedTab] = useState(0);
return (
<Pane
margin={majorScale(3)}
@@ -38,13 +37,14 @@ export const TabbedContent = ({
<Pane borderBottom="muted" paddingBottom={majorScale(2)}>
<Pane display="flex">
<Tablist>
{tabs.map((Entry) => (
{tabs.map((Entry, index) => (
<Tab
key={Entry.key}
key={index}
userSelect="none"
disabled={Entry.disabled}
gap={5}
onSelect={() => setActive(Entry.key)}
isSelected={active === Entry.key}
onSelect={() => setSelectedTab(index)}
isSelected={selectedTab === index}
>
<Entry.icon />
{Entry.name}
@@ -59,14 +59,14 @@ export const TabbedContent = ({
</Pane>
</Pane>
</Pane>
{tabs.map((Entry) => (
{tabs.map((Entry, index) => (
<Pane
key={Entry.key}
display={active === Entry.key ? "flex" : "none"}
key={index}
display={selectedTab === index ? "flex" : "none"}
flexDirection="column"
flexGrow={1}
>
<Entry.element />
{!Entry.disabled && <Entry.element />}
</Pane>
))}
</Pane>
src/pages/Channels/index.tsx
+2 -6
View File
@@ -5,7 +5,7 @@ import { Button, LayerIcon, LayerOutlineIcon, Tooltip } from "evergreen-ui";
import { IoQrCodeOutline } from "react-icons/io5";
import { QRDialog } from "@app/components/Dialog/QRDialog.js";
import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -14,11 +14,9 @@ import { Channel } from "./Channel.js";
export const ChannelsPage = (): JSX.Element => {
const { channels, config } = useDevice();
const [QRDialogOpen, setQRDialogOpen] = useState(false);
const [activeChannel, setActiveChannel] = useState(0);
const tabs: Tab[] = channels.map((channel) => {
const tabs: TabType[] = channels.map((channel) => {
return {
key: channel.config.index,
name: channel.config.settings?.name.length
? channel.config.settings.name
: channel.config.role === Protobuf.Channel_Role.PRIMARY
@@ -43,8 +41,6 @@ export const ChannelsPage = (): JSX.Element => {
loraConfig={config.lora}
/>
<TabbedContent
active={activeChannel}
setActive={setActiveChannel}
tabs={tabs}
actions={[
() => (
src/pages/Config/AppConfig.tsx
+56
View File
@@ -0,0 +1,56 @@
import type React from "react";
import { useState } from "react";
import { Pane, Tab, Tablist } from "evergreen-ui";
import { ExternalNotification } from "@app/components/PageComponents/ModuleConfig/ExternalNotification.js";
import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
export const AppConfig = (): JSX.Element => {
const [selectedIndex, setSelectedIndex] = useState(0);
const configSections = [
{
label: "Interface",
element: MQTT,
},
{
label: "Logging",
element: Serial,
},
{
label: "Language",
element: ExternalNotification,
},
];
return (
<Pane display="flex">
<Pane flexBasis={150} marginRight={24}>
<Tablist>
{configSections.map((Config, index) => (
<Tab
key={index}
direction="vertical"
isSelected={index === selectedIndex}
onSelect={() => setSelectedIndex(index)}
>
{Config.label}
</Tab>
))}
</Tablist>
</Pane>
<Pane flex="1">
{configSections.map((Config, index) => (
<Pane
key={index}
display={index === selectedIndex ? "block" : "none"}
>
<Config.element />
</Pane>
))}
</Pane>
</Pane>
);
};
src/pages/Config/index.tsx
+10 -15
View File
@@ -1,36 +1,31 @@
import type React from "react";
import { useState } from "react";
import { CogIcon, CubeIcon } from "evergreen-ui";
import { ApplicationsIcon, CogIcon, CubeIcon } from "evergreen-ui";
import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
import { AppConfig } from "./AppConfig.js";
import { DeviceConfig } from "./DeviceConfig.js";
import { ModuleConfig } from "./ModuleConfig.js";
export const ConfigPage = (): JSX.Element => {
const [activeConfig, setActiveConfig] = useState(0);
const tabs: Tab[] = [
const tabs: TabType[] = [
{
key: 0,
name: "Device Config",
icon: CogIcon,
element: DeviceConfig,
},
{
key: 1,
name: "Module Config",
icon: CubeIcon,
element: ModuleConfig,
},
{
name: "App Config",
icon: ApplicationsIcon,
element: AppConfig,
},
];
return (
<TabbedContent
active={activeConfig}
setActive={setActiveConfig}
tabs={tabs}
/>
);
return <TabbedContent tabs={tabs} />;
};
src/pages/Extensions/FileBrowser.tsx
+1 -4
View File
@@ -36,10 +36,7 @@ export const FileBrowser = (): JSX.Element => {
<a
target="_blank"
rel="noopener noreferrer"
href={`http://meshtastic.local/json/fs/browse/static/${file.name.replace(
"static/",
""
)}`}
href={`http://meshtastic.local/${file.name.replace("static/", "")}`}
>
{file.name.replace("static/", "").replace(".gz", "")}
</a>
src/pages/Extensions/Index.tsx
+3 -14
View File
@@ -1,46 +1,35 @@
import type React from "react";
import { useState } from "react";
import { DocumentIcon, GanttChartIcon, RainIcon } from "evergreen-ui";
import { useDevice } from "@app/core/stores/deviceStore.js";
import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
import { FileBrowser } from "@pages/Extensions/FileBrowser";
import { Environment } from "./Environment.js";
export const ExtensionsPage = (): JSX.Element => {
const [activeExtension, setActiveExtension] = useState(0);
const { hardware } = useDevice();
const tabs: Tab[] = [
const tabs: TabType[] = [
{
key: 0,
name: "File Browser",
icon: DocumentIcon,
element: FileBrowser,
disabled: !hardware.hasWifi,
},
{
key: 1,
name: "Range Test",
icon: GanttChartIcon,
element: FileBrowser,
disabled: !hardware.hasWifi,
},
{
key: 2,
name: "Environment",
icon: RainIcon,
element: Environment,
},
];
return (
<TabbedContent
active={activeExtension}
setActive={setActiveExtension}
tabs={tabs}
/>
);
return <TabbedContent tabs={tabs} />;
};
src/pages/Messages/ChannelChat.tsx
+3 -4
View File
@@ -28,10 +28,9 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
currentMessage,
undefined,
true,
channel.config.index, //maybe channel.config.index--
channel.config.index,
(id) => {
ackMessage(channel.config.index, id), console.log("Got Ack");
ackMessage(channel.config.index, id);
return Promise.resolve();
}
);
@@ -44,7 +43,7 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
{channel.messages.map((message, index) => (
<Message
key={index}
message={message.message.data}
messagePacket={message.message}
ack={message.ack}
rxTime={message.received}
lastMsgSameUser={
src/pages/Messages/index.tsx
+6 -6
View File
@@ -9,18 +9,20 @@ import {
Tooltip,
} from "evergreen-ui";
import { Tab, TabbedContent } from "@components/layout/page/TabbedContent.js";
import {
TabbedContent,
TabType,
} from "@components/layout/page/TabbedContent.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { ChannelChat } from "./ChannelChat.js";
export const MessagesPage = (): JSX.Element => {
const { channels, activeChat, setActiveChat, setActivePage } = useDevice();
const { channels, setActivePage } = useDevice();
const tabs: Tab[] = channels.map((channel) => {
const tabs: TabType[] = channels.map((channel) => {
return {
key: channel.config.index,
name: channel.config.settings?.name.length
? channel.config.settings?.name
: channel.config.index === 0
@@ -35,8 +37,6 @@ export const MessagesPage = (): JSX.Element => {
return (
<Pane display="flex" flexDirection="column" width="100%">
<TabbedContent
active={activeChat}
setActive={setActiveChat}
tabs={tabs}
actions={[
() => (