2022-11-30 21:44:02 +00:00
|
|
|
import { Grid, IconButton } from '@suid/material';
|
2022-11-29 21:12:50 +00:00
|
|
|
import { Feature } from 'ol';
|
|
|
|
import { Geometry } from 'ol/geom';
|
|
|
|
import { Component, createSignal, For } from 'solid-js';
|
|
|
|
import { unwrap } from 'solid-js/store';
|
2022-11-30 21:44:02 +00:00
|
|
|
import { useI18n } from '@solid-primitives/i18n';
|
2022-11-29 21:12:50 +00:00
|
|
|
import CloseIcon from '@suid/icons-material/Close';
|
|
|
|
import { tree } from '../map';
|
|
|
|
import { Paper, Stack } from '@suid/material';
|
|
|
|
import styled from '@suid/material/styles/styled';
|
2022-11-30 21:44:02 +00:00
|
|
|
import Dialog from '../dialog';
|
2022-11-29 21:12:50 +00:00
|
|
|
|
|
|
|
const Item = styled(Paper)(({ theme }) => ({
|
|
|
|
...theme.typography.body2,
|
|
|
|
padding: theme.spacing(1),
|
|
|
|
textAlign: 'center',
|
|
|
|
color: theme.palette.text.secondary,
|
|
|
|
}));
|
|
|
|
|
|
|
|
const [open, setOpen] = createSignal(false);
|
|
|
|
|
|
|
|
let selectedFeatures: Feature[] = [];
|
|
|
|
|
|
|
|
export const clickHandler = (event: any) => {
|
|
|
|
const pixel = [event.originalEvent.x, event.originalEvent.y];
|
|
|
|
const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
|
|
|
|
console.log({
|
|
|
|
caller: '<Infos/> / clickHandler',
|
|
|
|
event,
|
|
|
|
features,
|
|
|
|
tree: unwrap(tree),
|
|
|
|
});
|
|
|
|
selectedFeatures.map((feature) => feature.set('isSelected', false));
|
|
|
|
selectedFeatures = features;
|
|
|
|
features.map((feature: Feature<Geometry>) => {
|
|
|
|
const id = feature.get('id');
|
|
|
|
feature.set('isSelected', true);
|
|
|
|
console.log({
|
|
|
|
caller: '<Infos/> / clickHandler / feature',
|
|
|
|
event,
|
|
|
|
feature,
|
|
|
|
id,
|
|
|
|
});
|
|
|
|
const branch = tree[id];
|
|
|
|
if (branch?.updateHandler) branch.updateHandler(feature);
|
|
|
|
});
|
|
|
|
if (features.length > 0) {
|
|
|
|
setOpen(true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const Infos: Component<{}> = (props) => {
|
2022-11-30 12:58:55 +00:00
|
|
|
const [t, { add, locale, dict }] = useI18n();
|
2022-11-30 21:44:02 +00:00
|
|
|
const handleClick = () => {
|
2022-11-29 21:12:50 +00:00
|
|
|
setOpen(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-11-30 21:44:02 +00:00
|
|
|
<Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
|
|
|
|
<Stack
|
|
|
|
spacing={1}
|
|
|
|
direction='column'
|
|
|
|
alignItems='center'
|
|
|
|
sx={{ width: 'calc(100% - 5px)' }}
|
|
|
|
>
|
|
|
|
<For each={selectedFeatures}>
|
|
|
|
{(feature) => (
|
|
|
|
<Item sx={{ width: 'calc(100% - 1px)' }}>
|
|
|
|
<Grid container spacing={2} alignItems='center'>
|
|
|
|
<Grid item xs={11}>
|
|
|
|
{feature.get('name')
|
|
|
|
? `${feature.get('name')} (${t(feature.get('type'))})`
|
|
|
|
: t(feature.get('type'))}
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={1} sx={{ paddingLeft: '0px' }}>
|
|
|
|
<IconButton onClick={handleClick}>
|
|
|
|
<CloseIcon />
|
|
|
|
</IconButton>
|
2022-11-30 17:08:45 +00:00
|
|
|
</Grid>
|
2022-11-30 21:44:02 +00:00
|
|
|
</Grid>
|
|
|
|
</Item>
|
|
|
|
)}
|
|
|
|
</For>
|
|
|
|
</Stack>
|
2022-11-29 21:12:50 +00:00
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Infos;
|