Add more settings

src/components/form/Input.tsx

@@ -1,35 +1,32 @@
 import React from 'react';
 
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
 export interface InputProps {
   valid?: boolean;
-  placeholder?: string;
   validationMessage?: string;
   icon?: JSX.Element;
-  type: string;
+  label: string;
-  name: string;
-  value?: string;
-  disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input = ({
+export const Input = React.forwardRef<
-  valid,
+  HTMLInputElement,
-  placeholder,
+  InputProps & DefaultInputProps
-  validationMessage,
+>(function Input(
-  icon,
+  {
-  type,
+    valid,
-  name,
+    validationMessage,
-  value,
+    icon,
-  disabled,
+    label,
-  onChange,
+    id,
-}: InputProps): JSX.Element => {
+    ...props
+  }: InputProps & DefaultInputProps,
+  ref,
+) {
   return (
     <div className="space-y-1">
-      <label
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
-        htmlFor={name}
+        {label}
-        className="block text-sm font-medium dark:text-white"
-      >
-        {name}
       </label>
       <div className="relative">
         {icon && (
@@ -40,16 +37,11 @@ export const Input = ({
           </div>
         )}
         <input
-          type={type}
+          ref={ref}
-          name={name}
+          {...props}
-          id={name}
-          value={value}
-          onChange={onChange}
           className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
             icon ? 'pl-9' : 'pl-2'
           }`}
-          placeholder={placeholder}
-          disabled={disabled}
         />
       </div>
       {!valid && (
@@ -57,4 +49,4 @@ export const Input = ({
       )}
     </div>
   );
-};
+});

src/components/form/Select.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+export interface SelectProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+  label: string;
+}
+
+export const Select = React.forwardRef<
+  HTMLSelectElement,
+  SelectProps & DefaultSelectProps
+>(function Select(
+  { options, label, id, ...props }: SelectProps & DefaultSelectProps,
+  ref,
+) {
+  return (
+    <div className="space-y-1">
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+        {label}
+      </label>
+      <select
+        ref={ref}
+        {...props}
+        className="block w-full p-2 border dark:border-gray-600 rounded-md shadow-sm dark:bg-secondaryDark"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+});

src/components/form/Toggle.tsx

@@ -1,26 +1,33 @@
 import React from 'react';
 
-import { Switch } from '@headlessui/react';
+type DefaultInputProps = JSX.IntrinsicElements['input'];
 
 export interface ToggleProps {
-  enabled: boolean;
+  label: string;
-  setEnabled: (state: boolean) => void;
 }
 
-export const Toggle = ({ enabled, setEnabled }: ToggleProps): JSX.Element => {
+export const Toggle = React.forwardRef<
+  HTMLInputElement,
+  ToggleProps & DefaultInputProps
+>(function Input(
+  { label, id, checked, ...props }: ToggleProps & DefaultInputProps,
+  ref,
+) {
   return (
-    <Switch
+    <div className="flex flex-col">
-      checked={enabled}
+      <span className="block text-sm font-medium dark:text-white">{label}</span>
-      onChange={setEnabled}
+      <div className="relative w-14 mr-2 ml-auto select-none">
-      className={`${enabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-700'}
+        <input
-          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+          ref={ref}
-    >
+          {...props}
-      <span className="sr-only">Use setting</span>
+          type="checkbox"
-      <span
+          className="peer checked:right-0 absolute w-7 h-7 rounded-full bg-white appearance-none cursor-pointer"
-        aria-hidden="true"
+        />
-        className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
+        <label
-            pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
+          htmlFor={id}
-      />
+          className="block overflow-hidden h-7 rounded-full peer-checked:bg-primary shadow-sm bg-gray-300 dark:bg-gray-700 cursor-pointer"
-    </Switch>
+        ></label>
+      </div>
+    </div>
   );
-};
+});

src/pages/Settings.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
 import { Input } from '../components/form/Input';
+import { Select } from '../components/form/Select';
 import { Toggle } from '../components/form/Toggle';
 import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
+import { connection } from '../connection';
 import { useAppDispatch, useAppSelector } from '../hooks/redux';
 import {
   setHostOverride,
@@ -21,6 +26,16 @@ export const Settings = (): JSX.Element => {
     (state) => state.meshtastic.hostOverrideEnabled,
   );
 
+  const { register, handleSubmit } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    console.log(data);
+    connection.setPreferences(data);
+  });
+
   const [localHostOverride, setLocalHostOverride] =
     React.useState(hostOverride);
   const [localHostOverrideEnabled, setLocalHostOverrideEnabled] =
@@ -28,57 +43,108 @@ export const Settings = (): JSX.Element => {
 
   return (
     <PrimaryTemplate title="Settings" tagline="Device">
-      <div className="flex mb-8 dark:text-white">
+      <form onSubmit={onSubmit}>
-        <div className="w-1/3 text-lg">WiFi</div>
+        <div className="space-y-4">
-        <div className="space-y-2">
+          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-          <Input
+            <div className="w-1/3 text-lg">WiFi</div>
-            name={t('strings.wifi_ssid')}
+            <div className="space-y-2 w-full max-w-xs">
-            value={radioConfig.wifiSsid}
+              <Input
-            onChange={(event) => {}}
+                label={t('strings.wifi_ssid')}
-            type="text"
+                {...register('wifiSsid', {})}
-            valid={true}
+                type="text"
-          />
+                valid={true}
-          <Input
+              />
-            name={t('strings.wifi_psk')}
+              <Input
-            value={radioConfig.wifiPassword}
+                label={t('strings.wifi_psk')}
-            onChange={(event) => {}}
+                {...register('wifiPassword', {})}
-            type="password"
+                type="password"
-            valid={true}
+                valid={true}
-          />
+              />
-        </div>
+            </div>
-      </div>
+          </div>
-      <div className="flex dark:text-white">
+          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-        <div className="w-1/3 text-lg">Client</div>
+            <div className="w-1/3 text-lg">Node</div>
-        <div className="space-y-2">
+            <div className="space-y-2 w-full max-w-xs">
-          <Toggle
+              <Toggle label={'Is router node'} {...register('isRouter', {})} />
-            enabled={localHostOverrideEnabled}
+              <Toggle
-            setEnabled={(state) => {
+                label={'Is router node'}
-              setLocalHostOverrideEnabled(state);
+                {...register('isLowPower', {})}
-            }}
+              />
-          />
+              <Toggle
-          <Input
+                label={'Is router node'}
-            name={'Host override'}
+                {...register('fixedPosition', {})}
-            placeholder={'meshtastic.local'}
+              />
-            value={localHostOverride}
+              <Toggle
-            onChange={(event) => {
+                label={'Is serial disabled'}
-              setLocalHostOverride(event.target.value);
+                {...register('serialDisabled', {})}
-            }}
+              />
-            type="text"
+              <Toggle
-            valid={true}
+                label={'Is router low power'}
-            disabled={!localHostOverrideEnabled}
+                {...register('isLowPower', {})}
-          />
+              />
+              <Toggle
+                label={'Is MQTT disabled'}
+                {...register('mqttDisabled', {})}
+              />
+              <Toggle
+                label={'Debug log enabled'}
+                {...register('debugLogEnabled', {})}
+              />
+              <Select
+                label="Region"
+                {...register('region', {
+                  valueAsNumber: true,
+                })}
+                options={(() => {
+                  return Object.keys(Protobuf.RegionCode)
+                    .filter((value) => isNaN(Number(value)) === false)
+                    .map((key) => {
+                      return {
+                        value: key,
+                        label: Protobuf.RegionCode[parseInt(key)],
+                      };
+                    });
+                })()}
+              />
+            </div>
+          </div>
+          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
+            <div className="w-1/3 text-lg">Client</div>
+            <div className="space-y-2 w-full max-w-xs">
+              <Toggle
+                label={'Enable host override'}
+                checked={localHostOverrideEnabled}
+                onChange={(event) => {
+                  console.log(event.target.checked);
+                  setLocalHostOverrideEnabled(event.target.checked);
+                }}
+              />
+              <Input
+                label={'Host override'}
+                placeholder={'meshtastic.local'}
+                value={localHostOverride}
+                onChange={(event) => {
+                  setLocalHostOverride(event.target.value);
+                }}
+                type="text"
+                valid={true}
+                disabled={!localHostOverrideEnabled}
+              />
+            </div>
+          </div>
         </div>
-      </div>
 
-      <button
+        <button
-        onClick={() => {
+          type="submit"
-          dispatch(setHostOverride(localHostOverride));
+          onClick={() => {
-          dispatch(setHostOverrideEnabled(localHostOverrideEnabled));
+            dispatch(setHostOverride(localHostOverride));
-        }}
+            dispatch(setHostOverrideEnabled(localHostOverrideEnabled));
-        className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
+          }}
-      >
+          className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
-        {t('strings.save_changes')}
+        >
-      </button>
+          {t('strings.save_changes')}
+        </button>
+      </form>
     </PrimaryTemplate>
   );
 };