dyomedea/src/components/infos/Infos.tsx

90 lines
2.6 KiB
TypeScript
Raw Normal View History

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>
</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;