Version Info and modal titles
This commit is contained in:
Sacha Weatherstone
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { BLE } from '@components/connection/BLE';
|
||||
import { HTTP } from '@components/connection/HTTP';
|
||||
import { Serial } from '@components/connection/Serial';
|
||||
@@ -52,74 +51,72 @@ export const Connection = (): JSX.Element => {
|
||||
<AnimatePresence>
|
||||
{appState.connectionModalOpen && (
|
||||
<Modal
|
||||
className="w-full max-w-3xl"
|
||||
title="Connect to a device"
|
||||
onClose={(): void => {
|
||||
dispatch(closeConnectionModal());
|
||||
}}
|
||||
>
|
||||
<Card className="relative">
|
||||
<div className="flex max-w-3xl flex-grow gap-4 p-2">
|
||||
<div className="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={
|
||||
<div className="flex max-w-3xl flex-grow gap-4">
|
||||
<div className="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={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
{appState.connType === connType.HTTP && (
|
||||
<HTTP
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
{appState.connType === connType.HTTP && (
|
||||
<HTTP
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{appState.connType === connType.BLE && (
|
||||
<BLE
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{appState.connType === connType.SERIAL && (
|
||||
<Serial
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<div className="h-96 overflow-y-auto rounded-md bg-gray-200 p-2 dark:bg-secondaryDark dark:text-gray-400">
|
||||
{state.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>
|
||||
)}
|
||||
{appState.connType === connType.BLE && (
|
||||
<BLE
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{appState.connType === connType.SERIAL && (
|
||||
<Serial
|
||||
connecting={
|
||||
state.deviceStatus ===
|
||||
Types.DeviceStatusEnum.DEVICE_CONNECTED
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="w-1/2">
|
||||
<div className="h-96 overflow-y-auto rounded-md bg-gray-200 dark:bg-secondaryDark dark:text-gray-400">
|
||||
{state.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>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
import type React from 'react';
|
||||
|
||||
import { m } from 'framer-motion';
|
||||
import { FiX } from 'react-icons/fi';
|
||||
|
||||
import { useAppSelector } from '@hooks/useAppSelector';
|
||||
|
||||
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
||||
import { IconButton } from './button/IconButton';
|
||||
import { Card } from './Card';
|
||||
|
||||
export interface ModalProps extends DefaultDivProps {
|
||||
export interface ModalProps {
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Modal = ({
|
||||
title,
|
||||
onClose,
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: ModalProps): JSX.Element => {
|
||||
const darkMode = useAppSelector((state) => state.app.darkMode);
|
||||
|
||||
@@ -32,8 +34,19 @@ export const Modal = ({
|
||||
>
|
||||
​
|
||||
</span>
|
||||
<div className={`inline-block align-middle ${className}`} {...props}>
|
||||
{children}
|
||||
<div className="inline-block w-full max-w-3xl align-middle">
|
||||
<Card
|
||||
className="relative flex-col gap-4
|
||||
"
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<div className="text-2xl font-medium dark:text-white">
|
||||
{title}
|
||||
</div>
|
||||
<IconButton icon={<FiX />} onClick={onClose} />
|
||||
</div>
|
||||
{children}
|
||||
</Card>
|
||||
</div>
|
||||
</m.div>
|
||||
</m.div>
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
FiWifi,
|
||||
FiX,
|
||||
} from 'react-icons/fi';
|
||||
import { MdUpgrade } from 'react-icons/md';
|
||||
import {
|
||||
RiArrowDownLine,
|
||||
RiArrowUpDownLine,
|
||||
@@ -124,19 +125,29 @@ export const BottomNav = (): JSX.Element => {
|
||||
<div className="flex">
|
||||
<VersionInfo
|
||||
visible={showVersionInfo}
|
||||
onclose={(): void => {
|
||||
onClose={(): void => {
|
||||
setShowVersionInfo(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tooltip content={`Current Commit`}>
|
||||
<Tooltip
|
||||
content={
|
||||
appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
|
||||
}
|
||||
>
|
||||
<div
|
||||
onClick={(): void => {
|
||||
setShowVersionInfo(true);
|
||||
}}
|
||||
className="group flex cursor-pointer select-none border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark"
|
||||
className={`group flex cursor-pointer select-none border-l border-gray-300 p-1 hover:bg-gray-200 dark:border-gray-600 dark:text-white dark:hover:bg-primaryDark ${
|
||||
appState.updateAvaliable ? 'animate-pulse' : ''
|
||||
}`}
|
||||
>
|
||||
<FiGitBranch className="mr-1 p-0.5 group-active:scale-90" />
|
||||
{appState.updateAvaliable ? (
|
||||
<MdUpgrade className="mr-1 p-0.5 group-active:scale-90" />
|
||||
) : (
|
||||
<FiGitBranch className="mr-1 p-0.5 group-active:scale-90" />
|
||||
)}
|
||||
<p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
@@ -1,59 +1,91 @@
|
||||
import React from 'react';
|
||||
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import { setUpdateAvaliable } from '@app/core/slices/appSlice.js';
|
||||
import { fetcher } from '@app/core/utils/fetcher.js';
|
||||
import { useAppDispatch } from '@app/hooks/useAppDispatch.js';
|
||||
import { Modal } from '@components/generic/Modal';
|
||||
|
||||
import { Card } from '../generic/Card';
|
||||
export interface Commit {
|
||||
sha: string;
|
||||
node_id: string;
|
||||
commit: {
|
||||
author: string;
|
||||
committer: string;
|
||||
message: string;
|
||||
tree: {
|
||||
sha: string;
|
||||
url: string;
|
||||
};
|
||||
url: string;
|
||||
comment_count: number;
|
||||
};
|
||||
url: string;
|
||||
html_url: string;
|
||||
comments_url: string;
|
||||
}
|
||||
|
||||
export interface VersionInfoProps {
|
||||
visible: boolean;
|
||||
onclose: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const VersionInfo = ({
|
||||
visible,
|
||||
onclose,
|
||||
onClose,
|
||||
}: VersionInfoProps): JSX.Element => {
|
||||
// const { data } = useSWR<CommitHistory>(
|
||||
// `query {
|
||||
// repository(owner: "meshtastic", name: "meshtastic-web") {
|
||||
// ref(qualifiedName: "master") {
|
||||
// name
|
||||
// target {
|
||||
// ... on Commit {
|
||||
// history(first: 4) {
|
||||
// edges {
|
||||
// node {
|
||||
// abbreviatedOid
|
||||
// message
|
||||
// author {
|
||||
// avatarUrl
|
||||
// name
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }`,
|
||||
// fetcher,
|
||||
// );
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { data } = useSWR<Commit[]>(
|
||||
'https://api.github.com/repos/meshtastic/meshtastic-web/commits?per_page=10',
|
||||
fetcher,
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
},
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (data) {
|
||||
const index = data.findIndex(
|
||||
(commit) => commit.sha.substring(0, 7) === process.env.COMMIT_HASH,
|
||||
);
|
||||
console.log(index);
|
||||
|
||||
if (index === -1 || index > 0) {
|
||||
dispatch(setUpdateAvaliable(true));
|
||||
}
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{visible && (
|
||||
<Modal
|
||||
title="Version Info"
|
||||
onClose={(): void => {
|
||||
onclose();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<Card className="relative">
|
||||
<div className="w-full max-w-3xl p-10">Version Info</div>
|
||||
{/* {data?.sha} */}
|
||||
</Card>
|
||||
<div className="flex flex-col gap-1 dark:text-white">
|
||||
{data &&
|
||||
data.map((commit) => (
|
||||
<div
|
||||
key={commit.sha}
|
||||
className={`flex gap-2 rounded-md p-1 ${
|
||||
commit.sha.substring(0, 7) === process.env.COMMIT_HASH
|
||||
? 'bg-primary'
|
||||
: 'dark:bg-secondaryDark'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user