-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
410 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
service_account.json | ||
service_account*.json |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export interface HazmatMaterial { | ||
unNumber: string; | ||
name: string; | ||
resistanceTemperature: number; | ||
resistanceTime?: string; | ||
damage?: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
import Box from '@mui/material/Box'; | ||
import Button from '@mui/material/Button'; | ||
import Card from '@mui/material/Card'; | ||
import CardActions from '@mui/material/CardActions'; | ||
import CardContent from '@mui/material/CardContent'; | ||
import TextField from '@mui/material/TextField'; | ||
import Typography from '@mui/material/Typography'; | ||
import { useCallback, useState } from 'react'; | ||
import useHazmatDb from '../../hooks/useHazmatDb'; | ||
|
||
export default function SchadstoffPage() { | ||
const [unNumber, setUnNumber] = useState(''); | ||
const [materialName, setMaterialName] = useState(''); | ||
const hazmatRecords = useHazmatDb(unNumber, materialName); | ||
|
||
const openEricards = useCallback((num: string, nam: string) => { | ||
let form = document.createElement('form'); | ||
form.method = 'POST'; | ||
form.action = 'https://www.ericards.net/psp/ericards.psp_search_result'; | ||
form.target = '_blank'; | ||
|
||
const fields = { | ||
unnumber: num, | ||
substance: nam, | ||
operators: 'OR', | ||
}; | ||
|
||
Object.entries(fields).forEach(([key, value]) => { | ||
const element = document.createElement('input'); | ||
element.name = key; | ||
element.value = value; | ||
form.appendChild(element); | ||
}); | ||
|
||
document.body.appendChild(form); | ||
form.submit(); | ||
form.parentNode?.removeChild(form); | ||
}, []); | ||
|
||
return ( | ||
<> | ||
<Box sx={{ p: 2, m: 2 }}> | ||
<Typography variant="h3" gutterBottom> | ||
Schadstoff | ||
</Typography> | ||
|
||
<TextField | ||
autoFocus | ||
margin="dense" | ||
id="unNumber" | ||
label="Stoffnummer (UN Nummer)" | ||
type="text" | ||
fullWidth | ||
variant="standard" | ||
inputProps={{ tabIndex: 1 }} | ||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => { | ||
setUnNumber(event.target.value); | ||
}} | ||
value={unNumber} | ||
/> | ||
<TextField | ||
margin="dense" | ||
id="materialName" | ||
label="Stoff Name" | ||
type="text" | ||
fullWidth | ||
variant="standard" | ||
inputProps={{ tabIndex: 2 }} | ||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => { | ||
setMaterialName(event.target.value); | ||
}} | ||
value={materialName} | ||
/> | ||
<Button | ||
variant="contained" | ||
color="primary" | ||
onClick={() => { | ||
openEricards(unNumber, materialName); | ||
}} | ||
> | ||
Suche in den Ericards nach aktuellen Eingaben | ||
</Button> | ||
{unNumber === '' && materialName === '' && ( | ||
<Typography variant="body1"> | ||
Gib die Stoffnummer oder den Stoffnamen ein, um Informationen zu dem | ||
Stoff zu erhalten. | ||
</Typography> | ||
)} | ||
{(unNumber !== '' || materialName !== '') && ( | ||
<> | ||
{/* <Typography variant="body1"> | ||
Stoffe gefunden: | ||
{JSON.stringify(hazmatRecords)} | ||
</Typography> */} | ||
{hazmatRecords.map((r) => ( | ||
<Card key={r.unNumber} variant="outlined"> | ||
<CardContent> | ||
<Typography color="text.secondary">{r.unNumber}</Typography> | ||
<Typography>{r.name}</Typography> | ||
<Typography variant="caption"> | ||
Schutzanzug Parameter | ||
</Typography> | ||
<Typography variant="body2"> | ||
Temperatur Resistenz: Klasse {r.resistanceTemperature} | ||
<br /> | ||
Zeitliche Resistenz: {r.resistanceTime} | ||
<br /> | ||
Beschädigung: {r.damage} | ||
</Typography> | ||
</CardContent> | ||
<CardActions> | ||
<Button | ||
size="small" | ||
onClick={() => { | ||
openEricards(r.unNumber, ''); | ||
}} | ||
> | ||
Ericards | ||
</Button> | ||
</CardActions> | ||
</Card> | ||
))} | ||
</> | ||
)} | ||
</Box> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import debounce from 'lodash.debounce'; | ||
import { useEffect, useMemo, useRef } from 'react'; | ||
|
||
const useDebounce = (callback: () => void, time = 500) => { | ||
const ref = useRef<() => void>(); | ||
|
||
useEffect(() => { | ||
ref.current = callback; | ||
}, [callback]); | ||
|
||
const debouncedCallback = useMemo(() => { | ||
const func = () => { | ||
ref.current?.(); | ||
}; | ||
|
||
return debounce(func, time); | ||
}, [time]); | ||
|
||
return debouncedCallback; | ||
}; | ||
|
||
export default useDebounce; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { useCallback, useEffect, useState } from 'react'; | ||
import { HazmatMaterial } from '../common/hazmat'; | ||
import useFirebaseLogin from './useFirebaseLogin'; | ||
import useDebounce from './useDebounce'; | ||
|
||
export default function useHazmatDb(unNumber?: string, name?: string) { | ||
const [hazmatRecords, setHazmatRecords] = useState<HazmatMaterial[]>([]); | ||
const { user, isSignedIn } = useFirebaseLogin(); | ||
|
||
const fetchHazmat = useCallback( | ||
async (unNumberArg?: string, unName?: string) => { | ||
console.info(`searching for hazmat ${unNumberArg} ${unName}`); | ||
if (!(isSignedIn && user && (unNumberArg || unName))) return; | ||
const token = await user?.getIdToken(); | ||
const response: HazmatMaterial[] = await ( | ||
await fetch( | ||
'/api/hazmat?' + | ||
new URLSearchParams({ | ||
unnumber: '' + unNumberArg, | ||
name: '' + unName, | ||
}), | ||
{ | ||
method: 'GET', | ||
headers: { | ||
Authorization: `Bearer ${token}`, | ||
}, | ||
} | ||
) | ||
).json(); | ||
setHazmatRecords(response); | ||
}, | ||
[isSignedIn, user] | ||
); | ||
|
||
const fetchDb = useCallback(() => { | ||
fetchHazmat(unNumber, name); | ||
}, [fetchHazmat, name, unNumber]); | ||
|
||
const debouncedFetch = useDebounce(fetchDb); | ||
|
||
useEffect(() => { | ||
debouncedFetch(); | ||
}, [debouncedFetch, unNumber, name]); | ||
|
||
return hazmatRecords; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.