WIP
This commit is contained in:
Sacha Weatherstone
@@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
|
||||
import { DefaultExtensionType, defaultStyles, FileIcon } from 'react-file-icon';
|
||||
import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import fetcher from '@app/core/utils/fetcher.js';
|
||||
import { useAppSelector } from '@app/hooks/redux';
|
||||
import { Button } from '@components/generic/Button';
|
||||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
||||
|
||||
export interface RangeTestProps {
|
||||
navOpen: boolean;
|
||||
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
interface IFile {
|
||||
name: string;
|
||||
nameModified: string;
|
||||
size: number;
|
||||
}
|
||||
interface IFiles {
|
||||
data: {
|
||||
files: IFile[];
|
||||
filesystem: {
|
||||
free: number;
|
||||
total: number;
|
||||
used: number;
|
||||
};
|
||||
};
|
||||
|
||||
status: boolean;
|
||||
}
|
||||
|
||||
export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
|
||||
const hostOverrideEnabled = useAppSelector(
|
||||
(state) => state.meshtastic.hostOverrideEnabled,
|
||||
);
|
||||
const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
|
||||
|
||||
const connectionURL = hostOverrideEnabled
|
||||
? hostOverride
|
||||
: import.meta.env.NODE_ENV === 'production'
|
||||
? window.location.hostname
|
||||
: (import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP as string) ??
|
||||
'http://meshtastic.local';
|
||||
|
||||
const { data } = useSWR<IFiles>(
|
||||
`http://${connectionURL}/json/spiffs/browse/static`,
|
||||
fetcher,
|
||||
);
|
||||
|
||||
return (
|
||||
<PrimaryTemplate
|
||||
title="File Browser"
|
||||
tagline="Plugin"
|
||||
button={
|
||||
<Button
|
||||
icon={<FiMenu className="w-5 h-5" />}
|
||||
onClick={(): void => {
|
||||
setNavOpen(!navOpen);
|
||||
}}
|
||||
circle
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full gap-4 md:flex-row-reverse">
|
||||
<Card title="SPIFFS" description="Statistics">
|
||||
{data ? (
|
||||
<div className="flex">
|
||||
<div className="mx-auto my-4 bg-gray-500 rounded-3xl">
|
||||
<div></div>
|
||||
{JSON.stringify(data.data.filesystem.used)} bytes total
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>Loading...</div>
|
||||
)}
|
||||
</Card>
|
||||
<Card
|
||||
title="Files"
|
||||
description="SPIFFS Contents"
|
||||
buttons={
|
||||
<Button active className="font-medium">
|
||||
<FiUploadCloud className="w-8 h-8" />
|
||||
</Button>
|
||||
}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
{data ? (
|
||||
<div className="flex flex-col my-4 space-y-2">
|
||||
{data.data.files.map((file: IFile) => (
|
||||
<div
|
||||
key={file.name}
|
||||
className="flex p-2 mx-4 bg-gray-300 rounded-md max-h-14 dark:bg-gray-600 "
|
||||
>
|
||||
<div className="flex w-12">
|
||||
<FileIcon
|
||||
extension={
|
||||
(file.nameModified ?? file.name).split('.')[
|
||||
(file.nameModified ?? file.name).split('.').length - 1
|
||||
]
|
||||
}
|
||||
{...defaultStyles[
|
||||
(file.nameModified ?? file.name).split('.')[
|
||||
(file.nameModified ?? file.name).split('.').length - 1
|
||||
] as DefaultExtensionType
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href={`http://${connectionURL}/${file.name.replace(
|
||||
'static/',
|
||||
'',
|
||||
)}`}
|
||||
className="my-auto font-semibold"
|
||||
>
|
||||
{file.nameModified ?? file.name}
|
||||
</a>
|
||||
<Button
|
||||
className="ml-auto space-x-0"
|
||||
active
|
||||
confirmAction={async (): Promise<void> => {
|
||||
await fetch(
|
||||
`http://${connectionURL}/json/spiffs/delete`,
|
||||
{
|
||||
method: 'DELETE',
|
||||
},
|
||||
);
|
||||
}}
|
||||
icon={<FiTrash />}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div>Loading...</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
|
||||
import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';
|
||||
|
||||
import { useBreakpoint } from '@app/hooks/breakpoint';
|
||||
import { Button } from '@components/generic/Button';
|
||||
import { Drawer } from '@components/generic/Drawer';
|
||||
import { SidebarItem } from '@components/generic/SidebarItem';
|
||||
import { Tab } from '@headlessui/react';
|
||||
|
||||
import { Files } from './Files';
|
||||
import { RangeTest } from './RangeTest';
|
||||
|
||||
export const Plugins = (): JSX.Element => {
|
||||
const [navOpen, setNavOpen] = React.useState(false);
|
||||
|
||||
const { breakpoint } = useBreakpoint();
|
||||
|
||||
return (
|
||||
<Tab.Group>
|
||||
<div className="relative flex w-full dark:text-white">
|
||||
<Drawer
|
||||
open={breakpoint === 'sm' ? navOpen : true}
|
||||
permenant={breakpoint !== 'sm'}
|
||||
onClose={(): void => {
|
||||
setNavOpen(!navOpen);
|
||||
}}
|
||||
>
|
||||
<Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
|
||||
<div className="flex items-center justify-between m-8 mr-6 md:my-10">
|
||||
<div className="text-4xl font-extrabold leading-none tracking-tight">
|
||||
Plugins
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<Button
|
||||
icon={<FiXCircle className="w-5 h-5" />}
|
||||
circle
|
||||
onClick={(): void => {
|
||||
setNavOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Tab
|
||||
onClick={(): void => {
|
||||
setNavOpen(false);
|
||||
}}
|
||||
>
|
||||
{({ selected }): JSX.Element => (
|
||||
<SidebarItem
|
||||
title="Range Test"
|
||||
description="Test the range of your Meshtastic node"
|
||||
selected={selected}
|
||||
icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
|
||||
/>
|
||||
)}
|
||||
</Tab>
|
||||
<Tab
|
||||
onClick={(): void => {
|
||||
setNavOpen(false);
|
||||
}}
|
||||
>
|
||||
{({ selected }): JSX.Element => (
|
||||
<SidebarItem
|
||||
title="File Browser"
|
||||
description="HTTP only file browser"
|
||||
selected={selected}
|
||||
icon={<FiFileText className="flex-shrink-0 w-6 h-6" />}
|
||||
/>
|
||||
)}
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
</Drawer>
|
||||
<div className="flex w-full">
|
||||
<Tab.Panels className="flex w-full">
|
||||
<Tab.Panel className="flex w-full">
|
||||
<RangeTest navOpen={navOpen} setNavOpen={setNavOpen} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel className="flex w-full">
|
||||
<Files navOpen={navOpen} setNavOpen={setNavOpen} />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Group>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FiMenu, FiSave } from 'react-icons/fi';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { Input } from '@app/components/generic/Input.jsx';
|
||||
import { Toggle } from '@app/components/generic/Toggle';
|
||||
import { connection } from '@app/core/connection.js';
|
||||
import { useAppSelector } from '@app/hooks/redux';
|
||||
import { Button } from '@components/generic/Button';
|
||||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
||||
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
|
||||
|
||||
export interface RangeTestProps {
|
||||
navOpen: boolean;
|
||||
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const RangeTest = ({
|
||||
navOpen,
|
||||
setNavOpen,
|
||||
}: RangeTestProps): JSX.Element => {
|
||||
const { t } = useTranslation();
|
||||
const preferences = useAppSelector((state) => state.meshtastic.preferences);
|
||||
|
||||
const { register, handleSubmit, formState } =
|
||||
useForm<RadioConfig_UserPreferences>({
|
||||
defaultValues: {
|
||||
rangeTestPluginEnabled: preferences.rangeTestPluginEnabled,
|
||||
rangeTestPluginSave: preferences.rangeTestPluginSave,
|
||||
rangeTestPluginSender: preferences.rangeTestPluginSender,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
console.log(data);
|
||||
|
||||
void connection.setPreferences(data);
|
||||
});
|
||||
|
||||
return (
|
||||
<PrimaryTemplate
|
||||
title="Range Test"
|
||||
tagline="Plugin"
|
||||
button={
|
||||
<Button
|
||||
icon={<FiMenu className="w-5 h-5" />}
|
||||
onClick={(): void => {
|
||||
setNavOpen(!navOpen);
|
||||
}}
|
||||
circle
|
||||
/>
|
||||
}
|
||||
footer={
|
||||
<Button
|
||||
className="px-10 ml-auto"
|
||||
icon={<FiSave className="w-5 h-5" />}
|
||||
disabled={!formState.isDirty}
|
||||
onClick={onSubmit}
|
||||
active
|
||||
border
|
||||
>
|
||||
{t('strings.save_changes')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="w-full space-y-4">
|
||||
<Card title="..." description="...">
|
||||
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
||||
<form onSubmit={onSubmit}>
|
||||
<Toggle
|
||||
label="Range Test Plugin Enabled?"
|
||||
checked={preferences.rangeTestPluginEnabled}
|
||||
action={(checked): void => {
|
||||
void connection.setPreferences({
|
||||
...preferences,
|
||||
rangeTestPluginEnabled: checked,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Toggle
|
||||
label="Range Test Plugin Save?"
|
||||
checked={preferences.rangeTestPluginEnabled}
|
||||
action={(checked): void => {
|
||||
void connection.setPreferences({
|
||||
...preferences,
|
||||
rangeTestPluginSave: checked,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Toggle
|
||||
label="Range Test Plugin Save?"
|
||||
{...register('rangeTestPluginEnabled', {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Message Interval"
|
||||
{...register('rangeTestPluginSender', {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user