Revize 788ce11e
Přidáno uživatelem Václav Honzík před téměř 3 roky(ů)
| frontend/src/App.tsx | ||
|---|---|---|
| 10 | 10 |
import Login from './features/Auth/Login' |
| 11 | 11 |
import CatalogItemDetail from './features/Catalog/CatalogItemDetail' |
| 12 | 12 |
import Navigation from './features/Navigation/Navigation' |
| 13 |
import TrackingTool from './features/TrackingTool/TrackingTool' |
|
| 13 | 14 |
|
| 14 | 15 |
const App = () => {
|
| 15 | 16 |
const theme: Theme = useSelector((state: RootState) => state.theme.theme) |
| ... | ... | |
| 17 | 18 |
return ( |
| 18 | 19 |
<ThemeProvider theme={theme}>
|
| 19 | 20 |
<Navigation> |
| 20 |
<Container> |
|
| 21 |
<Routes> |
|
| 22 |
<Route path="/" element={<Home />} />
|
|
| 23 |
<Route path="/catalog" element={<Catalog />} />
|
|
| 24 |
<Route |
|
| 25 |
path="/catalog/:itemId" |
|
| 26 |
element={<CatalogItemDetail />}
|
|
| 27 |
/> |
|
| 28 |
<Route path="/login" element={<Login />} />
|
|
| 29 |
<Route path="*" element={<NotFound />} />
|
|
| 30 |
</Routes> |
|
| 31 |
</Container> |
|
| 21 |
<Container> |
|
| 22 |
<Routes> |
|
| 23 |
<Route path="/" element={<Home />} />
|
|
| 24 |
<Route path="/catalog" element={<Catalog />} />
|
|
| 25 |
<Route |
|
| 26 |
path="/catalog/:itemId" |
|
| 27 |
element={<CatalogItemDetail />}
|
|
| 28 |
/> |
|
| 29 |
<Route path="/login" element={<Login />} />
|
|
| 30 |
<Route path="/map" element={<TrackingTool />} />
|
|
| 31 |
<Route path="*" element={<NotFound />} />
|
|
| 32 |
</Routes> |
|
| 33 |
</Container> |
|
| 32 | 34 |
</Navigation> |
| 33 | 35 |
</ThemeProvider> |
| 34 | 36 |
) |
| frontend/src/features/TrackingTool/TrackingTool.tsx | ||
|---|---|---|
| 1 |
import { Button, Grid, Stack, Typography } from '@mui/material'
|
|
| 2 |
import { Fragment } from 'react'
|
|
| 3 |
import AddIcon from '@mui/icons-material/Add' |
|
| 4 |
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
|
|
| 5 |
import mapConfig from '../../config/mapConfig' |
|
| 6 |
|
|
| 7 |
// Page with tracking tool |
|
| 8 |
const TrackingTool = () => {
|
|
| 9 |
|
|
| 10 |
return ( |
|
| 11 |
<Fragment> |
|
| 12 |
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
|
| 13 |
Tracking Tool |
|
| 14 |
</Typography> |
|
| 15 |
|
|
| 16 |
<Grid container> |
|
| 17 |
<Grid item xs={12} md={4}>
|
|
| 18 |
<Stack |
|
| 19 |
direction="row" |
|
| 20 |
alignItems="flex-start" |
|
| 21 |
spacing={2}
|
|
| 22 |
sx={{ m: 0, p: 0 }}
|
|
| 23 |
> |
|
| 24 |
<Typography |
|
| 25 |
variant="h5" |
|
| 26 |
sx={{ mb: 2 }}
|
|
| 27 |
fontWeight="500" |
|
| 28 |
> |
|
| 29 |
Upload: |
|
| 30 |
</Typography> |
|
| 31 |
<Button |
|
| 32 |
variant="contained" |
|
| 33 |
color="primary" |
|
| 34 |
startIcon={<AddIcon />}
|
|
| 35 |
> |
|
| 36 |
Plaintext |
|
| 37 |
</Button> |
|
| 38 |
<Button |
|
| 39 |
variant="contained" |
|
| 40 |
color="primary" |
|
| 41 |
startIcon={<AddIcon />}
|
|
| 42 |
> |
|
| 43 |
File |
|
| 44 |
</Button> |
|
| 45 |
</Stack> |
|
| 46 |
</Grid> |
|
| 47 |
<Grid item xs={12} md={8} style={{minHeight: '60vh', maxHeight: '100vh', width: '100%'}}>
|
|
| 48 |
<MapContainer |
|
| 49 |
center={[mapConfig.defaultCoordinates[0], mapConfig.defaultCoordinates[1]]}
|
|
| 50 |
zoom={mapConfig.defaultZoom}
|
|
| 51 |
style={{ height: '100%', minHeight: '100%' }}
|
|
| 52 |
> |
|
| 53 |
<TileLayer attribution={mapConfig.attribution} url={mapConfig.url} />
|
|
| 54 |
|
|
| 55 |
</MapContainer> |
|
| 56 |
</Grid> |
|
| 57 |
</Grid> |
|
| 58 |
</Fragment> |
|
| 59 |
) |
|
| 60 |
} |
|
| 61 |
|
|
| 62 |
export default TrackingTool |
|
Také k dispozici: Unified diff
tracking tool start
re #9547