Modal and connection modal improvements
This commit is contained in:
Sacha Weatherstone
@@ -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
|
||||
}
|
||||
/>
|
||||
{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'
|
||||
}`}
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
</Modal>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</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'
|
||||
}`}
|
||||
/>
|
||||
</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>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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> => {
|
||||
|
||||
@@ -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> => {
|
||||
|
||||
@@ -47,6 +47,7 @@ export const Card = ({
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
>
|
||||
{children}
|
||||
</m.div>
|
||||
|
||||
@@ -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'
|
||||
}`}
|
||||
>
|
||||
​
|
||||
</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"
|
||||
>
|
||||
​
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -146,7 +146,7 @@ export const BottomNav = (): JSX.Element => {
|
||||
</BottomNavItem>
|
||||
|
||||
<VersionInfo
|
||||
visible={showVersionInfo}
|
||||
modalOpen={showVersionInfo}
|
||||
onClose={(): void => {
|
||||
setShowVersionInfo(false);
|
||||
}}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user