From 12cfa9337a71deab0ade47fad60383317c427052 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 27 Nov 2022 22:48:35 +0100
Subject: [PATCH] Starting to add some style to trksegs.

---
 src/components/gpx-import/GpxImport.tsx   | 38 ++++++++++++++---------
 src/components/gpx/Gpx.tsx                | 21 ++++++++++++-
 src/icons/flag-finish-b-o-svgrepo-com.svg |  1 +
 src/icons/flag-start-b-svgrepo-com.svg    |  1 +
 4 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 src/icons/flag-finish-b-o-svgrepo-com.svg
 create mode 100644 src/icons/flag-start-b-svgrepo-com.svg

diff --git a/src/components/gpx-import/GpxImport.tsx b/src/components/gpx-import/GpxImport.tsx
index b84d45e..2a5a45d 100644
--- a/src/components/gpx-import/GpxImport.tsx
+++ b/src/components/gpx-import/GpxImport.tsx
@@ -25,22 +25,30 @@ const GpxImport: Component = () => {
         console.log(fileReader.result);
         const gpx = GPX.parse(fileReader.result);
         console.log(`gpx: ${JSON.stringify(gpx)}`);
-        const startTime = new Date(findStartTime(gpx)!);
-        dispatch({
-          action: 'pruneAndSaveImportedGpx',
-          params: {
-            id: { gpx: intToGpxId(startTime.valueOf()) },
-            gpx: gpx,
-            tech: {
-              lastModified: new Date(file.lastModified).toISOString(),
-              importDate: new Date().toISOString(),
-              name: file.name,
-              size: file.size,
-              type: file.type,
+        if (gpx) {
+          const startTime = new Date(findStartTime(gpx)!);
+          dispatch({
+            action: 'pruneAndSaveImportedGpx',
+            params: {
+              id: { gpx: intToGpxId(startTime.valueOf()) },
+              gpx: gpx,
+              tech: {
+                lastModified: new Date(file.lastModified).toISOString(),
+                importDate: new Date().toISOString(),
+                name: file.name,
+                size: file.size,
+                type: file.type,
+              },
             },
-          },
-        });
-        refetchGpxList();
+          });
+          refetchGpxList();
+        } else {
+          console.error({
+            message: "can't parse GPX file",
+            xml: fileReader.result,
+          });
+        }
+        // TODO: error handling
       },
       false
     );
diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx
index 61ffe0a..f189612 100644
--- a/src/components/gpx/Gpx.tsx
+++ b/src/components/gpx/Gpx.tsx
@@ -7,12 +7,31 @@ import Trk from '../trk';
 import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
+import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
+import startIcon from '../../icons/flag-start-b-svgrepo-com.svg';
 
 interface Props {
   gpxId: string;
   map: () => OlMap | null;
 }
 
+console.log({ caller: startIcon });
+
+const style = [
+  new Style({
+    stroke: new Stroke({
+      color: 'blue',
+      width: 2,
+    }),
+    image: new Icon({
+      src: startIcon,
+      color: 'green',
+      scale: 0.2,
+      opacity: 0.6,
+    }),
+  }),
+];
+
 export const Gpx: Component<Props> = ({ map, gpxId }) => {
   const [gpx] = createResource(
     gpxId,
@@ -26,7 +45,7 @@ export const Gpx: Component<Props> = ({ map, gpxId }) => {
   );
 
   const vectorSource = new VectorSource();
-  const vectorLayer = new VectorLayer({ source: vectorSource });
+  const vectorLayer = new VectorLayer({ source: vectorSource, style });
   createEffect(() => map()?.addLayer(vectorLayer));
 
   createEffect(() => {
diff --git a/src/icons/flag-finish-b-o-svgrepo-com.svg b/src/icons/flag-finish-b-o-svgrepo-com.svg
new file mode 100644
index 0000000..13b4208
--- /dev/null
+++ b/src/icons/flag-finish-b-o-svgrepo-com.svg
@@ -0,0 +1 @@
+<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0zm13.8 7h9.8v7.43h9.8V7H93v7.43h-9.6v9.799H93v9.8h-9.6V40h-9.8v-5.97h-9.8V40H54v-5.97h9.8v-9.801H54v-9.8h9.8V7zm0 7.43v9.799h9.8v-9.8h-9.8zm9.8 9.799v9.8h9.8v-9.8h-9.8z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/icons/flag-start-b-svgrepo-com.svg b/src/icons/flag-start-b-svgrepo-com.svg
new file mode 100644
index 0000000..f082b9f
--- /dev/null
+++ b/src/icons/flag-start-b-svgrepo-com.svg
@@ -0,0 +1 @@
+<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50 0a3.5 3.5 0 0 0-3.5 3.5v80A3.5 3.5 0 0 0 50 87a3.5 3.5 0 0 0 3.5-3.5V47h43a3.5 3.5 0 0 0 3.5-3.5v-40A3.5 3.5 0 0 0 96.5 0h-46a3.5 3.5 0 0 0-.254.01A3.5 3.5 0 0 0 50 0z" fill="currentColor"></path><path d="M38.004 76.792C27.41 78.29 20 81.872 20 87.143C20 94.243 32.381 100 50 100s30-5.756 30-12.857c0-5.272-7.41-8.853-18.003-10.35l-1.468 2.499C68.514 80.399 74 82.728 74 85.429c0 3.787-10.745 6.857-24 6.857s-24-3.07-24-6.857c-.001-2.692 5.45-5.018 13.459-6.13c-.484-.836-.97-1.67-1.455-2.507z" fill="currentColor"></path></svg>
\ No newline at end of file