dyomedea/src/components/trkseg/TrksegViewer.tsx

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;