From 933c738e06a64e2d8558b03e6e532537aeecb9f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=20Erik=20St=C3=B8wer?= Date: Wed, 13 Sep 2023 21:24:31 +0200 Subject: [PATCH] wip implement minimum search between coordinates --- client-next/index.html | 4 +- client-next/package-lock.json | 6 + client-next/package.json | 5 +- client-next/public/img/otp-logo.svg | 13 +++ .../src/components/DetailsViewContainer.tsx | 9 +- .../src/components/ItineraryListContainer.tsx | 22 +++- client-next/src/components/MapView.tsx | 104 +++++++++++++++++- .../src/components/NavBarContainer.tsx | 7 +- .../src/components/SearchBarContainer.tsx | 66 +++++++++-- client-next/src/hooks/useTripQuery.ts | 18 ++- client-next/src/main.tsx | 1 + client-next/src/screens/App.tsx | 22 +++- client-next/src/style.css | 7 ++ 13 files changed, 248 insertions(+), 36 deletions(-) create mode 100644 client-next/public/img/otp-logo.svg create mode 100644 client-next/src/style.css diff --git a/client-next/index.html b/client-next/index.html index 39f8054e172..77eb289e595 100644 --- a/client-next/index.html +++ b/client-next/index.html @@ -2,9 +2,9 @@ - + - OTP debug client (next) + OTP Debug Client
diff --git a/client-next/package-lock.json b/client-next/package-lock.json index 492bc1fb674..85a29784489 100644 --- a/client-next/package-lock.json +++ b/client-next/package-lock.json @@ -8,6 +8,7 @@ "name": "otp-debug-client-next", "version": "0.0.0", "dependencies": { + "@googlemaps/polyline-codec": "^1.0.28", "bootstrap": "^5.3.1", "graphql": "^16.8.0", "graphql-request": "^6.1.0", @@ -1578,6 +1579,11 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@googlemaps/polyline-codec": { + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/@googlemaps/polyline-codec/-/polyline-codec-1.0.28.tgz", + "integrity": "sha512-m7rh8sbxlrHvebXEweBHX8r1uPtToPRYxWDD6p6k2YG8hyhBe0Wi6xRUVFpxpEseMNgF+OBotFQC5senj8K7TQ==" + }, "node_modules/@graphql-codegen/add": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-5.0.0.tgz", diff --git a/client-next/package.json b/client-next/package.json index 24dfbb1523d..4d453ed37ca 100644 --- a/client-next/package.json +++ b/client-next/package.json @@ -7,14 +7,15 @@ "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --report-unused-disable-directives --max-warnings 0", - "check-format": "prettier --check \"*.{js,jsx,ts,tsx,json,css,scss,md}\"", - "format": "prettier --write \"*.{js,jsx,ts,tsx,json,css,scss,md}\"", + "check-format": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", + "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", "preview": "vite preview", "prebuild": "npm run codegen && npm run lint && npm run check-format", "predev": "npm run codegen", "codegen": "graphql-codegen --config codegen.ts" }, "dependencies": { + "@googlemaps/polyline-codec": "^1.0.28", "bootstrap": "^5.3.1", "graphql": "^16.8.0", "graphql-request": "^6.1.0", diff --git a/client-next/public/img/otp-logo.svg b/client-next/public/img/otp-logo.svg new file mode 100644 index 00000000000..1ed23d0be8e --- /dev/null +++ b/client-next/public/img/otp-logo.svg @@ -0,0 +1,13 @@ + + + + + diff --git a/client-next/src/components/DetailsViewContainer.tsx b/client-next/src/components/DetailsViewContainer.tsx index e130e964060..ac5c96482c3 100644 --- a/client-next/src/components/DetailsViewContainer.tsx +++ b/client-next/src/components/DetailsViewContainer.tsx @@ -1,9 +1,10 @@ - export function DetailsViewContainer() { return ( -
+
DetailViewContainer
); diff --git a/client-next/src/components/ItineraryListContainer.tsx b/client-next/src/components/ItineraryListContainer.tsx index 9602b5b760a..5a7562417db 100644 --- a/client-next/src/components/ItineraryListContainer.tsx +++ b/client-next/src/components/ItineraryListContainer.tsx @@ -1,11 +1,21 @@ +import { TripQuery } from '../gql/graphql.ts'; +import { Card } from 'react-bootstrap'; -export function ItineraryListContainer() { +export function ItineraryListContainer({ tripQueryResult }: { tripQueryResult: TripQuery | null }) { return ( -
- ItineraryListContainer +
+

Itineraries

+ {tripQueryResult && + tripQueryResult.trip.tripPatterns.map((tripPattern) => ( + leg.id).join('_')}> + 
{JSON.stringify(tripPattern, null, 2)}
+ + ))}
); } diff --git a/client-next/src/components/MapView.tsx b/client-next/src/components/MapView.tsx index 42693d924e9..97ed912b020 100644 --- a/client-next/src/components/MapView.tsx +++ b/client-next/src/components/MapView.tsx @@ -1,5 +1,7 @@ -import {Map, NavigationControl} from 'react-map-gl'; +import { Layer, Map, Marker, NavigationControl, Source } from 'react-map-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; +import { TripQuery, TripQueryVariables } from '../gql/graphql.ts'; +import { decode } from '@googlemaps/polyline-codec'; const mapStyle = { version: 8, @@ -27,8 +29,15 @@ const initialViewState = { longitude: 10.2332855, zoom: 4, }; -export function MapView() { - +export function MapView({ + tripQueryVariables, + setTripQueryVariables, + tripQueryResult, +}: { + tripQueryVariables?: TripQueryVariables; + setTripQueryVariables: (variables: TripQueryVariables) => void; + tripQueryResult: TripQuery | null; +}) { return ( { + e.preventDefault(); + if (!tripQueryVariables?.from.coordinates) { + setTripQueryVariables({ + ...tripQueryVariables, + from: { + coordinates: { + latitude: e.lngLat.lat, + longitude: e.lngLat.lng, + }, + }, + to: { + coordinates: { + latitude: 0.0, + longitude: 0.0, + }, + }, + }); + } else { + setTripQueryVariables({ + ...tripQueryVariables, + to: { + coordinates: { + latitude: e.lngLat.lat, + longitude: e.lngLat.lng, + }, + }, + }); + } + }} > + {tripQueryVariables?.from.coordinates && ( + { + setTripQueryVariables({ + ...tripQueryVariables, + from: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } }, + }); + }} + /> + )} + {tripQueryVariables?.to.coordinates && ( + { + setTripQueryVariables({ + ...tripQueryVariables, + to: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } }, + }); + }} + /> + )} + {tripQueryResult && + tripQueryResult.trip.tripPatterns[0].legs.map( + (leg) => + leg.pointsOnLink && ( + value.reverse()), + }, + }} + > + + + ), + )} ); } diff --git a/client-next/src/components/NavBarContainer.tsx b/client-next/src/components/NavBarContainer.tsx index aba2a51e272..0caccd1ced5 100644 --- a/client-next/src/components/NavBarContainer.tsx +++ b/client-next/src/components/NavBarContainer.tsx @@ -2,9 +2,12 @@ import Container from 'react-bootstrap/Container'; import Navbar from 'react-bootstrap/Navbar'; export function NavBarContainer() { return ( - + - OTP debug client (next) + + OTP Debug + Client + ); diff --git a/client-next/src/components/SearchBarContainer.tsx b/client-next/src/components/SearchBarContainer.tsx index 9d41b090752..f460ffe7aa0 100644 --- a/client-next/src/components/SearchBarContainer.tsx +++ b/client-next/src/components/SearchBarContainer.tsx @@ -1,10 +1,60 @@ +import { Button, Form, Stack } from 'react-bootstrap'; +import { TripQueryVariables } from '../gql/graphql.ts'; -export function SearchBarContainer() { - return ( -
- SearchBarContainer -
- ); +const COORDINATE_PRECISION = 7; + +export function SearchBarContainer({ + onRoute, + tripQueryVariables, +}: { + onRoute: () => void; + tripQueryVariables?: TripQueryVariables; +}) { + return ( +
+ + + From + + + + To + + + + + +
+ ); } diff --git a/client-next/src/hooks/useTripQuery.ts b/client-next/src/hooks/useTripQuery.ts index 1f45b2c2b50..79d959a0bd7 100644 --- a/client-next/src/hooks/useTripQuery.ts +++ b/client-next/src/hooks/useTripQuery.ts @@ -11,11 +11,18 @@ const endpoint = `https://api.entur.io/journey-planner/v3/graphql`; TODO: should live in a separate file, and split into fragments for readability */ const query = graphql(` - query trip { - trip(from: { place: "NSR:StopPlace:337" }, to: { place: "NSR:StopPlace:1" }) { + query trip($from: Location!, $to: Location!) { + trip(from: $from, to: $to, numTripPatterns: 1) { tripPatterns { + aimedStartTime + aimedEndTime + duration + distance legs { id + pointsOnLink { + points + } } } } @@ -24,7 +31,12 @@ const query = graphql(` type TripQueryHook = (variables?: TripQueryVariables) => [TripQuery | null, () => Promise]; -export const useTripQuery: TripQueryHook = (variables = {}) => { +export const useTripQuery: TripQueryHook = ( + variables = { + from: { place: 'NSR:StopPlace:337' }, + to: { place: 'NSR:StopPlace:1' }, + }, +) => { const [data, setData] = useState(null); const callback = useCallback(async () => setData(await request(endpoint, query, variables)), [setData, variables]); return [data, callback]; diff --git a/client-next/src/main.tsx b/client-next/src/main.tsx index 213c95318da..b5de8eedd8f 100644 --- a/client-next/src/main.tsx +++ b/client-next/src/main.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import 'bootstrap/dist/css/bootstrap.min.css'; import { App } from './screens/App.tsx'; +import './style.css'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/client-next/src/screens/App.tsx b/client-next/src/screens/App.tsx index ad548010819..6cb170ffab9 100644 --- a/client-next/src/screens/App.tsx +++ b/client-next/src/screens/App.tsx @@ -1,18 +1,28 @@ -import {Stack} from "react-bootstrap"; +import { Stack } from 'react-bootstrap'; import { MapView } from '../components/MapView.tsx'; import { NavBarContainer } from '../components/NavBarContainer.tsx'; import { SearchBarContainer } from '../components/SearchBarContainer.tsx'; -import {ItineraryListContainer} from "../components/ItineraryListContainer.tsx"; -import {DetailsViewContainer} from "../components/DetailsViewContainer.tsx"; +import { ItineraryListContainer } from '../components/ItineraryListContainer.tsx'; +import { DetailsViewContainer } from '../components/DetailsViewContainer.tsx'; +import { useState } from 'react'; +import { TripQueryVariables } from '../gql/graphql.ts'; +import { useTripQuery } from '../hooks/useTripQuery.ts'; export function App() { + const [tripQueryVariables, setTripQueryVariables] = useState(); + const [tripQueryResult, callback] = useTripQuery(tripQueryVariables); + return (
- + - - + +
diff --git a/client-next/src/style.css b/client-next/src/style.css new file mode 100644 index 00000000000..a89657115fb --- /dev/null +++ b/client-next/src/style.css @@ -0,0 +1,7 @@ +.navbar { + background-color: #fff; +} + +.navbar-brand { + color: #4078bc; +}