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

Use Headless UI & get visual message ack's working

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-05-09 19:23:13 +10:00
parent d6be17a789
commit 50c276b9bc
21 changed files with 831 additions and 9433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar/Channels/Channel.tsx
+110
View File
@@ -0,0 +1,110 @@
import React from 'react';
import { Disclosure } from '@headlessui/react';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface ChannelProps {
channel: Protobuf.Channel;
}
const Channel = (props: ChannelProps) => {
return (
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
<div className="flex">
{props.channel.index} -{' '}
{Protobuf.Channel_Role[props.channel.role]}
</div>
</Disclosure.Button>
<Disclosure.Panel>
<div className="w-full">
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Bandwidth:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.bandwidth}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Channel Number:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.channelNum}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Coding Rate:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.codingRate}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>ID:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.id}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Modem Config:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.modemConfig
? Protobuf.ChannelSettings_ModemConfig[
props.channel.settings.modemConfig
]
: null}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Name:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.name}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>PSK:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.psk.toLocaleString()}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Spread Factor:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.spreadFactor}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Tx Power:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.txPower}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Uplink:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.uplinkEnabled ? 'true' : 'false'}
</code>
</div>
<div className="flex justify-between border-b hover:bg-gray-200">
<p>Downlink:</p>
<code className="bg-gray-200 rounded-full px-2">
{props.channel.settings?.downlinkEnabled ? 'true' : 'false'}
</code>
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
};
export default Channel;
src/components/Sidebar/Channels/Index.tsx
+50
View File
@@ -0,0 +1,50 @@
import React from 'react';
import { Disclosure } from '@headlessui/react';
import {
ChevronDownIcon,
ChevronRightIcon,
HashtagIcon,
} from '@heroicons/react/outline';
import { Protobuf } from '@meshtastic/meshtasticjs';
import type { languageTemplate } from '../../../App';
import Channel from './Channel';
export interface ChannelsProps {
isReady: boolean;
channels: Protobuf.Channel[];
translations: languageTemplate;
}
const Channels = (props: ChannelsProps) => {
return (
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
<div className="flex">
<HashtagIcon className="my-auto mr-2 2-5 h-5" />
{props.translations.device_channels_title}
</div>
{open ? (
<ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
) : (
<ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
)}
</Disclosure.Button>
<Disclosure.Panel>
<>
{props.channels.map((channel, index) => {
if (channel.role !== Protobuf.Channel_Role.DISABLED)
return <Channel channel={channel} />;
})}
</>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
};
export default Channels;