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,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>