noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Setup Playwright #14

Merged
noahspannbauer merged 8 commits from feature/13-setup-playwright into main 2024-05-22 22:12:17 -04:00
Conversation 0 Commits 8 Files Changed 40 +314 -324
27 changed files with 314 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d44d27e8b1 - Show all commits

8
client/.eslintrc.cjs → app/.eslintrc.cjs
View File

@@ -4,7 +4,7 @@ module.exports = {
extends: [ extends: [
'eslint:recommended', 'eslint:recommended',
'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended', 'plugin:react-hooks/recommended'
], ],
ignorePatterns: ['dist', '.eslintrc.cjs'], ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
@@ -12,7 +12,7 @@ module.exports = {
rules: { rules: {
'react-refresh/only-export-components': [ 'react-refresh/only-export-components': [
'warn', 'warn',
{ allowConstantExport: true }, { allowConstantExport: true }
], ]
}, }
}; };

0
client/.gitignore → app/.gitignore vendored
View File

4
client/README.md → app/README.md
View File

@@ -20,8 +20,8 @@ export default {
ecmaVersion: 'latest', ecmaVersion: 'latest',
sourceType: 'module', sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'], project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname, tsconfigRootDir: __dirname
}, }
}; };
``` ```

0
client/index.html → app/index.html
View File

0
client/package-lock.json → app/package-lock.json generated
View File

0
client/package.json → app/package.json
View File

4
client/postcss.config.js → app/postcss.config.js
View File

@@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
}; };

0
client/public/vite.svg → app/public/vite.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

11
client/src/App.tsx → app/src/App.tsx
View File

@@ -4,16 +4,15 @@ import Logbook from './components/logbook/Logbook';
import Checklists from './components/checklists/Checklists'; import Checklists from './components/checklists/Checklists';
import Pilots from './components/pilots/Pilots'; import Pilots from './components/pilots/Pilots';
const App: React.FC<unknown> = () => { const App: React.FC<unknown> = () => {
return ( return (
<Routes> <Routes>
<Route path='/' element={<Flights />} /> <Route path="/" element={<Flights />} />
<Route path='logbook' element={<Logbook />} /> <Route path="logbook" element={<Logbook />} />
<Route path='checklists' element={<Checklists />} /> <Route path="checklists" element={<Checklists />} />
<Route path='pilots' element={<Pilots />} /> <Route path="pilots" element={<Pilots />} />
</Routes> </Routes>
); );
} };
export default App; export default App;

0
client/src/assets/react.svg → app/src/assets/react.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

12
app/src/components/logbook/Logbook.tsx Normal file
View File

@@ -0,0 +1,12 @@
import SiteNav from '../siteNav/SiteNav';
const Logbook: React.FC<unknown> = () => {
return (
<div>
<SiteNav />
<div>Logbook goes here</div>
</div>
);
};
export default Logbook;

122
app/src/components/logbookEntryForm/LogbookEntryForm.tsx Normal file
View File

