87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { Grid, IconButton } from '@suid/material';
|
|
import { Feature } from 'ol';
|
|
import { Geometry } from 'ol/geom';
|
|
import { Component, createSignal, For, Show } from 'solid-js';
|
|
import { useI18n } from '@solid-primitives/i18n';
|
|
import EditIcon from '@suid/icons-material/Edit';
|
|
import { Paper, Stack } from '@suid/material';
|
|
import styled from '@suid/material/styles/styled';
|
|
import Dialog from '../dialog';
|
|
|
|
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,
|
|
});
|
|
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,
|
|
});
|
|
});
|
|
if (features.length > 0) {
|
|
setOpen(true);
|
|
}
|
|
};
|
|
|
|
const Infos: Component<{}> = (props) => {
|
|
const [t, { add, locale, dict }] = useI18n();
|
|
const handleClick = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<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('getTitle')
|
|
? feature.get('getTitle')()
|
|
: t(feature.get('type'))}
|
|
</Grid>
|
|
<Grid item xs={1} sx={{ paddingLeft: '0px' }}>
|
|
<Show when={feature.get('edit')}>
|
|
<IconButton onClick={feature.get('edit')}>
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Show>
|
|
</Grid>
|
|
</Grid>
|
|
</Item>
|
|
)}
|
|
</For>
|
|
</Stack>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default Infos;
|