Loading states for settings, Improve Ch editor

src/components/Channel.tsx

@@ -3,54 +3,50 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { FiEdit3, FiSave } from 'react-icons/fi';
 
+import { Loading } from '@components/generic/Loading';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { connection } from '../core/connection';
+import { Checkbox } from './generic/form/Checkbox';
 import { Input } from './generic/form/Input';
-import { Select } from './generic/form/Select';
 import { IconButton } from './generic/IconButton';
 
 export interface ChannelProps {
   channel: Protobuf.Channel;
 }
-interface DotProps {
-  role: Protobuf.Channel_Role;
-  admin: boolean;
-}
-const Dot = ({ role, admin }: DotProps): JSX.Element => (
-  <div
-    className={`h-3 my-auto w-3 rounded-full ${
-      role === Protobuf.Channel_Role.PRIMARY
-        ? 'bg-green-500'
-        : admin
-        ? 'bg-amber-400'
-        : role === Protobuf.Channel_Role.SECONDARY
-        ? 'bg-cyan-500'
-        : 'bg-gray-400'
-    }`}
-  />
-);
 
 export const Channel = ({ channel }: ChannelProps): JSX.Element => {
   const [edit, setEdit] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
 
   const { register, handleSubmit, formState } = useForm<{
-    role: Protobuf.Channel_Role;
+    enabled: boolean;
     settings: {
       name: string;
       bandwidth?: number;
       codingRate?: number;
       spreadFactor?: number;
+      downlinkEnabled?: boolean;
+      uplinkEnabled?: boolean;
+      txPower?: number;
+      psk?: string;
     };
   }>({
     defaultValues: {
-      role: channel.role,
+      enabled:
+        channel.role ===
+        (Protobuf.Channel_Role.PRIMARY || Protobuf.Channel_Role.SECONDARY)
+          ? true
+          : false,
       settings: {
         name: channel.settings?.name,
         bandwidth: channel.settings?.bandwidth,
         codingRate: channel.settings?.codingRate,
         spreadFactor: channel.settings?.spreadFactor,
+        downlinkEnabled: channel.settings?.downlinkEnabled,
+        uplinkEnabled: channel.settings?.uplinkEnabled,
+        txPower: channel.settings?.txPower,
+        psk: new TextDecoder().decode(channel.settings?.psk),
       },
     },
   });
@@ -58,9 +54,14 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
   const onSubmit = handleSubmit(async (data) => {
     setLoading(true);
     const adminChannel = Protobuf.Channel.create({
-      role: data.role,
+      role: data.enabled
+        ? Protobuf.Channel_Role.SECONDARY
+        : Protobuf.Channel_Role.DISABLED,
       index: channel.index,
-      settings: data.settings,
+      settings: {
+        ...data.settings,
+        psk: new TextEncoder().encode(data.settings.psk),
+      },
     });
 
     await connection.setChannel(adminChannel, (): Promise<void> => {
@@ -73,28 +74,18 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
     <div className="relative flex justify-between p-3 bg-gray-100 rounded-md dark:bg-gray-700">
       {edit ? (
         <>
-          {loading && (
-            <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
-              <div className="m-auto text-lg font-medium text-gray-400">
-                Loading
-              </div>
-            </div>
-          )}
+          {loading && <Loading />}
           <div className="my-auto space-x-2">
             <form>
               <div className="flex space-x-2">
                 {/* @todo: change to disable & make primary buttons */}
-                <Select
-                  label="Channel Type"
-                  optionsEnum={Protobuf.Channel_Role}
-                  {...register('role', { valueAsNumber: true })}
-                />
-                <Dot
-                  role={channel.role}
-                  admin={channel.settings?.name === 'admin'}
+                <Checkbox
+                  label="Enabled"
+                  {...register('enabled', { valueAsNumber: true })}
                 />
               </div>
               <Input label="Name" {...register('settings.name')} />
+              <Input label="Pre-Shared Key" {...register('settings.psk')} />
               <Input
                 label="Bandwidth"
                 type="number"
@@ -112,6 +103,19 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
                 type="number"
                 {...register('settings.codingRate', { valueAsNumber: true })}
               />
+              <Input
+                label="Transmit Power"
+                type="number"
+                {...register('settings.txPower', { valueAsNumber: true })}
+              />
+              <Checkbox
+                label="Upling Enabled"
+                {...register('settings.uplinkEnabled')}
+              />
+              <Checkbox
+                label="Downlink Enabled"
+                {...register('settings.downlinkEnabled')}
+              />
             </form>
           </div>
           <IconButton
@@ -126,9 +130,12 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
       ) : (
         <>
           <div className="flex my-auto space-x-2">
-            <Dot
-              role={channel.role}
-              admin={channel.settings?.name === 'admin'}
+            <div
+              className={`h-3 my-auto w-3 rounded-full ${
+                channel.role === Protobuf.Channel_Role.SECONDARY
+                  ? 'bg-green-500'
+                  : 'bg-gray-400'
+              }`}
             />
             <div>
               {channel.settings?.name.length

src/components/generic/Card.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import { Loading } from '@components/generic/Loading';
+
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 interface CardProps extends DefaultDivProps {
@@ -17,13 +19,15 @@ export const Card = ({
   children,
   className,
   lgPlaceholder,
+  loading,
   ...props
 }: CardProps): JSX.Element => {
   return (
     <div
-      className={`flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl  ${className}`}
+      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-md  ${className}`}
       {...props}
     >
+      {loading && <Loading />}
       {(title || description) && (
         <div className="flex items-center justify-between mx-10 mt-10">
           <div className="flex flex-col">

src/components/generic/Loading.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+export const Loading = (): JSX.Element => {
+  return (
+    <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
+      <div className="m-auto text-lg font-medium text-gray-400">Loading</div>
+    </div>
+  );
+};

src/components/generic/form/Select.tsx

@@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'm-1' : 'h-10 mx-2'
+            className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'p-1' : 'h-10 px-2'
             }`}
             disabled={
               props.disabled