@@ -0,0 +1,122 @@
import React from 'react';
import {
Accordion,
AccordionItem,
Button,
DatePicker,
Input
} from '@nextui-org/react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
const LogbookEntryForm: React.FC<unknown> = () => {
const { control, handleSubmit } = useForm();
const onSubmit = (data: unknown) => {
console.log(data);
};
return (
<form className="m-10" onSubmit={handleSubmit(onSubmit)}>
<div className="grid grid-cols-2 gap-4">
<div className="self-center">
<label>Date</label>
</div>
<div>
<Controller
name="date"
control={control}
render={({ field }) => <DatePicker labelPlacement="outside-left" />}
/>
</div>
<div className="self-center">
<label>Aircraft Type</label>
</div>
<div>
<Controller
name="aircraftType"
control={control}
render={({ field }) => (
<Input fullWidth={true} labelPlacement="outside-left" />
)}
/>
</div>
<div className="self-center">
<label>Aircraft Identity</label>
</div>
<div>
<Controller
name="aircraftIdent"
control={control}
render={({ field }) => (
<Input fullWidth={true} labelPlacement="outside-left" />
)}
/>
</div>
<div className="self-center">
<label>Route To</label>
</div>
<div>
<Controller
name="routeTo"
control={control}
render={({ field }) => <Input />}
/>
</div>
<div className="self-center">
<label>Route From</label>
</div>
<div>
<Controller
name="routeFrom"
control={control}
render={({ field }) => <Input />}
/>
</div>
<div className="self-center">
<label>Duration of Flight</label>
</div>
<div>
<Controller
name="flightDuration"
control={control}
render={({ field }) => <Input />}
/>
</div>
<div className="self-center">
<label>Single Engine Land</label>
</div>
<div>
<Controller
name="aircraftSEL"
control={control}
render={({ field }) => <Input />}
/>
</div>
<div className="col-span-2">
<Accordion>
<AccordionItem title="Aircraft Category and Class">
<div className="self-center">
<label>Single Engine Land</label>
</div>
<div>
<Controller
name="aircraftSEL"
control={control}
render={({ field }) => <Input />}
/>
</div>
</AccordionItem>
</Accordion>
</div>
<div className="col-span-2 justify-self-end">
<Button color="default">Cancel</Button>
<Button className="ml-10" color="primary">
Save
</Button>
</div>
</div>
</form>
);
};
export default LogbookEntryForm;

85
app/src/components/pilotForm/PilotForm.tsx Normal file
View File

@@ -0,0 +1,85 @@
import {
Accordion,
AccordionItem,
Button,
DatePicker,
Input,
Select,
SelectItem
} from '@nextui-org/react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
const PilotForm: React.FC<unknown> = () => {
const { control, handleSubmit } = useForm();
const onSubmit = (data: unknown) => {
console.log(data);
};
return (
<form className="m-10" onSubmit={handleSubmit(onSubmit)}>
<div className="grid grid-cols-2 gap-4">
<div className="self-center">
<label>First Name</label>
</div>
<div>
<Controller
name="firstName"
control={control}
render={({ field }) => <Input />}
/>
</div>
<div className="self-center">
<label>Last Name</label>
</div>
<div>
<Controller
name="lastName"
control={control}
render={({ field }) => <Input />}
/>
</div>
</div>
<Accordion>
<AccordionItem title="Medical Certificate">
<div className="grid grid-cols-2 gap-4">
<div className="self-center">
<label>Class</label>
</div>
<div>
<Controller
name="medicalClass"
control={control}
render={({ field }) => (
<Select>
<SelectItem key="first" value="First">
First
</SelectItem>
<SelectItem key="second" value="Second">
Second
</SelectItem>
<SelectItem key="Third" value="Third">
Third
</SelectItem>
</Select>
)}
/>
</div>
<div className="self-center">
<label>Expires</label>
</div>
<div>
<Controller
name="medicalExpiration"
control={control}
render={({ field }) => <DatePicker />}
/>
</div>
</div>
</AccordionItem>
</Accordion>
</form>
);
};
export default PilotForm;

15
app/src/components/pilots/Pilots.tsx Normal file
View File

@@ -0,0 +1,15 @@
import SiteNav from '../siteNav/SiteNav';
import PilotForm from '../pilotForm/PilotForm';
const Pilots: React.FC<unknown> = () => {
return (
<div>
<SiteNav />
<div>
<PilotForm />
</div>
</div>
);
};
export default Pilots;

59
app/src/components/siteNav/SiteNav.tsx Normal file
View File

@@ -0,0 +1,59 @@
import {
Avatar,
Link,
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem,
Button
} from '@nextui-org/react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { useIsAuthenticated, useMsal } from '@azure/msal-react';
const SiteNav: React.FC<unknown> = () => {
const isAuthenticated = useIsAuthenticated();
const { accounts, instance } = useMsal();
const initializeLogin = () => {
instance.loginRedirect();
};
console.log(accounts);
return (
<Navbar isBordered>
<NavbarBrand>Site Logo Goes Here</NavbarBrand>
<NavbarContent justify="center">
<NavbarItem>
<Link>
<ReactRouterLink to="/">Flights</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to="/logbook">Logbook</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to="/checklists">Checklists</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to="/pilots">Pilots</ReactRouterLink>
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
{!isAuthenticated && (
<Button as={Link} color="primary" href="#" onClick={initializeLogin}>
Login
</Button>
)}
{isAuthenticated && <Avatar name={accounts[0]?.username} />}
</NavbarContent>
</Navbar>
);
};
export default SiteNav;

