64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Component } from 'solid-js';
|
|
import { peekCachedSignal } from '../../workers/cached-signals';
|
|
import Tree from '../tree';
|
|
import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
|
|
import { useI18n } from '@solid-primitives/i18n';
|
|
import { getFormatedLength } from '../../lib/ol';
|
|
import DisplayOrGetAddress from '../display-or-get-address';
|
|
import { LineString } from 'ol/geom';
|
|
|
|
interface Props {
|
|
trksegId: string;
|
|
}
|
|
|
|
const TrksegViewer: Component<Props> = ({ trksegId }) => {
|
|
const [t, { add, locale, dict }] = useI18n();
|
|
|
|
const trkseg = peekCachedSignal({ id: trksegId, action: 'getTrkseg' });
|
|
console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });
|
|
|
|
const lineString = new LineString(
|
|
trkseg().trkpt.map((trkpt: any) => [trkpt.$.lon, trkpt.$.lat])
|
|
);
|
|
|
|
const firstTrkpt = () => trkseg().trkpt.at(0);
|
|
const lastTrkpt = () => trkseg().trkpt.at(-1);
|
|
|
|
const title = () => {
|
|
return firstTrkpt().time;
|
|
};
|
|
|
|
return (
|
|
<Tree
|
|
title={
|
|
<>
|
|
<span>
|
|
<TrkIcon fill='white' width='16' height='16' /> {title()}
|
|
</span>
|
|
</>
|
|
}
|
|
content={
|
|
<>
|
|
<div>
|
|
{getFormatedLength(lineString)} {t('from')}{' '}
|
|
<DisplayOrGetAddress
|
|
target={firstTrkpt}
|
|
putAction='putTrkpt'
|
|
putParamName='trkpt'
|
|
/>{' '}
|
|
{t('to')}{' '}
|
|
<DisplayOrGetAddress
|
|
target={lastTrkpt}
|
|
putAction='putTrkpt'
|
|
putParamName='trkpt'
|
|
/>
|
|
</div>
|
|
</>
|
|
}
|
|
subTree={undefined}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TrksegViewer;
|