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

Render all routes when none is focused

master
Araozu 2024-09-09 12:01:06 -05:00
parent f6cdf09974
commit 2491560cd2
4 changed files with 37 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/n/routes_1.json
View File

File diff suppressed because one or more lines are too long

4
src/pages/Editor.tsx
View File

@ -152,7 +152,7 @@ function RouteSelector(props: {
<div class="border border-c-on-bg rounded p-1 my-2">
Puntos:
<br />
<div class="h-32 overflow-hidden">
<div class="h-32 overflow-x-hidden overflow-y-scroll">
<For each={points()}>
{(point) => <div class="whitespace-nowrap overflow-hidden text-sm">{point.lat}; {point.lng}</div>}
</For>
@ -161,7 +161,7 @@ function RouteSelector(props: {
<div class="text-right">
<button
class={`bg-green-400 text-black py-1 px-2 mr-1 rounded ${button_classes()}`}
class={"bg-green-400 text-black py-1 px-2 mr-1 rounded"}
onClick={pop}
>
Retroceder

1
src/pages/Index.tsx
View File

@ -98,6 +98,7 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) {
createEffect(() => {
// Render the dots into the map
if (!points()) return;
const coords = points()!.data[0]!.ruta_json;
const line = polyline(coords, { color: props.color});

104
src/pages/Index2.tsx
View File

@ -3,15 +3,8 @@ import { createEffect, createResource, createSignal, For, onMount, Suspense } fr
import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
import { Line, Lines, Route, Routes } from "../new_types";
const LINE_OPACITY = 1;
let global_map: L.Map | null = null;
// Stores the polyline rendered in the map.
// The first object stores Lines, the second stores routes
// Indexed by their names.
// The array is the polyline, and wether to render it (> 0) (set opacity to LINE_OPACITY)
const lines_store: Map<string, Map<string, [L.Polyline, Array<L.Polygon>, number]>> = new Map();
const [global_count, set_global_count] = createSignal(0);
export function Index2() {
const container = <div class="md:h-[98vh] h-[65vh] md:rounded-lg dark:opacity-60" />;
@ -97,26 +90,32 @@ function LineEl(props: { line: Line }) {
);
}
function RouteEl(props: { line_name: string, route: Route, color: string }) {
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});
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 (departure_count() > 0) {
if (global_count() === 0 || departure_count() > 0) {
departure_polyline.addTo(global_map!);
} else {
departure_polyline.removeFrom(global_map!);
}
});
createEffect(() => {
if (return_count() > 0) {
// 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!);
@ -126,9 +125,11 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
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);
}
@ -136,9 +137,11 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
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);
}
@ -165,22 +168,34 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
<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}
@ -189,13 +204,12 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
</span>
<span
class={`text-center border-2 border-transparent ${return_classes()}`}
onMouseEnter={(ev) => {
ev.preventDefault();
ev.stopPropagation();
onMouseEnter={() => {
set_global_count((c) => c + 1);
set_return_count((c) => c + 1);
}}
onMouseLeave={(ev) => {
ev.stopPropagation();
onMouseLeave={() => {
set_global_count((c) => c - 1);
set_return_count((c) => c - 1);
}}
onClick={toggle_return}
@ -205,57 +219,3 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
</button>
);
}
function highlight_route(line_name: string, route_name: string) {
const arr = lines_store.get(line_name)?.get(route_name);
if (arr !== undefined) {
arr[2] += 1;
}
re_render_polylines();
}
function unhighlight_route(line_name: string, route_name: string) {
const arr = lines_store.get(line_name)?.get(route_name);
if (arr !== undefined) {
arr[2] -= 1;
}
re_render_polylines();
}
function re_render_polylines() {
// This keeps track of how many path are rendered.
// If this is 0, then all paths should be rendered.
let render_count = 0;
for (const [, line_map] of lines_store) {
for (const [, [route_polilyne, arrows, active_count]] of line_map) {
if (active_count > 0) {
route_polilyne.setStyle({opacity: LINE_OPACITY});
render_count += 1;
// if the route has arrows and is manually toggled,
// render the arrows
for (const a of arrows) {
a.addTo(global_map!);
}
} else {
route_polilyne.setStyle({opacity: 0});
for (const a of arrows) {
a.removeFrom(global_map!);
}
}
}
}
if (render_count === 0) {
// enable all paths
for (const [, line_map] of lines_store) {
for (const [, [route_polilyne]] of line_map) {
route_polilyne.setStyle({opacity: LINE_OPACITY});
}
}
}
}