Refactoring
This commit is contained in:
parent
b23e44b576
commit
7483d9f904
|
|
@ -0,0 +1,52 @@
|
|||
import { IconButton } from '@suid/material';
|
||||
import SearchIcon from '@suid/icons-material/Search';
|
||||
|
||||
import { Component, Show } from 'solid-js';
|
||||
import { findAddress, getVillageOrTown } from '../../lib/osm';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useI18n } from '@solid-primitives/i18n';
|
||||
import dispatch from '../../workers/dispatcher-main';
|
||||
|
||||
interface Props {
|
||||
target: any;
|
||||
putAction: string;
|
||||
putParamName: string;
|
||||
}
|
||||
|
||||
const DisplayOrGetAddress: Component<Props> = ({
|
||||
target,
|
||||
putAction,
|
||||
putParamName,
|
||||
}) => {
|
||||
const [t, { add, locale, dict }] = useI18n();
|
||||
|
||||
const findClickHandlerFactory = (target: any) => async () => {
|
||||
const address = await findAddress(target.$.lon, target.$.lat, locale);
|
||||
const updatedTarget = cloneDeep(target);
|
||||
if (updatedTarget.extensions === undefined) {
|
||||
updatedTarget.extensions = {};
|
||||
}
|
||||
updatedTarget.extensions.address = address;
|
||||
const params: any = { id: target.id };
|
||||
params[putParamName] = updatedTarget;
|
||||
dispatch({
|
||||
action: putAction,
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Show
|
||||
when={target.extensions?.address}
|
||||
fallback={
|
||||
<IconButton color='primary' onClick={findClickHandlerFactory(target)}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<>{getVillageOrTown(target.extensions?.address)}</>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisplayOrGetAddress;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './DisplayOrGetAddress';
|
||||
|
|
@ -1,16 +1,13 @@
|
|||
import { Component, createResource, Show } from 'solid-js';
|
||||
import { Component } from 'solid-js';
|
||||
import { peekCachedSignal } from '../../workers/cached-signals';
|
||||
import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid';
|
||||
import SearchIcon from '@suid/icons-material/Search';
|
||||
import { useI18n } from '@solid-primitives/i18n';
|
||||
|
||||
import Tree from '../tree';
|
||||
import { findAddress, getVillageOrTown } from '../../lib/osm';
|
||||
import { getLength } from 'ol/sphere';
|
||||
import { Geometry, LineString } from 'ol/geom';
|
||||
import { IconButton } from '@suid/material';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import dispatch from '../../workers/dispatcher-main';
|
||||
import { LineString } from 'ol/geom';
|
||||
import DisplayOrGetAddress from '../display-or-get-address';
|
||||
import { getFormatedLength } from '../../lib/ol';
|
||||
|
||||
interface Props {
|
||||
rteId: string;
|
||||
|
|
@ -25,49 +22,10 @@ const RteViewer: Component<Props> = ({ rteId }) => {
|
|||
return rte().name;
|
||||
};
|
||||
|
||||
// const [startAddress] = createResource(rte, (r: Rte) =>
|
||||
// findAddress(r.rtept[0].$.lon, r.rtept[0].$.lat, locale)
|
||||
// );
|
||||
// const [endAddress] = createResource(rte, (r: Rte) =>
|
||||
// findAddress(r.rtept.at(-1).$.lon, r.rtept.at(-1).$.lat, locale)
|
||||
// );
|
||||
|
||||
const formatLength = (length: number) => {
|
||||
if (length > 1000) {
|
||||
const l = length / 1000;
|
||||
return ` ${l.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})} km`;
|
||||
}
|
||||
return ` ${length.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
})} m`;
|
||||
};
|
||||
|
||||
const geometry = new LineString(
|
||||
const lineString = new LineString(
|
||||
rte().rtept.map((rtept: any) => [rtept.$.lon, rtept.$.lat])
|
||||
);
|
||||
|
||||
const firstRtept = rte().rtept.at(0);
|
||||
const lastRtept = rte().rtept.at(-1);
|
||||
|
||||
const length = getLength(geometry, { projection: 'EPSG:4326' });
|
||||
|
||||
const findClickHandlerFactory = (rtept: any) => async () => {
|
||||
const address = await findAddress(rtept.$.lon, rtept.$.lat, locale);
|
||||
const updatedRtept = cloneDeep(rtept);
|
||||
if (updatedRtept.extensions === undefined) {
|
||||
updatedRtept.extensions = {};
|
||||
}
|
||||
updatedRtept.extensions.address = address;
|
||||
dispatch({
|
||||
action: 'putRtept',
|
||||
params: { id: rtept.id, rtept: updatedRtept },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Tree
|
||||
title={
|
||||
|
|
@ -78,34 +36,18 @@ const RteViewer: Component<Props> = ({ rteId }) => {
|
|||
content={
|
||||
<>
|
||||
<div>
|
||||
{formatLength(length)} {t('from')}{' '}
|
||||
<Show
|
||||
when={!rte().rtept.at(0).extensions?.address}
|
||||
fallback={
|
||||
<>{getVillageOrTown(rte().rtept.at(0).extensions?.address)}</>
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
color='primary'
|
||||
onClick={findClickHandlerFactory(rte().rtept.at(0))}
|
||||
>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</Show>{' '}
|
||||
{getFormatedLength(lineString)} {t('from')}{' '}
|
||||
<DisplayOrGetAddress
|
||||
target={rte().rtept.at(0)}
|
||||
putAction='putRtept'
|
||||
putParamName='rtept'
|
||||
/>{' '}
|
||||
{t('to')}{' '}
|
||||
<Show
|
||||
when={!rte().rtept.at(-1).extensions?.address}
|
||||
fallback={
|
||||
<>{getVillageOrTown(rte().rtept.at(-1).extensions?.address)}</>
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
color='primary'
|
||||
onClick={findClickHandlerFactory(rte().rtept.at(-1))}
|
||||
>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</Show>
|
||||
<DisplayOrGetAddress
|
||||
target={rte().rtept.at(-1)}
|
||||
putAction='putRtept'
|
||||
putParamName='rtept'
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import { LineString } from 'ol/geom';
|
||||
import { getLength } from 'ol/sphere';
|
||||
|
||||
export const getFormatedLength = (lineString: LineString) => {
|
||||
const length = getLength(lineString, { projection: 'EPSG:4326' });
|
||||
if (length > 1000) {
|
||||
const l = length / 1000;
|
||||
return ` ${l.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})} km`;
|
||||
}
|
||||
return ` ${length.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
})} m`;
|
||||
};
|
||||
Loading…
Reference in New Issue