hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove old Select, change Switch for Checkbox

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-11-09 22:55:15 +11:00
parent a839839d2d
commit 38c27da898
19 changed files with 105 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Messages.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import React from 'react';
import { FiHash } from 'react-icons/fi';
import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
import { Select } from '@app/components/generic/form/Select.jsx';
import { Message } from '@components/chat/Message';
import { MessageBar } from '@components/chat/MessageBar';
import { Protobuf } from '@meshtastic/meshtasticjs';
@@ -19,7 +19,7 @@ export const Messages = (): JSX.Element => {
<div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
<div className="flex py-2 my-auto text-sm">
<FiHash className="w-4 h-4 my-auto mr-1" />
<EnumSelect
<Select
options={channels
.filter(
(channel) =>
src/pages/Nodes/Node.tsx
+2 -2
View File
@@ -5,9 +5,9 @@ import { FiMenu, FiTerminal } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Chart } from '@app/components/generic/Chart';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Input } from '@app/components/generic/form/Input';
import { IconButton } from '@app/components/generic/IconButton.jsx';
import { Toggle } from '@app/components/generic/Toggle';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import type { Protobuf } from '@meshtastic/meshtasticjs';
@@ -167,7 +167,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
<form className="space-y-4">
<Input label={'Device Name'} />
<Input label={'Short Name'} maxLength={3} />
<Toggle label="Licenced Operator?" />
<Checkbox label="Licenced Operator?" />
</form>
</div>
</Card>
src/pages/Plugins/RangeTest.tsx
+5 -23
View File
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Input } from '@app/components/generic/form/Input.jsx';
import { IconButton } from '@app/components/generic/IconButton.jsx';
import { Toggle } from '@app/components/generic/Toggle';
import { connection } from '@app/core/connection.js';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
@@ -70,31 +70,13 @@ export const RangeTest = ({
<Card title="Range Test" description="Settings">
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form onSubmit={onSubmit}>
<Toggle
<Checkbox
label="Range Test Plugin Enabled?"
checked={preferences.rangeTestPluginEnabled}
action={(checked): void => {
void connection.setPreferences({
...preferences,
rangeTestPluginEnabled: checked,
});
}}
{...register('rangeTestPluginEnabled')}
/>
<Toggle
<Checkbox
label="Range Test Plugin Save?"
checked={preferences.rangeTestPluginEnabled}
action={(checked): void => {
void connection.setPreferences({
...preferences,
rangeTestPluginSave: checked,
});
}}
/>
<Toggle
label="Range Test Plugin Save?"
{...register('rangeTestPluginEnabled', {
valueAsNumber: true,
})}
{...register('rangeTestPluginSave')}
/>
<Input
type="number"
src/pages/settings/Channels.tsx
+7 -1
View File
@@ -6,6 +6,7 @@ import { FiMenu, FiSave } from 'react-icons/fi';
import { Channel } from '@app/components/Channel.jsx';
import { Card } from '@app/components/generic/Card';
import { IconButton } from '@app/components/generic/IconButton.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';
@@ -67,7 +68,12 @@ export const Channels = ({
))}
<div className="flex space-x-52">
<div className="text-sm font-thin text-gray-400 dark:text-gray-300">
<div
onClick={(): Promise<void> => {
return connection.confirmSetChannel();
}}
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>
src/pages/settings/Connection.tsx
+5 -5
View File
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
import { FiCheck, FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { EnumSelect } from '@app/components/generic/form/EnumSelect';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Input } from '@app/components/generic/form/Input';
import { Select } from '@app/components/generic/form/Select';
import { IconButton } from '@app/components/generic/IconButton';
import { Toggle } from '@app/components/generic/Toggle';
import { connection, setConnection } from '@app/core/connection';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
@@ -147,7 +147,7 @@ export const Connection = ({
>
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form className="space-y-2" onSubmit={onSubmit}>
<EnumSelect
<Select
label="Method"
optionsEnum={connType}
value={selectedConnType}
@@ -157,7 +157,7 @@ export const Connection = ({
/>
{selectedConnType === connType.HTTP && (
<>
<EnumSelect
<Select
label="Host Source"
options={[
{
@@ -179,7 +179,7 @@ export const Connection = ({
) : (
<Input label="Host" />
)}
<Toggle label="Use TLS?" />
<Checkbox label="Use TLS?" />
</>
)}
{selectedConnType === connType.BLE && (
src/pages/settings/Device.tsx
+2 -2
View File
@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Checkbox } from '@app/components/generic/form/Checkbox';
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';
@@ -81,7 +81,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
maxLength={3}
{...register('shortName')}
/>
<Toggle label="Licenced Operator?" {...register('isLicensed')} />
<Checkbox label="Licenced Operator?" {...register('isLicensed')} />
</form>
</div>
</Card>
src/pages/settings/Interface.tsx
+8 -26
View File
@@ -1,11 +1,10 @@
import React from 'react';
import { Jp, Pt, Us } from 'react-flags-select';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Select } from '@app/components/generic/Select';
import { Select } from '@app/components/generic/form/Select';
import i18n from '@app/core/translation';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -52,40 +51,23 @@ export const Interface = ({
<div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
<Select
label="Language"
active={
i18n.language === 'en'
? {
name: 'English',
value: 'en',
icon: <Us />,
}
: i18n.language === 'pt'
? { name: 'Português', value: 'pt', icon: <Pt /> }
: i18n.language === 'jp'
? { name: '日本', value: 'jp', icon: <Jp /> }
: { name: 'English', value: 'en', icon: <Us /> }
}
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: '日本',
value: 'jp',
icon: <Jp className="w-6" />,
},
{
name: 'Português',
value: 'pt',
},
]}
onChange={(e): void => {
void i18n.changeLanguage(e.target.value);
}}
/>
</div>
</Card>
src/pages/settings/Radio.tsx
+9 -6
View File
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
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 { Checkbox } from '@app/components/generic/form/Checkbox';
import { Select } from '@app/components/generic/form/Select.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';
@@ -89,18 +89,21 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
label={'Broadcast Interval (seconds)'}
{...register('positionBroadcastSecs', { valueAsNumber: true })}
/>
<EnumSelect
<Select
label="Position Type"
optionsEnum={Protobuf.PositionFlags}
{...register('positionFlags', { valueAsNumber: true })}
/>
<Toggle label="Use Fixed Position" {...register('fixedPosition')} />
<EnumSelect
<Checkbox
label="Use Fixed Position"
{...register('fixedPosition')}
/>
<Select
label="Location Sharing"
optionsEnum={Protobuf.LocationSharing}
{...register('locationShare', { valueAsNumber: true })}
/>
<EnumSelect
<Select
label="GPS Mode"
optionsEnum={Protobuf.GpsOperation}
{...register('gpsOperation', { valueAsNumber: true })}