Add new schema

pnpm-lock.yaml

@@ -47,7 +47,7 @@ importers:
         version: 8.4.38
       solid-devtools:
         specifier: ^0.29.2
-        version: 0.29.2(solid-js@1.8.11)(vite@5.0.11)
+        version: 0.29.2(solid-js@1.8.11)(vite@5.0.11(@types/node@22.5.3))
       tailwindcss:
         specifier: ^3.4.3
         version: 3.4.3
@@ -56,10 +56,10 @@ importers:
         version: 5.3.3
       vite:
         specifier: ^5.0.11
-        version: 5.0.11
+        version: 5.0.11(@types/node@22.5.3)
       vite-plugin-solid:
         specifier: ^2.8.2
-        version: 2.8.2(solid-js@1.8.11)(vite@5.0.11)
+        version: 2.8.2(solid-js@1.8.11)(vite@5.0.11(@types/node@22.5.3))
 
 packages:
 
@@ -640,6 +640,9 @@ packages:
   '@types/leaflet@1.9.12':
     resolution: {integrity: sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==}
 
+  '@types/node@22.5.3':
+    resolution: {integrity: sha512-njripolh85IA9SQGTAqbmnNZTdxv7X/4OYGPz8tgy5JDr8MP+uDBa921GpYEoDDnwm0Hmn5ZPeJgiiSTPoOzkQ==}
+
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -1862,6 +1865,9 @@ packages:
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
   update-browserslist-db@1.0.13:
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -2536,6 +2542,11 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.14
 
+  '@types/node@22.5.3':
+    dependencies:
+      undici-types: 6.19.8
+    optional: true
+
   '@types/semver@7.5.8': {}
 
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)':
@@ -3798,7 +3809,7 @@ snapshots:
 
   slash@3.0.0: {}
 
-  solid-devtools@0.29.2(solid-js@1.8.11)(vite@5.0.11):
+  solid-devtools@0.29.2(solid-js@1.8.11)(vite@5.0.11(@types/node@22.5.3)):
     dependencies:
       '@babel/core': 7.23.7
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7)
@@ -3807,7 +3818,7 @@ snapshots:
       '@solid-devtools/shared': 0.13.1(solid-js@1.8.11)
       solid-js: 1.8.11
     optionalDependencies:
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@22.5.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -3998,6 +4009,9 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
+  undici-types@6.19.8:
+    optional: true
+
   update-browserslist-db@1.0.13(browserslist@4.22.2):
     dependencies:
       browserslist: 4.22.2
@@ -4018,7 +4032,7 @@ snapshots:
 
   validate-html-nesting@1.2.2: {}
 
-  vite-plugin-solid@2.8.2(solid-js@1.8.11)(vite@5.0.11):
+  vite-plugin-solid@2.8.2(solid-js@1.8.11)(vite@5.0.11(@types/node@22.5.3)):
     dependencies:
       '@babel/core': 7.23.7
       '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7)
@@ -4027,22 +4041,23 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.8.11
       solid-refresh: 0.6.3(solid-js@1.8.11)
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@22.5.3)
-      vitefu: 0.2.5(vite@5.0.11)
+      vitefu: 0.2.5(vite@5.0.11(@types/node@22.5.3))
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.0.11:
+  vite@5.0.11(@types/node@22.5.3):
     dependencies:
       esbuild: 0.19.11
       postcss: 8.4.38
       rollup: 4.9.5
     optionalDependencies:
+      '@types/node': 22.5.3
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.0.11):
+  vitefu@0.2.5(vite@5.0.11(@types/node@22.5.3)):
     optionalDependencies:
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@22.5.3)
 
   which-boxed-primitive@1.0.2:
     dependencies:

public/n/lines.json

@@ -0,0 +1,12 @@
+[
+    {
+        "id": 1,
+        "name": "1",
+        "color": "#ea4fb2"
+    },
+    {
+        "id": 2,
+        "name": "2",
+        "color": "black"
+    }
+]

src/App.tsx

@@ -2,12 +2,14 @@ import "leaflet/dist/leaflet.css";
 import { Index } from "./pages/Index";
 import { Route, Router } from "@solidjs/router";
 import { Editor } from "./pages/Editor";
