Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: more changes to support mobile #48

Merged
merged 1 commit into from
Mar 21, 2024
Merged

feat: more changes to support mobile #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ import { useEffect } from 'react'
import { RootState } from '@/app/store'
import CircularProgress from '@mui/material/CircularProgress'
import Snackbar from '@mui/material/Snackbar'
import Alert from '@mui/material/Alert'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css' // Import Leaflet CSS
import 'leaflet/dist/leaflet.css'

export default function App() {
const status: string = useSelector((state: RootState) => state.omrr.status)
const dispatch = useDispatch()
Expand All @@ -20,11 +19,11 @@ export default function App() {
dispatch(fetchOMRRData())
}, [dispatch])
return (
<Grid container spacing={0}>
<Grid container sx={{ flexGrow: 1 }}>
<Grid item xs={12}>
<Header />
</Grid>
<Grid item style={{ flexGrow: 1, minHeight: '93vh' }} xs={12}>
<Grid item xs={12}>
{status === 'loading' ? (
<CircularProgress />
) : status === 'failed' ? (
Expand Down
281 changes: 189 additions & 92 deletions frontend/src/components/AuthorizationDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,87 @@
import React from 'react'
import { useLocation } from 'react-router-dom'
import { Button, Card, Grid, Stack,Chip } from '@mui/material'
import { Button, Card, Chip, Grid } from '@mui/material'
import { MapContainer, Marker, TileLayer } from 'react-leaflet'
import { useNavigate } from 'react-router'
import L, { LatLngLiteral } from 'leaflet'
// @ts-ignore
import pin from '../assets/marker-icon-2x-red.png'
// @ts-ignore
import shadow from '../assets/marker-shadow.png'
import { useTheme } from '@mui/material/styles'
import useMediaQuery from '@mui/material/useMediaQuery'
import OmrrData from '@/interfaces/omrr'

export default function AuthorizationDetails() {
//define red icon
const redIcon = new L.Icon({
//read from assets
iconUrl: pin,
shadowUrl: shadow,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
})
const navigate = useNavigate()
const buttonClicked = (route: any) => {
navigate(route) // reset the state
}
const location = useLocation()
const data = location?.state?.data
const facilityLocation: LatLngLiteral = { lat: data.Latitude, lng: data.Longitude }
return (

<Grid container spacing={1} sx={{marginTop:'6em', marginLeft:'2em', maxWidth:'95%' }}>
<Grid item xs={3} sm={6} md={12}>
<Button sx={{
background: '#8D8D8D',
padding: '8px 16px',
borderRadius: '6px;',
color:'#000000',
textTransform: 'none',
}} onClick={() => buttonClicked('/search')}>Back To Search</Button>
</Grid>
<Grid item xs={3} sm={6} md={12} >
<Stack direction="row" justifyContent="space-between">
<span style={{
color:'#000000',
fontFamily: 'BCSans',
fontStyle: 'bold',
fontSize: '2em',
lineHeight: '3em',
}}>{data['Regulated Party']}</span>
</Stack>
<Grid container direction="row" spacing={1}>
<Grid item xs={3}>
function authorizationSection(mdMatches: boolean, data: OmrrData) {
return <>
{mdMatches && <>
<Grid container direction="row" sx={{ marginTop: '2em' }} spacing={1}>
<Grid item xs={3}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '1em',
lineHeight: '1em',
}}>Authorization Status</span>
</Grid>
<Grid item xs={3}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '1em',
lineHeight: '1em',
}}>Authorization Number</span>
</Grid>
<Grid item xs={3}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '1em',
lineHeight: '1em',
}}>Effective/Issue Date</span>
</Grid>
<Grid item xs={3}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: '1em',
lineHeight: '1em',
}}>Last Amendment Date</span>
</Grid>
</Grid>
<Grid container direction="row" spacing={1} sx={{ marginTop: '0.2em' }}>
<Grid item xs={3}>
<Chip
sx={{
background:
data['Authorization Status'] === 'Active'
? '#353433'
: '#605E5C',
color: '#ffffff',
}}
label={data['Authorization Status']}
/>
</Grid>
<Grid item xs={3}>
<span>{data['Authorization Number']}</span>
</Grid>
<Grid item xs={3}>
<span>{data['Effective/Issue Date']?.toString()}</span>
</Grid>
<Grid item xs={3}>
<span>{data['Last Amendment Date']?.toString()}</span>
</Grid>
</Grid></>
}
{!mdMatches && <>
<Grid container direction="row" sx={{ marginTop: '2em' }} spacing={0}>
<Grid item xs={6}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
Expand All @@ -59,8 +90,8 @@ export default function AuthorizationDetails() {
fontSize: '1em',
lineHeight: '1em',
}}>Authorization Status</span>
</Grid>
<Grid item xs={3}>
</Grid>
<Grid item xs={6}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
Expand All @@ -69,8 +100,27 @@ export default function AuthorizationDetails() {
fontSize: '1em',
lineHeight: '1em',
}}>Authorization Number</span>
</Grid>
<Grid item xs={3}>
</Grid>
</Grid>
<Grid container direction="row" sx={{ marginTop: '.2em' }} spacing={0}>
<Grid item xs={6}>
<Chip
sx={{
background:
data['Authorization Status'] === 'Active'
? '#353433'
: '#605E5C',
color: '#ffffff',
}}
label={data['Authorization Status']}
/>
</Grid>
<Grid item xs={6}>
<span>{data['Authorization Number']}</span>
</Grid>
</Grid>
<Grid container direction="row" sx={{ marginTop: '2em' }} spacing={0}>
<Grid item xs={6}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
Expand All @@ -79,8 +129,8 @@ export default function AuthorizationDetails() {
fontSize: '1em',
lineHeight: '1em',
}}>Effective/Issue Date</span>
</Grid>
<Grid item xs={3}>
</Grid>
<Grid item xs={6}>
<span style={{
color: '#000000',
fontFamily: 'BCSans',
Expand All @@ -89,51 +139,98 @@ export default function AuthorizationDetails() {
fontSize: '1em',
lineHeight: '1em',
}}>Last Amendment Date</span>
</Grid>
</Grid>
</Grid>

<Grid container direction="row" sx={{ marginTop: '.2em' }} spacing={0}>
<Grid item xs={6}>
<span>{data['Effective/Issue Date']?.toString()}</span>
</Grid>
<Grid item xs={6}>
<span>{data['Last Amendment Date']?.toString()}</span>
</Grid>
</Grid></>
}
</>
}

