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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save