Updated channel editor & fixes

2021-10-27 07:17:50 +11:00
parent 8a9c0a268a
commit 672d23d19c
27 changed files with 530 additions and 249 deletions
@@ -1,10 +1,10 @@
 import React from 'react';

-import { FiHash, FiMap, FiUsers } from 'react-icons/fi';
+import { FiHash } from 'react-icons/fi';

+import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
 import { Message } from '@components/chat/Message';
 import { MessageBar } from '@components/chat/MessageBar';
-import { Button } from '@components/generic/Button';
 import { Protobuf } from '@meshtastic/meshtasticjs';

 import { useAppSelector } from '../hooks/redux';
@@ -14,25 +14,30 @@ export const Messages = (): JSX.Element => {
  const nodes = useAppSelector((state) => state.meshtastic.nodes);
  const channels = useAppSelector((state) => state.meshtastic.channels);

-  const channelName = (): string => {
-    const name =
-      channels.find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)
-        ?.settings?.name ?? 'Unknown';
-
-    return name.length ? name : 'Default';
-  };
-
  return (
    <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">
-          <FiHash className="w-4 h-4 my-auto" />
-          {channelName()}
-        </div>
-        <div className="flex">
-          <Button icon={<FiMap className="w-5 h-5" />} circle />
-
-          <Button icon={<FiUsers className="w-5 h-5" />} circle />
+        <div className="flex py-2 my-auto text-sm">
+          <FiHash className="w-4 h-4 my-auto mr-1" />
+          <EnumSelect
+            options={channels
+              .filter(
+                (channel) =>
+                  channel.role !== Protobuf.Channel_Role.DISABLED &&
+                  channel.settings?.name !== 'admin',
+              )
+              .map((channel) => {
+                return {
+                  name: channel.settings?.name.length
+                    ? channel.settings.name
+                    : channel.role === Protobuf.Channel_Role.PRIMARY
+                    ? 'Primary'
+                    : `CH: ${channel.index}`,
+                  value: channel.index,
+                };
+              })}
+            small
+          />
        </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">
@@ -3,9 +3,9 @@ import React from 'react';
 import Avatar from 'boring-avatars';
 import { FiXCircle } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
@@ -36,9 +36,8 @@ export const Nodes = (): JSX.Element => {
                Nodes
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
-                  circle
                  onClick={(): void => {
                    setNavOpen(false);
                  }}
@@ -5,9 +5,9 @@ import { FiMenu, FiTerminal } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
 import { Chart } from '@app/components/generic/Chart';
-import { Input } from '@app/components/generic/Input';
+import { Input } from '@app/components/generic/form/Input';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
-import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

@@ -23,12 +23,11 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
      title={node.user?.longName ?? node.num.toString()}
      tagline="Node"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
    >
@@ -5,9 +5,9 @@ import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
 import useSWR from 'swr';

 import { Card } from '@app/components/generic/Card';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 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 {
@@ -55,12 +55,11 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
      title="File Browser"
      tagline="Plugin"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
    >
@@ -80,11 +79,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
        <Card
          title="Files"
          description="SPIFFS Contents"
-          buttons={
-            <Button active className="font-medium">
-              <FiUploadCloud className="w-8 h-8" />
-            </Button>
-          }
+          buttons={<IconButton icon={<FiUploadCloud className="w-8 h-8" />} />}
          className="md:w-1/3"
        >
          {data ? (
@@ -92,34 +87,37 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
              {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 "
+                  className="flex justify-between mx-4 bg-gray-300 rounded-md 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 className="flex p-2 max-h-12">
+                    <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>
                  </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
+                  <IconButton
+                    className="mx-2 my-auto"
                    confirmAction={async (): Promise<void> => {
                      await fetch(
                        `http://${connectionURL}/json/spiffs/delete/static?remove=${file.name}`,
@@ -128,7 +126,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
                        },
                      );
                    }}
-                    icon={<FiTrash />}
+                    icon={<FiTrash className="w-5 h-5" />}
                  />
                </div>
              ))}
@@ -2,8 +2,8 @@ import React from 'react';

 import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 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';
@@ -32,7 +32,7 @@ export const Plugins = (): JSX.Element => {
                Plugins
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
                  circle
                  onClick={(): void => {
@@ -5,7 +5,8 @@ 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 { Input } from '@app/components/generic/form/Input.jsx';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection.js';
 import { useAppSelector } from '@app/hooks/redux';
@@ -45,12 +46,11 @@ export const RangeTest = ({
      title="Range Test"
      tagline="Plugin"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -1,16 +1,14 @@
 import React from 'react';

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

+import { Channel } from '@app/components/Channel.jsx';
 import { Card } from '@app/components/generic/Card';
-import { Input } from '@app/components/generic/Input.jsx';
-import { connection } from '@app/core/connection.js';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useAppSelector } from '@app/hooks/redux.js';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { Protobuf } from '@meshtastic/meshtasticjs';

 export interface ChannelsProps {
  navOpen: boolean;
@@ -24,33 +22,16 @@ export const Channels = ({
  const { t } = useTranslation();
  const channels = useAppSelector((state) => state.meshtastic.channels);

-  const { register, handleSubmit, formState } = useForm<{
-    index: number;
-    name: string;
-  }>();
-
-  const onSubmit = handleSubmit(async (data) => {
-    const adminChannel = Protobuf.Channel.create({
-      role: Protobuf.Channel_Role.SECONDARY,
-      index: data.index,
-      settings: {
-        name: data.name,
-      },
-    });
-    await connection.setChannel(adminChannel);
-  });
-
  return (
    <PrimaryTemplate
-      title="Interface"
+      title="Channels"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -60,55 +41,37 @@ export const Channels = ({
          active
          border
        >
-          {t('strings.save_changes')}
+          Confirm
        </Button>
      }
    >
      <div className="space-y-4">
        <Card
-          title="Add Channel"
-          description="Once a channel is changed and confirmed working, click `Confirm Config` to prevent reverting."
+          title="Manage Channels"
+          description={
+            <div className="flex space-x-2 truncate">
+              <div className="w-3 h-3 my-auto bg-green-500 rounded-full" />
+              &nbsp;- Primary
+              <div className="w-3 h-3 my-auto rounded-full bg-cyan-500" />
+              &nbsp;- Secondary
+              <div className="w-3 h-3 my-auto bg-gray-400 rounded-full" />
+              &nbsp;- Disabled
+              <div className="w-3 h-3 my-auto rounded-full bg-amber-400" />
+              &nbsp;- Admin
+            </div>
+          }
        >
-          <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
-            <form className="space-y-2" onSubmit={onSubmit}>
-              <Input
-                label="Index"
-                type="number"
-                min={1}
-                max={7}
-                {...register('index', { valueAsNumber: true })}
-              />
-              <Input label="Name" {...register('name')} />
-              <div className="flex space-x-2">
-                <Button onClick={onSubmit} border>
-                  Add Channel
-                </Button>
-                <Button onClick={onSubmit} border>
-                  Confirm Config
-                </Button>
-              </div>
-            </form>
-          </div>
-        </Card>
-        <Card
-          title="Basic settings"
-          description="Device name and user parameters"
-        >
-          <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
+          <div className="w-full max-w-3xl p-4 space-y-2 md:p-10 md:max-w-xl">
            {channels.map((channel) => (
-              <div key={channel.index} className="flex flex-col space-y-2">
-                <div className="flex items-center justify-between p-2 border rounded-3xl">
-                  {Protobuf.Channel_Role[channel.role]}
-                  {channel.settings?.name}
-                  <Button
-                    onClick={async (): Promise<void> => {
-                      await connection.deleteChannel(channel.index);
-                    }}
-                    icon={<FiTrash />}
-                  />
-                </div>
-              </div>
+              <Channel key={channel.index} channel={channel} />
            ))}
+
+            <div className="flex space-x-52">
+              <div className="text-sm font-thin text-gray-400 dark:text-gray-300">
+                Please ensure any changes are working before confirming
+              </div>
+              <Button active>Confirm</Button>
+            </div>
          </div>
        </Card>
      </div>
@@ -5,7 +5,8 @@ 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';
+import { Input } from '@app/components/generic/form/Input';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Tabs } from '@app/components/generic/Tabs';
 import { Toggle } from '@app/components/generic/Toggle';
 import { bleConnection, serialConnection } from '@app/core/connection';
@@ -39,12 +40,11 @@ export const Connection = ({
      title="Connection"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -5,11 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { Input } from '@components/generic/Input';
+import { Input } from '@components/generic/form/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';

@@ -34,10 +35,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
  });

  const onSubmit = handleSubmit((data) => {
-    // Protobuf.User.mergePartial(user, data);
-
    void connection.setOwner({ ...user, ...data });
-    console.log('submitted');
  });

  return (
@@ -45,12 +43,11 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
      title="Device"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -9,8 +9,8 @@ import {
  FiXCircle,
 } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 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';
@@ -42,9 +42,8 @@ export const Settings = (): JSX.Element => {
                Settings
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
-                  circle
                  onClick={(): void => {
                    setNavOpen(false);
                  }}
@@ -2,13 +2,16 @@ import React from 'react';

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

 import { Card } from '@app/components/generic/Card';
+import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
+import { Toggle } from '@app/components/generic/Toggle.jsx';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { Input } from '@components/generic/Input';
+import { Input } from '@components/generic/form/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';

@@ -21,7 +24,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
  const { t } = useTranslation();
  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);

-  const { register, handleSubmit, formState } =
+  const { register, handleSubmit, formState, reset } =
    useForm<Protobuf.RadioConfig_UserPreferences>({
      defaultValues: radioConfig,
    });
@@ -34,24 +37,33 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      title="Radio"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          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}
-          active
-          border
-        >
-          {t('strings.save_changes')}
-        </Button>
+        <div className="flex space-x-2">
+          <IconButton
+            icon={<FiXCircle className="w-5 h-5" />}
+            disabled={formState.isDirty}
+            onClick={(): void => {
+              reset();
+            }}
+          />
+          <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>
      }
    >
      <Card
@@ -60,6 +72,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      >
        <div className="w-full max-w-3xl p-10 md:max-w-xl">
          <form className="space-y-2" onSubmit={onSubmit}>
+            <div>WiFi</div>
            <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
            <Input
              type="password"
@@ -69,14 +82,36 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
            <Input
              label={'Charge current'}
              disabled
-              {...register('chargeCurrent')}
+              {...register('chargeCurrent', { valueAsNumber: true })}
            />
+            <div>Position</div>
+            <Input
+              label={'Broadcast Interval (seconds)'}
+              {...register('positionBroadcastSecs', { valueAsNumber: true })}
+            />
+            <EnumSelect
+              label="Position Type"
+              optionsEnum={Protobuf.PositionFlags}
+              {...register('positionFlags', { valueAsNumber: true })}
+            />
+            <Toggle label="Use Fixed Position" {...register('fixedPosition')} />
+            <EnumSelect
+              label="Location Sharing"
+              optionsEnum={Protobuf.LocationSharing}
+              {...register('locationShare', { valueAsNumber: true })}
+            />
+            <EnumSelect
+              label="GPS Mode"
+              optionsEnum={Protobuf.GpsOperation}
+              {...register('gpsOperation', { valueAsNumber: true })}
+            />
+
+            <div>Other</div>
            <Input
              label={'Last GPS Attempt'}
              disabled
-              {...register('gpsAttemptTime')}
+              {...register('gpsAttemptTime', { valueAsNumber: true })}
            />
-            {Protobuf.PositionFlags[radioConfig.positionFlags]}
          </form>
        </div>
      </Card>