From 26b03b75dbae2885348b6ecc7cefda129861b87f Mon Sep 17 00:00:00 2001 From: Inga Date: Thu, 16 Nov 2023 20:43:24 +0000 Subject: [PATCH] implemented export --- package-lock.json | 134 ++++++++++++++++++++++++++++++++++++ package.json | 3 + src/exporters/gpx.ts | 19 +++++ src/routePlanner/export.tsx | 14 ++++ src/routePlanner/index.tsx | 11 ++- src/routePlanner/style.css | 15 +++- src/routePlanner/types.ts | 7 +- src/shared/types.ts | 7 ++ src/style.css | 2 +- 9 files changed, 200 insertions(+), 12 deletions(-) create mode 100644 src/exporters/gpx.ts create mode 100644 src/routePlanner/export.tsx create mode 100644 src/shared/types.ts diff --git a/package-lock.json b/package-lock.json index c3b0ca1..8db8097 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,8 @@ "packages": { "": { "dependencies": { + "file-saver": "^2.0.5", + "gpx-builder": "^5.2.1", "leaflet": "^1.9.4", "nanoid": "^5.0.3", "preact": "^10.13.1" @@ -17,6 +19,7 @@ "@babel/plugin-syntax-jsx": "^7.23.3", "@preact/preset-vite": "^2.5.0", "@tsconfig/strictest": "^2.0.2", + "@types/file-saver": "^2.0.7", "@types/leaflet": "^1.9.8", "@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/parser": "^6.11.0", @@ -416,6 +419,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -1041,6 +1055,50 @@ "node": ">= 8" } }, + "node_modules/@oozcitak/dom": { + "version": "1.15.10", + "resolved": "https://registry.npmjs.org/@oozcitak/dom/-/dom-1.15.10.tgz", + "integrity": "sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==", + "dependencies": { + "@oozcitak/infra": "1.0.8", + "@oozcitak/url": "1.0.4", + "@oozcitak/util": "8.3.8" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/@oozcitak/infra": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@oozcitak/infra/-/infra-1.0.8.tgz", + "integrity": "sha512-JRAUc9VR6IGHOL7OGF+yrvs0LO8SlqGnPAMqyzOuFZPSZSXI7Xf2O9+awQPSMXgIWGtgUf/dA6Hs6X6ySEaWTg==", + "dependencies": { + "@oozcitak/util": "8.3.8" + }, + "engines": { + "node": ">=6.0" + } + }, + "node_modules/@oozcitak/url": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@oozcitak/url/-/url-1.0.4.tgz", + "integrity": "sha512-kDcD8y+y3FCSOvnBI6HJgl00viO/nGbQoCINmQ0h98OhnGITrWR3bOGfwYCthgcrV8AnTJz8MzslTQbC3SOAmw==", + "dependencies": { + "@oozcitak/infra": "1.0.8", + "@oozcitak/util": "8.3.8" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/@oozcitak/util": { + "version": "8.3.8", + "resolved": "https://registry.npmjs.org/@oozcitak/util/-/util-8.3.8.tgz", + "integrity": "sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==", + "engines": { + "node": ">=8.0" + } + }, "node_modules/@pkgr/utils": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz", @@ -1144,6 +1202,12 @@ "integrity": "sha512-jt4jIsWKvUvuY6adJnQJlb/UR7DdjC8CjHI/OaSQruj2yX9/K6+KOvDt/vD6udqos/FUk5Op66CvYT7TBLYO5Q==", "dev": true }, + "node_modules/@types/file-saver": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz", + "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==", + "dev": true + }, "node_modules/@types/geojson": { "version": "7946.0.13", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz", @@ -2955,6 +3019,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esquery": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz", @@ -3114,6 +3190,11 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -3367,6 +3448,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gpx-builder": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/gpx-builder/-/gpx-builder-5.2.1.tgz", + "integrity": "sha512-j7g9/bWQncZ2TaHXxjNSnNI+EaFWLQqm03A2si0dvzc78H/lWFVF770tdwEzdIFbd5eZeT4d99/UGbPmkplLBg==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "xmlbuilder2": "^3.0.2" + } + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -4753,6 +4843,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -5226,6 +5321,11 @@ "node": ">=0.10.0" } }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", @@ -5875,6 +5975,40 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xmlbuilder2": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/xmlbuilder2/-/xmlbuilder2-3.1.1.tgz", + "integrity": "sha512-WCSfbfZnQDdLQLiMdGUQpMxxckeQ4oZNMNhLVkcekTu7xhD4tuUDyAPoY8CwXvBYE6LwBHd6QW2WZXlOWr1vCw==", + "dependencies": { + "@oozcitak/dom": "1.15.10", + "@oozcitak/infra": "1.0.8", + "@oozcitak/util": "8.3.8", + "js-yaml": "3.14.1" + }, + "engines": { + "node": ">=12.0" + } + }, + "node_modules/xmlbuilder2/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/xmlbuilder2/node_modules/js-yaml": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", + "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/package.json b/package.json index 5547f33..08d296f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "preview": "vite preview" }, "dependencies": { + "file-saver": "^2.0.5", + "gpx-builder": "^5.2.1", "leaflet": "^1.9.4", "nanoid": "^5.0.3", "preact": "^10.13.1" @@ -23,6 +25,7 @@ "@babel/plugin-syntax-jsx": "^7.23.3", "@preact/preset-vite": "^2.5.0", "@tsconfig/strictest": "^2.0.2", + "@types/file-saver": "^2.0.7", "@types/leaflet": "^1.9.8", "@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/parser": "^6.11.0", diff --git a/src/exporters/gpx.ts b/src/exporters/gpx.ts new file mode 100644 index 0000000..db53c3c --- /dev/null +++ b/src/exporters/gpx.ts @@ -0,0 +1,19 @@ +import { saveAs } from 'file-saver'; +import { GarminBuilder, buildGPX } from 'gpx-builder'; +import { Waypoint } from '../shared/types'; + +export const exportMarkersToGpx = (waypoints: Waypoint[]) => { + const builder = new GarminBuilder(); + builder.setSegmentPoints( + waypoints.map( + ({ coordinates }) => + new GarminBuilder.MODELS.Point( + coordinates.lat, + coordinates.lng, + ), + ), + ); + const gpx = buildGPX(builder.toObject()); + const gpxBlob = new Blob([gpx], { type: 'application/gpx+xml' }); + saveAs(gpxBlob, 'route.gpx'); +}; diff --git a/src/routePlanner/export.tsx b/src/routePlanner/export.tsx new file mode 100644 index 0000000..ab0a86d --- /dev/null +++ b/src/routePlanner/export.tsx @@ -0,0 +1,14 @@ +import { exportMarkersToGpx } from '../exporters/gpx'; +import { InternalProps } from './types'; + +import 'leaflet/dist/leaflet.css'; + +export const ExportComponent = ({ markers }: InternalProps) => { + return ( + <> + + + ); +}; diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx index 69bf26d..9364ead 100644 --- a/src/routePlanner/index.tsx +++ b/src/routePlanner/index.tsx @@ -1,10 +1,12 @@ +import { nanoid } from 'nanoid'; import { useMemo, useState } from 'preact/hooks'; +import { Coordinates } from '../shared/types'; +import { ExportComponent } from './export'; import { MapComponent } from './map'; -import { Coordinates, Marker } from './types'; +import { MarkersComponent } from './markers'; +import { Marker } from './types'; import './style.css'; -import { MarkersComponent } from './markers'; -import { nanoid } from 'nanoid'; export const RoutePlanner = () => { const [markers, setMarkers] = useState([]); @@ -41,6 +43,9 @@ export const RoutePlanner = () => {
+
+ +
diff --git a/src/routePlanner/style.css b/src/routePlanner/style.css index 2662279..72289d0 100644 --- a/src/routePlanner/style.css +++ b/src/routePlanner/style.css @@ -1,15 +1,23 @@ section.route-planner { width: 100%; display: grid; - grid-template-columns: 1fr 2fr; column-gap: 1rem; - grid-template-areas: "markers map"; + row-gap: 1rem; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr min-content; + grid-template-areas: + "markers map" + "export map"; } section.route-planner > section.markers { grid-area: markers; } +section.route-planner > section.export { + grid-area: export; +} + section.route-planner > section.map { grid-area: map; } @@ -30,9 +38,10 @@ section.route-planner .map-container .leaflet-tooltip-pane .text { @media (max-width: 639px) { section.route-planner { grid-template-columns: 1fr; - row-gap: 1rem; + grid-template-rows: 1fr min-content 2fr; grid-template-areas: "markers" + "export" "map"; } diff --git a/src/routePlanner/types.ts b/src/routePlanner/types.ts index cc618f6..9fe80e4 100644 --- a/src/routePlanner/types.ts +++ b/src/routePlanner/types.ts @@ -1,12 +1,9 @@ -import type { LatLng } from 'leaflet'; +import { Coordinates, Waypoint } from '../shared/types'; -export type Coordinates = LatLng; - -export type Marker = { +export type Marker = Waypoint & { key: string; remove: () => void; index: number; - coordinates: Coordinates; }; export type InternalProps = { diff --git a/src/shared/types.ts b/src/shared/types.ts new file mode 100644 index 0000000..ce5eba8 --- /dev/null +++ b/src/shared/types.ts @@ -0,0 +1,7 @@ +import type { LatLng } from 'leaflet'; + +export type Coordinates = LatLng; + +export type Waypoint = { + coordinates: Coordinates; +}; diff --git a/src/style.css b/src/style.css index 21e599f..38f5277 100644 --- a/src/style.css +++ b/src/style.css @@ -14,7 +14,7 @@ } body { - padding: 1em; + padding: 1rem; display: flex; align-items: center; }