Sacha Weatherstone
5 years ago
21 changed files with 835 additions and 9437 deletions
File diff suppressed because it is too large
@ -0,0 +1,66 @@ |
|||
import React from 'react'; |
|||
|
|||
import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline'; |
|||
import type { IHTTPConnection } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../App'; |
|||
|
|||
export interface MessageBoxProps { |
|||
translations: languageTemplate; |
|||
setSettingsModalOpen: React.Dispatch<React.SetStateAction<boolean>>; |
|||
connection: IHTTPConnection; |
|||
isReady: boolean; |
|||
} |
|||
|
|||
const MessageBox = (props: MessageBoxProps) => { |
|||
const [currentMessage, setCurrentMessage] = React.useState(''); |
|||
const sendMessage = () => { |
|||
if (props.isReady) { |
|||
props.connection.sendText(currentMessage, undefined, true); |
|||
setCurrentMessage(''); |
|||
} |
|||
}; |
|||
return ( |
|||
<div className="flex text-lg font-medium border rounded-md space-x-2 md:space-x-0 w-full"> |
|||
<div |
|||
className="flex p-3 text-xl hover:text-gray-500 text-gray-400 rounded-md shadow-md focus:outline-none cursor-pointer md:hidden" |
|||
onClick={() => { |
|||
props.setSettingsModalOpen(true); |
|||
}} |
|||
> |
|||
<MenuIcon className="m-auto h-6 2-6" /> |
|||
</div> |
|||
<form |
|||
className="flex flex-wrap relative w-full" |
|||
onSubmit={(e) => { |
|||
e.preventDefault(); |
|||
sendMessage(); |
|||
}} |
|||
> |
|||
{props.isReady} |
|||
<input |
|||
type="text" |
|||
placeholder={`${props.translations.no_message_placeholder}...`} |
|||
disabled={!props.isReady} |
|||
value={currentMessage} |
|||
onChange={(e) => { |
|||
setCurrentMessage(e.target.value); |
|||
}} |
|||
className={`p-3 placeholder-gray-400 text-gray-700 relative rounded-md shadow-md focus:outline-none w-full pr-10 ${ |
|||
props.isReady ? 'cursor-text' : 'cursor-not-allowed' |
|||
}`}
|
|||
/> |
|||
<span className="flex z-10 h-full text-gray-400 absolute w-8 right-0"> |
|||
<PaperAirplaneIcon |
|||
onClick={sendMessage} |
|||
className={`text-xl hover:text-gray-500 h-6 w-6 my-auto ${ |
|||
props.isReady ? 'cursor-pointer' : 'cursor-not-allowed' |
|||
}`}
|
|||
/> |
|||
</span> |
|||
</form> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default MessageBox; |
|||
@ -1,67 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline'; |
|||
|
|||
interface NavItemProps { |
|||
isDropdown: boolean; |
|||
open: boolean; |
|||
isNested: boolean; |
|||
titleContent: React.ReactNode; |
|||
dropdownContent?: React.ReactNode; |
|||
onClick?: Function; |
|||
isLoading?: boolean; |
|||
} |
|||
|
|||
const NavItem = (props: NavItemProps) => { |
|||
React.useEffect(() => { |
|||
if (props.open) { |
|||
setNavItemOpen(props.open); |
|||
} |
|||
}, []); |
|||
const [navItemOpen, setNavItemOpen] = React.useState(false); |
|||
return ( |
|||
<> |
|||
<div |
|||
className={`flex w-full text-lg font-medium justify-between ${ |
|||
navItemOpen && props.isNested ? 'bg-gray-100' : null |
|||
} ${props.isNested ? 'border-b px-3 py-1' : 'p-3'} ${ |
|||
props.isDropdown && navItemOpen ? 'shadow-md' : 'border-b' |
|||
} ${ |
|||
props.isDropdown || props.isNested |
|||
? 'hover:bg-gray-200 cursor-pointer' |
|||
: null |
|||
}`}
|
|||
onClick={() => { |
|||
if (props.isDropdown) setNavItemOpen(!navItemOpen); |
|||
if (props.onClick) { |
|||
props.onClick(); |
|||
} |
|||
}} |
|||
> |
|||
{props.titleContent} |
|||
{props.isDropdown && !props.isLoading ? ( |
|||
navItemOpen ? ( |
|||
<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" /> |
|||
) |
|||
) : null} |
|||
{props.isLoading ? ( |
|||
// <FaSpinner className="animate-spin my-auto" />
|
|||
<div>loading</div> |
|||
) : null} |
|||
</div> |
|||
{props.isDropdown ? ( |
|||
<div |
|||
className={`duration-200 ease-in-out transition-all overflow-hidden max-h-0 border-l-8 ${ |
|||
props.isNested ? 'border-gray-500' : 'border-gray-300' |
|||
} ${navItemOpen ? 'max-h-full' : null}`}
|
|||
> |
|||
{props.dropdownContent} |
|||
</div> |
|||
) : null} |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default NavItem; |
|||
@ -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; |
|||
@ -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; |
|||
@ -0,0 +1,124 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Disclosure } from '@headlessui/react'; |
|||
import { |
|||
AdjustmentsIcon, |
|||
ChevronDownIcon, |
|||
ChevronRightIcon, |
|||
SaveIcon, |
|||
} from '@heroicons/react/outline'; |
|||
import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../../../App'; |
|||
|
|||
interface DeviceProps { |
|||
isReady: boolean; |
|||
preferences: Protobuf.RadioConfig_UserPreferences; |
|||
connection: IHTTPConnection; |
|||
translations: languageTemplate; |
|||
} |
|||
|
|||
const Device = (props: DeviceProps) => { |
|||
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"> |
|||
<AdjustmentsIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.translations.device_settings_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> |
|||
<> |
|||
<div className="flex 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={ |
|||
props.preferences?.region ?? Protobuf.RegionCode.Unset |
|||
} |
|||
onChange={(e) => { |
|||
props.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 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 |
|||
onChange={() => {}} |
|||
type="text" |
|||
value={props.preferences.wifiSsid} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="flex 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 |
|||
type="password" |
|||
value={props.preferences.wifiPassword} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="flex group p-1 bg-gray-100 cursor-pointer hover:bg-gray-200 border-b"> |
|||
<div |
|||
className="flex m-auto font-medium group-hover:text-gray-700" |
|||
onClick={() => { |
|||
props.connection.setPreferences(props.preferences); |
|||
}} |
|||
> |
|||
<SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" /> |
|||
{props.translations.save_changes_button} |
|||
</div> |
|||
</div> |
|||
</> |
|||
</Disclosure.Panel> |
|||
</> |
|||
)} |
|||
</Disclosure> |
|||
); |
|||
}; |
|||
|
|||
export default Device; |
|||
@ -0,0 +1,56 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Disclosure } from '@headlessui/react'; |
|||
import { |
|||
ChevronDownIcon, |
|||
ChevronRightIcon, |
|||
UsersIcon, |
|||
} from '@heroicons/react/outline'; |
|||
import type { Types } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../../../App'; |
|||
import Node from './Node'; |
|||
|
|||
interface NodesProps { |
|||
isReady: boolean; |
|||
nodes: Types.NodeInfoPacket[]; |
|||
translations: languageTemplate; |
|||
myId: number; |
|||
} |
|||
|
|||
const Nodes = (props: NodesProps) => { |
|||
return ( |
|||
<Disclosure> |
|||
{({ open }) => ( |
|||
<> |
|||
<Disclosure.Button className="flex rounded-t-md w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer"> |
|||
<div className="flex"> |
|||
<UsersIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.translations.nodes_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 className="shadow-inner"> |
|||
{props.nodes.length ? ( |
|||
props.nodes.map((node, index) => ( |
|||
<Node key={index} node={node} myId={props.myId} /> |
|||
)) |
|||
) : ( |
|||
<div className="flex border-b border-gray-300"> |
|||
<div className="m-auto p-3 text-gray-500"> |
|||
{props.translations.no_nodes_message} |
|||
</div> |
|||
</div> |
|||
)} |
|||
</Disclosure.Panel> |
|||
</> |
|||
)} |
|||
</Disclosure> |
|||
); |
|||
}; |
|||
|
|||
export default Nodes; |
|||
@ -0,0 +1,82 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Disclosure } from '@headlessui/react'; |
|||
import { |
|||
ClockIcon, |
|||
DesktopComputerIcon, |
|||
FlagIcon, |
|||
GlobeIcon, |
|||
LightningBoltIcon, |
|||
} from '@heroicons/react/outline'; |
|||
import type { Types } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface NodeProps { |
|||
node: Types.NodeInfoPacket; |
|||
myId: number; |
|||
} |
|||
|
|||
const Node = (props: NodeProps) => { |
|||
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.node.data.num === props.myId ? ( |
|||
<FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" /> |
|||
) : ( |
|||
<DesktopComputerIcon className="my-auto mr-2 w-5 h-5" /> |
|||
)} |
|||
<div className="m-auto">{props.node.data.user?.longName}</div> |
|||
</div> |
|||
</Disclosure.Button> |
|||
<Disclosure.Panel> |
|||
<div> |
|||
<p> |
|||
SNR:{' '} |
|||
{props.node.packet?.rxSnr ? props.node.packet.rxSnr : 'Unknown'} |
|||
</p> |
|||
<p> |
|||
RSSI:{' '} |
|||
{props.node.packet?.rxRssi |
|||
? props.node.packet.rxRssi |
|||
: 'Unknown'} |
|||
</p> |
|||
<p> |
|||
{`Last heard: ${ |
|||
props.node.data?.lastHeard |
|||
? new Date(props.node.data.lastHeard).toLocaleString() |
|||
: 'Unknown' |
|||
}`}{' '}
|
|||
{} |
|||
</p> |
|||
<div className="flex"> |
|||
<GlobeIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p> |
|||
{props.node.data.position?.latitudeI}, |
|||
{props.node.data.position?.longitudeI} |
|||
</p> |
|||
</div> |
|||
|
|||
<div className="flex"> |
|||
<GlobeIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{props.node.data.position?.altitude}</p> |
|||
</div> |
|||
|
|||
<div className="flex"> |
|||
<ClockIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{props.node.data.position?.time}</p> |
|||
</div> |
|||
<div className="flex"> |
|||
<LightningBoltIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{props.node.data.position?.batteryLevel}</p> |
|||
</div> |
|||
</div> |
|||
</Disclosure.Panel> |
|||
</> |
|||
)} |
|||
</Disclosure> |
|||
); |
|||
}; |
|||
|
|||
export default Node; |
|||
@ -1,146 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
import { HashtagIcon } from '@heroicons/react/outline'; |
|||
import { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../../App'; |
|||
import NavItem from '../NavItem'; |
|||
|
|||
interface SidebarChannelsProps { |
|||
IsReady: boolean; |
|||
Channels: Protobuf.Channel[]; |
|||
Translations: languageTemplate; |
|||
} |
|||
|
|||
const SidebarChannels = (props: SidebarChannelsProps) => { |
|||
return ( |
|||
<NavItem |
|||
isDropdown={true} |
|||
open={false} |
|||
isNested={false} |
|||
titleContent={ |
|||
<div className="flex"> |
|||
<HashtagIcon className="my-auto mr-2 2-5 h-5" /> |
|||
{props.Translations.device_channels_title} |
|||
</div> |
|||
} |
|||
isLoading={!props.IsReady} |
|||
dropdownContent={ |
|||
<> |
|||
{props.Channels.map((channel, index) => { |
|||
if (channel.role !== Protobuf.Channel_Role.DISABLED) |
|||
return ( |
|||
<NavItem |
|||
key={index} |
|||
isDropdown={true} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<div className="flex"> |
|||
{channel.index} - {Protobuf.Channel_Role[channel.role]} |
|||
</div> |
|||
} |
|||
dropdownContent={ |
|||
<NavItem |
|||
isDropdown={false} |
|||
isNested={false} |
|||
open={false} |
|||
titleContent={ |
|||
<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"> |
|||
{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"> |
|||
{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"> |
|||
{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"> |
|||
{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"> |
|||
{channel.settings?.modemConfig |
|||
? Protobuf.ChannelSettings_ModemConfig[ |
|||
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"> |
|||
{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"> |
|||
{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"> |
|||
{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"> |
|||
{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"> |
|||
{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"> |
|||
{channel.settings?.downlinkEnabled |
|||
? 'true' |
|||
: 'false'} |
|||
</code> |
|||
</div> |
|||
</div> |
|||
} |
|||
/> |
|||
} |
|||
/> |
|||
); |
|||
})} |
|||
</> |
|||
} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default SidebarChannels; |
|||
@ -1,105 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
import { AdjustmentsIcon, SaveIcon } from '@heroicons/react/outline'; |
|||
import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../../App'; |
|||
import NavItem from '../NavItem'; |
|||
|
|||
interface SidebarDeviceSettingsProps { |
|||
IsReady: boolean; |
|||
Preferences: Protobuf.RadioConfig_UserPreferences; |
|||
Connection: IHTTPConnection; |
|||
Translations: languageTemplate; |
|||
} |
|||
|
|||
const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => { |
|||
return ( |
|||
<NavItem |
|||
isDropdown={true} |
|||
open={false} |
|||
isNested={false} |
|||
titleContent={ |
|||
<div className="flex"> |
|||
<AdjustmentsIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.Translations.device_settings_title} |
|||
</div> |
|||
} |
|||
isLoading={!props.IsReady} |
|||
dropdownContent={ |
|||
<> |
|||
<div className="flex 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={props.Preferences?.region ?? Protobuf.RegionCode.Unset} |
|||
onChange={(e) => { |
|||
props.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 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 |
|||
onChange={() => {}} |
|||
type="text" |
|||
value={props.Preferences.wifiSsid} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="flex 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 type="password" value={props.Preferences.wifiPassword} /> |
|||
</div> |
|||
</div> |
|||
<div className="flex group p-1 bg-gray-100 cursor-pointer hover:bg-gray-200 border-b"> |
|||
<div |
|||
className="flex m-auto font-medium group-hover:text-gray-700" |
|||
onClick={() => { |
|||
props.Connection.setPreferences(props.Preferences); |
|||
}} |
|||
> |
|||
<SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" /> |
|||
{props.Translations.save_changes_button} |
|||
</div> |
|||
</div> |
|||
</> |
|||
} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default SidebarDeviceSettings; |
|||
@ -1,119 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
import { |
|||
ClockIcon, |
|||
DesktopComputerIcon, |
|||
FlagIcon, |
|||
GlobeIcon, |
|||
LightningBoltIcon, |
|||
UsersIcon, |
|||
} from '@heroicons/react/outline'; |
|||
import type { Types } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import type { languageTemplate } from '../../App'; |
|||
import NavItem from '../NavItem'; |
|||
|
|||
interface sidebarNodesProps { |
|||
IsReady: boolean; |
|||
Nodes: Types.NodeInfoPacket[]; |
|||
Translations: languageTemplate; |
|||
myId: number; |
|||
} |
|||
|
|||
const SidebarNodes = (props: sidebarNodesProps) => { |
|||
return ( |
|||
<NavItem |
|||
isDropdown={true} |
|||
open={false} |
|||
isNested={false} |
|||
titleContent={ |
|||
<div className="flex"> |
|||
<UsersIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.Translations.nodes_title} |
|||
<div className="flex m-auto rounded-full bg-gray-300 w-6 h-6 text-sm ml-2"> |
|||
<div className="m-auto">{props.Nodes.length ?? 0}</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
isLoading={!props.IsReady} |
|||
dropdownContent={ |
|||
props.Nodes.length ? ( |
|||
props.Nodes.map((node, index) => ( |
|||
<NavItem |
|||
key={index} |
|||
isDropdown={true} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<div key={index} className="flex"> |
|||
{node.data.num === props.myId ? ( |
|||
<FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" /> |
|||
) : ( |
|||
<DesktopComputerIcon className="my-auto mr-2 w-5 h-5" /> |
|||
)} |
|||
<div className="m-auto">{node.data.user?.longName}</div> |
|||
</div> |
|||
} |
|||
dropdownContent={ |
|||
<NavItem |
|||
isDropdown={false} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<div> |
|||
<p> |
|||
SNR:{' '} |
|||
{node.packet?.rxSnr ? node.packet.rxSnr : 'Unknown'} |
|||
</p> |
|||
<p> |
|||
RSSI:{' '} |
|||
{node.packet?.rxRssi ? node.packet.rxRssi : 'Unknown'} |
|||
</p> |
|||
<p> |
|||
{`Last heard: ${ |
|||
node.data?.lastHeard |
|||
? new Date(node.data.lastHeard).toLocaleString() |
|||
: 'Unknown' |
|||
}`}{' '}
|
|||
{} |
|||
</p> |
|||
<div className="flex"> |
|||
<GlobeIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p> |
|||
{node.data.position?.latitudeI}, |
|||
{node.data.position?.longitudeI} |
|||
</p> |
|||
</div> |
|||
|
|||
<div className="flex"> |
|||
<GlobeIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{node.data.position?.altitude}</p> |
|||
</div> |
|||
|
|||
<div className="flex"> |
|||
<ClockIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{node.data.position?.time}</p> |
|||
</div> |
|||
<div className="flex"> |
|||
<LightningBoltIcon className="my-auto mr-2 w-5 h-5" /> |
|||
<p>{node.data.position?.batteryLevel}</p> |
|||
</div> |
|||
</div> |
|||
} |
|||
/> |
|||
} |
|||
/> |
|||
)) |
|||
) : ( |
|||
<div className="flex border-b border-gray-300"> |
|||
<div className="m-auto p-3 text-gray-500"> |
|||
{props.Translations.no_nodes_message} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default SidebarNodes; |
|||
@ -1,132 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Br, Jp, Us } from 'react-flags-select'; |
|||
|
|||
import { CogIcon } from '@heroicons/react/outline'; |
|||
|
|||
import type { languageTemplate } from '../../App'; |
|||
import { LanguageEnum } from '../../App'; |
|||
import ToggleSwitch from '../basic/ToggleSwitch'; |
|||
import NavItem from '../NavItem'; |
|||
|
|||
interface SidebarUISettingsProps { |
|||
Language: LanguageEnum; |
|||
SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>; |
|||
Translations: languageTemplate; |
|||
} |
|||
|
|||
const SidebarUISettings = (props: SidebarUISettingsProps) => { |
|||
return ( |
|||
<NavItem |
|||
isDropdown={true} |
|||
isNested={false} |
|||
open={false} |
|||
titleContent={ |
|||
<div className="flex"> |
|||
<CogIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.Translations.ui_settings_title} |
|||
</div> |
|||
} |
|||
dropdownContent={ |
|||
<> |
|||
<NavItem |
|||
isDropdown={false} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<> |
|||
<div className="my-auto"> |
|||
{props.Translations.color_scheme_title} |
|||
</div> |
|||
<div className="flex shadow-md rounded-md ml-2"> |
|||
{/* <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer"> |
|||
<FaSun className="m-auto group-hover:text-gray-700" /> |
|||
</div> |
|||
<div className="flex group p-2 border border-gray-300 hover:bg-gray-200 cursor-pointer"> |
|||
<FaMoon className="m-auto group-hover:text-gray-700" /> |
|||
</div> |
|||
<div className="flex group p-2 rounded-r-md border border-gray-300 hover:bg-gray-200 cursor-pointer"> |
|||
<FaLaptop className="m-auto group-hover:text-gray-700" /> |
|||
</div> */} |
|||
</div> |
|||
</> |
|||
} |
|||
/> |
|||
<NavItem |
|||
isDropdown={true} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<div className="flex my-auto"> |
|||
{props.Translations.language_title} |
|||
<div className="my-auto"> |
|||
{props.Language === LanguageEnum.ENGLISH ? ( |
|||
<Us className="ml-2 w-8 shadow-md" /> |
|||
) : props.Language === LanguageEnum.JAPANESE ? ( |
|||
<Jp className="ml-2 w-8 shadow-md" /> |
|||
) : null} |
|||
</div> |
|||
</div> |
|||
} |
|||
dropdownContent={ |
|||
<> |
|||
<NavItem |
|||
onClick={() => { |
|||
props.SetLanguage(LanguageEnum.ENGLISH); |
|||
}} |
|||
open={false} |
|||
isDropdown={false} |
|||
isNested={true} |
|||
titleContent={ |
|||
<> |
|||
English <Us className="w-8 shadow-md" /> |
|||
</> |
|||
} |
|||
/> |
|||
<NavItem |
|||
onClick={() => { |
|||
props.SetLanguage(LanguageEnum.PORTUGUESE); |
|||
}} |
|||
open={false} |
|||
isDropdown={false} |
|||
isNested={true} |
|||
titleContent={ |
|||
<> |
|||
Português <Br className="w-8 shadow-md" /> |
|||
</> |
|||
} |
|||
/> |
|||
<NavItem |
|||
onClick={() => { |
|||
props.SetLanguage(LanguageEnum.JAPANESE); |
|||
}} |
|||
open={false} |
|||
isDropdown={false} |
|||
isNested={true} |
|||
titleContent={ |
|||
<> |
|||
日本語 <Jp className="w-8 shadow-md" /> |
|||
</> |
|||
} |
|||
/> |
|||
</> |
|||
} |
|||
/> |
|||
<NavItem |
|||
isDropdown={false} |
|||
isNested={true} |
|||
open={false} |
|||
titleContent={ |
|||
<> |
|||
<div className="">Test</div> |
|||
<ToggleSwitch active={true} /> |
|||
</> |
|||
} |
|||
/> |
|||
</> |
|||
} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default SidebarUISettings; |
|||
@ -0,0 +1,50 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Disclosure } from '@headlessui/react'; |
|||
import { |
|||
ChevronDownIcon, |
|||
ChevronRightIcon, |
|||
CogIcon, |
|||
} from '@heroicons/react/outline'; |
|||
|
|||
import type { LanguageEnum, languageTemplate } from '../../../App'; |
|||
import Translations from './Translations'; |
|||
|
|||
interface UIProps { |
|||
language: LanguageEnum; |
|||
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>; |
|||
translations: languageTemplate; |
|||
darkmode: boolean; |
|||
setDarkmode: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
const UI = (props: UIProps) => { |
|||
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"> |
|||
<CogIcon className="my-auto mr-2 w-5 h-5" /> |
|||
{props.translations.ui_settings_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> |
|||
<Translations |
|||
language={props.language} |
|||
setLanguage={props.setLanguage} |
|||
translations={props.translations} |
|||
/> |
|||
</Disclosure.Panel> |
|||
</> |
|||
)} |
|||
</Disclosure> |
|||
); |
|||
}; |
|||
|
|||
export default UI; |
|||
@ -0,0 +1,49 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Br, Jp, Us } from 'react-flags-select'; |
|||
|
|||
import { Disclosure } from '@headlessui/react'; |
|||
|
|||
import { LanguageEnum, languageTemplate } from '../../../App'; |
|||
|
|||
export interface TranslationsProps { |
|||
language: LanguageEnum; |
|||
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>; |
|||
translations: languageTemplate; |
|||
} |
|||
|
|||
const Translations = (props: TranslationsProps) => { |
|||
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 my-auto"> |
|||
{props.translations.language_title} |
|||
<div className="my-auto"> |
|||
{props.language === LanguageEnum.ENGLISH ? ( |
|||
<Us className="ml-2 w-8 shadow-md" /> |
|||
) : props.language === LanguageEnum.JAPANESE ? ( |
|||
<Jp className="ml-2 w-8 shadow-md" /> |
|||
) : null} |
|||
</div> |
|||
</div> |
|||
</Disclosure.Button> |
|||
<Disclosure.Panel> |
|||
<div> |
|||
English <Us className="w-8 shadow-md" /> |
|||
</div> |
|||
<div> |
|||
Português <Br className="w-8 shadow-md" /> |
|||
</div> |
|||
<div> |
|||
日本語 <Jp className="w-8 shadow-md" /> |
|||
</div> |
|||
</Disclosure.Panel> |
|||
</> |
|||
)} |
|||
</Disclosure> |
|||
); |
|||
}; |
|||
|
|||
export default Translations; |
|||
@ -1,56 +0,0 @@ |
|||
Arguments: |
|||
/usr/bin/node /usr/share/yarn/bin/yarn.js add -D tailwindcss@latest postcss@latest autoprefixer@latest |
|||
|
|||
PATH: |
|||
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Program Files/AdoptOpenJDK/jdk-11.0.10.9-hotspot/bin:/mnt/c/Program Files (x86)/Common Files/Oracle/Java/javapath:/mnt/c/Windows/system32:/mnt/c/Windows:/mnt/c/Windows/System32/Wbem:/mnt/c/Windows/System32/WindowsPowerShell/v1.0/:/mnt/c/Windows/System32/OpenSSH/:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Program Files/Git/cmd:/mnt/c/Program Files/nodejs/:/mnt/c/Users/sacha/AppData/Local/Programs/Python/Python39/Scripts/:/mnt/c/Users/sacha/AppData/Local/Programs/Python/Python39/:/mnt/c/Users/sacha/AppData/Local/Microsoft/WindowsApps:/mnt/c/Users/sacha/AppData/Local/Programs/Microsoft VS Code/bin:/mnt/c/Users/sacha/AppData/Roaming/npm:/home/sachaw/.yarn/bin |
|||
|
|||
Yarn version: |
|||
1.22.5 |
|||
|
|||
Node version: |
|||
15.12.0 |
|||
|
|||
Platform: |
|||
linux x64 |
|||
|
|||
Trace: |
|||
Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com |
|||
at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:69:26) |
|||
|
|||
npm manifest: |
|||
{ |
|||
"scripts": { |
|||
"start": "snowpack dev", |
|||
"build": "snowpack build", |
|||
"test": "web-test-runner \"src/**/*.test.tsx\"", |
|||
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", |
|||
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"" |
|||
}, |
|||
"dependencies": { |
|||
"react": "^17.0.0", |
|||
"react-dom": "^17.0.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@snowpack/plugin-dotenv": "^2.0.5", |
|||
"@snowpack/plugin-react-refresh": "^2.4.0", |
|||
"@snowpack/plugin-typescript": "^1.2.0", |
|||
"@snowpack/web-test-runner-plugin": "^0.2.0", |
|||
"@testing-library/react": "^11.0.0", |
|||
"@types/chai": "^4.2.13", |
|||
"@types/mocha": "^8.2.0", |
|||
"@types/react": "^17.0.0", |
|||
"@types/react-dom": "^17.0.0", |
|||
"@types/snowpack-env": "^2.3.2", |
|||
"@web/test-runner": "^0.12.0", |
|||
"chai": "^4.2.0", |
|||
"prettier": "^2.0.5", |
|||
"snowpack": "^3.0.1", |
|||
"typescript": "^4.0.0" |
|||
} |
|||
} |
|||
|
|||
yarn manifest: |
|||
No manifest |
|||
|
|||
Lockfile: |
|||
No lockfile |
|||
Loading…
Reference in new issue