administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 09:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: formatting

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-16 11:07:17 -06:00
parent 4dab9a39dc
commit b7f1b381a9
5 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/routes/Cameras.jsx
View File

@ -15,7 +15,7 @@ export default function Cameras() {
return status !== FetchStatus.LOADED ? ( return status !== FetchStatus.LOADED ? (
<ActivityIndicator /> <ActivityIndicator />
) : ( ) : (
<div className='grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4'> <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
{Object.entries(config.cameras).map(([camera, conf]) => ( {Object.entries(config.cameras).map(([camera, conf]) => (
<Camera name={camera} conf={conf} /> <Camera name={camera} conf={conf} />
))} ))}

20
web/src/routes/Debug.jsx
View File

@ -33,9 +33,9 @@ export default function Debug() {
}, [config]); }, [config]);
return ( return (
<div className='space-y-4 p-2 px-4'> <div className="space-y-4 p-2 px-4">
<Heading> <Heading>
Debug <span className='text-sm'>{service.version}</span> Debug <span className="text-sm">{service.version}</span>
</Heading> </Heading>
{!detectors ? ( {!detectors ? (
@ -44,8 +44,8 @@ export default function Debug() {
</div> </div>
) : ( ) : (
<Fragment> <Fragment>
<div data-testid='detectors' className='min-w-0 overflow-auto'> <div data-testid="detectors" className="min-w-0 overflow-auto">
<Table className='w-full'> <Table className="w-full">
<Thead> <Thead>
<Tr> <Tr>
<Th>detector</Th> <Th>detector</Th>
@ -67,8 +67,8 @@ export default function Debug() {
</Table> </Table>
</div> </div>
<div data-testid='cameras' className='min-w-0 overflow-auto'> <div data-testid="cameras" className="min-w-0 overflow-auto">
<Table className='w-full'> <Table className="w-full">
<Thead> <Thead>
<Tr> <Tr>
<Th>camera</Th> <Th>camera</Th>
@ -96,12 +96,12 @@ export default function Debug() {
</Fragment> </Fragment>
)} )}
<div className='relative'> <div className="relative">
<Heading size='sm'>Config</Heading> <Heading size="sm">Config</Heading>
<Button className='absolute top-8 right-4' onClick={handleCopyConfig}> <Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
Copy to Clipboard Copy to Clipboard
</Button> </Button>
<pre className='overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96'> <pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
{JSON.stringify(config, null, 2)} {JSON.stringify(config, null, 2)}
</pre> </pre>
</div> </div>

8
web/src/routes/Events/index.jsx
View File

@ -81,11 +81,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
[apiHost, handleFilter, pathname, scrollToRef] [apiHost, handleFilter, pathname, scrollToRef]
); );
return ( return (
<div className='space-y-4 p-2 px-4 w-full'> <div className="space-y-4 p-2 px-4 w-full">
<Heading>Events</Heading> <Heading>Events</Heading>
<Filters onChange={handleFilter} searchParams={searchParams} /> <Filters onChange={handleFilter} searchParams={searchParams} />
<div className='min-w-0 overflow-auto'> <div className="min-w-0 overflow-auto">
<Table className='min-w-full table-fixed'> <Table className="min-w-full table-fixed">
<TableHead /> <TableHead />
{events.map((props, idx) => { {events.map((props, idx) => {
@ -95,7 +95,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
<Tfoot> <Tfoot>
<Tr> <Tr>
<Td className='text-center p-4' colSpan='8'> <Td className="text-center p-4" colSpan="8">
{status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null} {status === FetchStatus.LOADING ? <ActivityIndicator /> : reachedEnd ? 'No more events' : null}
</Td> </Td>
</Tr> </Tr>

8
web/src/routes/Recording.jsx
View File

@ -16,10 +16,10 @@ export default function Recording({ camera, date, hour, seconds }) {
if (data.length === 0) { if (data.length === 0) {
return ( return (
<div className='space-y-4'> <div className="space-y-4">
<Heading>{camera} Recordings</Heading> <Heading>{camera} Recordings</Heading>
<div class='bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4' role='alert'> <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
<p class='font-bold'>No Recordings Found</p> <p class="font-bold">No Recordings Found</p>
<p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p> <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
</div> </div>
</div> </div>
@ -69,7 +69,7 @@ export default function Recording({ camera, date, hour, seconds }) {
} }
return ( return (
<div className='space-y-4 p-2 px-4'> <div className="space-y-4 p-2 px-4">
<Heading>{camera} Recordings</Heading> <Heading>{camera} Recordings</Heading>
<VideoPlayer <VideoPlayer

82
web/src/routes/StyleGuide.jsx
View File

@ -25,47 +25,47 @@ export default function StyleGuide() {
}; };
return ( return (
<div className='p-2 px-4'> <div className="p-2 px-4">
<Heading size='md'>Button</Heading> <Heading size="md">Button</Heading>
<div className='flex space-x-4 mb-4'> <div className="flex space-x-4 mb-4">
<Button>Default</Button> <Button>Default</Button>
<Button color='red'>Danger</Button> <Button color="red">Danger</Button>
<Button color='green'>Save</Button> <Button color="green">Save</Button>
<Button color='gray'>Gray</Button> <Button color="gray">Gray</Button>
<Button disabled>Disabled</Button> <Button disabled>Disabled</Button>
</div> </div>
<div className='flex space-x-4 mb-4'> <div className="flex space-x-4 mb-4">
<Button type='text'>Default</Button> <Button type="text">Default</Button>
<Button color='red' type='text'> <Button color="red" type="text">
Danger Danger
</Button> </Button>
<Button color='green' type='text'> <Button color="green" type="text">
Save Save
</Button> </Button>
<Button color='gray' type='text'> <Button color="gray" type="text">
Gray Gray
</Button> </Button>
<Button disabled type='text'> <Button disabled type="text">
Disabled Disabled
</Button> </Button>
</div> </div>
<div className='flex space-x-4 mb-4'> <div className="flex space-x-4 mb-4">
<Button type='outlined'>Default</Button> <Button type="outlined">Default</Button>
<Button color='red' type='outlined'> <Button color="red" type="outlined">
Danger Danger
</Button> </Button>
<Button color='green' type='outlined'> <Button color="green" type="outlined">
Save Save
</Button> </Button>
<Button color='gray' type='outlined'> <Button color="gray" type="outlined">
Gray Gray
</Button> </Button>
<Button disabled type='outlined'> <Button disabled type="outlined">
Disabled Disabled
</Button> </Button>
</div> </div>
<Heading size='md'>Dialog</Heading> <Heading size="md">Dialog</Heading>
<Button <Button
onClick={() => { onClick={() => {
setShowDialog(true); setShowDialog(true);
@ -76,8 +76,8 @@ export default function StyleGuide() {
{showDialog ? ( {showDialog ? (
<Dialog <Dialog
onDismiss={handleDismissDialog} onDismiss={handleDismissDialog}
title='This is a dialog' title="This is a dialog"
text='Would you like to see more?' text="Would you like to see more?"
actions={[ actions={[
{ text: 'Yes', color: 'red', onClick: handleDismissDialog }, { text: 'Yes', color: 'red', onClick: handleDismissDialog },
{ text: 'No', onClick: handleDismissDialog }, { text: 'No', onClick: handleDismissDialog },
@ -85,41 +85,41 @@ export default function StyleGuide() {
/> />
) : null} ) : null}
<Heading size='md'>Switch</Heading> <Heading size="md">Switch</Heading>
<div className='flex-col space-y-4 max-w-4xl'> <div className="flex-col space-y-4 max-w-4xl">
<Switch label='Disabled, off' labelPosition='after' /> <Switch label="Disabled, off" labelPosition="after" />
<Switch label='Disabled, on' labelPosition='after' checked /> <Switch label="Disabled, on" labelPosition="after" checked />
<Switch <Switch
label='Enabled, (off initial)' label="Enabled, (off initial)"
labelPosition='after' labelPosition="after"
checked={switches[0]} checked={switches[0]}
id={0} id={0}
onChange={handleSwitch} onChange={handleSwitch}
/> />
<Switch <Switch
label='Enabled, (on initial)' label="Enabled, (on initial)"
labelPosition='after' labelPosition="after"
checked={switches[1]} checked={switches[1]}
id={1} id={1}
onChange={handleSwitch} onChange={handleSwitch}
/> />
<Switch checked={switches[2]} id={2} label='Label before' onChange={handleSwitch} /> <Switch checked={switches[2]} id={2} label="Label before" onChange={handleSwitch} />
<Switch checked={switches[3]} id={3} label='Label after' labelPosition='after' onChange={handleSwitch} /> <Switch checked={switches[3]} id={3} label="Label after" labelPosition="after" onChange={handleSwitch} />
</div> </div>
<Heading size='md'>Select</Heading> <Heading size="md">Select</Heading>
<div className='flex space-x-4 mb-4 max-w-4xl'> <div className="flex space-x-4 mb-4 max-w-4xl">
<Select label='Basic select box' options={['All', 'None', 'Other']} selected='None' /> <Select label="Basic select box" options={['All', 'None', 'Other']} selected="None" />
</div> </div>
<Heading size='md'>TextField</Heading> <Heading size="md">TextField</Heading>
<div className='flex-col space-y-4 max-w-4xl'> <div className="flex-col space-y-4 max-w-4xl">
<TextField label='Default text field' /> <TextField label="Default text field" />
<TextField label='Pre-filled' value='This is my pre-filled value' /> <TextField label="Pre-filled" value="This is my pre-filled value" />
<TextField label='With help' helpText='This is some help text' /> <TextField label="With help" helpText="This is some help text" />
<TextField label='Leading icon' leadingIcon={ArrowDropdown} /> <TextField label="Leading icon" leadingIcon={ArrowDropdown} />
<TextField label='Trailing icon' trailingIcon={ArrowDropup} /> <TextField label="Trailing icon" trailingIcon={ArrowDropup} />
</div> </div>
</div> </div>
); );