UI Overhaul (#3)

* WIP * WIP * WIP * WIP * Draw improvements, disabled user zooming * Update status indicator * Add dynamic channel name with icon * Add more settings * WIP * WIP
2021-08-15 23:41:14 +10:00
parent f898b1dd49
commit e14c628ecf
70 changed files with 1916 additions and 1644 deletions
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+
+export const About = (): JSX.Element => {
+  return (
+    <PrimaryTemplate title="meshtastic-web" tagline="About">
+      <p>Content</p>
+    </PrimaryTemplate>
+  );
+};
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Message } from '@components/chat/Message';
+import { MessageBar } from '@components/chat/MessageBar';
+import { Button } from '@components/generic/Button';
+import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+import { useAppSelector } from '../hooks/redux';
+
+export const Messages = (): JSX.Element => {
+  const messages = useAppSelector((state) => state.meshtastic.messages);
+  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">
+          <HashtagIcon className="w-4 h-4 my-auto" />
+          {channelName()}
+        </div>
+        <div className="flex">
+          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+
+          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
+        </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">
+        {messages.map((message, index) => (
+          <Message
+            key={index}
+            isSender={message.isSender}
+            message={message.message.data}
+            ack={message.ack}
+            rxTime={new Date()}
+            senderName={
+              nodes.find((node) => node.num === message.message.packet.from)
+                ?.user?.longName ?? 'UNK'
+            }
+          />
+        ))}
+      </div>
+      <MessageBar />
+    </div>
+  );
+};
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+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';
+import { XCircleIcon } from '@heroicons/react/outline';
+
+import { Node } from './Node';
+
+export const Nodes = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Nodes
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+
+            {nodes.map((node) => (
+              <Tab
+                onClick={(): void => {
+                  setNavOpen(false);
+                }}
+                key={node.num}
+              >
+                {({ selected }): JSX.Element => (
+                  <SidebarItem
+                    title={node.user?.longName ?? node.num.toString()}
+                    description="Node info"
+                    selected={selected}
+                    icon={
+                      <Avatar
+                        size={30}
+                        name={node.user?.longName ?? node.num.toString()}
+                        variant="beam"
+                        colors={[
+                          '#213435',
+                          '#46685B',
+                          '#648A64',
+                          '#A6B985',
+                          '#E1E3AC',
+                        ]}
+                      />
+                    }
+                  />
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </Drawer>
+        <div className="w-full">
+          <Tab.Panels>
+            {nodes.map((node) => (
+              <Tab.Panel key={node.num}>
+                <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface NodeProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  node: Protobuf.NodeInfo;
+}
+
+export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
+  return (
+    <PrimaryTemplate
+      title={node.user?.longName ?? node.num.toString()}
+      tagline="Node"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">Content</div>
+    </PrimaryTemplate>
+  );
+};
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+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 { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface DeviceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
+  const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Device"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <form onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
+      </div>
+    </PrimaryTemplate>
+  );
+};
@@ -0,0 +1,101 @@
+import React from 'react';
+
+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';
+import {
+  CollectionIcon,
+  DeviceMobileIcon,
+  WifiIcon,
+  XCircleIcon,
+} from '@heroicons/react/outline';
+
+import { Device } from './Device';
+import { Interface } from './Interface';
+import { Radio } from './Radio';
+
+export const Settings = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Settings
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+            <Tab
+              onClick={(): void => {
+                setNavOpen(false);
+              }}
+            >
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Device"
+                  description="Device settings, such as device name and wifi settings"
+                  selected={selected}
+                  icon={<DeviceMobileIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Radio"
+                  description="Adjust radio power and frequency settings"
+                  selected={selected}
+                  icon={<WifiIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Interface"
+                  description="Change language and other UI settings"
+                  selected={selected}
+                  icon={<CollectionIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+          </Tab.List>
+        </Drawer>
+        <div className="flex w-full">
+          <Tab.Panels className="flex w-full">
+            <Tab.Panel className="flex w-full">
+              <Device navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Radio navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Jp, Pt, Us } from 'react-flags-select';
+import { useTranslation } from 'react-i18next';
+
+import { Select } from '@app/components/generic/Select';
+import i18n from '@app/core/translation';
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+
+export interface InterfaceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Interface = ({
+  navOpen,
+  setNavOpen,
+}: InterfaceProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Interface"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Select
+          label="Language"
+          value={i18n.language}
+          onChange={(value): void => {
+            void i18n.changeLanguage(value);
+          }}
+          id="aaa"
+          options={[
+            {
+              name: 'English',
+              value: 'en',
+              icon: <Us className="w-6" />,
+            },
+            {
+              name: 'Português',
+              value: 'pt',
+              icon: <Pt className="w-6" />,
+            },
+            {
+              name: 'Japanese',
+              value: 'jp',
+              icon: <Jp className="w-6" />,
+            },
+          ]}
+        />
+      </div>
+    </PrimaryTemplate>
+  );
+};
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@components/generic/Button';
+import { Input } from '@components/generic/Input';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+
+export interface RadioProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Radio"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Input label="test" />
+      </div>
+    </PrimaryTemplate>
+  );
+};