diff --git a/frontend/.eslintrc b/frontend/.eslintrc new file mode 100644 index 00000000..6878e9a6 --- /dev/null +++ b/frontend/.eslintrc @@ -0,0 +1,13 @@ +{ + "parserOptions": { + "sourceType": "module", + "ecmaVersion": 2021, + "ecmaFeatures": { + "jsx": true, + "templateStrings": true, + "modules": true, + "experimentalObjectRestSpread": true, + "spread": true + } + } +} diff --git a/frontend/index.html b/frontend/index.html index 194a8554..4f30a9a4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,4 +1,4 @@ - + @@ -6,8 +6,16 @@ - - + + + Organics Info diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json new file mode 100644 index 00000000..3f69d378 --- /dev/null +++ b/frontend/public/manifest.json @@ -0,0 +1,13 @@ +{ + "name": "Organics Info", + "short_name": "OMRR", + "icons": [ + { + "src": "favicon.ico", + "sizes": "62x55", + "type": "image/ico" + } + ], + "start_url": "/", + "display": "standalone" +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f8505c80..c44b7176 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,6 +10,7 @@ import { RootState } from '@/app/store' import CircularProgress from '@mui/material/CircularProgress' import 'leaflet/dist/leaflet.css' import { Snackbar } from '@mui/material' +import HeaderWithRouting from '@/components/HeaderWithRouting' export default function App() { const status: string = useSelector((state: RootState) => state.omrr.status) @@ -51,7 +52,7 @@ export default function App() { ) : ( <> -
+ diff --git a/frontend/src/components/AuthorizationDetails.tsx b/frontend/src/components/AuthorizationDetails.tsx index c74c011b..c7e9f73d 100644 --- a/frontend/src/components/AuthorizationDetails.tsx +++ b/frontend/src/components/AuthorizationDetails.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useLocation } from 'react-router-dom' -import { Button, Card, Chip, Grid } from '@mui/material' +import { Button, Chip, Grid } from '@mui/material' import { MapContainer, Marker, TileLayer } from 'react-leaflet' import { useNavigate } from 'react-router' import L, { LatLngLiteral } from 'leaflet' @@ -9,154 +9,1082 @@ import shadow from '../assets/marker-shadow.png' import { useTheme } from '@mui/material/styles' import useMediaQuery from '@mui/material/useMediaQuery' import OmrrData from '@/interfaces/omrr' +import CheckIcon from '@mui/icons-material/Check' +import CloseIcon from '@mui/icons-material/Close' function authorizationSection(mdMatches: boolean, data: OmrrData) { - return <> - {mdMatches && <> - - - Authorization Status - - - Authorization Number - - - Effective/Issue Date - - - Last Amendment Date - - - - - - - - {data['Authorization Number']} - - - {data['Effective/Issue Date']?.toString()} - - - {data['Last Amendment Date']?.toString()} - - - } - {!mdMatches && <> - - - Authorization Status - - - Authorization Number - - - - - - - - {data['Authorization Number']} - - - - - Effective/Issue Date - - - Last Amendment Date - - + return ( + <> + {mdMatches && ( + <> + + + + Authorization Status + + + + + Authorization Number + + + + + Effective/Issue Date + + + + + Last Amendment Date + + + + + + + + + {data['Authorization Number']} + + + {data['Effective/Issue Date']?.toString()} + + + {data['Last Amendment Date']?.toString()} + + + + )} + {!mdMatches && ( + <> + + + + Authorization Status + + + + + Authorization Number + + + + + + + + + {data['Authorization Number']} + + + + + + Effective/Issue Date + + + + + Last Amendment Date + + + - - - {data['Effective/Issue Date']?.toString()} - - - {data['Last Amendment Date']?.toString()} - - - } - + + + {data['Effective/Issue Date']?.toString()} + + + {data['Last Amendment Date']?.toString()} + + + + )} + + ) +} + +function getAuthorizationGridOthersForMdAbove(data: OmrrData) { + return ( + <> + {(data['Authorization Type']?.toLowerCase() === 'permit' + || data['Authorization Type']?.toLowerCase() === 'operational certificate' + || data['Authorization Type']?.toLowerCase() === 'approval') && ( + <> + + + + Authorization Details + + + + + Authorization Type + + + + + {data['Authorization Type']} + + + + + + + + + Regulation + + + + + Waste Discharge Regulation + + + + + + + + + Schedule + + + + + {data['Waste Discharge Regulation']} + + + + + + + + + Permits, Operational Certificates, and Approvals are necessary + for composting operations that handle 5,000 tonnes or more of + finished compost per year from food waste or biosolids, as + specified in the Organic Matter Recycling Regulation. + + + + + )} + + ) +} + +function getAuthorizationGridNotificationCompostForMdAbove(data: OmrrData) { + const theme = useTheme() + const mdMatches = useMediaQuery(theme.breakpoints.up('md')) + return ( + <> + {data['Authorization Type']?.toLowerCase() === 'notification' && + data['Operation Type']?.toLowerCase() === + 'compost production facility' && ( + <> + + + + Authorization Details + + + + + Authorization Type + + + + + {data['Authorization Type']} + + + + + + + + + Operation Type + + + + + {data['Operation Type']} + + + + + + + + + Regulation + + + + + Organic Matter Recycling Regulation + + + + + + + + + + + + + Types of Compost Produced + + + + + {data['Type of Compost Produced']} + + + + + + + + + Facility Design Capacity (tonnes per year) + + + + + {data['Facility Design Capacity (t/y)']} + + + + + + + + + + + Organic Matter Used for Composting + + + + + +
+ {data['Yard Waste'] ? ( + + ) : ( + + )} + + Yard Waste + +
+ + +
+ {data['Biosolids'] ? ( + + ) : ( + + )} + + Biosolids + +
+ + +
+ {data['Whey'] ? ( + + ) : ( + + )} + + Whey + +
+ + +
+ {data['Untreated and Unprocessed Wood'] ? ( + + ) : ( + + )} + + Untreated and Unprocessed Wood + +
+ + + + + + +
+ {data['Poultry Carcasses'] ? ( + + ) : ( + + )} + + Poultry Carcasses + +
+ + +
+ {data['Fish Wastes'] ? ( + + ) : ( + + )} + + Fish Wastes + +
+ + +
+ {data['Food Waste'] ? ( + + ) : ( + + )} + + Food Waste + +
+ + +
+ {data['Brewary Waste/Wine Waste'] ? ( + + ) : ( + + )} + + Brewary Waste/Wine Waste + +
+ + + + + + +
+ {data['Animal Bedding'] ? ( + + ) : ( + + )} + + Animal Bedding + +
+ + +
+ {data['Domestic Septic Tank Sludge'] ? ( + + ) : ( + + )} + + Domestic Septic Tank Sludge + +
+ + +
+ {data['Hatchery Waste'] ? ( + + ) : ( + + )} + + Hatchery Waste + +
+ + +
+ {data['Manure'] ? ( + + ) : ( + + )} + + Manure + +
+ + + + + + +
+ {data['Milk Processing Waste'] ? ( + + ) : ( + + )} + + Milk Processing Waste + +
+ + + + + + + + )} + + ) +} + +function getAuthorizationGridNotificationLandApplication(data: OmrrData) { + return ( + <> + {data['Authorization Type']?.toLowerCase() === 'notification' && + data['Operation Type']?.toLowerCase()?.includes('land application') && ( + <> + + + + Authorization Details + + + + + Authorization Type + + + + + {data['Authorization Type']} + + + + + + + + + Operation Type + + + + + {data['Operation Type']} + + + + + + + + + Regulation + + + + + Organic Matter Recycling Regulation + + + + + + + + + + + + + Material Land Applied + + + + + {data['Material Land Applied']} + + + + + + + + + Intended Date of Land Application + + + + + {data['Intended Dates of Land Applica']} + + + + + + + + + )} + + ) +} + +function getAuthorizationGridNotificationOthers(data: OmrrData) { + return ( + <> + {data['Authorization Type']?.toLowerCase() === 'notification' && + data['Operation Type']?.trim() === '' && ( + <> + + + + Authorization Details + + + + + + + + + Authorization Type + + + + + {data['Authorization Type']} + + + + + + + + + Regulation + + + + + Organic Matter Recycling Regulation + + + + + + + + + Please note that authorizations issued prior to 2007 are currently categorized as historical data. The Authorization Management System (AMS), which houses authorization documentation, has constraints on the historical data it provides. For additional information, please contact us. + + + + + )} + + ) } export default function AuthorizationDetails() { const theme = useTheme() const mdMatches = useMediaQuery(theme.breakpoints.up('md')) + const smMatches = useMediaQuery(theme.breakpoints.up('sm')) + const xsMatches = useMediaQuery(theme.breakpoints.up('xs')) + const lgMatches = useMediaQuery(theme.breakpoints.up('lg')) //define red icon const redIcon = new L.Icon({ //read from assets @@ -173,63 +1101,200 @@ export default function AuthorizationDetails() { } const location = useLocation() const data = location?.state?.data - const facilityLocation: LatLngLiteral = { lat: data.Latitude, lng: data.Longitude } + const authorizationType = data && data['Authorization Type'] + let facilityLatLng: LatLngLiteral | undefined = undefined + if (data && data.Latitude && data.Longitude) { + facilityLatLng = { lat: data.Latitude, lng: data.Longitude } + } + let marginTop:string = '0em' + if(lgMatches || mdMatches){ + marginTop = '5em' + }else if(smMatches){ + marginTop = '4em' + }else if(xsMatches){ + marginTop = '5em' + } + + return ( - + - + borderRadius: '4px', + textTransform: 'none', + order: 1, + '&:hover': { + background: '#053662', + color: '#ffffff', + boxShadow: 'none', + }, + }} + onClick={() => buttonClicked('/search')} + > + Back To Search + - - + + - {data['Regulated Party']} + }} + > + {data['Regulated Party']} + {authorizationSection(mdMatches, data)} - - - - - - + + - - - - + + + + Location Details + + + + + Facility Location{' '} + + + + + {data['Facility Location']}{' '} + + + + + + + + + Latitude{' '} + + + + + {facilityLatLng?.lat}{' '} + + + + + + + + + Longitude{' '} + + + + + {facilityLatLng?.lng}{' '} + + + + + + + - + {facilityLatLng && ( + + + + + + + )} - - - {/* Content of the third card */} + + {getAuthorizationGridOthersForMdAbove(data)} + {getAuthorizationGridNotificationCompostForMdAbove(data)} + {getAuthorizationGridNotificationLandApplication(data)} + {getAuthorizationGridNotificationOthers(data)} ) diff --git a/frontend/src/components/AuthorizationList.tsx b/frontend/src/components/AuthorizationList.tsx index e855bdde..df73b634 100644 --- a/frontend/src/components/AuthorizationList.tsx +++ b/frontend/src/components/AuthorizationList.tsx @@ -35,8 +35,11 @@ import { setSearchBy, } from '@/features/omrr/omrr-slice' import { useNavigate } from 'react-router' - +import { useTheme } from '@mui/material/styles' +import useMediaQuery from '@mui/material/useMediaQuery' export default function AuthorizationList() { + const theme = useTheme() + const mdMatches = useMediaQuery(theme.breakpoints.up('md')) const navigate = useNavigate() const buttonClicked = (route: any, data: any) => { navigate(route, { state: { data: data } }) // reset the state @@ -45,7 +48,7 @@ export default function AuthorizationList() { const { filteredValue, expand, - omrrFilter, + notificationFilter, permitFilter, approvalFilter, compostFacilityFilter, @@ -55,11 +58,13 @@ export default function AuthorizationList() { searchBy, page, globalTextSearchFilter, + compostFacilityFilterDisabled, + landApplicationBioSolidsFilterDisabled, } = useSelector((state: RootState) => state.omrr) - /*const [expand, setExpand] = useState(false) - const [location, setLocation] = useState(null)*/ const pagination = ( - + ) - const handleLocation = () => { - navigator.geolocation.getCurrentPosition((position) => { - dispatch( - setLocation({ - latitude: position.coords.latitude, - longitude: position.coords.longitude, - }), - ) - console.log(location) - }) - } const headerCard = (