2022-11-29 21:12:50 +00:00
|
|
|
import { Dialog, DialogTitle, IconButton } from '@suid/material';
|
|
|
|
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 12:58:55 +00:00
|
|
|
import {
|
|
|
|
I18nContext,
|
|
|
|
createI18nContext,
|
|
|
|
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 style from './Infos.module.css';
|
|
|
|
import { Paper, Stack } from '@suid/material';
|
|
|
|
import styled from '@suid/material/styles/styled';
|
|
|
|
|
|
|
|
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-29 21:12:50 +00:00
|
|
|
const handleClickOpen = () => {
|
|
|
|
setOpen(true);
|
|
|
|
};
|
|
|
|
const handleClose = () => {
|
|
|
|
setOpen(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Dialog onClose={handleClose} open={open()} class={style.dialog}>
|
|
|
|
<DialogTitle class={style.title}>
|
2022-11-30 12:58:55 +00:00
|
|
|
<div class={style['title-text']}>{t('nearby')}</div>
|
2022-11-29 21:12:50 +00:00
|
|
|
<IconButton onClick={handleClose} class={style.close}>
|
|
|
|
<CloseIcon />
|
|
|
|
</IconButton>
|
|
|
|
</DialogTitle>
|
|
|
|
<Stack spacing={1}>
|
|
|
|
<For each={selectedFeatures}>
|
2022-11-30 13:46:05 +00:00
|
|
|
{(feature) => <Item>{t(feature.get('type'))}</Item>}
|
2022-11-29 21:12:50 +00:00
|
|
|
</For>
|
|
|
|
</Stack>
|
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Infos;
|