Trianglke

saferoute/src/App.tsx

@@ -2,50 +2,25 @@ import React, { useEffect, RefObject } from "react";
 import { Layer, Source } from "react-map-gl/maplibre";
 
 import "./App.css";
-import { Marker } from "react-map-gl/maplibre";
 import { Paper } from "@mui/material";
 
 import { usePlacesWidget } from "react-google-autocomplete";
 import { ClickableMap } from "./ClickableMap";
-import { GeolocateControl } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { LatLong, PatchedItinerary, PathFindingResponse } from "./types";
 import { routeToFeature } from "./routeUtils";
 
 const pathFindingURL =
-  "http://100.86.237.92:8080/otp/routers/default/plan?fromPlace={from}&toPlace={to}}&time=2:05pm&date=25-02-24&MODE=BICYCLE&arriveBy=FALSE&showIntermediateStops=true&wheelchair=TRUE";
+  "http://100.86.237.92:8080/otp/routers/default/plan?fromPlace={from}&toPlace={to}}&time=2:05pm&date=25-02-24&MODE=BICYCLE&arriveBy=FALSE&showIntermediateStops=true&wheelchair=FALSE";
 
 function App() {
   const [search, setSearch] = React.useState("");
   const [mapsValue, setMapsValue] = React.useState(null);
   const [start, setStart] = React.useState<LatLong>();
   const [end, setEnd] = React.useState<LatLong>();
   const [route, setRoute] = React.useState<PatchedItinerary[]>();
-  const [markers, setMarkers] = React.useState<LatLong[]>([]);
 
   useEffect(() => {
-    fetch("https://overpass-api.de/api/interpreter", {
-      method: "POST",
-      // headers: {
-      //   Accept: "application/json",
-      //   "Content-Type": "application/json",
-      // },
-      body:
-        "data=" +
-        encodeURIComponent(`
-        [out:json];
-        node(51.4935,-2.57634,51.5935,-2.67634);
-out;
-        `),
-    })
-      .then((response) => response.json())
-      .then((x) =>
-        setMarkers(
-          x.elements
-            .filter((e: any) => e.tags?.amenity)
-            .map((e: any) => [e.lat, e.lon])
-        )
-      );
     if (start && end) {
       fetch(
         pathFindingURL
@@ -172,14 +147,6 @@ out;
             />
           </Source>
         )}
-        {markers.map((marker, index) => (
-          <Marker
-            key={index}
-            // id={`marker-${index}`}
-            latitude={marker[0]}
-            longitude={marker[1]}
-          ></Marker>
-        ))}
       </ClickableMap>
     </div>
   );

saferoute/src/ClickableMap.tsx

@@ -3,8 +3,7 @@ import { Marker } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { LatLong, UnwrapForwardRefExoticComponent } from "./types";
 import { useEffect, useRef } from "react";
-import useTimeout from "@mui/utils/useTimeout";
-import {GeolocateControl as MaplibreGeolocateControl} from "maplibre-gl";
+import { GeolocateControl as MaplibreGeolocateControl } from "maplibre-gl";
 
 export type Props = {
   start: LatLong | undefined;
@@ -25,7 +24,7 @@ export const ClickableMap = ({
   useEffect(() => {
     // Activate as soon as the control is loaded
     locator.current?.trigger();
-  }, [locator.current]);
+  }, []);
 
   return (
     <Map
@@ -45,7 +44,7 @@ export const ClickableMap = ({
       }}
       {...props}
     >
-      <GeolocateControl ref={locator} position="bottom-right"/>
+      <GeolocateControl ref={locator} position="bottom-right" />
       {start && (
         <Marker
           key="start"

saferoute/src/TriangleSelect.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+
+interface AxisValues {
+  a: number;
+  b: number;
+  c: number;
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+const vertices = {
+  v0: { x: 100, y: 30 }, // Top vertex
+  v1: { x: 0, y: 200 }, // Left vertex
+  v2: { x: 200, y: 200 }, // Right vertex
+};
+
+const TriangleSelector: React.FC<{
+  onChange: (a: number, b: number, c: number) => void;
+}> = ({ onChange }) => {
+  // Adjust these points to match your triangle's vertices
+
+  // Calculate centroid for the starting point
+  const centroid = {
+    x: (vertices.v0.x + vertices.v1.x + vertices.v2.x) / 3,
+    y: (vertices.v0.y + vertices.v1.y + vertices.v2.y) / 3,
+  };
+
+  const [values, setValues] = useState<AxisValues>({
+    a: 33.3,
+    b: 33.3,
+    c: 33.3,
+  });
+  const [selectedPoint, setSelectedPoint] = useState<Point>(centroid);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const updateValuesAndPoint = useCallback(
+    (x: number, y: number) => {
+      // Assuming the SVG coordinate space for calculations
+      const { v0, v1, v2 } = vertices;
+      const denominator =
+        (v1.y - v2.y) * (v0.x - v2.x) + (v2.x - v1.x) * (v0.y - v2.y);
+      let a =
+        ((v1.y - v2.y) * (x - v2.x) + (v2.x - v1.x) * (y - v2.y)) / denominator;
+      let b =
+        ((v2.y - v0.y) * (x - v2.x) + (v0.x - v2.x) * (y - v2.y)) / denominator;
+      let c = 1 - a - b;
+
+      if (a >= 0 && b >= 0 && c >= 0) {
+        // Check if the point is inside the triangle
+        a = Math.max(0, a * 100);
+        b = Math.max(0, b * 100);
+        c = Math.max(0, c * 100);
+
+        const total = a + b + c;
+        setValues({
+          a: (a / total) * 100,
+          b: (b / total) * 100,
+          c: (c / total) * 100,
+        });
+
+        setSelectedPoint({ x, y });
+        onChange(a, b, c);
+      }
+    },
+    [onChange]
+  );
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+      setIsDragging(true);
+      const svg = svgRef.current;
+      if (!svg) return;
+
+      const rect = svg.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      updateValuesAndPoint(x, y);
+    },
+    [updateValuesAndPoint]
+  );
+
+  const handleMouseMove = useCallback(
+    (event: MouseEvent) => {
+      if (!isDragging) return;
+
+      const svg = svgRef.current;
+      if (!svg) return;
+
+      const rect = svg.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      updateValuesAndPoint(x, y);
+    },
+    [isDragging, updateValuesAndPoint]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMoveWindow = (e: MouseEvent) => handleMouseMove(e);
+    const handleMouseUpWindow = () => handleMouseUp();
+
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMoveWindow);
+      window.addEventListener("mouseup", handleMouseUpWindow);
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMoveWindow);
+      window.removeEventListener("mouseup", handleMouseUpWindow);
+    };
+  }, [handleMouseMove, handleMouseUp, isDragging]);
+
+  return (
+    <div>
+      <svg
+        ref={svgRef}
+        width="200"
+        height="200"
+        onMouseDown={handleMouseDown}
+        style={{ userSelect: "none" }}
+      >
+        <polygon
+          points={`${vertices.v0.x},${vertices.v0.y} ${vertices.v1.x},${vertices.v1.y} ${vertices.v2.x},${vertices.v2.y}`}
+          fill="lightgrey"
+        />
+        <circle cx={selectedPoint.x} cy={selectedPoint.y} r="5" fill="red" />
+      </svg>
+      <div>
+        A: {values.a.toFixed(2)}%, B: {values.b.toFixed(2)}%, C:{" "}
+        {values.c.toFixed(2)}%
+      </div>
+    </div>
+  );
+};
+
+export default TriangleSelector;

saferoute/src/TripleSlider.css

@@ -0,0 +1,29 @@
+.triple-slider {
+  width: 0;
+  height: 0;
+  border-left: 50px solid transparent;
+  border-right: 50px solid transparent;
+  border-bottom: 100px solid #ddd;
+  position: relative;
+}
+
+.slider-x,
+.slider-y,
+.slider-z {
+  position: absolute;
+  width: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.slider-x {
+  top: -20px;
+}
+
+.slider-y {
+  top: 50px;
+}
+
+.slider-z {
+  bottom: -20px;
+}