+import { Index2 } from "./pages/Index2";
 
 export default function() {
     return (
         <>
             <Router>
                 <Route path="/" component={Index} />
+                <Route path="/new" component={Index2} />
                 <Route path="/editor" component={Editor} />
             </Router>
         </>

src/new_types.ts

@@ -0,0 +1,26 @@
+
+export type Lines = Array<Line>
+
+export interface Line {
+    id: number
+    /** E.g.: `10` */
+    name: string
+    /** Hex code */
+    color: string
+}
+
+export type Routes = Array<Route>
+
+export interface Route {
+    /** Name that differentiates this route from others
+     * from the same line.
+     *
+     * May contain any combinatior of letters and numbers.
+     *
+     * E.g.: `A`, `B2-A`
+     */
+    name: string
+    /** `[lat,lng]`, stored as arrays to save space in JSON */
+    points: Array<[number, number]>
+}
+

src/pages/Editor.tsx

@@ -53,7 +53,7 @@ export function Editor() {
     });
 
     const saveJson = () => {
-        const jsonData = JSON.stringify(points());
+        const jsonData = JSON.stringify(points().map((obj) => [obj.lat,obj.lng]));
         const file = new Blob([jsonData], {type: "application/json"});
         saveAs(file, "output.json");
     };
@@ -99,7 +99,8 @@ export function Editor() {
                     </button>
                     <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
                         onClick={() => {
-                            setPoints([]);
+                            const confirmation = confirm("¿Estas seguro? Se perderán todos los puntos");
+                            if (confirmation) setPoints([]);
                         }}
                     >
                         Reiniciar

src/pages/Index2.tsx

@@ -0,0 +1,100 @@
+import { Map, map, polyline, tileLayer } from "leaflet";
+import { createResource, For, onMount, Suspense } from "solid-js";
+import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
+import { Line, Lines, Route, Routes } from "../new_types";
+
+let g_map: Map | null = null;
+
+export function Index2() {
+    const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
+
+    onMount(() => {
+        const l_map = map(container as HTMLElement)
+            .setView([-16.40171, -71.53040], 13);
+        g_map = l_map;
+
+        tileLayer("/tiles/{z}/{x}/{y}.jpg", {
+            maxZoom: 17,
+            minZoom: 12,
+            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+        }).addTo(l_map);
+    });
+
+    return (
+        <div class="grid grid-cols-[15rem_auto]">
+            <div class="h-screen overflow-scroll">
+                <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
+
+                <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
+                    Lineas
+                </h2>
+
+                <LinesEl />
+            </div>
+            <div class="py-[0.5vh] pr-2">
+                <div class="rounded-lg overflow-hidden p-1"
+                    style="box-shadow: inset 0 0 5px 0px var(--main)"
+                >
+                    {container}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function LinesEl() {
+    const [linesData] = createResource<Lines>(async() => {
+        const res = await fetch("/n/lines.json");
+        if (!res.ok) throw new Error("Error fetching data");
+        return res.json();
+    });
+
+    return (
+        <>
+            <Suspense fallback={<div>Cargando...</div>}>
+                <For each={linesData() ?? []}>
+                    {(l) => <LineEl line={l} />}
+                </For>
+            </Suspense>
+        </>
+    );
+}
+
+function LineEl(props: { line: Line }) {
+    const [routesData] = createResource<Routes>(async() => {
+        const res = await fetch(`/n/routes_${props.line.id}.json`);
+        if (!res.ok) throw new Error("Error fetching data");
+        return res.json();
+    });
+
+    return (
+        <div style={`color: ${props.line.color}`}>
+            <LineSegmentsIcon class="px-1" fill={props.line.color} />
+            <span class="px-2">
+                Linea {props.line.name}
+            </span>
+            <Suspense>
+                <For each={routesData() ?? []}>
+                    {(r) => (
+                        <RouteEl route={r} color={props.line.color} />
+                    )}
+                </For>
+            </Suspense>
+        </div>
+    );
+}
+
+function RouteEl(props: { route: Route, color: string }) {
+    // Render the dots into the map
+    const coords = props.route.points.map(([lat,lng]) => ({lat, lng}));
+    const line = polyline(coords, { color: props.color});
+    line.addTo(g_map!);
+
+    return (
+        <div class="pl-10">
+            Ruta {props.route.name}
+        </div>
+    );
+}
+
+