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

Modal and connection modal improvements

pull/21/head
Sacha Weatherstone 4 years ago
parent
7d0c264313
commit
819c14a592
7 changed files with 237 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 163
      src/components/Connection.tsx
  2. 45
      src/components/connection/BLE.tsx
  3. 73
      src/components/connection/Serial.tsx
  4. 1
      src/components/generic/Card.tsx
  5. 90
      src/components/generic/Modal.tsx
  6. 2
      src/components/menu/BottomNav.tsx
  7. 87
      src/components/modals/VersionInfo.tsx

163
src/components/Connection.tsx
View File

@ -1,7 +1,7 @@
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence, m } from 'framer-motion';
import { m } from 'framer-motion';
import { BLE } from '@components/connection/BLE';
import { HTTP } from '@components/connection/HTTP';
@ -49,92 +49,87 @@ export const Connection = (): JSX.Element => {
}, [meshtasticState.ready, dispatch]);
return (
<AnimatePresence>
{appState.connectionModalOpen && (
<Modal
title="Connect to a device"
onClose={(): void => {
dispatch(closeConnectionModal());
}}
>
<div className="flex max-w-3xl flex-col gap-4 md:flex-row">
<div className="md:w-1/2">
<div className="space-y-2">
<Select
label="Connection Method"
optionsEnum={connType}
value={appState.connType}
onChange={(e): void => {
dispatch(setConnType(parseInt(e.target.value)));
}}
disabled={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
<Modal
title="Connect to a device"
open={appState.connectionModalOpen}
onClose={(): void => {
dispatch(closeConnectionModal());
}}
>
<div className="flex max-w-3xl flex-col gap-4 md:flex-row">
<div className="flex flex-col md:w-1/2">
<div className="flex flex-grow flex-col space-y-2">
<Select
label="Connection Method"
optionsEnum={connType}
value={appState.connType}
onChange={(e): void => {
dispatch(setConnType(parseInt(e.target.value)));
}}
disabled={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
{appState.connType === connType.HTTP && (
<HTTP
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
{appState.connType === connType.BLE && (
<BLE
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
{appState.connType === connType.SERIAL && (
<Serial
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
</div>
</div>
<div className="md:w-1/2">
<div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{meshtasticState.logs.length === 0 && (
<div className="flex h-full w-full">
<m.img
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="m-auto h-40 w-40 text-green-500"
src={`/placeholders/${
appState.darkMode ? 'View Code Dark.svg' : 'View Code.svg'
}`}
/>
{appState.connType === connType.HTTP && (
<HTTP
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
{appState.connType === connType.BLE && (
<BLE
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
{appState.connType === connType.SERIAL && (
<Serial
connecting={
meshtasticState.deviceStatus ===
Types.DeviceStatusEnum.DEVICE_CONNECTED
}
/>
)}
</div>
</div>
<div className="md:w-1/2">
<div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{meshtasticState.logs.length === 0 && (
<div className="flex h-full w-full">
<m.img
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="m-auto h-40 w-40 text-green-500"
src={`/placeholders/${
appState.darkMode
? 'View Code Dark.svg'
: 'View Code.svg'
}`}
/>
)}
{meshtasticState.logs
.filter((log) => {
return ![
Types.Emitter.handleFromRadio,
Types.Emitter.handleMeshPacket,
Types.Emitter.sendPacket,
].includes(log.emitter);
})
.map((log, index) => (
<div key={index} className="flex">
<div className="truncate font-mono text-sm">
{log.message}
</div>
)}
{meshtasticState.logs
.filter((log) => {
return ![
Types.Emitter.handleFromRadio,
Types.Emitter.handleMeshPacket,
Types.Emitter.sendPacket,
].includes(log.emitter);
})
.map((log, index) => (
<div key={index} className="flex">
<div className="truncate font-mono text-sm">
{log.message}
</div>
</div>
))}
</div>
</div>
</div>
))}
</div>
</Modal>
)}
</AnimatePresence>
</div>
</div>
</Modal>
);
};

45
src/components/connection/BLE.tsx
View File

@ -36,26 +36,31 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
});
return (
<form onSubmit={onSubmit} className="space-y-2">
{bleDevices.map((device, index) => (
<div
onClick={async (): Promise<void> => {
await setConnection(connType.BLE);
}}
className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
key={index}
>
<div className="my-auto">{device.name}</div>
<IconButton
nested
onClick={async (): Promise<void> => {
await setConnection(connType.BLE);
}}
icon={<FiArrowRightCircle />}
disabled={connecting}
/>
</div>
))}
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{bleDevices.length > 0 ? (
bleDevices.map((device, index) => (
<div
className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
key={index}
>
<div className="my-auto">{device.name}</div>
<IconButton
nested
onClick={async (): Promise<void> => {
await setConnection(connType.BLE);
}}
icon={<FiArrowRightCircle />}
disabled={connecting}
/>
</div>
))
) : (
<div className="m-auto">
<p>No previously connected devices found</p>
</div>
)}
</div>
<Button
className="mt-2 ml-auto"
onClick={async (): Promise<void> => {

73
src/components/connection/Serial.tsx
View File

@ -38,44 +38,45 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
});
return (
<form onSubmit={onSubmit} className="space-y-2">
{serialDevices.length > 0 ? (
serialDevices.map((device, index) => (
<div
className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
key={index}
>
<div className="my-auto flex gap-4">
<p>
Vendor: <small>{device.getInfo().usbVendorId}</small>
</p>
<p>
Device: <small>{device.getInfo().usbProductId}</small>
</p>
<form onSubmit={onSubmit} className="flex flex-grow flex-col">
<div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
{serialDevices.length > 0 ? (
serialDevices.map((device, index) => (
<div
className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
key={index}
>
<div className="my-auto flex gap-4">
<p>
Vendor: <small>{device.getInfo().usbVendorId}</small>
</p>
<p>
Device: <small>{device.getInfo().usbProductId}</small>
</p>
</div>
<IconButton
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
type: connType.SERIAL,
params: {
port: device,
},
}),
);
await setConnection(connType.SERIAL);
}}
disabled={connecting}
icon={<FiArrowRightCircle />}
/>
</div>
<IconButton
nested
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
type: connType.SERIAL,
params: {
port: device,
},
}),
);
await setConnection(connType.SERIAL);
}}
disabled={connecting}
icon={<FiArrowRightCircle />}
/>
))
) : (
<div className="m-auto">
<p>No previously connected devices found</p>
</div>
))
) : (
<div className="h-40 rounded-md border border-gray-300 dark:border-gray-600">
<p>No previously connected devices found</p>
</div>
)}
)}
</div>
<Button
className="mt-2 ml-auto"
onClick={async (): Promise<void> => {

1
src/components/generic/Card.tsx
View File

@ -47,6 +47,7 @@ export const Card = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1 }}
>
{children}
</m.div>

90
src/components/generic/Modal.tsx
View File

@ -1,58 +1,74 @@
import type React from 'react';
import { m } from 'framer-motion';
import { AnimatePresence, m } from 'framer-motion';
import { FiX } from 'react-icons/fi';
import { useAppSelector } from '@hooks/useAppSelector';
import { IconButton } from './button/IconButton';
import { Card } from './Card';
import { Card, CardProps } from './Card';
export interface ModalProps {
title: string;
export interface ModalProps extends CardProps {
open: boolean;
bgDismiss?: boolean;
onClose: () => void;
actions?: React.ReactNode;
children: React.ReactNode;
}
export const Modal = ({
title,
open,
bgDismiss,
onClose,
actions,
children,
...props
}: ModalProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
<m.div
className="fixed h-full w-full backdrop-blur-sm backdrop-filter"
onClick={onClose}
/>
<m.div className="text-center ">
<span
className="inline-block h-screen align-middle "
aria-hidden="true"
<AnimatePresence>
{open && (
<m.div
className={`fixed inset-0 ${darkMode ? 'dark' : ''} ${
open ? 'z-30' : 'z-0'
}`}
>
&#8203;
</span>
<div className="inline-block w-full max-w-3xl align-middle">
<Card
border
draggable
title={title}
actions={
<>
{actions}
<IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
</>
}
className="relative flex-col gap-4 "
>
{children}
</Card>
</div>
</m.div>
</m.div>
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.1 }}
className="fixed h-full w-full backdrop-blur-md backdrop-filter"
onClick={(): void => {
bgDismiss && onClose();
}}
/>
<m.div className="text-center ">
<span
className="inline-block h-screen align-middle "
aria-hidden="true"
>
&#8203;
</span>
<div className="inline-block w-full max-w-3xl align-middle">
<Card
border
draggable
actions={
<div className="flex gap-2">
{actions}
<IconButton
tooltip="Close"
icon={<FiX />}
onClick={onClose}
/>
</div>
}
className="relative flex-col gap-4"
{...props}
/>
</div>
</m.div>
</m.div>
)}
</AnimatePresence>
);
};

