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

Fixes, new debug output & more.

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-11-11 13:44:19 +11:00
parent 85fd796322
commit 8aeeb9a36a
22 changed files with 312 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Channel.tsx
+25
View File
@@ -39,12 +39,19 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
role: Protobuf.Channel_Role;
settings: {
name: string;
modemConfig: Protobuf.ChannelSettings_ModemConfig;
bandwidth?: number;
codingRate?: number;
spreadFactor?: number;
};
}>({
defaultValues: {
role: channel.role,
settings: {
name: channel.settings?.name,
bandwidth: channel.settings?.bandwidth,
codingRate: channel.settings?.codingRate,
spreadFactor: channel.settings?.spreadFactor,
},
},
});
@@ -77,6 +84,7 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
<div className="my-auto space-x-2">
<form>
<div className="flex space-x-2">
{/* @todo: change to disable & make primary buttons */}
<Select
label="Channel Type"
optionsEnum={Protobuf.Channel_Role}
@@ -88,6 +96,23 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
/>
</div>
<Input label="Name" {...register('settings.name')} />
<Input
label="Bandwidth"
type="number"
{...register('settings.bandwidth')}
/>
<Input
label="Spread Factor"
type="number"
min={7}
max={12}
{...register('settings.spreadFactor')}
/>
<Input
label="Coding Rate"
type="number"
{...register('settings.codingRate')}
/>
</form>
</div>
<IconButton
src/components/generic/Button.tsx
+4 -2
View File
@@ -40,7 +40,7 @@ export const Button = ({
return (
<button
onClick={handleConfirm}
className={`items-center select-none flex dark:text-white active:scale-95 ${
className={`items-center select-none flex dark:text-white active:scale-95 transition duration-200 ease-in-out ${
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'
@@ -48,7 +48,9 @@ export const Button = ({
disabled
? 'cursor-not-allowed dark:bg-primaryDark bg-white'
: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
} ${border ? 'border dark:border-gray-600' : ''} ${className}`}
} ${
border ? 'border border-gray-400 dark:border-gray-200' : ''
} ${className}`}
{...props}
>
{icon && (
src/components/generic/Card.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const Card = ({
}: CardProps): JSX.Element => {
return (
<div
className={`flex flex-col flex-auto dark:text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
className={`flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl ${className}`}
{...props}
>
<div className="flex items-center justify-between mx-10 mt-10">
src/components/generic/Cover.tsx
+10
View File
@@ -0,0 +1,10 @@
import React from 'react';
export interface CoverProps {
content: JSX.Element;
enabled: boolean;
}
export const Cover = ({ content, enabled }: CoverProps): JSX.Element => {
return enabled ? <div className="m-4 ">{content}</div> : <></>;
};
src/components/generic/Drawer.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const Drawer = ({
)}
<aside
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 border-gray-300 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
permenant ? '' : 'absolute'
} ${open ? 'translate-x-0' : '-translate-x-full'} ${className}`}
{...props}
src/components/generic/IconButton.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const IconButton = ({
<div className="my-auto text-gray-500 dark:text-gray-400">
<button
type="button"
className="p-2 rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
className="p-2 transition duration-200 ease-in-out rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
{...props}
>
{icon}
src/components/generic/StatCard.tsx
+17
View File
@@ -0,0 +1,17 @@
import React from 'react';
export interface StatCardProps {
title: string;
value: string | JSX.Element;
}
export const StatCard = ({ title, value }: StatCardProps): JSX.Element => {
return (
<div className="w-full border-gray-300 shadow-md border-y md:border h-28 md:rounded-3xl dark:bg-primaryDark dark:border-transparent ">
<div className="m-4">
<div className="text-lg font-light">{title}</div>
<div className="text-3xl font-bold">{value}</div>
</div>
</div>
);
};
src/components/generic/Tabs.tsx
-47
View File
@@ -1,47 +0,0 @@
import React from 'react';
import { Tab } from '@headlessui/react';
type DefaultDivProps = JSX.IntrinsicElements['div'];
interface TabProps extends DefaultDivProps {
tabs: {
name: string;
body: JSX.Element;
}[];
}
export const Tabs = ({ tabs, className, ...props }: TabProps): JSX.Element => {
return (
<Tab.Group as="div" className={className}>
<Tab.List className="flex border-l border-r border-t shadow-md rounded-t-3xl dark:border-gray-600">
{tabs.map((tab) => (
<Tab
key={tab.name}
className={({ selected }): string =>
`w-full text-lg font-medium p-2 border-b-2 ${
selected
? 'dark:border-gray-200 border-gray-600'
: 'border-transparent dark:border-transparent'
}`
}
>
{tab.name}
</Tab>
))}
</Tab.List>
<Tab.Panels className="h-full">
{tabs.map((tab, index) => (
<Tab.Panel
key={index}
className={
'border dark:border-gray-600 rounded-b-3xl p-4 h-full shadow-md'
}
>
{tab.body}
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
);
};
src/components/generic/form/Checkbox.tsx
+33 -34
View File
@@ -12,38 +12,37 @@ interface CheckboxProps extends DefaultInputProps {
error?: boolean;
}
export const Checkbox = ({
label,
valid,
validationMessage,
id,
error,
...props
}: CheckboxProps): JSX.Element => {
return (
<div className="flex flex-col w-full">
<Label label={label} />
<div className="ml-auto">
<input
type="checkbox"
id={id}
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent ${
props.disabled
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
: ''
} ${
error
? 'border-red-500'
: props.disabled
? 'border-gray-200'
: ' focus-within:border-primary hover:border-primary'
}`}
{...props}
/>
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
function Input(
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps,
ref,
) {
return (
<div className="flex flex-col w-full">
<Label label={label} />
<div className="ml-auto">
<input
ref={ref}
type="checkbox"
id={id}
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
props.disabled
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
: ''
} ${
error
? 'border-red-500'
: props.disabled
? 'border-gray-200'
: ' focus-within:border-primary hover:border-primary'
}`}
{...props}
/>
</div>
{!valid && (
<div className="text-sm text-gray-600">{validationMessage}</div>
)}
</div>
{!valid && (
<div className="text-sm text-gray-600">{validationMessage}</div>
)}
</div>
);
};
);
},
);
src/components/generic/form/InputWrapper.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const InputWrapper = ({
children,
}: LabelProps): JSX.Element => (
<div
className={`flex w-full border-y border rounded-md ${
className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
disabled
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
: ''
src/components/generic/form/Label.tsx
+2 -2
View File
@@ -6,9 +6,9 @@ export interface LabelProps {
}
export const Label = ({ label, error }: LabelProps): JSX.Element => (
<label className="flex py-1 text-xs font-semibold text-gray-500">
<label className="flex py-1 text-xs font-semibold text-gray-500 dark:text-gray-400">
{label}
{error && <span className="ml-2 text-red-500">{error}</span>}
<div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-600 bg-gray-500" />
<div className="flex-grow h-0.5 my-auto ml-2 dark:bg-gray-700 bg-gray-300 rounded-full" />
</label>
);
src/components/templates/PageLayout.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const PageLayout = ({
setNavOpen(!navOpen);
}}
>
<Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
<Tab.List className="flex flex-col border-b border-gray-300 divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
<div className="flex items-center justify-between m-8 mr-6 md:my-10">
<div className="text-4xl font-extrabold leading-none tracking-tight">
{title}
src/components/templates/PrimaryTemplate.tsx
+4 -4
View File
@@ -17,10 +17,10 @@ export const PrimaryTemplate = ({
}: PrimaryTemplateProps): JSX.Element => {
return (
<div className="flex flex-col flex-auto h-full min-w-0">
<div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex p-4 bg-white border-b border-gray-300 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{button && <div className="pr-2 m-auto md:hidden">{button}</div>}
<div className="flex-1 min-w-0">
<a className="whitespace-nowrap font-medium text-primary">
<a className="font-medium whitespace-nowrap text-primary">
{tagline}
</a>
<h2 className="text-3xl font-extrabold leading-7 tracking-tight truncate md:text-4xl md:leading-10 dark:text-white">
@@ -28,11 +28,11 @@ export const PrimaryTemplate = ({
</h2>
</div>
</div>
<div className="flex-auto flex-grow p-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
<div className="flex-auto flex-grow py-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
{children}
</div>
{footer && (
<div className="flex p-4 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex p-4 bg-white border-t border-gray-300 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{button && <div className="pr-2 m-auto md:hidden">{button}</div>}
<div className="flex-1 min-w-0">{footer}</div>
</div>