fernando/aqp-combi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework route rendering to separate departure and return

Browse Source
This commit is contained in:
Araozu 2024-09-09 09:39:58 -05:00
parent eb24c56bf6
commit f6cdf09974
3 changed files with 87 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/n/routes_1.json
View File

File diff suppressed because one or more lines are too long

2
src/pages/Editor.tsx
View File

@ -34,7 +34,7 @@ export function Editor() {
name: route_name(),
departure: departure_points().map(({lat,lng}) => [lat,lng]),
departure_arrows: [],
return: departure_points().map(({lat,lng}) => [lat,lng]),
return: return_points().map(({lat,lng}) => [lat,lng]),
return_arrows: [],
};

128
src/pages/Index2.tsx
View File

@ -1,5 +1,5 @@
import L from "leaflet";
import { createResource, createSignal, For, onMount, Suspense } from "solid-js";
import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
import { Line, Lines, Route, Routes } from "../new_types";
@ -23,7 +23,7 @@ export function Index2() {
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(global_map);
});
@ -98,67 +98,107 @@ function LineEl(props: { line: Line }) {
}
function RouteEl(props: { line_name: string, route: Route, color: string }) {
const [active, setActive] = createSignal(false);
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);
// Render the dots into the map
const coords = props.route.points.map(([lat, lng]) => ({ lat, lng }));
const line = L.polyline(coords, { color: props.color, opacity: LINE_OPACITY });
line.addTo(global_map!);
// 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});
// Store the route in the global map
// Create line map if neccesary
const line_name = props.line_name;
if (!lines_store.has(line_name)) {
lines_store.set(line_name, new Map());
// Rended the lines into the map
createEffect(() => {
if (departure_count() > 0) {
departure_polyline.addTo(global_map!);
} else {
departure_polyline.removeFrom(global_map!);
}
// Create the arrows, if any
const arrows = [];
if (props.route.arrows) {
for (const a of props.route.arrows) {
const arrow = L.polygon(a, {color: props.color});
arrows.push(arrow);
});
createEffect(() => {
if (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_departure_count((c) => c - 1);
set_departure_active(false);
} else {
set_departure_count((c) => c + 1);
set_departure_active(true);
}
// store
lines_store.get(line_name)!.set(props.route.name, [line, arrows, 0]);
const set_highlighted = () => {
const is_active = active();
const arr = lines_store.get(props.line_name)?.get(props.route.name);
if (is_active && arr !== undefined) {
arr[2] -= 1;
setActive(false);
} else if (!is_active && arr !== undefined) {
arr[2] += 1;
setActive(true);
};
const toggle_return = () => {
const currently_active = return_active();
if (currently_active) {
set_return_count((c) => c - 1);
set_return_active(false);
} else {
set_return_count((c) => c + 1);
set_return_active(true);
}
};
const active_classes = () => {
if (active()) return "underline bg-[var(--hover-bg)] text-[var(--hover-on-bg)] border-[var(--hover-bg)]";
else return "border-transparent";
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={`grid grid-cols-[auto_2.5rem_3rem] w-full text-left cursor-pointer pl-10 border-2
hover:bg-[var(--hover-br)] hover:text-[var(--hover-on-br)] hover:border-r-hover-bg ${active_classes()}`}
onClick={set_highlighted}
onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}
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_departure_count((c) => c + 1);
set_return_count((c) => c + 1);
}}
onMouseLeave={() => {
set_departure_count((c) => c - 1);
set_return_count((c) => c - 1);
}}
>
<span>
Ruta {props.route.name}
</span>
<span
class="hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)] text-center"
class={`text-center border-2 border-transparent ${departure_classes()}`}
onMouseEnter={() => {
set_departure_count((c) => c + 1);
}}
onMouseLeave={() => {
set_departure_count((c) => c - 1);
}}
onClick={toggle_departure}
>
Ida
</span>
<span
class="hover:bg-r-hover-bg hover:text-r-hover-on-bg text-center"
class={`text-center border-2 border-transparent ${return_classes()}`}
onMouseEnter={(ev) => {
ev.preventDefault();
ev.stopPropagation();
set_return_count((c) => c + 1);
}}
onMouseLeave={(ev) => {
ev.stopPropagation();
set_return_count((c) => c - 1);
}}
onClick={toggle_return}
>
Vuelta
</span>