From 8b9ba7f81bb5943ba577e47cf45bf6e752f73300 Mon Sep 17 00:00:00 2001 From: Vegard Berg Date: Thu, 12 Oct 2023 00:21:17 +0200 Subject: [PATCH] preliminary line route --- package.json | 2 + src/App.svelte | 19 ++------ src/lib/LineMarker.svelte | 73 ++++++++++++++++++++++++++++++ src/lib/Map.svelte | 88 ++++++++++++++++++++++++++++++++---- src/lib/VehicleMarker.svelte | 37 ++++++++------- src/lib/entur.ts | 83 ++++++++++++++++++++++++++++++++++ src/lib/micro/Bus.svelte | 28 ++++++++++++ src/lib/store.ts | 5 ++ svelte.config.js | 7 +++ vite.config.ts | 6 +++ yarn.lock | 7 ++- 11 files changed, 315 insertions(+), 40 deletions(-) create mode 100644 src/lib/LineMarker.svelte create mode 100644 src/lib/entur.ts create mode 100644 src/lib/micro/Bus.svelte create mode 100644 src/lib/store.ts diff --git a/package.json b/package.json index 0c4ce05..95d73d9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^2.4.3", + "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", "@tsconfig/svelte": "^5.0.0", "@vitejs/plugin-basic-ssl": "^1.0.1", "svelte": "^4.1.2", @@ -21,6 +22,7 @@ }, "dependencies": { "@urql/svelte": "^4.0.4", + "geojson": "^0.5.0", "graphql": "^16.8.1", "graphql-ws": "^5.14.1", "subscriptions-transport-ws": "^0.11.0", diff --git a/src/App.svelte b/src/App.svelte index 852d6af..c06bdfb 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,14 +3,13 @@ import { Client, setContextClient, cacheExchange, fetchExchange, subscriptionExchange } from '@urql/svelte'; import { createClient as createWsClient } from 'graphql-ws'; import { SubscriptionClient } from 'subscriptions-transport-ws'; + import { createJourneyPlannerClientContext, createVehiclesClientContext } from './lib/entur'; - let subscriptionClient = new SubscriptionClient('wss://api.entur.io/realtime/v1/vehicles/subscriptions', { reconnect: true}) + createVehiclesClientContext(); + createJourneyPlannerClientContext(); /* - let wsClient = createWsClient({ - url: 'wss://api.entur.io/realtime/v1/vehicles/subscriptions' - }) - */ + let subscriptionClient = new SubscriptionClient('wss://api.entur.io/realtime/v1/vehicles/subscriptions', { reconnect: true}) let client = new Client({ url: 'https://api.entur.io/realtime/v1/vehicles/graphql', @@ -20,21 +19,13 @@ subscriptionExchange({ forwardSubscription(request) { return subscriptionClient.request(request); - /* - const input = { ...request, query: request.query || "" }; - return { - subscribe(sink) { - const unsubscribe = wsClient.subscribe(input, sink); - return { unsubscribe }; - } - } - */ } }) ], }) setContextClient(client) + */
diff --git a/src/lib/LineMarker.svelte b/src/lib/LineMarker.svelte new file mode 100644 index 0000000..34a1e05 --- /dev/null +++ b/src/lib/LineMarker.svelte @@ -0,0 +1,73 @@ + + + + +{#if lineRef != null} + + + + {feature.properties?.name ?? "N/A"} + + +{/if} \ No newline at end of file diff --git a/src/lib/Map.svelte b/src/lib/Map.svelte index 8e358ad..2f3a888 100644 --- a/src/lib/Map.svelte +++ b/src/lib/Map.svelte @@ -1,18 +1,34 @@
@@ -112,14 +162,34 @@ vehiclesInit.subscribe((v) => { iconSize = 20}>S + + + {$buses} + + + + {#if $selectedLine != null} +

+ + {console.log(l.type); return false}} + /> + +

{feature.properties?.name ?? ""}
+ + +

+ {/if} {#if $vehicles} {#each Object.entries($dataStore) as [id, vehicle]} import { Marker, Popup } from 'svelte-maplibre'; import Delay from './micro/Delay.svelte'; + import Bus from './micro/Bus.svelte'; + import { buses, selectedLine } from './store'; + import { onDestroy } from 'svelte'; export let lngLat: [number, number]; +export let lineRef: string | null = null; export let lineNumber: string; export let lineName: string = "N/A"; export let bearing: number = 0.0; @@ -12,15 +16,21 @@ export let iconSize: number = 30; export let delay: number = 0; export let occupancy: string = "Unknown"; -console.log("lineNumber: %s", lineNumber) +$buses += 1 +onDestroy(() => { + $buses -= 1 +}) + + +const clickHandler = () => { + if ($selectedLine == lineRef) + selectedLine.set(null) + else + selectedLine.set(lineRef) + console.log("click\t%s", $selectedLine) +} - - - - - - - {lineNumber ?? "🚍"} - - + +
@@ -46,6 +49,8 @@ console.log("lineNumber: %s", lineNumber) Going from {origin} to {destination}
+
+ {occupancy}

diff --git a/src/lib/entur.ts b/src/lib/entur.ts new file mode 100644 index 0000000..307373a --- /dev/null +++ b/src/lib/entur.ts @@ -0,0 +1,83 @@ +import { Client, cacheExchange, fetchExchange, subscriptionExchange } from "@urql/svelte"; +import { SubscriptionClient } from "subscriptions-transport-ws"; +import { setContext, getContext } from "svelte"; + + +export function createVehiclesClientContext() { + let subscriptionClient = new SubscriptionClient('wss://api.entur.io/realtime/v1/vehicles/subscriptions', { reconnect: true}) + + let client = new Client({ + url: 'https://api.entur.io/realtime/v1/vehicles/graphql', + exchanges: [ + fetchExchange, + cacheExchange, + subscriptionExchange({ + forwardSubscription(request) { + return subscriptionClient.request(request); + } + }) + ], + }) + + setContext("entur-graphql-vehiclepositions-client", client) +} + +export function getVehiclesClientContext(): Client { + return getContext("entur-graphql-vehiclepositions-client") +} + +export function createJourneyPlannerClientContext() { + let client = new Client({ + url: 'https://api.entur.io/journey-planner/v3/graphql', + exchanges: [ + fetchExchange, + cacheExchange, + ] + }) + + setContext("entur-graphql-journeyplannet-client", client) +} + +export function getJourneyPlannerClientContext(): Client { + return getContext("entur-graphql-journeyplannet-client") +} + + +export interface Quay { + longitude: number; + latitude: number; + name: string; + publicCode: string; +} + +export function quaysToGeoJSON(...quayCollections: Array>) { + const multilineString = { + type: "Feature", + properties: {}, + geometry: { + type: "MultiLineString", + coordinates: quayCollections.map((quays => quays.map(quay => [quay.longitude, quay.latitude]))), + }, + } + const features = quayCollections.map(quays => + quays.map(quay => { + return { + type: "Feature", + properties: { + name: quay.name + (quay.publicCode ? (" " + quay.publicCode) : "") + }, + geometry: { + type: "Point", + coordinates: [quay.longitude, quay.latitude] + } + } + })) + + return { + type: "FeatureCollection", + features: [ + multilineString, + ...features.flat(1) + ] + } +} \ No newline at end of file diff --git a/src/lib/micro/Bus.svelte b/src/lib/micro/Bus.svelte new file mode 100644 index 0000000..8dc8522 --- /dev/null +++ b/src/lib/micro/Bus.svelte @@ -0,0 +1,28 @@ + + + + + + + + + + {face ?? "🚍"} + \ No newline at end of file diff --git a/src/lib/store.ts b/src/lib/store.ts new file mode 100644 index 0000000..f02ff71 --- /dev/null +++ b/src/lib/store.ts @@ -0,0 +1,5 @@ +import { writable, type Writable } from "svelte/store"; + +export const buses = writable(0); + +export const selectedLine: Writable = writable(null); \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index b0683fd..1f453be 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -4,4 +4,11 @@ export default { // Consult https://svelte.dev/docs#compile-time-svelte-preprocess // for more information about preprocessors preprocess: vitePreprocess(), + vitePlugin: { + inspector: { + toggleKeyCombo: 'meta-shift', + showToggleButton: 'always', + toggleButtonPos: 'bottom-right' + } + } } diff --git a/vite.config.ts b/vite.config.ts index 0a31c3b..2b90587 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,12 +1,18 @@ import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' import basicSsl from '@vitejs/plugin-basic-ssl' +import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ svelte(), //basicSsl(), + /*svelteInspector({ + showToggleButton: 'always', + toggleButtonPos: 'top-right', + openKey: 'meta-shift' + })*/ ], base: "", }) diff --git a/yarn.lock b/yarn.lock index 78165cf..96473a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -232,7 +232,7 @@ "@sveltejs/vite-plugin-svelte-inspector@^1.0.4": version "1.0.4" - resolved "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz" + resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add" integrity sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ== dependencies: debug "^4.3.4" @@ -594,6 +594,11 @@ geojson-vt@^3.2.1: resolved "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz" integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg== +geojson@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/geojson/-/geojson-0.5.0.tgz#3cd6c96399be65b56ee55596116fe9191ce701c0" + integrity sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ== + get-stream@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"