2
src/components/menu/BottomNav.tsx
View File

@ -146,7 +146,7 @@ export const BottomNav = (): JSX.Element => {
</BottomNavItem>
<VersionInfo
visible={showVersionInfo}
modalOpen={showVersionInfo}
onClose={(): void => {
setShowVersionInfo(false);
}}

87
src/components/modals/VersionInfo.tsx
View File

@ -1,7 +1,6 @@
import type React from 'react';
import { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { MdUpgrade } from 'react-icons/md';
import useSWR from 'swr';
@ -38,12 +37,12 @@ export interface Commit {
}
export interface VersionInfoProps {
visible: boolean;
modalOpen: boolean;
onClose: () => void;
}
export const VersionInfo = ({
visible,
modalOpen,
onClose,
}: VersionInfoProps): JSX.Element => {
const appState = useAppSelector((state) => state.app);
@ -67,50 +66,46 @@ export const VersionInfo = ({
dispatch(setUpdateAvaliable(true));
}
}
}, [data]);
}, [data, dispatch]);
return (
<AnimatePresence>
{visible && (
<Modal
title="Version Info"
actions={
// TODO: Check if version is hosted, and merge pwa update button here
appState.updateAvaliable && (
<a href={`http://${connectionUrl}/admin/spiffs`}>
<IconButton tooltip="Update now" icon={<MdUpgrade />} />
</a>
)
}
onClose={(): void => {
onClose();
}}
>
<div className="flex h-96 flex-col gap-1 overflow-y-auto dark:text-white">
{data &&
data.map((commit) => (
<div
key={commit.sha}
className={`flex gap-2 rounded-md border border-transparent py-1 px-2 hover:border-primary ${
commit.sha.substring(0, 7) === process.env.COMMIT_HASH
? 'bg-primary'
: 'dark:bg-secondaryDark'
}`}
>
<div className="my-auto text-xs dark:text-gray-400">
{new Date(
commit.commit.committer.date,
).toLocaleDateString()}
</div>
<div className="my-auto font-mono text-sm">
{commit.sha.substring(0, 7)}
</div>
<div className="truncate">{commit.commit.message}</div>
</div>
))}
</div>
</Modal>
)}
</AnimatePresence>
<Modal
open={modalOpen}
title="Version Info"
bgDismiss
actions={
// TODO: Check if version is hosted, and merge pwa update button here
appState.updateAvaliable && (
<a href={`http://${connectionUrl}/admin/spiffs`}>
<IconButton tooltip="Update now" icon={<MdUpgrade />} />
</a>
)
}
onClose={(): void => {
onClose();
}}
>
<div className="flex h-96 flex-col gap-1 overflow-y-auto dark:text-white">
{data &&
data.map((commit) => (
<div
key={commit.sha}
className={`flex gap-2 rounded-md border border-transparent py-1 px-2 hover:border-primary ${
commit.sha.substring(0, 7) === process.env.COMMIT_HASH
? 'bg-primary'
: 'dark:bg-secondaryDark'
}`}
>
<div className="my-auto text-xs dark:text-gray-400">
{new Date(commit.commit.committer.date).toLocaleDateString()}
</div>
<div className="my-auto font-mono text-sm">
{commit.sha.substring(0, 7)}
</div>
<div className="truncate">{commit.commit.message}</div>
</div>
))}
</div>
</Modal>
);
};

Write Preview
Loading…
Cancel
Save