Required changes + consistency fixes
This commit is contained in:
Sacha Weatherstone
@@ -3,6 +3,7 @@ import React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { Input } from '@app/components/generic/Input';
|
||||
import { Tabs } from '@app/components/generic/Tabs';
|
||||
import { Toggle } from '@app/components/generic/Toggle';
|
||||
@@ -58,76 +59,81 @@ export const Connection = ({
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="w-full max-w-3xl md:max-w-xl">
|
||||
<div className="flex w-full p-2 mb-2 border dark:border-gray-600 rounded-3xl">
|
||||
Current connection method:
|
||||
<div className="px-1 my-auto ml-2 text-sm bg-gray-400 rounded-full dark:bg-primaryDark">
|
||||
BLE
|
||||
<Card
|
||||
title="Basic settings"
|
||||
description="Device name and user parameters"
|
||||
>
|
||||
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
||||
<div className="flex w-full p-2 mb-2 border dark:border-gray-600 rounded-3xl">
|
||||
Current connection method:
|
||||
<div className="px-1 my-auto ml-2 text-sm bg-gray-400 rounded-full dark:bg-primaryDark">
|
||||
BLE
|
||||
</div>
|
||||
</div>
|
||||
<form className="space-y-2" onSubmit={onSubmit}>
|
||||
<Tabs
|
||||
className="mb-10 h-60"
|
||||
tabs={[
|
||||
{
|
||||
name: 'HTTP',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
<Input label={'Device URL'} />
|
||||
<Toggle label="Use TLS?" />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Bluetooth',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
Devices:
|
||||
<Button
|
||||
onClick={async (): Promise<void> => {
|
||||
console.log(await bleConnection.getDevices());
|
||||
}}
|
||||
>
|
||||
Get Devices
|
||||
</Button>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
|
||||
</div>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Serial',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
Devices:
|
||||
<Button
|
||||
onClick={async (): Promise<void> => {
|
||||
console.log(await serialConnection.getPorts());
|
||||
}}
|
||||
>
|
||||
Get Devices
|
||||
</Button>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
|
||||
</div>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<form className="space-y-2" onSubmit={onSubmit}>
|
||||
<Tabs
|
||||
className="h-60"
|
||||
tabs={[
|
||||
{
|
||||
name: 'HTTP',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
<Input label={'Device URL'} />
|
||||
<Toggle label="Use TLS?" />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Bluetooth',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
Devices:
|
||||
<Button
|
||||
onClick={async (): Promise<void> => {
|
||||
console.log(await bleConnection.getDevices());
|
||||
}}
|
||||
>
|
||||
Get Devices
|
||||
</Button>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
|
||||
</div>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'Serial',
|
||||
body: (
|
||||
<div className="space-y-2">
|
||||
Devices:
|
||||
<Button
|
||||
onClick={async (): Promise<void> => {
|
||||
console.log(await serialConnection.getPorts());
|
||||
}}
|
||||
>
|
||||
Get Devices
|
||||
</Button>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
|
||||
</div>
|
||||
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
|
||||
Device Name
|
||||
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -67,7 +67,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
|
||||
title="Basic settings"
|
||||
description="Device name and user parameters"
|
||||
>
|
||||
<div className="p-10">
|
||||
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
||||
<form className="space-y-2" onSubmit={onSubmit}>
|
||||
<Input label={'Device Name'} {...register('longName')} />
|
||||
<Input
|
||||
|
||||
@@ -3,6 +3,7 @@ import React from 'react';
|
||||
import { Jp, Pt, Us } from 'react-flags-select';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { Select } from '@app/components/generic/Select';
|
||||
import i18n from '@app/core/translation';
|
||||
import { Button } from '@components/generic/Button';
|
||||
@@ -44,45 +45,50 @@ export const Interface = ({
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="w-full max-w-3xl 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" />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<Card
|
||||
title="Basic settings"
|
||||
description="Device name and user parameters"
|
||||
>
|
||||
<div className="w-full max-w-3xl space-y-2 md:max-w-xl p-10">
|
||||
<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" />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,6 +3,7 @@ import React from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { connection } from '@app/core/connection';
|
||||
import { useAppSelector } from '@app/hooks/redux';
|
||||
import { Button } from '@components/generic/Button';
|
||||
@@ -53,26 +54,31 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="w-full max-w-3xl md:max-w-xl">
|
||||
<form className="space-y-2" onSubmit={onSubmit}>
|
||||
<Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
|
||||
<Input
|
||||
type="password"
|
||||
label={t('strings.wifi_psk')}
|
||||
{...register('wifiPassword')}
|
||||
/>
|
||||
<Input
|
||||
label={'Charge current'}
|
||||
disabled
|
||||
{...register('chargeCurrent')}
|
||||
/>
|
||||
<Input
|
||||
label={'Last GPS Attempt'}
|
||||
disabled
|
||||
{...register('gpsAttemptTime')}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<Card
|
||||
title="Basic settings"
|
||||
description="Device name and user parameters"
|
||||
>
|
||||
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
||||
<form className="space-y-2" onSubmit={onSubmit}>
|
||||
<Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
|
||||
<Input
|
||||
type="password"
|
||||
label={t('strings.wifi_psk')}
|
||||
{...register('wifiPassword')}
|
||||
/>
|
||||
<Input
|
||||
label={'Charge current'}
|
||||
disabled
|
||||
{...register('chargeCurrent')}
|
||||
/>
|
||||
<Input
|
||||
label={'Last GPS Attempt'}
|
||||
disabled
|
||||
{...register('gpsAttemptTime')}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user