export default function AuthorizationDetails() {
const theme = useTheme()
const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
//define red icon
const redIcon = new L.Icon({
//read from assets
iconUrl: pin,
shadowUrl: shadow,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
})
const navigate = useNavigate()
const buttonClicked = (route: any) => {
navigate(route) // reset the state
}
const location = useLocation()
const data = location?.state?.data
const facilityLocation: LatLngLiteral = { lat: data.Latitude, lng: data.Longitude }
return (
<Grid container spacing={1} sx={{ marginTop: '6em', marginLeft: '2em', maxWidth: '95%' }}>
<Grid item xs={12}>
<Button sx={{
background: '#053662',
color: '#ffffff',
borderRadius: '4px',
textTransform: 'none',
order: 1,
'&:hover': {
background: '#053662',
color: '#ffffff',
boxShadow: 'none',
},
}} onClick={() => buttonClicked('/search')}>Back To Search</Button>
</Grid>
<Grid item xs={12} sx={{ marginTop: '2em' }}>
<Grid container direction={{ xs: 'column', lg: 'row' }}>
<Grid item xs={12}>
<span style={{
color: '#000000',
fontFamily: 'BCSans-Bold',
fontSize: '1.5em',
}}>{data['Regulated Party']}</span>
</Grid>
<Grid container direction="row" spacing={1}>
<Grid item xs={3}>
<Chip
sx={{
background:
data['Authorization Status'] === 'Active'
? '#353433'
: '#605E5C',
color: '#ffffff',
}}
label={data['Authorization Status']}
</Grid>
{authorizationSection(mdMatches, data)}

</Grid>
<Grid item xs={12} sx={{ marginTop: '2em' }}>
<Grid container direction="row" spacing={1}>
<Grid item xs={6}>

</Grid>
<Grid item xs={6}>
<MapContainer
id="map"
center={facilityLocation}
scrollWheelZoom={false}
zoom={12}
style={{ height: '60em' }}
className="map-container"
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</Grid>
<Grid item xs={3}>
<span>{data['Authorization Number']}</span>
</Grid>
<Grid item xs={3}>
<span>{data['Effective/Issue Date']}</span>
</Grid>
<Grid item xs={3}>
<span>{data['Last Amendment Date']}</span>
</Grid>
<Marker key={data['Authorization Number']} position={facilityLocation} icon={redIcon} />
</MapContainer>
</Grid>

</Grid>
<Grid item xs={12} sx={{marginTop:'2em'}}>
<MapContainer
id="map"
center={facilityLocation}
scrollWheelZoom={false}
zoom={12}
style={{ height: '60em' }}
className="map-container"
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker key={data['Authorization Number']} position={facilityLocation} icon={redIcon} />
</MapContainer>
</Grid>
<Grid item xs={4}>
<Card>{/* Content of the third card */}</Card>
</Grid>

</Grid>
<Grid item xs={4}>
<Card>{/* Content of the third card */}</Card>
</Grid>
</Grid>
)
}
Loading