Skip to content

Commit

Permalink
feat: more changes to support mobile (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mishraomp
mishraomp authored Mar 21, 2024
1 parent 62be88e commit ec67b5f
Show file tree
Hide file tree
Showing 7 changed files with 334 additions and 258 deletions.
9 changes: 4 additions & 5 deletions frontend/src/App.tsx
View file
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
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

0 comments on commit ec67b5f

Please sign in to comment.