RteViewer

src/components/gpx/GpxViewer.tsx

@@ -1,5 +1,6 @@
 import { Component, For } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
+import { RteViewer } from '../rte';
 import Tree from '../tree';
 import { WptViewer } from '../wpt';
 import GpxIcon from './GpxIcon';
@@ -34,6 +35,9 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
             if (child.type === 'wpt') {
               return <WptViewer wptId={key} />;
             }
+            if (child.type === 'rte') {
+              return <RteViewer rteId={key} />;
+            }
             return <></>;
           }}
         </For>

src/components/rte/RteViewer.tsx

@@ -0,0 +1,31 @@
+import { Component } from 'solid-js';
+import { peekCachedSignal } from '../../workers/cached-signals';
+import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid';
+
+import Tree from '../tree';
+
+interface Props {
+  rteId: string;
+}
+
+const RteViewer: Component<Props> = ({ rteId }) => {
+  const rte = peekCachedSignal({ id: rteId, method: 'getRte' });
+  console.log({ caller: 'RteViewer', rteId, rte: rte() });
+  const title = () => {
+    return rte().name;
+  };
+
+  return (
+    <Tree
+      title={
+        <>
+          <RteIcon fill='black' width='32' height='32' /> {title()}
+        </>
+      }
+      content={undefined}
+      subTree={undefined}
+    />
+  );
+};
+
+export default RteViewer;

src/components/rte/index.tsx

@@ -1 +1,3 @@
 export { default } from './Rte';
+
+export { default as RteViewer } from './RteViewer';

src/components/wpt/WptViewer.tsx

@@ -18,7 +18,7 @@ const WptViewer: Component<Props> = ({ wptId }) => {
     <Tree
       title={
         <>
-          <WptIcon /> {title()}
+          <WptIcon fill='black' width="30" height="30" viewBox="0 0 300 300" /> {title()}
         </>
       }
       content={undefined}

src/icons/directions-svgrepo-com.svg

@@ -0,0 +1,8 @@
+<!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" width="64px" height="64px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="4.096">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_iconCarrier">
+
<path d="M1017.06 186.064L917.364 74.721a31.964 31.964 0 0 0-23.937-10.752H543.171V30.001c0-16.56-14.336-30-32-30s-32 13.44-32 30V63.97H223.363c-17.68 0-32 14.32-32 32v223.664c0 17.68 14.32 32 32 32h255.808v64.096H130.58a31.963 31.963 0 0 0-23.936 10.752L6.963 539.793c-10.752 12.128-10.752 30.368 0 42.496l99.68 112.288c6.112 6.847 14.784 9.744 23.936 9.744h348.592V994c0 16.56 14.336 30 32 30s32-13.44 32-30V704.32h256.464c17.68 0 32-14.32 32-32V447.713c0-17.68-14.32-32-32-32H543.171v-64.096h350.256a31.963 31.963 0 0 0 23.937-10.752l99.696-112.32c10.736-12.112 10.736-30.352 0-42.48v-.001zM767.647 640.321H144.959l-71.28-79.28 71.28-81.312h622.688v160.592zm111.392-352.688h-623.68V127.969h623.68l71.28 79.344z"/>
+
</g>
+
</svg>

src/icons/location-pin-svgrepo-com.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="24" height="24" viewBox="0 0 300 300">
+	 width="297" height="297">
 <g color='black' stroke='black' >
 	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
 		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645