Sacha Weatherstone
5 years ago
14 changed files with 739 additions and 349 deletions
File diff suppressed because it is too large
@ -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> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue