Remove previous index. Create a new page for mobile users
This commit is contained in:
parent
102f7a2d19
commit
b836e5e8eb
@ -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>
|
||||
|
||||
@ -1,39 +1,38 @@
|
||||
import { Map, map, polyline, tileLayer } from "leaflet";
|
||||
import { createEffect, createResource, For, onMount, Suspense } from "solid-js";
|
||||
import { Line, RouteWrapper, Route, LineWrapper, PointsWrapper } from "../types";
|
||||
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 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: "© Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
|
||||
}).addTo(l_map);
|
||||
attribution: "Map data © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
|
||||
}).addTo(global_map);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-[15rem_auto]">
|
||||
<div class="h-screen overflow-scroll">
|
||||
<div class="grid md:grid-cols-[15rem_auto] md:grid-rows-none grid-rows-[65vh_35vh]">
|
||||
<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="rounded-lg overflow-hidden p-1"
|
||||
<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}
|
||||
@ -43,18 +42,17 @@ export function Index() {
|
||||
);
|
||||
}
|
||||
|
||||
function Lines() {
|
||||
const [lineData] = createResource<LineWrapper>(async() => {
|
||||
const res = await fetch("/data/root.json");
|
||||
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={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 res = await fetch(`/data/cuenca_${props.line.id_cuenca}.json`);
|
||||
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}`}>
|
||||
<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">
|
||||
Linea {props.line.name ?? "A"}
|
||||
<span class="px-2" title={props.line.district}>
|
||||
Linea {props.line.name}
|
||||
</span>
|
||||
<Suspense>
|
||||
<For each={lineRoute()?.data ?? []}>
|
||||
{(r) => <RouteEl route={r} parent_id={props.line.id_cuenca} color={props.line.color} />}
|
||||
<For each={routesData() ?? []}>
|
||||
{(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 }) {
|
||||
const [points] = createResource<PointsWrapper>(async() => {
|
||||
const res = await fetch(`/data/cuenca_${props.parent_id}_ruta_${props.route.id_ruta}_ida.json`);
|
||||
if (!res.ok) throw new Error("Error fetching data");
|
||||
return res.json();
|
||||
});
|
||||
const [return_points] = createResource<PointsWrapper>(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();
|
||||
});
|
||||
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(() => {
|
||||
// Render the dots into the map
|
||||
if (!points()) return;
|
||||
const coords = points()!.data[0]!.ruta_json;
|
||||
|
||||
const line = polyline(coords, { color: props.color});
|
||||
line.addTo(g_map!);
|
||||
if (global_count() === 0 || departure_count() > 0) {
|
||||
departure_polyline.addTo(global_map!);
|
||||
} else {
|
||||
departure_polyline.removeFrom(global_map!);
|
||||
}
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
// 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!);
|
||||
// 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 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">
|
||||
Ruta {props.route.cod_ruta}
|
||||
</div>
|
||||
<button
|
||||
class="grid grid-cols-[auto_2.75rem_3.5rem] w-full text-left cursor-pointer"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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 © <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>
|
||||
);
|
||||
}
|
||||
8
src/pages/IndexMobile.tsx
Normal file
8
src/pages/IndexMobile.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
export function IndexMobile() {
|
||||
return (
|
||||
<div>
|
||||
Mobile index :D
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user