diff --git a/src/components/gpx-dialog/GpxDialog.tsx b/src/components/gpx-dialog/GpxDialog.tsx index 8550688..86700f6 100644 --- a/src/components/gpx-dialog/GpxDialog.tsx +++ b/src/components/gpx-dialog/GpxDialog.tsx @@ -5,6 +5,7 @@ import { Component, createSignal, Show } from 'solid-js'; import dispatch from '../../workers/dispatcher-main'; import Dialog from '../dialog'; import GpxChooser from '../gpx-chooser'; +import GpxIcon from '../gpx/GpxIcon'; //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg'; import style from './GpxDialog.module.css'; @@ -119,29 +120,7 @@ const GpxDialog: Component<{}> = (props) => { <>
- - - - - - - - - - - - - - +
= (props) => { + return ( + + + + + + + + + + + + + + + ); +}; + +export default GpxIcon; diff --git a/src/components/gpx/GpxViewer.tsx b/src/components/gpx/GpxViewer.tsx index 812e05a..c676d97 100644 --- a/src/components/gpx/GpxViewer.tsx +++ b/src/components/gpx/GpxViewer.tsx @@ -1,17 +1,32 @@ import { Component } from 'solid-js'; -import cache from '../../lib/cache'; import { peekCachedSignal } from '../../workers/cached-signals'; import Tree from '../tree'; +import GpxIcon from './GpxIcon'; interface Props { gpxId: string; + restrictToHierarchy?: any; } -const GpxViewer: Component = ({ gpxId }) => { +const GpxViewer: Component = ({ gpxId, restrictToHierarchy }) => { const gpx = peekCachedSignal({ id: gpxId, method: 'getGpx' }); - console.log({ caller: 'GpxViewer', gpx: gpx() }); - const title = () => {}; - return ; + console.log({ caller: 'GpxViewer', gpxId, restrictToHierarchy, gpx: gpx() }); + const title = () => { + return gpx().metadata.name; + }; + return ( + + + {' '} + {title()} + + } + content={undefined} + subTree={undefined} + /> + ); }; export default GpxViewer; diff --git a/src/components/gpx/index.ts b/src/components/gpx/index.ts index ce1117e..742ef2d 100644 --- a/src/components/gpx/index.ts +++ b/src/components/gpx/index.ts @@ -1,3 +1,5 @@ export { default } from './Gpx'; export { default as GpxViewer } from './GpxViewer'; + +export { default as GpxIcon } from './GpxIcon'; diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index 9cab708..28f6cb4 100644 --- a/src/components/infos/Infos.tsx +++ b/src/components/infos/Infos.tsx @@ -118,7 +118,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({ subTree={Object.keys(featuresHierarchy) .filter((key: string) => key.startsWith('gpx/')) .map((key: string) => ( - + ))} /> ); diff --git a/src/components/tree/Tree.tsx b/src/components/tree/Tree.tsx index 2edd577..9c9cc64 100644 --- a/src/components/tree/Tree.tsx +++ b/src/components/tree/Tree.tsx @@ -3,7 +3,7 @@ import styled from '@suid/material/styles/styled'; import { Component, JSXElement, Show } from 'solid-js'; interface Props { - title: string; + title: string | JSXElement; content: JSXElement | undefined; subTree: JSXElement | undefined; } @@ -11,7 +11,7 @@ interface Props { const Item = styled(Paper)(({ theme }) => ({ ...theme.typography.body2, padding: theme.spacing(1), - textAlign: 'center', + textAlign: 'left', color: theme.palette.text.secondary, }));