0
client/src/index.css → app/src/index.css
View File

7
client/src/main.tsx → app/src/main.tsx
View File

@@ -10,10 +10,11 @@ import { BrowserRouter } from 'react-router-dom';
const configuration: Configuration = { const configuration: Configuration = {
auth: { auth: {
clientId: 'd3562a45-050d-4f9a-baed-0497c7156924', clientId: 'd3562a45-050d-4f9a-baed-0497c7156924',
authority: 'https://login.microsoftonline.com/0f23652e-4b15-420f-991e-3d6fc769a31d', authority:
'https://login.microsoftonline.com/0f23652e-4b15-420f-991e-3d6fc769a31d',
redirectUri: 'http://localhost:5173' redirectUri: 'http://localhost:5173'
} }
} };
const pca = new PublicClientApplication(configuration); const pca = new PublicClientApplication(configuration);
@@ -26,5 +27,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
</BrowserRouter> </BrowserRouter>
</NextUIProvider> </NextUIProvider>
</MsalProvider> </MsalProvider>
</React.StrictMode>, </React.StrictMode>
); );

0
client/src/vite-env.d.ts → app/src/vite-env.d.ts vendored
View File

6
client/tailwind.config.js → app/tailwind.config.js
View File

@@ -5,11 +5,11 @@ export default {
content: [ content: [
'./index.html', './index.html',
'./src/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}', './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
], ],
theme: { theme: {
extend: {}, extend: {}
}, },
darkMode: 'class', darkMode: 'class',
plugins: [nextui()], plugins: [nextui()]
}; };

0
client/tsconfig.json → app/tsconfig.json
View File

0
client/tsconfig.node.json → app/tsconfig.node.json
View File

2
client/vite.config.ts → app/vite.config.ts
View File

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()]
}); });

14
client/src/components/logbook/Logbook.tsx
View File

@@ -1,14 +0,0 @@
import SiteNav from '../siteNav/SiteNav';
const Logbook: React.FC<unknown> = () => {
return (
<div>
<SiteNav />
<div>
Logbook goes here
</div>
</div>
)
}
export default Logbook;

138
client/src/components/logbookEntryForm/LogbookEntryForm.tsx
View File

@@ -1,138 +0,0 @@
import React from 'react';
import { Accordion, AccordionItem, Button, DatePicker, Input } from '@nextui-org/react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
const LogbookEntryForm: React.FC<unknown> = () => {
const { control, handleSubmit } = useForm();
const onSubmit = (data: unknown) => {
console.log(data)
}
return (
<form className='m-10' onSubmit={handleSubmit(onSubmit)}>
<div className='grid grid-cols-2 gap-4'>
<div className='self-center'>
<label>Date</label>
</div>
<div>
<Controller
name='date'
control={control}
render={({ field }) => (
<DatePicker
labelPlacement='outside-left'
/>
)}
/>
</div>
<div className='self-center'>
<label>Aircraft Type</label>
</div>
<div>
<Controller
name='aircraftType'
control={control}
render={({ field }) => (
<Input
fullWidth={true}
labelPlacement='outside-left'
/>
)}
/>
</div>
<div className='self-center'>
<label>Aircraft Identity</label>
</div>
<div>
<Controller
name='aircraftIdent'
control={control}
render={({ field }) => (
<Input
fullWidth={true}
labelPlacement='outside-left'
/>
)}
/>
</div>
<div className='self-center'>
<label>Route To</label>
</div>
<div>
<Controller
name='routeTo'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
<div className='self-center'>
<label>Route From</label>
</div>
<div>
<Controller
name='routeFrom'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
<div className='self-center'>
<label>Duration of Flight</label>
</div>
<div>
<Controller
name='flightDuration'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
<div className='self-center'>
<label>Single Engine Land</label>
</div>
<div>
<Controller
name='aircraftSEL'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
<div className='col-span-2'>
<Accordion>
<AccordionItem title='Aircraft Category and Class'>
<div className='self-center'>
<label>Single Engine Land</label>
</div>
<div>
<Controller
name='aircraftSEL'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
</AccordionItem>
</Accordion>
</div>
<div className='col-span-2 justify-self-end'>
<Button color='default'>
Cancel
</Button>
<Button className='ml-10' color='primary'>
Save
</Button>
</div>
</div>
</form>
)
}
export default LogbookEntryForm;

