Sacha Weatherstone
5 years ago
8 changed files with 204 additions and 128 deletions
@ -0,0 +1,122 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
import { ObservableResource, useObservableSuspense } from 'observable-hooks'; |
||||
|
import { useForm } from 'react-hook-form'; |
||||
|
import JSONPretty from 'react-json-pretty'; |
||||
|
import type { languageTemplate } from 'src/App'; |
||||
|
|
||||
|
import { SaveIcon } from '@heroicons/react/outline'; |
||||
|
import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs'; |
||||
|
|
||||
|
export interface SettingsProps { |
||||
|
isReady: boolean; |
||||
|
connection: IHTTPConnection; |
||||
|
translations: languageTemplate; |
||||
|
} |
||||
|
|
||||
|
const Settings = (props: SettingsProps) => { |
||||
|
React.useEffect(() => { |
||||
|
const a = useObservableSuspense( |
||||
|
new ObservableResource( |
||||
|
props.connection.onAdminPacketEvent.asObservable(), |
||||
|
), |
||||
|
); |
||||
|
const adminPacketEvent = props.connection.onAdminPacketEvent.subscribe( |
||||
|
(adminMessage) => { |
||||
|
switch (adminMessage.data.variant.oneofKind) { |
||||
|
case 'getRadioResponse': |
||||
|
if (adminMessage.data.variant.getRadioResponse.preferences) { |
||||
|
setPreferences( |
||||
|
adminMessage.data.variant.getRadioResponse.preferences, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
return () => adminPacketEvent.unsubscribe(); |
||||
|
}, []); |
||||
|
|
||||
|
const [ |
||||
|
preferences, |
||||
|
setPreferences, |
||||
|
] = React.useState<Protobuf.RadioConfig_UserPreferences>(); |
||||
|
const { |
||||
|
register, |
||||
|
setValue, |
||||
|
handleSubmit, |
||||
|
formState: { errors }, |
||||
|
} = useForm<Protobuf.RadioConfig_UserPreferences>({ |
||||
|
defaultValues: preferences, |
||||
|
}); |
||||
|
|
||||
|
const onSubmit = handleSubmit((data) => console.log(data)); |
||||
|
|
||||
|
return ( |
||||
|
<form onSubmit={onSubmit}> |
||||
|
<div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b"> |
||||
|
<div className="my-auto">{props.translations.device_region_title}</div> |
||||
|
<div className="flex shadow-md rounded-md ml-2"> |
||||
|
<select |
||||
|
value={preferences.region ?? Protobuf.RegionCode.Unset} |
||||
|
// onChange={(e) => {
|
||||
|
// preferences.region = parseInt(e.target.value);
|
||||
|
// }}
|
||||
|
> |
||||
|
<option value={Protobuf.RegionCode.ANZ}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.ANZ]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.CN}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.CN]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.EU433}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.EU433]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.EU865}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.EU865]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.JP}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.JP]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.KR}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.KR]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.TW}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.TW]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.US}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.US]} |
||||
|
</option> |
||||
|
<option value={Protobuf.RegionCode.Unset}> |
||||
|
{Protobuf.RegionCode[Protobuf.RegionCode.Unset]} |
||||
|
</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b"> |
||||
|
<div className="my-auto">{props.translations.device_wifi_ssid}</div> |
||||
|
<div className="flex shadow-md rounded-md ml-2"> |
||||
|
<input {...register('wifiSsid', {})} type="text" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b"> |
||||
|
<div className="my-auto">{props.translations.device_wifi_psk}</div> |
||||
|
<div className="flex shadow-md rounded-md ml-2"> |
||||
|
<input {...register('wifiPassword', {})} type="password" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b"> |
||||
|
<button |
||||
|
type="submit" |
||||
|
className="flex m-auto font-medium group-hover:text-gray-700" |
||||
|
> |
||||
|
<SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" /> |
||||
|
{props.translations.save_changes_button} |
||||
|
</button> |
||||
|
</div> |
||||
|
<JSONPretty data={preferences} /> |
||||
|
</form> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Settings; |
||||
Loading…
Reference in new issue