TrkViewer and TrksegViewer skeletons.
This commit is contained in:
parent
09ff9ca829
commit
c1fe37d0a6
|
|
@ -2,6 +2,7 @@ import { Component, For } from 'solid-js';
|
|||
import { peekCachedSignal } from '../../workers/cached-signals';
|
||||
import { RteViewer } from '../rte';
|
||||
import Tree from '../tree';
|
||||
import { TrkViewer } from '../trk';
|
||||
import { WptViewer } from '../wpt';
|
||||
import GpxIcon from './GpxIcon';
|
||||
|
||||
|
|
@ -38,6 +39,9 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
|
|||
if (child.type === 'rte') {
|
||||
return <RteViewer rteId={key} />;
|
||||
}
|
||||
if (child.type === 'trk') {
|
||||
return <TrkViewer trkId={key} restrictToHierarchy={child} />;
|
||||
}
|
||||
return <></>;
|
||||
}}
|
||||
</For>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const RteViewer: Component<Props> = ({ rteId }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<RteIcon fill='black' width='32' height='32' /> {title()}
|
||||
<RteIcon fill='black' width='24' height='24' /> {title()}
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { Component, For, from } 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 { TrksegViewer } from '../trkseg';
|
||||
|
||||
interface Props {
|
||||
trkId: string;
|
||||
restrictToHierarchy?: any;
|
||||
}
|
||||
|
||||
const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
|
||||
const trk = peekCachedSignal({ id: trkId, method: 'getTrk' });
|
||||
console.log({ caller: 'TrkViewer', trkId, restrictToHierarchy, trk: trk() });
|
||||
const title = () => {
|
||||
return trk().name;
|
||||
};
|
||||
|
||||
return (
|
||||
<Tree
|
||||
title={
|
||||
<>
|
||||
<TrkIcon width='24' height='24' /> {title()}
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
subTree={
|
||||
<For
|
||||
each={Object.keys(restrictToHierarchy).filter((key: string) =>
|
||||
key.startsWith('gpx/')
|
||||
)}
|
||||
>
|
||||
{(key: string) => {
|
||||
return <TrksegViewer trksegId={key} />;
|
||||
}}
|
||||
</For>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrkViewer;
|
||||
|
|
@ -1 +1,3 @@
|
|||
export { default } from './Trk';
|
||||
|
||||
export { default as TrkViewer } from './TrkViewer';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
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';
|
||||
|
||||
interface Props {
|
||||
trksegId: string;
|
||||
}
|
||||
|
||||
const TrksegViewer: Component<Props> = ({ trksegId }) => {
|
||||
const trkseg = peekCachedSignal({ id: trksegId, method: 'getTrkseg' });
|
||||
console.log({ caller: 'TrksegViewer', trksegId, trkseg: trkseg() });
|
||||
const title = () => {
|
||||
return trkseg().name;
|
||||
};
|
||||
|
||||
return (
|
||||
<Tree
|
||||
title={
|
||||
<>
|
||||
<TrkIcon fill='grey' width='16' height='16' /> {title()}
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
subTree={undefined}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrksegViewer;
|
||||
|
|
@ -1 +1,3 @@
|
|||
export { default } from './Trkseg';
|
||||
|
||||
export { default as TrksegViewer } from './TrksegViewer';
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const WptViewer: Component<Props> = ({ wptId }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<WptIcon fill='black' width="30" height="30" viewBox="0 0 300 300" /> {title()}
|
||||
<WptIcon fill='black' width="24" height="24" viewBox="0 0 300 300" /> {title()}
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 209.289 209.289" xml:space="preserve" stroke="#000000" stroke-width="0.8371559999999999">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M88.428,127.885c-2.506-3.788-5.712-7.119-8.413-10.791c-1.887-2.588-3.939-5.242-5.036-8.201 c-3.504-9.49-1.827-18.319,4.795-25.846c3.215-3.647,6.993-6.777,10.543-10.108c4.993-4.67,8.254-10.132,8.528-17.326 c0.283-7.657-3.477-13.911-10.336-15.789c-3.492-0.953-10.787-1.477-10.805-1.321c-10.489,0.518-20.572,2.706-29.8,8.013 c-8.418,4.838-14.453,11.71-16.13,21.748c-1.416,8.442-0.63,16.86,2.344,24.816c2.658,7.122,6.016,13.957,9.161,20.892 c3.696,8.141,6.135,16.593,6.333,25.629c0.052,2.332,0.137,4.689,0.582,6.96c1.458,7.636,5.017,13.786,12.208,17.135 c4.333,2.016,8.902,1.608,13.43,0.956c8.5-1.224,14.075-6.266,15.777-14.248C93.312,142.504,92.979,134.79,88.428,127.885z"/> <path d="M100.588,26.887c3.154-3.879,4.39-8.446,4.545-13.944c-0.101-0.804-0.176-2.155-0.432-3.486 c-0.204-1.108-0.536-2.207-0.936-3.261c-2.548-6.789-8.896-8.223-13.999-3.185c-5.087,5.03-6.744,16.018-3.371,22.438 C89.707,31.755,96.079,32.416,100.588,26.887z"/> <path d="M76.332,26.394c3.885-3.867,4.783-11.594,1.884-16.289c-2.576-4.177-7.079-4.414-10.12-0.478 c-1.979,2.554-2.789,5.547-2.765,8.783c-0.03,2.789,0.625,5.17,1.921,7.085C69.616,28.982,73.37,29.347,76.332,26.394z"/> <path d="M59.297,28.948c1.632-2.019,2.125-4.427,2.232-6.951c-0.119-2.6-0.63-5.063-2.338-7.091c-2.089-2.469-5.039-2.451-7.127,0 c-3.005,3.535-3.054,10.458-0.094,14.057C54.116,31.588,57.178,31.588,59.297,28.948z"/> <path d="M48.066,33.6c1.772-3.178,0.725-8.567-2.113-10.823c-2.137-1.702-4.658-1.236-5.849,1.239 c-0.536,1.142-0.709,2.451-1.053,3.687c0.28,2.838,1.071,5.313,3.248,7.094C44.37,36.496,46.757,35.951,48.066,33.6z"/> <path d="M38.695,42.019c0.804-1.254,1.129-2.832,1.696-4.372c-0.56-1.47-0.877-2.929-1.62-4.107 c-1.23-1.952-3.468-1.939-4.957-0.155c-1.833,2.18-1.964,6.333-0.262,8.646C35.042,44.046,37.349,44.138,38.695,42.019z"/> <path d="M134.024,84.308c0.018-0.159-7.149-1.604-10.778-1.604c-7.118-0.019-12.392,5.014-14.157,12.464 c-1.675,7.009,0.043,13.141,3.604,18.974c2.527,4.159,5.341,8.185,7.466,12.568c4.378,9,3.666,17.957-2.247,26.172 c-1.845,2.562-4.542,4.572-7.039,6.576c-3.574,2.837-7.541,5.176-10.979,8.171c-6.229,5.438-8.592,12.788-9.058,20.868 c-0.481,8.153,3.541,14.479,11.411,17.932c4.198,1.84,8.485,3.441,13.198,2.655c7.824-1.315,12.902-6.32,16.331-13.262 c1.022-2.077,1.747-4.329,2.411-6.57c2.594-8.671,7.191-16.167,12.928-23.023c4.865-5.846,9.931-11.545,14.4-17.688 c4.98-6.887,7.965-14.785,8.859-23.297c1.06-10.127-2.947-18.354-9.748-25.262C153.113,92.382,143.992,87.599,134.024,84.308z"/> <path d="M129.14,69.423c4.95-5.289,6.278-16.325,2.71-22.533c-3.562-6.211-10.054-6.519-14.334-0.652 c-0.658,0.914-1.279,1.885-1.778,2.902c-0.591,1.202-1.029,2.481-1.34,3.242c-1.309,5.337-1.333,10.074,0.676,14.65 C117.936,73.563,124.25,74.623,129.14,69.423z"/> <path d="M147.572,74.553c1.766-1.501,3.021-3.623,3.732-6.321c0.896-3.118,0.914-6.217-0.328-9.216 c-1.882-4.594-6.284-5.562-9.883-2.219c-4.031,3.76-5.237,11.442-2.521,16.197C140.63,76.635,144.357,77.272,147.572,74.553z"/> <path d="M161.376,81.969c3.812-2.682,5.607-9.358,3.647-13.569c-1.364-2.926-4.196-3.724-6.863-1.903 c-2.204,1.498-3.337,3.736-4.146,6.211c-0.561,2.469-0.725,4.914,0.305,7.294C155.665,83.108,158.593,83.927,161.376,81.969z"/> <path d="M163.897,87.486c0.64,2.606,2.801,3.766,5.249,2.688c2.569-1.142,3.994-3.312,5.011-5.973 c0-1.285,0.189-2.594-0.036-3.836c-0.481-2.712-2.782-3.82-5.304-2.749C165.48,79.032,163.026,83.946,163.897,87.486z"/> <path d="M177.695,91.054c-0.962-2.109-3.117-2.733-4.816-1.175c-1.029,0.944-1.717,2.259-2.655,3.532 c0.135,1.638,0.037,3.239,0.47,4.665c0.736,2.398,2.983,2.922,4.956,1.376C177.902,97.673,178.871,93.639,177.695,91.054z"/> </g> </g> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in New Issue