83
client/src/components/pilotForm/PilotForm.tsx
View File

@@ -1,83 +0,0 @@
import { Accordion, AccordionItem, Button, DatePicker, Input, Select, SelectItem } from '@nextui-org/react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
const PilotForm: React.FC<unknown> = () => {
const { control, handleSubmit } = useForm();
const onSubmit = (data: unknown) => {
console.log(data);
}
return (
<form className='m-10' onSubmit={handleSubmit(onSubmit)}>
<div className='grid grid-cols-2 gap-4'>
<div className='self-center'>
<label>First Name</label>
</div>
<div>
<Controller
name='firstName'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
<div className='self-center'>
<label>Last Name</label>
</div>
<div>
<Controller
name='lastName'
control={control}
render={({ field }) => (
<Input />
)}
/>
</div>
</div>
<Accordion>
<AccordionItem title='Medical Certificate'>
<div className='grid grid-cols-2 gap-4'>
<div className='self-center'>
<label>Class</label>
</div>
<div>
<Controller
name='medicalClass'
control={control}
render={({ field }) => (
<Select>
<SelectItem key='first' value='First'>
First
</SelectItem>
<SelectItem key='second' value='Second'>
Second
</SelectItem>
<SelectItem key='Third' value='Third'>
Third
</SelectItem>
</Select>
)}
/>
</div>
<div className='self-center'>
<label>Expires</label>
</div>
<div>
<Controller
name='medicalExpiration'
control={control}
render={({ field }) => (
<DatePicker />
)}
/>
</div>
</div>
</AccordionItem>
</Accordion>
</form>
)
}
export default PilotForm;

15
client/src/components/pilots/Pilots.tsx
View File

@@ -1,15 +0,0 @@
import SiteNav from '../siteNav/SiteNav';
import PilotForm from '../pilotForm/PilotForm';
const Pilots: React.FC<unknown> = () => {
return (
<div>
<SiteNav />
<div>
<PilotForm />
</div>
</div>
)
}
export default Pilots;

53
client/src/components/siteNav/SiteNav.tsx
View File

@@ -1,53 +0,0 @@
import { Avatar, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem, Button } from '@nextui-org/react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { useIsAuthenticated, useMsal } from '@azure/msal-react';
const SiteNav: React.FC<unknown> = () => {
const isAuthenticated = useIsAuthenticated();
const { accounts, instance } = useMsal();
const initializeLogin = () => {
instance.loginRedirect();
}
console.log(accounts)
return (
<Navbar isBordered>
<NavbarBrand>
Site Logo Goes Here
</NavbarBrand>
<NavbarContent justify='center'>
<NavbarItem>
<Link>
<ReactRouterLink to='/'>Flights</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to='/logbook'>Logbook</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to='/checklists'>Checklists</ReactRouterLink>
</Link>
</NavbarItem>
<NavbarItem>
<Link>
<ReactRouterLink to='/pilots'>Pilots</ReactRouterLink>
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify='end'>
{!isAuthenticated &&
<Button as={Link} color='primary' href='#' onClick={initializeLogin}>Login</Button>
}
{isAuthenticated &&
<Avatar name={accounts[0]?.username} />
}
</NavbarContent>
</Navbar>
)
}
export default SiteNav;