Revize 41a11178
Přidáno uživatelem Václav Honzík před téměř 3 roky(ů)
| frontend/.gitignore | ||
|---|---|---|
| 17 | 17 |
.env.development.local |
| 18 | 18 |
.env.test.local |
| 19 | 19 |
.env.production.local |
| 20 |
.env |
|
| 20 | 21 |
|
| 21 | 22 |
npm-debug.log* |
| 22 | 23 |
yarn-debug.log* |
| frontend/create_prod_env.py | ||
|---|---|---|
| 13 | 13 |
file.writelines([ |
| 14 | 14 |
'REACT_APP_API_BASE_URL=/api\n', |
| 15 | 15 |
'REACT_APP_DEV_ENV=false\n' |
| 16 |
]) |
|
| 17 |
|
|
| 18 |
print('File created. The environment has been successfully configured for development.')
|
|
| 16 |
]) |
|
| 17 |
|
|
| 18 |
print('File created. The environment has been successfully configured for development.')
|
|
| frontend/src/App.tsx | ||
|---|---|---|
| 3 | 3 |
import Home from './features/Home/Home' |
| 4 | 4 |
import Catalog from './features/Catalog/Catalog' |
| 5 | 5 |
import NotFound from './features/NotFound/NotFound' |
| 6 |
import { Container, Paper, Theme } from '@mui/material'
|
|
| 6 |
import { Box, Container, Paper, Theme } from '@mui/material'
|
|
| 7 | 7 |
import { ThemeProvider } from '@emotion/react'
|
| 8 | 8 |
import { useSelector } from 'react-redux'
|
| 9 | 9 |
import { RootState } from './features/redux/store'
|
| ... | ... | |
| 19 | 19 |
return ( |
| 20 | 20 |
<ThemeWrapper> |
| 21 | 21 |
<Navigation> |
| 22 |
<Container>
|
|
| 22 |
<Box sx={{mx: 10}}>
|
|
| 23 | 23 |
<Routes> |
| 24 | 24 |
<Route path="/" element={<Home />} />
|
| 25 | 25 |
<Route path="/catalog" element={<Catalog />} />
|
| ... | ... | |
| 32 | 32 |
<Route path="/map" element={<TrackingTool />} />
|
| 33 | 33 |
<Route path="*" element={<NotFound />} />
|
| 34 | 34 |
</Routes> |
| 35 |
</Container>
|
|
| 35 |
</Box>
|
|
| 36 | 36 |
</Navigation> |
| 37 | 37 |
</ThemeWrapper> |
| 38 | 38 |
) |
| frontend/src/features/Catalog/Catalog.tsx | ||
|---|---|---|
| 10 | 10 |
Catalog |
| 11 | 11 |
</Typography> |
| 12 | 12 |
<Paper |
| 13 |
elevation={11}
|
|
| 13 | 14 |
sx={{ py: 2, mt: 2 }}
|
| 14 |
variant="outlined" |
|
| 15 |
// variant="outlined"
|
|
| 15 | 16 |
style={{ minHeight: '50vh' }}
|
| 16 | 17 |
> |
| 17 | 18 |
<Container sx={{ mt: 4 }}>
|
| frontend/src/features/Catalog/CatalogFilter.tsx | ||
|---|---|---|
| 18 | 18 |
const CatalogFilter = () => {
|
| 19 | 19 |
const dispatch = useDispatch() |
| 20 | 20 |
|
| 21 |
const filterOpen = useSelector((state: RootState) => state.catalog.filterOpen) |
|
| 21 |
const filterOpen = useSelector( |
|
| 22 |
(state: RootState) => state.catalog.filterOpen |
|
| 23 |
) |
|
| 22 | 24 |
const toggleFilter = () => {
|
| 23 | 25 |
dispatch(setFilterOpen(!filterOpen)) |
| 24 | 26 |
} |
| ... | ... | |
| 35 | 37 |
startIcon={
|
| 36 | 38 |
filterOpen ? <FilterListOffIcon /> : <FilterListIcon /> |
| 37 | 39 |
} |
| 38 |
// variant="outlined"
|
|
| 40 |
variant="outlined" |
|
| 39 | 41 |
color="primary" |
| 40 | 42 |
onClick={toggleFilter}
|
| 43 |
sx={{ mb: 2 }}
|
|
| 41 | 44 |
> |
| 42 | 45 |
Filter |
| 43 | 46 |
</Button> |
| 44 | 47 |
<Collapse in={filterOpen} timeout="auto" unmountOnExit>
|
| 45 |
<Grid container spacing={1} alignItems="stretch">
|
|
| 46 |
<Grid item xs={6}>
|
|
| 47 |
<Stack direction="column" spacing={1} sx={{ mt: 2 }}>
|
|
| 48 |
<Stack direction="row" spacing={2}>
|
|
| 49 |
<TextField |
|
| 50 |
size="small" |
|
| 51 |
id="name" |
|
| 52 |
label="Name" |
|
| 53 |
onChange={(e: any) => {
|
|
| 54 |
dispatch(setFilter({
|
|
| 55 |
...filter, |
|
| 56 |
name: e.target.value |
|
| 57 |
})) |
|
| 58 |
}} |
|
| 59 |
value={filter.name}
|
|
| 60 |
/> |
|
| 61 |
<TextField |
|
| 62 |
size="small" |
|
| 63 |
id="type" |
|
| 64 |
label="Type" |
|
| 65 |
onChange={(e: any) => {
|
|
| 66 |
dispatch(setFilter({
|
|
| 67 |
...filter, |
|
| 68 |
type: e.target.value |
|
| 69 |
})) |
|
| 70 |
}} |
|
| 71 |
value={filter.type}
|
|
| 72 |
/> |
|
| 73 |
</Stack> |
|
| 74 |
<Stack direction="row" spacing={2}>
|
|
| 75 |
<TextField |
|
| 76 |
size="small" |
|
| 77 |
id="writtenForm" |
|
| 78 |
label="Written form" |
|
| 79 |
/> |
|
| 80 |
<TextField |
|
| 81 |
size="small" |
|
| 82 |
id="stateOrTerritory" |
|
| 83 |
label="State or territory" |
|
| 84 |
onChange={(e: any) => {
|
|
| 85 |
dispatch(setFilter({
|
|
| 86 |
...filter, |
|
| 87 |
country: e.target.value |
|
| 88 |
})) |
|
| 89 |
}} |
|
| 90 |
value={filter.country}
|
|
| 91 |
/> |
|
| 92 |
<TextField |
|
| 93 |
size="small" |
|
| 94 |
id="groupBy" |
|
| 95 |
label="Group by" |
|
| 96 |
/> |
|
| 97 |
</Stack> |
|
| 98 |
</Stack> |
|
| 99 |
</Grid> |
|
| 100 |
<Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
|
|
| 101 |
<Stack |
|
| 102 |
direction="row" |
|
| 103 |
justifyContent="flex-start" |
|
| 104 |
alignItems="flex-end" |
|
| 105 |
> |
|
| 106 |
<Button startIcon={<ManageSearchIcon/>} variant="contained" onClick={applyFilter}>
|
|
| 107 |
Search |
|
| 108 |
</Button> |
|
| 109 |
</Stack> |
|
| 110 |
</Grid> |
|
| 111 |
</Grid> |
|
| 48 |
<Stack direction="row" spacing={2} sx={{ mt: 2 }}>
|
|
| 49 |
<TextField |
|
| 50 |
size="small" |
|
| 51 |
id="name" |
|
| 52 |
label="Name" |
|
| 53 |
onChange={(e: any) => {
|
|
| 54 |
dispatch( |
|
| 55 |
setFilter({
|
|
| 56 |
...filter, |
|
| 57 |
name: e.target.value, |
|
| 58 |
}) |
|
| 59 |
) |
|
| 60 |
}} |
|
| 61 |
value={filter.name}
|
|
| 62 |
/> |
|
| 63 |
<TextField |
|
| 64 |
size="small" |
|
| 65 |
id="type" |
|
| 66 |
label="Type" |
|
| 67 |
onChange={(e: any) => {
|
|
| 68 |
dispatch( |
|
| 69 |
setFilter({
|
|
| 70 |
...filter, |
|
| 71 |
type: e.target.value, |
|
| 72 |
}) |
|
| 73 |
) |
|
| 74 |
}} |
|
| 75 |
value={filter.type}
|
|
| 76 |
/> |
|
| 77 |
<TextField |
|
| 78 |
size="small" |
|
| 79 |
id="writtenForm" |
|
| 80 |
label="Written form" |
|
| 81 |
/> |
|
| 82 |
|
|
| 83 |
<TextField |
|
| 84 |
size="small" |
|
| 85 |
id="stateOrTerritory" |
|
| 86 |
label="State or territory" |
|
| 87 |
onChange={(e: any) => {
|
|
| 88 |
dispatch( |
|
| 89 |
setFilter({
|
|
| 90 |
...filter, |
|
| 91 |
country: e.target.value, |
|
| 92 |
}) |
|
| 93 |
) |
|
| 94 |
}} |
|
| 95 |
value={filter.country}
|
|
| 96 |
/> |
|
| 97 |
<TextField size="small" id="groupBy" label="Group by" /> |
|
| 98 |
</Stack> |
|
| 99 |
<Stack alignItems="flex-end" sx={{ mt: 2 }}>
|
|
| 100 |
<Button |
|
| 101 |
startIcon={<ManageSearchIcon />}
|
|
| 102 |
variant="contained" |
|
| 103 |
onClick={applyFilter}
|
|
| 104 |
> |
|
| 105 |
Search |
|
| 106 |
</Button> |
|
| 107 |
</Stack> |
|
| 112 | 108 |
</Collapse> |
| 113 | 109 |
{filterOpen ? <Divider sx={{ mb: 5, mt: 1 }} /> : null}
|
| 114 | 110 |
</Fragment> |
| frontend/src/features/Catalog/CatalogTable.tsx | ||
|---|---|---|
| 141 | 141 |
{loading && !displayError ? <ContentLoading /> : null}
|
| 142 | 142 |
{!loading && !displayError ? (
|
| 143 | 143 |
<Fragment> |
| 144 |
<TableContainer sx={{ minHeight: '50vh', maxHeight: '50vh' }}>
|
|
| 144 |
<TableContainer sx={{ minHeight: '65vh', maxHeight: '65vh' }}>
|
|
| 145 | 145 |
<Table |
| 146 | 146 |
stickyHeader |
| 147 | 147 |
sx={{ minWidth: 400 }}
|
| frontend/src/features/Navigation/Navigation.tsx | ||
|---|---|---|
| 106 | 106 |
> |
| 107 | 107 |
<MenuIcon /> |
| 108 | 108 |
</IconButton> |
| 109 |
{/* <Box> */}
|
|
| 110 | 109 |
<Typography variant="h6" noWrap component="div"> |
| 111 | 110 |
Assyrian Toponyms App Prototype |
| 112 | 111 |
</Typography> |
| ... | ... | |
| 121 | 120 |
</IconButton> |
| 122 | 121 |
)} |
| 123 | 122 |
</Stack> |
| 124 |
{/* </Box> */}
|
|
| 125 | 123 |
</Toolbar> |
| 126 | 124 |
</AppBar> |
| 127 | 125 |
<NavigationMenu |
| frontend/src/features/Theme/ThemeWrapper.tsx | ||
|---|---|---|
| 1 |
import { PaletteMode } from "@mui/material"
|
|
| 1 |
import { PaletteMode } from '@mui/material'
|
|
| 2 | 2 |
import { createTheme, Theme, ThemeProvider } from '@mui/material/styles'
|
| 3 |
import { FunctionComponent, ReactNode, useEffect, useState } from "react"
|
|
| 4 |
import { useSelector } from "react-redux"
|
|
| 5 |
import { RootState } from "../redux/store"
|
|
| 3 |
import { FunctionComponent, ReactNode, useEffect, useState } from 'react'
|
|
| 4 |
import { useSelector } from 'react-redux'
|
|
| 5 |
import { RootState } from '../redux/store'
|
|
| 6 | 6 |
|
| 7 | 7 |
export interface ThemeWrapperProps {
|
| 8 | 8 |
children: ReactNode |
| 9 | 9 |
} |
| 10 | 10 |
|
| 11 | 11 |
const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children }) => {
|
| 12 |
|
|
| 12 |
const lightThemePalette = {
|
|
| 13 |
primary: {
|
|
| 14 |
main: '#A28253', |
|
| 15 |
}, |
|
| 16 |
secondary: {
|
|
| 17 |
main: '#E3DBCF', |
|
| 18 |
}, |
|
| 19 |
} |
|
| 20 |
|
|
| 21 |
const darkThemePalette = {
|
|
| 22 |
primary: {
|
|
| 23 |
main: '#e0bb84', |
|
| 24 |
}, |
|
| 25 |
secondary: {
|
|
| 26 |
main: '#E3DBCF', |
|
| 27 |
}, |
|
| 28 |
} |
|
| 29 |
|
|
| 30 |
const getPalette = (paletteMode: PaletteMode) => {
|
|
| 31 |
switch (paletteMode) {
|
|
| 32 |
case 'light': |
|
| 33 |
return lightThemePalette |
|
| 34 |
case 'dark': |
|
| 35 |
return darkThemePalette |
|
| 36 |
default: |
|
| 37 |
return lightThemePalette |
|
| 38 |
} |
|
| 39 |
} |
|
| 40 |
|
|
| 13 | 41 |
const buildTheme = (paletteMode: PaletteMode) => |
| 14 | 42 |
createTheme({
|
| 15 | 43 |
palette: {
|
| 16 | 44 |
mode: paletteMode, |
| 45 |
...getPalette(paletteMode), |
|
| 17 | 46 |
}, |
| 18 | 47 |
shape: {
|
| 19 |
borderRadius: 16
|
|
| 48 |
borderRadius: 8,
|
|
| 20 | 49 |
}, |
| 21 | 50 |
typography: {
|
| 22 | 51 |
fontFamily: [ |
| ... | ... | |
| 45 | 74 |
}) |
| 46 | 75 |
}, [paletteMode]) |
| 47 | 76 |
|
| 48 |
return ( |
|
| 49 |
<ThemeProvider theme={theme}>
|
|
| 50 |
{children}
|
|
| 51 |
</ThemeProvider> |
|
| 52 |
) |
|
| 77 |
return <ThemeProvider theme={theme}>{children}</ThemeProvider>
|
|
| 53 | 78 |
} |
| 54 | 79 |
|
| 55 |
export default ThemeWrapper |
|
| 80 |
export default ThemeWrapper |
|
| frontend/src/features/TrackingTool/TrackingTool.tsx | ||
|---|---|---|
| 1 |
import { Button, Grid, Stack, Typography } from '@mui/material'
|
|
| 1 |
import { Button, Divider, Grid, Stack, Typography } from '@mui/material'
|
|
| 2 | 2 |
import { Fragment } from 'react'
|
| 3 | 3 |
import AddIcon from '@mui/icons-material/Add' |
| 4 | 4 |
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
| ... | ... | |
| 103 | 103 |
<Grid |
| 104 | 104 |
item |
| 105 | 105 |
xs={12}
|
| 106 |
md={8}
|
|
| 106 |
md={12}
|
|
| 107 | 107 |
style={{
|
| 108 | 108 |
minHeight: '60vh', |
| 109 | 109 |
maxHeight: '100vh', |
| ... | ... | |
| 128 | 128 |
{polylines}
|
| 129 | 129 |
</MapContainer> |
| 130 | 130 |
</Grid> |
| 131 |
|
|
| 131 | 132 |
</Grid> |
| 132 | 133 |
</Fragment> |
| 133 | 134 |
) |
Také k dispozici: Unified diff
map adjustments
re #9547