Revize 04fdedc6
Přidáno uživatelem Václav Honzík před asi 2 roky(ů)
frontend/src/features/TrackingTool/TrackingTool.tsx | ||
---|---|---|
20 | 20 |
import EditIcon from '@mui/icons-material/Edit' |
21 | 21 |
import { useDispatch, useSelector } from 'react-redux' |
22 | 22 |
import { RootState } from '../redux/store' |
23 |
import { consumeErr as consumeError } from './trackingToolSlice' |
|
23 |
import { clear, consumeErr as consumeError } from './trackingToolSlice'
|
|
24 | 24 |
import { showNotification } from '../Notification/notificationSlice' |
25 |
import ClearIcon from '@mui/icons-material/Clear' |
|
25 | 26 |
|
26 | 27 |
// Page with tracking tool |
27 | 28 |
const TrackingTool = () => { |
28 | 29 |
// Path response from the API |
29 |
const pathDto = useSelector((state: RootState) => state.trackingTool.pathDto) |
|
30 |
const pathVariants = useSelector((state: RootState) => state.trackingTool.pathVariants) |
|
31 |
const mapCenter = useSelector((state: RootState) => state.trackingTool.mapCenter) |
|
30 |
const pathDto = useSelector( |
|
31 |
(state: RootState) => state.trackingTool.pathDto |
|
32 |
) |
|
33 |
const pathVariants = useSelector( |
|
34 |
(state: RootState) => state.trackingTool.pathVariants |
|
35 |
) |
|
36 |
const mapCenter = useSelector( |
|
37 |
(state: RootState) => state.trackingTool.mapCenter |
|
38 |
) |
|
32 | 39 |
|
33 | 40 |
// const map = useMap() |
34 | 41 |
|
... | ... | |
42 | 49 |
const dispatch = useDispatch() |
43 | 50 |
|
44 | 51 |
useEffect(() => { |
45 |
console.log('oi') |
|
46 | 52 |
if (!err) { |
47 | 53 |
return |
48 | 54 |
} |
49 | 55 |
const error = `${err}` |
50 | 56 |
dispatch(consumeError()) |
51 |
dispatch(showNotification({ |
|
52 |
message: error, |
|
53 |
severity: 'error', |
|
54 |
|
|
55 |
})) |
|
57 |
dispatch( |
|
58 |
showNotification({ |
|
59 |
message: error, |
|
60 |
severity: 'error', |
|
61 |
}) |
|
62 |
) |
|
56 | 63 |
}, [err, dispatch]) |
57 | 64 |
|
58 | 65 |
return ( |
... | ... | |
61 | 68 |
Tracking Tool |
62 | 69 |
</Typography> |
63 | 70 |
|
64 |
{pathDto && ( |
|
65 |
<Fragment> |
|
66 |
<Card variant="outlined"> |
|
67 |
<CardContent> |
|
68 |
<Stack direction="column"> |
|
69 |
<Typography |
|
70 |
variant="h5" |
|
71 |
sx={{ mb: 1 }} |
|
72 |
fontWeight="600" |
|
73 |
> |
|
74 |
Processed Text |
|
75 |
</Typography> |
|
76 |
<Typography variant="body2"> |
|
77 |
{formatHtmlStringToReactDom( |
|
78 |
pathDto.text ?? '' |
|
79 |
)} |
|
80 |
</Typography> |
|
81 |
</Stack> |
|
82 |
<Stack justifyItems="flex-end" alignSelf="flex-end" alignItems="flex-end"> |
|
83 |
<Button size="small" variant="outlined" startIcon={<EditIcon />}>Edit</Button> |
|
84 |
</Stack> |
|
85 |
</CardContent> |
|
86 |
</Card> |
|
87 |
</Fragment> |
|
88 |
)} |
|
89 | 71 |
<Grid container> |
90 | 72 |
<Grid item xs={12}> |
91 | 73 |
{pathDto && pathDto?.foundCatalogItems?.length === 0 && ( |
... | ... | |
99 | 81 |
Looks like no path / catalog items match this query. |
100 | 82 |
</Typography> |
101 | 83 |
)} |
102 |
|
|
103 |
<Stack |
|
104 |
direction="row" |
|
105 |
alignItems="flex-start" |
|
106 |
spacing={2} |
|
107 |
sx={{ mt: 1 }} |
|
108 |
> |
|
109 |
<Typography |
|
110 |
variant="h5" |
|
111 |
sx={{ mb: 2 }} |
|
112 |
fontWeight="500" |
|
84 |
{!pathDto && ( |
|
85 |
<Stack |
|
86 |
direction="row" |
|
87 |
alignItems="flex-start" |
|
88 |
spacing={2} |
|
89 |
sx={{ mt: 1 }} |
|
113 | 90 |
> |
114 |
{pathDto ? 'Update path' : 'Show Path'} |
|
115 |
</Typography> |
|
116 |
<PlaintextUpload /> |
|
117 |
<FileUpload /> |
|
118 |
</Stack> |
|
91 |
<Typography |
|
92 |
variant="h5" |
|
93 |
sx={{ mb: 2 }} |
|
94 |
fontWeight="500" |
|
95 |
> |
|
96 |
Upload: |
|
97 |
</Typography> |
|
98 |
<PlaintextUpload /> |
|
99 |
<FileUpload /> |
|
100 |
</Stack> |
|
101 |
)} |
|
102 |
|
|
103 |
{pathDto && ( |
|
104 |
<Stack alignItems="flex-end"> |
|
105 |
<Button |
|
106 |
startIcon={<ClearIcon />} |
|
107 |
sx={{ mb: 1 }} |
|
108 |
variant="contained" |
|
109 |
onClick={() => dispatch(clear())} |
|
110 |
> |
|
111 |
Clear Map |
|
112 |
</Button> |
|
113 |
</Stack> |
|
114 |
)} |
|
119 | 115 |
</Grid> |
120 | 116 |
|
121 | 117 |
<Grid |
... | ... | |
138 | 134 |
url={mapConfig.url} |
139 | 135 |
/> |
140 | 136 |
{pathVariants?.map((pathVariant, idx) => ( |
141 |
<MapPath |
|
142 |
pathVariant={pathVariant} |
|
143 |
idx={idx} /> |
|
137 |
<MapPath pathVariant={pathVariant} idx={idx} /> |
|
144 | 138 |
))} |
145 | 139 |
</MapContainer> |
140 |
{pathDto && ( |
|
141 |
<Fragment> |
|
142 |
<Card variant="outlined" sx={{ mt: 2 }}> |
|
143 |
<CardContent> |
|
144 |
<Stack direction="column"> |
|
145 |
<Typography |
|
146 |
variant="h5" |
|
147 |
sx={{ mb: 1 }} |
|
148 |
fontWeight="600" |
|
149 |
> |
|
150 |
Processed Text |
|
151 |
</Typography> |
|
152 |
<Typography variant="body2"> |
|
153 |
{formatHtmlStringToReactDom( |
|
154 |
pathDto.text ?? '' |
|
155 |
)} |
|
156 |
</Typography> |
|
157 |
</Stack> |
|
158 |
</CardContent> |
|
159 |
</Card> |
|
160 |
</Fragment> |
|
161 |
)} |
|
146 | 162 |
</Grid> |
147 | 163 |
</Grid> |
148 | 164 |
</Fragment> |
Také k dispozici: Unified diff
Adjustments
re #9629