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

Improve path highlighting on click

master
Araozu 2024-09-04 11:45:06 -05:00
parent 047a6ad218
commit edf0abe86a
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/Index2.tsx
View File

@ -1,5 +1,5 @@
import L from "leaflet";
import { createResource, For, onMount, Suspense } from "solid-js";
import { createResource, createSignal, For, onMount, Suspense } from "solid-js";
import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
import { Line, Lines, Route, Routes } from "../new_types";
@ -98,6 +98,8 @@ function LineEl(props: { line: Line }) {
}
function RouteEl(props: { line_name: string, route: Route, color: string }) {
const [active, setActive] = createSignal(false);
// 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 });
@ -113,16 +115,27 @@ function RouteEl(props: { line_name: string, route: Route, color: string }) {
lines_store.get(line_name)!.set(props.route.name, [line, 0]);
const set_highlighted = () => {
const is_active = active();
const arr = lines_store.get(props.line_name)?.get(props.route.name);
if (arr !== undefined) {
if (is_active && arr !== undefined) {
arr[1] -= 1;
setActive(false);
} else if (!is_active && arr !== undefined) {
arr[1] += 1;
setActive(true);
}
};
const active_classes = () => {
if (active()) return "underline bg-[var(--hover-bg)] text-[var(--hover-on-bg)]";
else return "";
};
return (
<button
class="inline-block w-full text-left cursor-pointer pl-10
hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)]"
class={`inline-block w-full text-left cursor-pointer pl-10
hover:bg-[var(--hover-bg)] hover:text-[var(--hover-on-bg)] ${active_classes()}`}
onClick={set_highlighted}
onMouseEnter={() => highlight_route(props.line_name, props.route.name)}
onMouseLeave={() => unhighlight_route(props.line_name, props.route.name)}