WIP

2021-10-17 13:45:40 +11:00
parent 1803b22d66
commit 1cffbab98d
25 changed files with 555 additions and 262 deletions
@@ -1,9 +1,10 @@
 import React from 'react';

+import { FiHash, FiMap, FiUsers } from 'react-icons/fi';
+
 import { Message } from '@components/chat/Message';
 import { MessageBar } from '@components/chat/MessageBar';
 import { Button } from '@components/generic/Button';
-import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';

 import { useAppSelector } from '../hooks/redux';
@@ -25,13 +26,13 @@ export const Messages = (): JSX.Element => {
    <div className="flex flex-col w-full">
      <div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
        <div className="flex my-auto text-sm">
-          <HashtagIcon className="w-4 h-4 my-auto" />
+          <FiHash className="w-4 h-4 my-auto" />
          {channelName()}
        </div>
        <div className="flex">
-          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+          <Button icon={<FiMap className="w-5 h-5" />} circle />

-          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
+          <Button icon={<FiUsers className="w-5 h-5" />} circle />
        </div>
      </div>
      <div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
@@ -1,6 +1,7 @@
 import React from 'react';

 import Avatar from 'boring-avatars';
+import { FiXCircle } from 'react-icons/fi';

 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { useAppSelector } from '@app/hooks/redux';
@@ -8,7 +9,6 @@ import { Button } from '@components/generic/Button';
 import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
-import { XCircleIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';

 import { Node } from './Node';
@@ -37,7 +37,7 @@ export const Nodes = (): JSX.Element => {
              </div>
              <div className="md:hidden">
                <Button
-                  icon={<XCircleIcon className="w-5 h-5" />}
+                  icon={<FiXCircle className="w-5 h-5" />}
                  circle
                  onClick={(): void => {
                    setNavOpen(false);
@@ -1,6 +1,7 @@
 import React from 'react';

 import moment from 'moment';
+import { FiMenu, FiTerminal } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
 import { Chart } from '@app/components/generic/Chart';
@@ -8,7 +9,6 @@ import { Input } from '@app/components/generic/Input';
 import { Toggle } from '@app/components/generic/Toggle';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { MenuIcon, PuzzleIcon } from '@heroicons/react/outline';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

 export interface NodeProps {
@@ -24,7 +24,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
      tagline="Node"
      button={
        <Button
-          icon={<MenuIcon className="w-5 h-5" />}
+          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
@@ -34,8 +34,8 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
    >
      <div className="w-full space-y-4">
        <Chart
-          title="Visitors Overview"
-          description="Number of unique visitors"
+          title={`${node.user?.longName ?? 'UNK'}`}
+          description="Airtime"
          hasMultipleSeries={true}
          series={[
            {
@@ -151,7 +151,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
          description="Remote node settings"
          lgPlaceholder={
            <div className="w-full h-full text-black dark:text-white">
-              <PuzzleIcon className="w-24 h-24 m-auto" />
+              <FiTerminal className="w-24 h-24 m-auto" />
              <div className="text-center">Placeholder</div>
            </div>
          }
@@ -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>
+  );
+};
@@ -2,6 +2,7 @@ import React from 'react';

 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { FiLink2, FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
 import { Input } from '@app/components/generic/Input';
@@ -11,7 +12,6 @@ import { bleConnection, serialConnection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { LinkIcon, MenuIcon, SaveIcon } from '@heroicons/react/outline';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

 export interface ConnectionProps {
@@ -40,7 +40,7 @@ export const Connection = ({
      tagline="Settings"
      button={
        <Button
-          icon={<MenuIcon className="w-5 h-5" />}
+          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
@@ -50,7 +50,7 @@ export const Connection = ({
      footer={
        <Button
          className="px-10 ml-auto"
-          icon={<SaveIcon className="w-5 h-5" />}
+          icon={<FiSave className="w-5 h-5" />}
          disabled={!formState.isDirty}
          active
          border
@@ -97,11 +97,11 @@ export const Connection = ({
                      </Button>
                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                        Device Name
-                        <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
+                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
                      </div>
                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                        Device Name
-                        <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
+                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
                      </div>
                    </div>
                  ),
@@ -120,11 +120,11 @@ export const Connection = ({
                      </Button>
                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                        Device Name
-                        <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
+                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
                      </div>
                      <div className="flex justify-between p-2 border rounded-3xl dark:border-600">
                        Device Name
-                        <LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
+                        <FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
                      </div>
                    </div>
                  ),
@@ -2,6 +2,7 @@ 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 { Toggle } from '@app/components/generic/Toggle';
@@ -10,7 +11,6 @@ import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';

 export interface DeviceProps {
@@ -44,7 +44,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
      tagline="Settings"
      button={
        <Button
-          icon={<MenuIcon className="w-5 h-5" />}
+          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
@@ -54,7 +54,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
      footer={
        <Button
          className="px-10 ml-auto"
-          icon={<SaveIcon className="w-5 h-5" />}
+          icon={<FiSave className="w-5 h-5" />}
          disabled={!formState.isDirty}
          active
          border
@@ -1,17 +1,18 @@
 import React from 'react';

+import {
+  FiLayout,
+  FiLink2,
+  FiRss,
+  FiSmartphone,
+  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 {
-  CollectionIcon,
-  DeviceMobileIcon,
-  LinkIcon,
-  WifiIcon,
-  XCircleIcon,
-} from '@heroicons/react/outline';

 import { Connection } from './Connection';
 import { Device } from './Device';
@@ -40,7 +41,7 @@ export const Settings = (): JSX.Element => {
              </div>
              <div className="md:hidden">
                <Button
-                  icon={<XCircleIcon className="w-5 h-5" />}
+                  icon={<FiXCircle className="w-5 h-5" />}
                  circle
                  onClick={(): void => {
                    setNavOpen(false);
@@ -58,7 +59,7 @@ export const Settings = (): JSX.Element => {
                  title="Connection"
                  description="Method and peramaters for connecting to the device"
                  selected={selected}
-                  icon={<LinkIcon className="flex-shrink-0 w-6 h-6" />}
+                  icon={<FiLink2 className="flex-shrink-0 w-6 h-6" />}
                />
              )}
            </Tab>
@@ -72,7 +73,7 @@ export const Settings = (): JSX.Element => {
                  title="Device"
                  description="Device settings, such as device name and wifi settings"
                  selected={selected}
-                  icon={<DeviceMobileIcon className="flex-shrink-0 w-6 h-6" />}
+                  icon={<FiSmartphone className="flex-shrink-0 w-6 h-6" />}
                />
              )}
            </Tab>
@@ -82,7 +83,7 @@ export const Settings = (): JSX.Element => {
                  title="Radio"
                  description="Adjust radio power and frequency settings"
                  selected={selected}
-                  icon={<WifiIcon className="flex-shrink-0 w-6 h-6" />}
+                  icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
                />
              )}
            </Tab>
@@ -92,7 +93,7 @@ export const Settings = (): JSX.Element => {
                  title="Interface"
                  description="Change language and other UI settings"
                  selected={selected}
-                  icon={<CollectionIcon className="flex-shrink-0 w-6 h-6" />}
+                  icon={<FiLayout className="flex-shrink-0 w-6 h-6" />}
                />
              )}
            </Tab>
@@ -2,13 +2,13 @@ import React from 'react';

 import { Jp, Pt, Us } from 'react-flags-select';
 import { useTranslation } from 'react-i18next';
+import { FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
 import { Select } from '@app/components/generic/Select';
 import i18n from '@app/core/translation';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { MenuIcon, SaveIcon } from '@heroicons/react/outline';

 export interface InterfaceProps {
  navOpen: boolean;
@@ -27,7 +27,7 @@ export const Interface = ({
      tagline="Settings"
      button={
        <Button
-          icon={<MenuIcon className="w-5 h-5" />}
+          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
@@ -37,7 +37,7 @@ export const Interface = ({
      footer={
        <Button
          className="px-10 ml-auto"
-          icon={<SaveIcon className="w-5 h-5" />}
+          icon={<FiSave className="w-5 h-5" />}
          active
          border
        >
@@ -49,7 +49,7 @@ export const Interface = ({
        title="Basic settings"
        description="Device name and user parameters"
      >
-        <div className="w-full max-w-3xl space-y-2 md:max-w-xl p-10">
+        <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
          <Select
            label="Language"
            active={
@@ -2,6 +2,7 @@ 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 { connection } from '@app/core/connection';
@@ -9,7 +10,6 @@ import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

 export interface RadioProps {
@@ -35,7 +35,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      tagline="Settings"
      button={
        <Button
-          icon={<MenuIcon className="w-5 h-5" />}
+          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
@@ -45,7 +45,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      footer={
        <Button
          className="px-10 ml-auto"
-          icon={<SaveIcon className="w-5 h-5" />}
+          icon={<FiSave className="w-5 h-5" />}
          disabled={!formState.isDirty}
          active
          border