Required changes + consistency fixes
This commit is contained in:
Sacha Weatherstone
+3
-1
@@ -27,6 +27,8 @@ import { Messages } from '@pages/Messages';
|
||||
import { Nodes } from '@pages/Nodes/Index';
|
||||
import { Settings } from '@pages/settings/Index';
|
||||
|
||||
import { NotFound } from './pages/NotFound';
|
||||
|
||||
const App = (): JSX.Element => {
|
||||
const dispatch = useAppDispatch();
|
||||
const route = useRoute();
|
||||
@@ -159,7 +161,7 @@ const App = (): JSX.Element => {
|
||||
{route.name === 'nodes' && <Nodes />}
|
||||
{route.name === 'settings' && <Settings />}
|
||||
{route.name === 'about' && <About />}
|
||||
{route.name === false && 'Not Found'}
|
||||
{route.name === false && <NotFound />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ export const Button = ({
|
||||
}: ButtonProps): JSX.Element => {
|
||||
return (
|
||||
<button
|
||||
className={`items-center select-none flex dark:text-white ${
|
||||
className={`items-center select-none flex dark:text-white active:scale-95 ${
|
||||
active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
|
||||
} ${
|
||||
circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'
|
||||
|
||||
@@ -3,15 +3,11 @@ import React from 'react';
|
||||
export const Logo = (): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
<img
|
||||
title="Logo"
|
||||
className="w-16 dark:hidden"
|
||||
src="/static/Logo_Black.svg"
|
||||
/>
|
||||
<img title="Logo" className="w-16 dark:hidden" src="/Logo_Black.svg" />
|
||||
<img
|
||||
title="Logo"
|
||||
className="hidden w-16 dark:flex"
|
||||
src="/static/Logo_White.svg"
|
||||
src="/Logo_White.svg"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
+4
-1
@@ -1,11 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
||||
|
||||
export const About = (): JSX.Element => {
|
||||
return (
|
||||
<PrimaryTemplate title="meshtastic-web" tagline="About">
|
||||
<p>Content</p>
|
||||
<Card title="Project desc" description="...">
|
||||
<p className="p-10">Content</p>
|
||||
</Card>
|
||||
</PrimaryTemplate>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Card } from '@app/components/generic/Card';
|
||||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
||||
|
||||
export const NotFound = (): JSX.Element => {
|
||||
return (
|
||||
<PrimaryTemplate title="Page not found" tagline="404">
|
||||
<Card
|
||||
title="The requested file or directory could not be found"
|
||||
description="Better luck next time"
|
||||
>
|
||||
<br />
|
||||
<br />
|
||||
</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 { 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