Remove previous index. Create a new page for mobile users

src/App.tsx

@@ -1,8 +1,7 @@
 import "leaflet/dist/leaflet.css";
-import { Index } from "./pages/Index";
 import { Route, HashRouter } from "@solidjs/router";
 import { Editor } from "./pages/Editor";
-import { Index2 } from "./pages/Index2";
+import { Index } from "./pages/Index";
 import { Arrow } from "./pages/Arrow";
 
 export default function() {
@@ -10,7 +9,6 @@ export default function() {
         <>
             <HashRouter>
                 <Route path="/" component={Index} />
-                <Route path="/new" component={Index2} />
                 <Route path="/editor" component={Editor} />
                 <Route path="/arrow" component={Arrow} />
             </HashRouter>

src/pages/Index.tsx

@@ -1,39 +1,38 @@
-import { Map, map, polyline, tileLayer } from "leaflet";
+import L from "leaflet";
-import { createEffect, createResource, For, onMount, Suspense } from "solid-js";
+import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
-import { Line, RouteWrapper, Route, LineWrapper, PointsWrapper } from "../types";
 import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
+import { Line, Lines, Route, Routes } from "../new_types";
 
-let g_map: Map | null = null;
+let global_map: L.Map | null = null;
+const [global_count, set_global_count] = createSignal(0);
 
 export function Index() {
-    const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
+    const container = <div class="md:h-[98vh] h-[65vh] md:rounded-lg dark:opacity-60" />;
 
     onMount(() => {
-        const l_map = map(container as HTMLElement)
+        global_map = L.map(container as HTMLElement)
             .setView([-16.40171, -71.53040], 13);
-        g_map = l_map;
 
-        tileLayer("/tiles/{z}/{x}/{y}.jpg", {
+        L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
             maxZoom: 17,
             minZoom: 12,
-            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            attribution: "Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
-        }).addTo(l_map);
+        }).addTo(global_map);
     });
 
     return (
-        <div class="grid grid-cols-[15rem_auto]">
+        <div class="grid md:grid-cols-[15rem_auto] md:grid-rows-none grid-rows-[65vh_35vh]">
-            <div class="h-screen overflow-scroll">
+            <div class="md: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>
 
-                <Lines />
+                <LinesEl />
-
             </div>
-            <div class="py-[0.5vh] pr-2">
+            <div class="md:py-[0.5vh] md:pr-2">
-                <div class="rounded-lg overflow-hidden p-1"
+                <div class="md:rounded-lg overflow-hidden md:p-1"
                     style="box-shadow: inset 0 0 5px 0px var(--main)"
                 >
                     {container}
@@ -43,18 +42,17 @@ export function Index() {
     );
 }
 
-function Lines() {
+function LinesEl() {
-    const [lineData] = createResource<LineWrapper>(async() => {
+    const [linesData] = createResource<Lines>(async() => {
-        const res = await fetch("/data/root.json");
+        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={lineData()?.data ?? []}>
+                <For each={linesData() ?? []}>
                     {(l) => <LineEl line={l} />}
                 </For>
             </Suspense>
@@ -63,61 +61,161 @@ function Lines() {
 }
 
 function LineEl(props: { line: Line }) {
-    const [lineRoute] = createResource<RouteWrapper>(async() => {
+    const [routesData] = createResource<Routes>(async() => {
-        const res = await fetch(`/data/cuenca_${props.line.id_cuenca}.json`);
+        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}`}>
+        <div
+            style={`color: ${props.line.color};--hover-bg: ${props.line.hover_bg};--hover-on-bg: ${props.line.hover_on_bg}`}
+        >
             <LineSegmentsIcon class="px-1" fill={props.line.color} />
-            <span class="px-2">
+            <span class="px-2" title={props.line.district}>
-                Linea {props.line.name ?? "A"}
+                Linea {props.line.name}
             </span>
             <Suspense>
-                <For each={lineRoute()?.data ?? []}>
+                <For each={routesData() ?? []}>
-                    {(r) => <RouteEl route={r} parent_id={props.line.id_cuenca} color={props.line.color} />}
+                    {(r) => (
+                        <RouteEl
+                            line_name={props.line.name}
+                            route={r}
+                            color={props.line.color}
+                        />
+                    )}
                 </For>
             </Suspense>
         </div>
     );
 }
 
-function RouteEl(props: { route: Route, parent_id: number, color: string }) {
+function RouteEl(props: {
-    const [points] = createResource<PointsWrapper>(async() => {
+    line_name: string,
-        const res = await fetch(`/data/cuenca_${props.parent_id}_ruta_${props.route.id_ruta}_ida.json`);
+    route: Route,
-        if (!res.ok) throw new Error("Error fetching data");
+    color: string,
-        return res.json();
+}) {
-    });
+    const [departure_active, set_departure_active] = createSignal(false);
-    const [return_points] = createResource<PointsWrapper>(async() => {
+    const [return_active, set_return_active] = createSignal(false);
-        const res = await fetch(`/data/cuenca_${props.parent_id}_ruta_${props.route.id_ruta}_vuelta.json`);
+    const [departure_count, set_departure_count] = createSignal(0);
-        if (!res.ok) throw new Error("Error fetching data");
+    const [return_count, set_return_count] = createSignal(0);
-        return res.json();
-    });
 
+    // Create departure and return polylines
+    const departure_polyline = L.polyline(props.route.departure, { color: props.color });
+    const return_polyline = L.polyline(props.route.return, { color: props.color });
+
+    // Rended the lines into the map
     createEffect(() => {
-        // Render the dots into the map
+        if (global_count() === 0 || departure_count() > 0) {
-        if (!points()) return;
+            departure_polyline.addTo(global_map!);
-        const coords = points()!.data[0]!.ruta_json;
+        } else {
-
+            departure_polyline.removeFrom(global_map!);
-        const line = polyline(coords, { color: props.color});
+        }
-        line.addTo(g_map!);
     });
-
     createEffect(() => {
-        // Render the dots into the map
+        // if global count === 0, then no route is focused.
-        const coords = return_points()!.data[0]!.ruta_json;
+        // in that case, all routes should be rendered
-
+        if (global_count() === 0 || return_count() > 0) {
-        const line = polyline(coords, { color: props.color});
+            return_polyline.addTo(global_map!);
-        line.addTo(g_map!);
+        } else {
+            return_polyline.removeFrom(global_map!);
+        }
     });
 
+    const toggle_departure = () => {
+        const currently_active = departure_active();
+        if (currently_active) {
+            set_global_count((c) => c - 1);
+            set_departure_count((c) => c - 1);
+            set_departure_active(false);
+        } else {
+            set_global_count((c) => c + 1);
+            set_departure_count((c) => c + 1);
+            set_departure_active(true);
+        }
+    };
+    const toggle_return = () => {
+        const currently_active = return_active();
+        if (currently_active) {
+            set_global_count((c) => c - 1);
+            set_return_count((c) => c - 1);
+            set_return_active(false);
+        } else {
+            set_global_count((c) => c + 1);
+            set_return_count((c) => c + 1);
+            set_return_active(true);
+        }
+    };
+
+    const departure_classes = () => {
+        if (departure_count() > 0) {
+            return "bg-r-hover-bg text-r-hover-on-bg";
+        } else {
+            return "";
+        }
+    };
+    const return_classes = () => {
+        if (return_count() > 0) {
+            return "bg-r-hover-bg text-r-hover-on-bg";
+        } else {
+            return "";
+        }
+    };
     return (
-        <div class="pl-10">
+        <button
-            Ruta {props.route.cod_ruta}
+            class="grid grid-cols-[auto_2.75rem_3.5rem] w-full text-left cursor-pointer"
-        </div>
+        >
+            <span
+                class={"pl-10 border-2 border-transparent hover:border-r-hover-bg"}
+                onMouseEnter={() => {
+                    set_global_count((c) => c + 1);
+                    set_departure_count((c) => c + 1);
+                    set_return_count((c) => c + 1);
+                }}
+                onMouseLeave={() => {
+                    set_global_count((c) => c - 1);
+                    set_departure_count((c) => c - 1);
+                    set_return_count((c) => c - 1);
+                }}
+                onClick={() => {
+                    if (departure_count() === 1) {
+                        toggle_departure();
+                    }
+                    if (return_count() === 1) {
+                        toggle_return();
+                    }
+                }}
+            >
+                Ruta {props.route.name}
+            </span>
+            <span
+                class={`text-center border-2 border-transparent ${departure_classes()}`}
+                onMouseEnter={() => {
+                    set_global_count((c) => c + 1);
+                    set_departure_count((c) => c + 1);
+                }}
+                onMouseLeave={() => {
+                    set_global_count((c) => c - 1);
+                    set_departure_count((c) => c - 1);
+                }}
+                onClick={toggle_departure}
+            >
+                Ida
+            </span>
+            <span
+                class={`text-center border-2 border-transparent ${return_classes()}`}
+                onMouseEnter={() => {
+                    set_global_count((c) => c + 1);
+                    set_return_count((c) => c + 1);
+                }}
+                onMouseLeave={() => {
+                    set_global_count((c) => c - 1);
+                    set_return_count((c) => c - 1);
+                }}
+                onClick={toggle_return}
+            >
+                Vuelta
+            </span>
+        </button>
     );
 }
-
-

src/pages/Index2.tsx

@@ -1,245 +0,0 @@
-import L from "leaflet";
-import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
-import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
-import { Line, Lines, Route, Routes } from "../new_types";
-
-let global_map: L.Map | null = null;
-const [global_count, set_global_count] = createSignal(0);
-
-export function Index2() {
-    const container = <div class="md:h-[98vh] h-screen md:rounded-lg dark:opacity-60" />;
-
-    onMount(() => {
-        global_map = L.map(container as HTMLElement)
-            .setView([-16.40171, -71.53040], 13);
-
-        L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
-            maxZoom: 17,
-            minZoom: 12,
-            attribution: "Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
-        }).addTo(global_map);
-    });
-
-    return (
-        <div class="grid md:grid-cols-[15rem_auto]">
-            <div
-                class="md:h-screen md:relative md:w-auto md:overflow-scroll bg-c-bg
-                    fixed z-[500] bottom-0 w-screen"
-            >
-                <h1 class="hidden md:block text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
-
-                <h2 class="hidden md:block bg-c-primary text-white py-2 px-2 font-bold text-lg">
-                    Lineas
-                </h2>
-
-                <LinesEl />
-            </div>
-            <div class="md:py-[0.5vh] md:pr-2">
-                <div class="md:rounded-lg overflow-hidden md: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};--hover-bg: ${props.line.hover_bg};--hover-on-bg: ${props.line.hover_on_bg}`}
-        >
-            <div class="inline-block bg-c-bg rounded-md m-2 border-2 border-[var(--color)]
-                md:m-0 md:border-none"
-            >
-                <LineSegmentsIcon class="px-1 hidden md:inline-block" fill={props.line.color} />
-                <span class="px-2 font-bold md:font-normal" title={props.line.district}>
-                    Linea {props.line.name}
-                </span>
-            </div>
-            <div class="absolute bottom-10 md:static">
-                <Suspense>
-                    <For each={routesData() ?? []}>
-                        {(r) => (
-                            <RouteEl
-                                line_name={props.line.name}
-                                route={r}
-                                color={props.line.color}
-                            />
-                        )}
-                    </For>
-                </Suspense>
-            </div>
-        </div>
-    );
-}
-
-function RouteEl(props: {
-    line_name: string,
-    route: Route,
-    color: string,
-}) {
-    const [departure_active, set_departure_active] = createSignal(false);
-    const [return_active, set_return_active] = createSignal(false);
-    const [departure_count, set_departure_count] = createSignal(0);
-    const [return_count, set_return_count] = createSignal(0);
-
-    // Create departure and return polylines
-    const departure_polyline = L.polyline(props.route.departure, { color: props.color });
-    const return_polyline = L.polyline(props.route.return, { color: props.color });
-
-    // Rended the lines into the map
-    createEffect(() => {
-        if (global_count() === 0 || departure_count() > 0) {
-            departure_polyline.addTo(global_map!);
-        } else {
-            departure_polyline.removeFrom(global_map!);
-        }
-    });
-    createEffect(() => {
-        // if global count === 0, then no route is focused.
-        // in that case, all routes should be rendered
-        if (global_count() === 0 || return_count() > 0) {
-            return_polyline.addTo(global_map!);
-        } else {
-            return_polyline.removeFrom(global_map!);
-        }
-    });
-
-    const toggle_departure = () => {
-        const currently_active = departure_active();
-        if (currently_active) {
-            set_global_count((c) => c - 1);
-            set_departure_count((c) => c - 1);
-            set_departure_active(false);
-        } else {
-            set_global_count((c) => c + 1);
-            set_departure_count((c) => c + 1);
-            set_departure_active(true);
-        }
-    };
-    const toggle_return = () => {
-        const currently_active = return_active();
-        if (currently_active) {
-            set_global_count((c) => c - 1);
-            set_return_count((c) => c - 1);
-            set_return_active(false);
-        } else {
-            set_global_count((c) => c + 1);
-            set_return_count((c) => c + 1);
-            set_return_active(true);
-        }
-    };
-
-    const both_classes = () => {
-        if (departure_active() && return_active()) {
-            return "bg-r-hover-bg text-r-hover-on-bg";
-        } else {
-            return "";
-        }
-    };
-    const departure_classes = () => {
-        if (departure_count() > 0) {
-            return "bg-r-hover-bg text-r-hover-on-bg";
-        } else {
-            return "";
-        }
-    };
-    const return_classes = () => {
-        if (return_count() > 0) {
-            return "bg-r-hover-bg text-r-hover-on-bg";
-        } else {
-            return "";
-        }
-    };
-    return (
-        <button
-            class="md:grid grid-cols-[auto_2.75rem_3.5rem] md:w-full md:m-0 text-left cursor-pointer md:border-none
-                focus-visible:outline-none
-                inline-block w-auto m-2 rounded-full"
-        >
-            <span
-                class={`md:pl-10 md:border-2 md:border-transparent hover:border-r-hover-bg ${both_classes()} md:rounded-none
-                    bg-c-bg border border-[var(--color)] rounded-full px-2`}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_departure_count((c) => c + 1);
-                    set_return_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_departure_count((c) => c - 1);
-                    set_return_count((c) => c - 1);
-                }}
-                onClick={() => {
-                    if (departure_active() && return_active()) {
-                        toggle_departure();
-                        toggle_return();
-                    } else {
-                        if (departure_count() === 1) {
-                            toggle_departure();
-                        }
-                        if (return_count() === 1) {
-                            toggle_return();
-                        }
-                    }
-                }}
-            >
-                Ruta {props.route.name}
-            </span>
-            <span
-                class={`md:inline-block hidden text-center border-2 border-transparent ${departure_classes()}`}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_departure_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_departure_count((c) => c - 1);
-                }}
-                onClick={toggle_departure}
-            >
-                Ida
-            </span>
-            <span
-                class={`md:inline-block hidden text-center border-2 border-transparent ${return_classes()}`}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_return_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_return_count((c) => c - 1);
-                }}
-                onClick={toggle_return}
-            >
-                Vuelta
-            </span>
-        </button>
-    );
-}

src/pages/IndexMobile.tsx

@@ -0,0 +1,8 @@
+
+export function IndexMobile() {
+    return (
+        <div>
+            Mobile index :D
+        </div>
+    );
+}