Sacha Weatherstone
5 years ago
24 changed files with 5835 additions and 5184 deletions
File diff suppressed because it is too large
@ -0,0 +1,158 @@ |
|||
import React from 'react'; |
|||
|
|||
import ApexChart from 'react-apexcharts'; |
|||
|
|||
import { Button } from './Button'; |
|||
|
|||
type DefaultDivProps = JSX.IntrinsicElements['div']; |
|||
|
|||
interface ISeries { |
|||
name: string; |
|||
data: { |
|||
x: string | Date; |
|||
y: number; |
|||
}[]; |
|||
} |
|||
|
|||
interface ChartProps extends DefaultDivProps { |
|||
title: string; |
|||
description: string; |
|||
hasMultipleSeries: boolean; |
|||
series: ISeries[]; |
|||
} |
|||
|
|||
export const Chart = ({ |
|||
title, |
|||
description, |
|||
hasMultipleSeries, |
|||
series, |
|||
...props |
|||
}: ChartProps): JSX.Element => { |
|||
const [activeSeries, setActiveSeries] = React.useState<ISeries>(series[0]); |
|||
return ( |
|||
<div |
|||
className="flex flex-col flex-auto text-white shadow-md dark bg-primaryDark rounded-3xl" |
|||
{...props} |
|||
> |
|||
<div className="flex items-center justify-between mx-10 mt-10"> |
|||
<div className="flex flex-col"> |
|||
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight md:text-3xl"> |
|||
{title} |
|||
</div> |
|||
<div className="font-medium text-gray-400">{description}</div> |
|||
</div> |
|||
{hasMultipleSeries && ( |
|||
<div className="flex space-x-2"> |
|||
{series.map((data, index) => ( |
|||
<Button |
|||
active={data.name === activeSeries.name} |
|||
key={index} |
|||
className="font-medium" |
|||
onClick={(): void => { |
|||
setActiveSeries(series[index]); |
|||
}} |
|||
> |
|||
{data.name} |
|||
</Button> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
<div className="h-80"> |
|||
<ApexChart |
|||
height="96%" |
|||
type="area" |
|||
options={{ |
|||
chart: { |
|||
animations: { |
|||
speed: 400, |
|||
animateGradually: { |
|||
enabled: false, |
|||
}, |
|||
}, |
|||
toolbar: { |
|||
show: false, |
|||
}, |
|||
zoom: { |
|||
enabled: false, |
|||
}, |
|||
}, |
|||
colors: ['#818CF8'], |
|||
dataLabels: { |
|||
enabled: false, |
|||
}, |
|||
fill: { |
|||
colors: ['#312E81'], |
|||
}, |
|||
grid: { |
|||
padding: { |
|||
top: 10, |
|||
left: 0, |
|||
right: 0, |
|||
}, |
|||
|
|||
xaxis: { |
|||
lines: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yaxis: { |
|||
lines: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
stroke: { |
|||
width: 2, |
|||
}, |
|||
tooltip: { |
|||
followCursor: true, |
|||
theme: 'dark', |
|||
x: { |
|||
format: 'MMM dd, yyyy', |
|||
}, |
|||
y: { |
|||
formatter: (value: number): string => `${value}`, |
|||
}, |
|||
}, |
|||
xaxis: { |
|||
axisBorder: { |
|||
show: false, |
|||
}, |
|||
axisTicks: { |
|||
show: false, |
|||
}, |
|||
crosshairs: { |
|||
stroke: { |
|||
color: '#475569', |
|||
dashArray: 0, |
|||
width: 2, |
|||
}, |
|||
}, |
|||
labels: { |
|||
style: { |
|||
colors: '#CBD5E1', |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
enabled: false, |
|||
}, |
|||
type: 'datetime', |
|||
}, |
|||
yaxis: { |
|||
axisTicks: { |
|||
show: false, |
|||
}, |
|||
axisBorder: { |
|||
show: false, |
|||
}, |
|||
show: false, |
|||
}, |
|||
}} |
|||
series={[activeSeries]} |
|||
/> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,92 @@ |
|||
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 }: TabProps) => { |
|||
// let [categories] = useState({
|
|||
// Recent: [
|
|||
// {
|
|||
// id: 1,
|
|||
// title: 'Does drinking coffee make you smarter?',
|
|||
// date: '5h ago',
|
|||
// commentCount: 5,
|
|||
// shareCount: 2,
|
|||
// },
|
|||
// {
|
|||
// id: 2,
|
|||
// title: "So you've bought coffee... now what?",
|
|||
// date: '2h ago',
|
|||
// commentCount: 3,
|
|||
// shareCount: 2,
|
|||
// },
|
|||
// ],
|
|||
// Popular: [
|
|||
// {
|
|||
// id: 1,
|
|||
// title: 'Is tech making coffee better or worse?',
|
|||
// date: 'Jan 7',
|
|||
// commentCount: 29,
|
|||
// shareCount: 16,
|
|||
// },
|
|||
// {
|
|||
// id: 2,
|
|||
// title: 'The most innovative things happening in coffee',
|
|||
// date: 'Mar 19',
|
|||
// commentCount: 24,
|
|||
// shareCount: 12,
|
|||
// },
|
|||
// ],
|
|||
// Trending: [
|
|||
// {
|
|||
// id: 1,
|
|||
// title: 'Ask Me Anything: 10 answers to your questions about coffee',
|
|||
// date: '2d ago',
|
|||
// commentCount: 9,
|
|||
// shareCount: 5,
|
|||
// },
|
|||
// {
|
|||
// id: 2,
|
|||
// title: "The worst advice we've ever heard about coffee",
|
|||
// date: '4d ago',
|
|||
// commentCount: 1,
|
|||
// shareCount: 2,
|
|||
// },
|
|||
// ],
|
|||
// })
|
|||
|
|||
return ( |
|||
<Tab.Group as="div"> |
|||
<Tab.List className="flex p-2 space-x-2 border shadow-md rounded-t-3xl dark:border-gray-600"> |
|||
{tabs.map((tab) => ( |
|||
<Tab |
|||
key={tab.name} |
|||
className={({ selected }) => `w-full text-lg font-medium`} |
|||
> |
|||
{tab.name} |
|||
</Tab> |
|||
))} |
|||
</Tab.List> |
|||
<Tab.Panels> |
|||
{tabs.map((tab, index) => ( |
|||
<Tab.Panel |
|||
key={index} |
|||
className={ |
|||
'border dark:border-gray-600 rounded-b-3xl p-2 h-80 shadow-md' |
|||
} |
|||
> |
|||
{tab.body} |
|||
</Tab.Panel> |
|||
))} |
|||
</Tab.Panels> |
|||
</Tab.Group> |
|||
); |
|||
}; |
|||
@ -0,0 +1,51 @@ |
|||
import React from 'react'; |
|||
|
|||
import { Switch } from '@headlessui/react'; |
|||
|
|||
type DefaultButtonProps = JSX.IntrinsicElements['button']; |
|||
|
|||
interface ToggleProps extends DefaultButtonProps { |
|||
label?: string; |
|||
valid?: boolean; |
|||
validationMessage?: string; |
|||
} |
|||
|
|||
export const Toggle = ({ |
|||
label, |
|||
valid, |
|||
validationMessage, |
|||
id, |
|||
...props |
|||
}: ToggleProps): JSX.Element => { |
|||
const [enabled, setEnabled] = React.useState(false); |
|||
|
|||
return ( |
|||
<div className="w-full"> |
|||
<label htmlFor={id} className="block text-sm font-medium dark:text-white"> |
|||
{label} |
|||
</label> |
|||
<div className="float-right"> |
|||
<Switch |
|||
id={id} |
|||
{...props} |
|||
checked={enabled} |
|||
onChange={setEnabled} |
|||
className={`${ |
|||
enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-primaryDark' |
|||
} |
|||
relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
|
|||
> |
|||
<span className="sr-only">Use setting</span> |
|||
<span |
|||
aria-hidden="true" |
|||
className={`${enabled ? 'translate-x-9' : 'translate-x-0'} |
|||
pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
|
|||
/> |
|||
</Switch> |
|||
</div> |
|||
{!valid && ( |
|||
<div className="text-sm text-gray-600">{validationMessage}</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,72 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm } from 'react-hook-form'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
|
|||
import { Tabs } from '@app/components/generic/Tabs'; |
|||
import { connection } from '@app/core/connection'; |
|||
import { useAppSelector } from '@app/hooks/redux'; |
|||
import { Button } from '@components/generic/Button'; |
|||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; |
|||
import { MenuIcon, SaveIcon } from '@heroicons/react/outline'; |
|||
import type { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface ConnectionProps { |
|||
navOpen: boolean; |
|||
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const Connection = ({ |
|||
navOpen, |
|||
setNavOpen, |
|||
}: ConnectionProps): JSX.Element => { |
|||
const { t } = useTranslation(); |
|||
const user = useAppSelector((state) => state.meshtastic.user); |
|||
|
|||
const { register, handleSubmit, formState } = useForm<Protobuf.User>({ |
|||
defaultValues: user, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setOwner(data); |
|||
}); |
|||
|
|||
return ( |
|||
<PrimaryTemplate |
|||
title="Connection" |
|||
tagline="Settings" |
|||
button={ |
|||
<Button |
|||
icon={<MenuIcon className="w-5 h-5" />} |
|||
onClick={(): void => { |
|||
setNavOpen(!navOpen); |
|||
}} |
|||
circle |
|||
/> |
|||
} |
|||
footer={ |
|||
<Button |
|||
className="px-10 ml-auto" |
|||
icon={<SaveIcon className="w-5 h-5" />} |
|||
disabled={!formState.isDirty} |
|||
active |
|||
border |
|||
> |
|||
{t('strings.save_changes')} |
|||
</Button> |
|||
} |
|||
> |
|||
<div className="w-full max-w-3xl md:max-w-xl"> |
|||
<form className="space-y-2" onSubmit={onSubmit}> |
|||
<Tabs |
|||
tabs={[ |
|||
{ name: 'HTTP', body: <div>HTTP</div> }, |
|||
{ name: 'Bluetooth', body: <div>BLE</div> }, |
|||
{ name: 'Serial', body: <div>SERIAL</div> }, |
|||
]} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue