From f75f33611a214d5fec809df732576389fcddd2dc Mon Sep 17 00:00:00 2001 From: Araozu Date: Tue, 3 Sep 2024 19:18:51 -0500 Subject: [PATCH] Create a route editor --- package.json | 3 ++ pnpm-lock.yaml | 28 ++++++++++ src/App.tsx | 7 ++- src/index.css | 2 +- src/pages/Editor.tsx | 123 +++++++++++++++++++++++++++++++++++++++++++ src/pages/Index.tsx | 16 +++++- 6 files changed, 176 insertions(+), 3 deletions(-) create mode 100644 src/pages/Editor.tsx diff --git a/package.json b/package.json index 3580f5e..72f2f7d 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,10 @@ "vite-plugin-solid": "^2.8.2" }, "dependencies": { + "@solidjs/router": "^0.14.3", + "@types/file-saver": "^2.0.7", "@types/leaflet": "^1.9.12", + "file-saver": "^2.0.5", "leaflet": "^1.9.4", "solid-js": "^1.8.11" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc5b3d5..c56776b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,18 @@ importers: .: dependencies: + '@solidjs/router': + specifier: ^0.14.3 + version: 0.14.3(solid-js@1.8.11) + '@types/file-saver': + specifier: ^2.0.7 + version: 2.0.7 '@types/leaflet': specifier: ^1.9.12 version: 1.9.12 + file-saver: + specifier: ^2.0.5 + version: 2.0.5 leaflet: specifier: ^1.9.4 version: 1.9.4 @@ -599,6 +608,11 @@ packages: peerDependencies: solid-js: ^1.6.12 + '@solidjs/router@0.14.3': + resolution: {integrity: sha512-9p4k4zL2baK/1XRQALbFcaQ4IikjkWmxqYQtFqLzjONUejhL1uqJHtzxB4tZjmNqtRANVRnTDbJfzjvaD9k+pQ==} + peerDependencies: + solid-js: ^1.8.6 + '@types/babel__core@7.20.5': resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} @@ -614,6 +628,9 @@ packages: '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/file-saver@2.0.7': + resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==} + '@types/geojson@7946.0.14': resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==} @@ -1052,6 +1069,9 @@ packages: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} + file-saver@2.0.5: + resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==} + fill-range@7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} @@ -2479,6 +2499,10 @@ snapshots: dependencies: solid-js: 1.8.11 + '@solidjs/router@0.14.3(solid-js@1.8.11)': + dependencies: + solid-js: 1.8.11 + '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.22.5 @@ -2502,6 +2526,8 @@ snapshots: '@types/estree@1.0.5': {} + '@types/file-saver@2.0.7': {} + '@types/geojson@7946.0.14': {} '@types/json-schema@7.0.15': {} @@ -3127,6 +3153,8 @@ snapshots: dependencies: flat-cache: 3.2.0 + file-saver@2.0.5: {} + fill-range@7.0.1: dependencies: to-regex-range: 5.0.1 diff --git a/src/App.tsx b/src/App.tsx index e70bd38..7e9f71a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,15 @@ import "leaflet/dist/leaflet.css"; import { Index } from "./pages/Index"; +import { Route, Router } from "@solidjs/router"; +import { Editor } from "./pages/Editor"; export default function() { return ( <> - + + + + ); } diff --git a/src/index.css b/src/index.css index b16ef15..9bcca5e 100644 --- a/src/index.css +++ b/src/index.css @@ -19,9 +19,9 @@ html { background-color: var(--bg); + color: var(--on-bg); } body { font-family: "Atkinson Hyperlegible", sans-serif; - } diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx new file mode 100644 index 0000000..4e325fd --- /dev/null +++ b/src/pages/Editor.tsx @@ -0,0 +1,123 @@ +import { saveAs } from "file-saver"; +import L from "leaflet"; +import { createEffect, createSignal, For, onMount } from "solid-js"; + +let map: L.Map | null = null; + +export function Editor() { + const container =
; + const [points, setPoints] = createSignal>([]); + + let currentPolyline: L.Polyline | null = null; + + onMount(() => { + map = L.map(container as HTMLElement) + .setView([-16.40171, -71.53040], 13); + + L.tileLayer("/tiles/{z}/{x}/{y}.jpg", { + maxZoom: 18, + minZoom: 12, + attribution: "© Map data OpenStreetMap", + }).addTo(map); + + // Set up click logic + map.addEventListener("click", (ev) => { + const click_lat_lng = ev.latlng; + + // Update the state + setPoints((x) => [...x, click_lat_lng]); + console.log(click_lat_lng); + }); + }); + + // Re-draws the polyline + createEffect(() => { + const p = points(); + + // Delete the polyline + if (p.length === 0) { + if (currentPolyline !== null) { + currentPolyline.removeFrom(map!); + } + // + } else { + // delete previous polyline, if any + if (currentPolyline !== null) { + currentPolyline.removeFrom(map!); + } + + currentPolyline = L.polyline(p, {color: "red"}); + currentPolyline.addTo(map!); + } + + }); + + const saveJson = () => { + const jsonData = JSON.stringify(points()); + const file = new Blob([jsonData], {type: "application/json"}); + saveAs(file, "output.json"); + }; + + return ( +
+
+

AQP combi

+

+ Creador de rutas +

+ +

+ Haz click en cualquier parte del mapa para empezar. +
+ Luego, haz click izquierdo en el mapa para agregar un + punto. +
+ Haz click en el boton "Retroceder" para borrar el último punto. +
+ Haz click en el boton "Reiniciar" para borrar todos los puntos. +
+ Presiona el boton "Guardar" para generar las + coordenadas de la ruta. +

+ +
+ Puntos: +
+
+ + {(p) =>

{p.lat},{p.lng}

} + +
+ + + +
+
+
+
+ {container} +
+
+
+ ); +} diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 6d80c31..dd09abc 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -13,7 +13,6 @@ export function Index() { .setView([-16.40171, -71.53040], 13); g_map = l_map; - // tileLayer("http://localhost:34005/tiles/{z}/{x}/{y}.jpg", { tileLayer("/tiles/{z}/{x}/{y}.jpg", { maxZoom: 17, minZoom: 12, @@ -91,6 +90,11 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) { if (!res.ok) throw new Error("Error fetching data"); return res.json(); }); + const [return_points] = createResource(async() => { + const res = await fetch(`/data/cuenca_${props.parent_id}_ruta_${props.route.id_ruta}_vuelta.json`); + if (!res.ok) throw new Error("Error fetching data"); + return res.json(); + }); createEffect(() => { if (points.state === "ready") { @@ -102,6 +106,16 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) { } }); + createEffect(() => { + if (return_points.state === "ready") { + // Render the dots into the map + const coords = return_points()!.data[0]!.ruta_json; + + const line = polyline(coords, { color: props.color}); + line.addTo(g_map!); + } + }); + return (
Ruta {props.route.cod_ruta}