WIP

src/pages/Nodes/Node.tsx

@@ -146,6 +146,14 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
             },
           ]}
         />
+        <Card title="Position" description={node.num.toString()}>
+          <div className="p-10">
+            <div>
+              <div></div>
+              <div>{node.position?.satsInView}</div>
+            </div>
+          </div>
+        </Card>
         <Card
           title="Settings"
           description="Remote node settings"

src/pages/Plugins/Files.tsx

@@ -122,7 +122,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
                     active
                     confirmAction={async (): Promise<void> => {
                       await fetch(
-                        `http://${connectionURL}/json/spiffs/delete`,
+                        `http://${connectionURL}/json/spiffs/delete/static?remove=${file.name}`,
                         {
                           method: 'DELETE',
                         },

src/pages/Plugins/RangeTest.tsx

@@ -67,7 +67,7 @@ export const RangeTest = ({
       }
     >
       <div className="w-full space-y-4">
-        <Card title="..." description="...">
+        <Card title="Range Test" description="Settings">
           <div className="w-full max-w-3xl p-10 md:max-w-xl">
             <form onSubmit={onSubmit}>
               <Toggle

src/pages/settings/Channels.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FiMenu, FiSave, FiTrash } from 'react-icons/fi';
+
+import { Card } from '@app/components/generic/Card';
+import { Input } from '@app/components/generic/Input.jsx';
+import { connection } from '@app/core/connection.js';
+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;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Channels = ({
+  navOpen,
+  setNavOpen,
+}: ChannelsProps): JSX.Element => {
+  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"
+      tagline="Settings"
+      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" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </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."
+        >
+          <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">
+            {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>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </PrimaryTemplate>
+  );
+};

src/pages/settings/Device.tsx

@@ -22,20 +22,22 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
   const user = useAppSelector((state) => state.meshtastic.user);
   const { register, handleSubmit, formState } = useForm<{
-    isLicensed: boolean;
-    shortName: string;
     longName: string;
+    shortName: string;
+    isLicensed: boolean;
   }>({
     defaultValues: {
-      isLicensed: user.isLicensed,
-      shortName: user.shortName,
       longName: user.longName,
+      shortName: user.shortName,
+      isLicensed: user.isLicensed,
     },
   });
 
   const onSubmit = handleSubmit((data) => {
-    Protobuf.User.mergePartial(user, data);
-    void connection.setOwner(user);
+    // Protobuf.User.mergePartial(user, data);
+
+    void connection.setOwner({ ...user, ...data });
+    console.log('submitted');
   });
 
   return (
@@ -56,6 +58,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
           className="px-10 ml-auto"
           icon={<FiSave className="w-5 h-5" />}
           disabled={!formState.isDirty}
+          onClick={onSubmit}
           active
           border
         >
@@ -69,6 +72,12 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
       >
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
+            <Input label={'Device ID'} value={user.id} disabled />
+            <Input
+              label={'Hardware'}
+              value={Protobuf.HardwareModel[user.hwModel]}
+              disabled
+            />
             <Input label={'Device Name'} {...register('longName')} />
             <Input
               label={'Short Name'}

src/pages/settings/Index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {
+  FiLayers,
   FiLayout,
   FiLink2,
   FiRss,
@@ -14,6 +15,7 @@ import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
 
+import { Channels } from './Channels';
 import { Connection } from './Connection';
 import { Device } from './Device';
 import { Interface } from './Interface';
@@ -97,6 +99,16 @@ export const Settings = (): JSX.Element => {
                 />
               )}
             </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Channels"
+                  description="Manage channels"
+                  selected={selected}
+                  icon={<FiLayers className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
           </Tab.List>
         </Drawer>
         <div className="flex w-full">
@@ -113,6 +125,9 @@ export const Settings = (): JSX.Element => {
             <Tab.Panel className="flex w-full">
               <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
             </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Channels navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
           </Tab.Panels>
         </div>
       </div>

src/pages/settings/Radio.tsx

@@ -10,7 +10,7 @@ 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 type { Protobuf } from '@meshtastic/meshtasticjs';
+import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
   navOpen: boolean;
@@ -76,6 +76,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
               disabled
               {...register('gpsAttemptTime')}
             />
+            {Protobuf.PositionFlags[radioConfig.positionFlags]}
           </form>
         </div>
       </Card>