From dfef9852a243b4c70b4ba90796528e55f98d12f3 Mon Sep 17 00:00:00 2001 From: Kyler Chin <7539174+kylerchin@users.noreply.github.com> Date: Sun, 8 Dec 2024 23:30:20 -0800 Subject: [PATCH] fix setting name system and theme selectors --- package-lock.json | 62 +------ package.json | 2 +- src/app.css | 5 +- src/components/DelayDiff.svelte | 8 +- src/components/SettingsMenu.svelte | 159 ++++++++++++++++++ src/components/SingleTripInfo.svelte | 77 +++++---- src/components/TimeDiff.svelte | 2 +- src/components/addLayers/addStops.ts | 5 +- src/components/init_stores.ts | 61 +++++++ src/components/layernames.ts | 43 +++++ src/components/sidebarInternals.svelte | 195 +---------------------- src/components/transitionDarkAndLight.ts | 120 ++++++++++++++ src/globalstores.ts | 7 +- src/locales/de.json | 7 +- src/locales/en.json | 7 +- src/locales/es.json | 7 +- src/locales/fr.json | 7 +- src/locales/it.json | 7 +- src/locales/jp.json | 7 +- src/locales/ko.json | 7 +- src/locales/nl.json | 7 +- src/locales/pl.json | 7 +- src/locales/zh-CN.json | 41 ++--- src/locales/zh-TW.json | 30 +++- src/routes/+page.svelte | 115 +++++-------- static/dark-style.json | 2 +- static/light-style.json | 2 +- tailwind.config.js | 2 +- yarn.lock | 25 +-- 29 files changed, 610 insertions(+), 416 deletions(-) create mode 100644 src/components/SettingsMenu.svelte create mode 100644 src/components/init_stores.ts create mode 100644 src/components/layernames.ts create mode 100644 src/components/transitionDarkAndLight.ts diff --git a/package-lock.json b/package-lock.json index 7ae70bf..b6d2b6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "dependencies": { "@datadog/browser-rum": "^5.30.0", "@mapbox/polyline": "^1.2.1", - "@maplibre/maplibre-gl-inspect": "^1.7.0", "@sveltejs/adapter-cloudflare": "^4.7.4", "@sveltejs/vite-plugin-svelte": "^3.1.2", "@zerodevx/svelte-toast": "^0.9.6", @@ -20,6 +19,7 @@ "maplibre-gl": "5.0.0-pre.5", "moment": "^2.30.1", "protobufjs": "^7.4.0", + "store2": "^2.14.3", "stringify-object": "^5.0.0", "svelte-i18n": "^4.0.1", "svelte-toasts": "^1.1.2", @@ -716,19 +716,6 @@ "node": ">=6.0.0" } }, - "node_modules/@maplibre/maplibre-gl-inspect": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.7.0.tgz", - "integrity": "sha512-O2C78Dh9zRvVLrm0axgzB9do5spoOGqMnN34xmJVedQWco6tCq49oSyeMuGyBEX9fE9/zLwynnZrAfT5FRN1pQ==", - "license": "BSD-3-Clause", - "dependencies": { - "lodash.isequal": "^4.5.0", - "randomcolor": "^0.6.2" - }, - "peerDependencies": { - "maplibre-gl": ">3.0.0" - } - }, "node_modules/@maplibre/maplibre-gl-style-spec": { "version": "21.1.0", "license": "ISC", @@ -3285,20 +3272,6 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "license": "ISC" }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -4173,12 +4146,6 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "license": "MIT" }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", - "license": "MIT" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5138,21 +5105,6 @@ "node": ">=18" } }, - "node_modules/playwright/node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/postcss": { "version": "8.4.49", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", @@ -5578,12 +5530,6 @@ "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==", "license": "ISC" }, - "node_modules/randomcolor": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz", - "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==", - "license": "CC0" - }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -6333,6 +6279,12 @@ "npm": ">=6" } }, + "node_modules/store2": { + "version": "2.14.3", + "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz", + "integrity": "sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==", + "license": "MIT" + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", diff --git a/package.json b/package.json index 51fd149..bff0d6b 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "dependencies": { "@datadog/browser-rum": "^5.30.0", "@mapbox/polyline": "^1.2.1", - "@maplibre/maplibre-gl-inspect": "^1.7.0", "@sveltejs/adapter-cloudflare": "^4.7.4", "@sveltejs/vite-plugin-svelte": "^3.1.2", "@zerodevx/svelte-toast": "^0.9.6", @@ -54,6 +53,7 @@ "maplibre-gl": "5.0.0-pre.5", "moment": "^2.30.1", "protobufjs": "^7.4.0", + "store2": "^2.14.3", "stringify-object": "^5.0.0", "svelte-i18n": "^4.0.1", "svelte-toasts": "^1.1.2", diff --git a/src/app.css b/src/app.css index 8a47e1f..ffe6e0b 100644 --- a/src/app.css +++ b/src/app.css @@ -86,12 +86,11 @@ body { .maplibregl-canvas { - background-color: #000000; + background-color: #324a78; } -@media (prefers-color-scheme: dark) {.maplibregl-canvas +.dark .maplibregl-canvas { background-color: #000000; -} } \ No newline at end of file diff --git a/src/components/DelayDiff.svelte b/src/components/DelayDiff.svelte index ca11229..c161b14 100644 --- a/src/components/DelayDiff.svelte +++ b/src/components/DelayDiff.svelte @@ -7,7 +7,7 @@ //Positive diff means late, negative diff means early - export let simple: boolean = false; + export let show_seconds = false; let textclass: string = 'text-[0px]'; @@ -100,10 +100,10 @@ {#if h > 0} {h} {locale_hour_marking(this_locale)} - {/if}{#if h > 0 || m > 0 || (simple && m >= 0 && diff != 0)} - {simple && Math.abs(diff) < 60 ? '<1' : m} + {/if}{#if h > 0 || m > 0 || (!show_seconds && m >= 0 && diff != 0)} + {!show_seconds && Math.abs(diff) < 60 ? '<1' : m} {locale_min_marking(this_locale)}{/if} - {#if !simple} + {#if show_seconds} {#if Math.abs(diff) > 0} {s} {locale_s_marking(this_locale)} diff --git a/src/components/SettingsMenu.svelte b/src/components/SettingsMenu.svelte new file mode 100644 index 0000000..c6cd291 --- /dev/null +++ b/src/components/SettingsMenu.svelte @@ -0,0 +1,159 @@ + + + +
+

{$_('settings')}

+ {$_('language')} +

{$locale}

+ + + {$_('mapstyle')} + + +
+
+ { + ui_theme_store.set('system'); + }} + /> + +
+
+ { + ui_theme_store.set('light'); + }} + /> + +
+
+ { + ui_theme_store.set('dark'); + }} + /> + +
+
+ +
+ { + usunits_store.update((x) => !x); + window.localStorage.usunits = get(usunits_store); + }} + on:keydown={(e) => { + if (e.key === 'Enter') { + usunits_store.update((x) => !x); + window.localStorage.usunits = get(usunits_store); + } + }} + /> +

{$_('useUSunits')}

+
+
+ { + show_gtfs_ids_store.update((x) => !x); + window.localStorage.show_gtfs_ids = get(show_gtfs_ids_store); + }} + on:keydown={(e) => { + if (e.key === 'Enter') { + show_gtfs_ids_store.update((x) => !x); + window.localStorage.show_gtfs_ids = get(show_gtfs_ids_store); + } + }} + /> +

{$_('show_gtfs_ids')}

+
+ +
+ { + show_seconds_store.set(e.target.checked); + }} + on:keydown={(e) => { + show_seconds_store.set(e.target.checked); + }} + /> +

{$_('show_seconds_in_trips')}

+
+
\ No newline at end of file diff --git a/src/components/SingleTripInfo.svelte b/src/components/SingleTripInfo.svelte index 67ca624..ba28511 100644 --- a/src/components/SingleTripInfo.svelte +++ b/src/components/SingleTripInfo.svelte @@ -44,8 +44,8 @@ }); }) - export let usunits: boolean; + import { dark_mode_store, @@ -56,6 +56,7 @@ realtime_vehicle_route_cache_hash_store, realtime_vehicle_route_cache_store, lock_on_gps_store, + show_seconds_store, usunits_store, show_zombie_buses_store, show_my_location_store, @@ -66,6 +67,12 @@ import RouteHeading from './RouteHeading.svelte'; import { hexToRgb } from '../utils/colour'; + let show_seconds = get(show_seconds_store); + + show_seconds_store.subscribe((value) => { + show_seconds = value; + }); + let stop_id_to_alert_ids: Record = {}; let alerts: Record = {}; @@ -502,8 +509,6 @@ } }, 100); }); - - export let simpleRouteMode = true;
@@ -558,7 +563,6 @@ - {#if !simpleRouteMode}

Trip ID {trip_selected.trip_id}{#if trip_data.block_id != null} {' | Block '}{trip_data.block_id} @@ -572,15 +576,6 @@ {$_('timezone')}: {timezones.filter((x) => x != null).join(', ')} {/if}

- {#if init_loaded != 0} -
-

- {$_('lastupdated')}: - -

-
- {/if} - {/if}
{/if} - {#if stoptime.code && !simpleRouteMode} - {stoptime.code} + {#if stoptime.code} + {/if}

@@ -697,7 +692,7 @@ stoptime.interpolated_stoptime_unix_seconds) - current_time / 1000} show_brackets={false} - show_seconds={false} + show_seconds={show_seconds} /> {/if} @@ -716,7 +711,7 @@ {:else} @@ -756,9 +751,9 @@ 'en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined } )} @@ -770,21 +765,21 @@ {new Date( (stoptime.scheduled_departure_time_unix_seconds || stoptime.interpolated_stoptime_unix_seconds) * 1000 - ).toLocaleTimeString(usunits ? 'en-US' : 'en-UK', { + ).toLocaleTimeString('en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined })} {new Date(stoptime.rt_departure_time * 1000).toLocaleTimeString( - usunits ? 'en-US' : 'en-UK', + 'en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined } )} @@ -793,11 +788,11 @@ {new Date( (stoptime.scheduled_departure_time_unix_seconds || stoptime.interpolated_stoptime_unix_seconds) * 1000 - ).toLocaleTimeString(usunits ? 'en-US' : 'en-UK', { + ).toLocaleTimeString('en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined })} {/if}

@@ -819,7 +814,7 @@ stoptime.interpolated_stoptime_unix_seconds) - current_time / 1000} show_brackets={false} - show_seconds={false} + show_seconds={show_seconds} /> {/if} @@ -836,7 +831,7 @@ /> - + {:else} {new Date(stoptime.rt_departure_time * 1000).toLocaleTimeString( - usunits ? 'en-US' : 'en-UK', + 'en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined } )} @@ -882,11 +877,11 @@ {new Date( (stoptime.scheduled_departure_time_unix_seconds || stoptime.interpolated_stoptime_unix_seconds) * 1000 - ).toLocaleTimeString(usunits ? 'en-US' : 'en-UK', { + ).toLocaleTimeString('en-UK', { timeZone: stoptime.timezone || trip_data.tz, - hour: simpleRouteMode ? 'numeric' : '2-digit', + hour: show_seconds ? '2-digit' : 'numeric', minute: '2-digit', - second: simpleRouteMode ? undefined : '2-digit' + second: show_seconds ? '2-digit' : undefined })} {/if}

diff --git a/src/components/TimeDiff.svelte b/src/components/TimeDiff.svelte index 20ef4b2..40be92e 100644 --- a/src/components/TimeDiff.svelte +++ b/src/components/TimeDiff.svelte @@ -5,7 +5,7 @@ export let diff: number; export let show_brackets: boolean = true; - export let show_seconds: boolean = true; + export let show_seconds: boolean = false; export let large: boolean = false; diff --git a/src/components/addLayers/addStops.ts b/src/components/addLayers/addStops.ts index 637558e..62ee661 100644 --- a/src/components/addLayers/addStops.ts +++ b/src/components/addLayers/addStops.ts @@ -21,6 +21,9 @@ function getCircleOutside(darkMode: boolean) { return darkMode ? '#ffffff': '#1c2636'; } +export function bus_stop_stop_color(darkMode: boolean) { + return darkMode ? ['step', ['zoom'], '#e0e0e0', 14, '#dddddd'] : '#333333'; +} export function addStopsLayers(map: Map, darkMode: boolean, layerspercategory: any) { //BUS @@ -34,7 +37,7 @@ export function addStopsLayers(map: Map, darkMode: boolean, layerspercategory: a paint: { 'circle-color': '#1c2636', 'circle-radius': ['interpolate', ['linear'], ['zoom'], 11, 0.9, 12, 1.2, 13, 2], - 'circle-stroke-color': darkMode ? ['step', ['zoom'], '#e0e0e0', 14, '#dddddd'] : '#333333', + 'circle-stroke-color': bus_stop_stop_color(darkMode), 'circle-stroke-width': ['step', ['zoom'], 0.8, 12, 1.2, 13.2, 1.5], 'circle-stroke-opacity': ['step', ['zoom'], 0.5, 15, 0.6], 'circle-opacity': 0.1, diff --git a/src/components/init_stores.ts b/src/components/init_stores.ts new file mode 100644 index 0000000..71b0561 --- /dev/null +++ b/src/components/init_stores.ts @@ -0,0 +1,61 @@ + +import { + dark_mode_store, + data_stack_store, + on_sidebar_trigger_store, + realtime_vehicle_locations_last_updated_store, + realtime_vehicle_locations_store, + realtime_vehicle_route_cache_hash_store, + realtime_vehicle_route_cache_store, + lock_on_gps_store, + usunits_store, + show_zombie_buses_store, + show_my_location_store, + custom_icons_category_to_layer_id, + map_pointer_store, + geolocation_store, + chateaus_store, + show_gtfs_ids_store, + ui_theme_store, + show_seconds_store +} from '../globalstores'; + +export function init_stores() { + if (typeof window != "undefined") { + if (window.localStorage.getItem('usunits') == 'true') { + usunits_store.set(true) + } else { + usunits_store.set(false) + } + + if (window.localStorage.getItem('show_gtfs_ids') == 'true') { + show_gtfs_ids_store.set(true) + } else { + show_gtfs_ids_store.set(false) + } + + if (window.localStorage.show_gtfs_ids == true) { + show_gtfs_ids_store.set(true); + } + + if (window.localStorage.getItem('dark_mode') == 'true') { + dark_mode_store.set(true) + } else { + dark_mode_store.set(false) + } + + let ui_theme_grab=window.localStorage.getItem("ui_theme_store"); + if (ui_theme_grab) { + ui_theme_store.set(ui_theme_grab); + } + + ui_theme_store.subscribe(value => { + window.localStorage.setItem("ui_theme_store", value); + }); + + show_seconds_store.subscribe(value => { + window.localStorage.setItem('show_seconds', value); + } + ); + } +} \ No newline at end of file diff --git a/src/components/layernames.ts b/src/components/layernames.ts new file mode 100644 index 0000000..36ca682 --- /dev/null +++ b/src/components/layernames.ts @@ -0,0 +1,43 @@ +export const layerspercategory = { + bus: { + livedots: 'bus', + labeldots: 'labelbuses', + pointing: 'busespointing', + pointingshell: 'busespointingshell', + stops: 'busstopscircle', + labelstops: 'busstopslabel', + shapes: 'busshapes', + labelshapes: 'labelbusshapes' + }, + intercityrail: { + livedots: 'intercityrail', + labeldots: 'labelintercityrail', + pointing: 'intercityrailpointing', + pointingshell: 'intercityrailpointingshell', + stops: 'intercityrailstopscircle', + labelstops: 'intercityrailstopslabel', + shapes: 'intercityrailshapes', + labelshapes: 'intercityraillabelshapes' + }, + localrail: { + livedots: 'localrail', + labeldots: 'labellocalrail', + pointing: 'localrailpointing', + pointingshell: 'localrailpointingshell', + stops: 'localrailstopscircle', + labelstops: 'localrailstopslabel', + shapes: 'localrailshapes', + labelshapes: 'localraillabelshapes' + }, + + other: { + livedots: 'other', + labeldots: 'labelother', + pointing: 'otherpointing', + pointingshell: 'otherpointingshell', + stops: 'otherstopscircle', + labelstops: 'otherstopslabel', + shapes: 'othershapes', + labelshapes: 'otherlabelshapes' + } +}; \ No newline at end of file diff --git a/src/components/sidebarInternals.svelte b/src/components/sidebarInternals.svelte index 35830ae..08115c8 100644 --- a/src/components/sidebarInternals.svelte +++ b/src/components/sidebarInternals.svelte @@ -1,6 +1,7 @@ @@ -333,118 +298,7 @@
{/if} {#if latest_item_on_stack.data instanceof SettingsStack} - -
-

{$_('settings')}

- {$_('language')} -

{$locale}

- - - {$_('mapstyle')} -
- { - usunits_store.update((x) => !x); - window.localStorage.usunits = get(usunits_store); - }} - on:keydown={(e) => { - if (e.key === 'Enter') { - usunits_store.update((x) => !x); - window.localStorage.usunits = get(usunits_store); - } - }} - /> -

{$_('useUSunits')}

-
-
- { - show_gtfs_ids_store.update((x) => !x); - window.localStorage.show_gtfs_ids = get(show_gtfs_ids_store); - }} - on:keydown={(e) => { - if (e.key === 'Enter') { - show_gtfs_ids_store.update((x) => !x); - window.localStorage.show_gtfs_ids = get(show_gtfs_ids_store); - } - }} - /> -

{$_('show_gtfs_ids')}

-
-
- { - if (e.target.checked) { - window.localStorage.theme = 'dark'; - dark_mode_store.update((x) => true); - } else { - window.localStorage.theme = 'light'; - dark_mode_store.update((x) => false); - } - window.location.reload(); - }} - on:keydown={(e) => { - if (e.key === 'Enter') { - if (e.target.checked) { - window.localStorage.theme = 'dark'; - dark_mode_store.update((x) => true); - } else { - window.localStorage.theme = 'light'; - dark_mode_store.update((x) => false); - } - window.location.reload(); - } - }} - /> -

{$_('darkmode')}

-
-
- { - if (e.target.checked) { - window.localStorage.simpleRouteMode = 'false'; - simpleRouteMode = false; - } else { - window.localStorage.simpleRouteMode = 'true'; - simpleRouteMode = true; - } - }} - on:keydown={(e) => { - if (e.key === 'Enter') { - if (e.target.checked) { - window.localStorage.simpleRouteMode = 'false'; - simpleRouteMode = false; - } else { - window.localStorage.simpleRouteMode = 'true'; - simpleRouteMode = true; - } - } - }} - /> -

{$_('foamervision')}

-
-
+ {/if} {#if latest_item_on_stack.data instanceof VehicleSelectedStack}
@@ -467,7 +321,6 @@ Chateau: {latest_item_on_stack.data.chatea {darkMode} routetype={latest_item_on_stack.data.route_type} trip_selected={latest_item_on_stack.data} - {simpleRouteMode} />
{/if} @@ -502,38 +355,6 @@ Chateau: {latest_item_on_stack.data.chatea > settings - {#if this_locale?.startsWith('en')} - {#if false} -
-

We get there together.

-

- Catenary is a student-led non-profit organization at the cutting edge of transit and - routing research. We add features every day to our map, so come chat with us & give us - your feedback on our Discord server! -

-
- - -
-
- {/if} - - - {/if}
diff --git a/src/components/transitionDarkAndLight.ts b/src/components/transitionDarkAndLight.ts new file mode 100644 index 0000000..8907b29 --- /dev/null +++ b/src/components/transitionDarkAndLight.ts @@ -0,0 +1,120 @@ +import { + ui_theme_store, + data_stack_store, + on_sidebar_trigger_store, + realtime_vehicle_locations_last_updated_store, + realtime_vehicle_locations_store, + realtime_vehicle_route_cache_hash_store, + realtime_vehicle_route_cache_store, + lock_on_gps_store, + usunits_store, + show_zombie_buses_store, + show_my_location_store, + custom_icons_category_to_layer_id, + map_pointer_store, + geolocation_store, + chateaus_store, + show_gtfs_ids_store +} from '../globalstores'; + +import {get} from 'svelte/store'; + +export function refreshUIMaplibre() { + let map = get(map_pointer_store); + let darkMode = false; + + if (map) { + if (get(ui_theme_store) == "system") { + const checkIsDarkSchemePreferred = () => window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false; + + darkMode = checkIsDarkSchemePreferred(); + } + else if (get(ui_theme_store) == "dark") { + darkMode = true; + } else { + darkMode = false; + } + + //fetch the current style + + let style = map.getStyle(); + + //fetch the current layers + + let layers = map.getStyle().layers; + + let url = darkMode ? "/dark-style.json" : "/light-style.json"; + + fetch(url) + .then(response => response.json()) + .then(data => { + console.log("new style to set", data, layers); + + let new_layers_into_obj = {}; + + for (let i = 0; i < data.layers.length; i++) { + new_layers_into_obj[data.layers[i].id] = data.layers[i]; + } + + for (let i = 0; i < layers.length; i++) { + let layer = layers[i]; + + if (new_layers_into_obj[layer.id]) { + console.log("found layer", layer.id); + + if (new_layers_into_obj[layer.id].paint == undefined) { + new_layers_into_obj[layer.id].paint = {}; + } + + if (new_layers_into_obj[layer.id].layout == undefined) { + new_layers_into_obj[layer.id].layout = {}; + } + + + //fetch the keys of the old layer + + let paint_keys_of_new_layer = Object.keys(new_layers_into_obj[layer.id].paint); + + + //fetch the keys of the new layer + + let layout_keys_of_new_layer = Object.keys(new_layers_into_obj[layer.id].layout); + + //delete properties that are not in the new layer + + + if (layer.layout) { + + let layout_keys_of_old_layer = Object.keys(layer.layout); + for (let i = 0; i < layout_keys_of_old_layer.length; i++) { + if (layout_keys_of_new_layer.indexOf(layout_keys_of_old_layer[i]) == -1) { + map.setLayoutProperty(layer.id, layout_keys_of_old_layer[i], null); + } + } + } + + if (layer.paint) { + + let paint_keys_of_old_layer = Object.keys(layer.paint); + for (let i = 0; i < paint_keys_of_old_layer.length; i++) { + if (paint_keys_of_new_layer.indexOf(paint_keys_of_old_layer[i]) == -1) { + map.setPaintProperty(layer.id, paint_keys_of_old_layer[i], null); + } + } + } + + //for each obj in paint and layout, apply the new values + + for (let layout_key in new_layers_into_obj[layer.id].layout) { + map.setLayoutProperty(layer.id, layout_key, new_layers_into_obj[layer.id].layout[layout_key]); + } + + for (let paint_key in new_layers_into_obj[layer.id].paint) { + map.setPaintProperty(layer.id, paint_key, new_layers_into_obj[layer.id].paint[paint_key]); + } + + } + } + }); + } +} \ No newline at end of file diff --git a/src/globalstores.ts b/src/globalstores.ts index 30b6398..714a6fd 100644 --- a/src/globalstores.ts +++ b/src/globalstores.ts @@ -31,6 +31,9 @@ export const lock_on_gps_store = writable(false); export const dark_mode_store = writable(false); +// system, light, dark +export const ui_theme_store:Writable = writable('system'); + export const show_zombie_buses_store = writable(false); export const usunits_store = writable(false); @@ -45,4 +48,6 @@ export const geolocation_store: Writable = writable( export const nearby_deps_cache_gps: Writable = writable(null); -export const chateaus_store: Writable = writable(null); \ No newline at end of file +export const chateaus_store: Writable = writable(null); + +export const show_seconds_store = writable(false); \ No newline at end of file diff --git a/src/locales/de.json b/src/locales/de.json index 049ae50..c5cdfba 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -92,5 +92,10 @@ "alert_effect_unknown_effect": "Unbekannte Auswirkung", "alert_effect_stop_moved": "Haltestelle verlegt", "alert_effect_no_effect": "Keine Auswirkung", - "alert_effect_accessibility_issue": "Barrierefreiheitsproblem" + "alert_effect_accessibility_issue": "Barrierefreiheitsproblem", + "show_seconds_in_trips": "Sekunden in Reisen anzeigen", + "system_theme": "System", + "dark_theme": "Dunkel", + "light_theme": "Hell", + "12_hour_clock": "2-mal-12-Stunden-Zählung" } diff --git a/src/locales/en.json b/src/locales/en.json index 0ad2423..790d7a7 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -97,5 +97,10 @@ "alert_effect_unknown_effect": "Unknown effect", "alert_effect_stop_moved": "Stop moved", "alert_effect_no_effect": "No effect", - "alert_effect_accessibility_issue": "Accessibility issue" + "alert_effect_accessibility_issue": "Accessibility issue", + "show_seconds_in_trips": "Show seconds in trips", + "system_theme": "System", + "dark_theme": "Dark", + "light_theme": "Light", + "12_hour_clock": "12-hour clock" } diff --git a/src/locales/es.json b/src/locales/es.json index 21a2664..24a2b08 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -93,5 +93,10 @@ "alert_effect_unknown_effect": "Efecto desconocido", "alert_effect_stop_moved": "Parada movida", "alert_effect_no_effect": "Sin efecto", - "alert_effect_accessibility_issue": "Problema de accesibilidad" + "alert_effect_accessibility_issue": "Problema de accesibilidad", + "show_seconds_in_trips": "Mostrar segundos en viajes", + "system_theme": "Sistema", + "dark_theme": "Oscuro", + "light_theme": "Claro", + "12_hour_clock": "Sistema horario de 12 horas" } diff --git a/src/locales/fr.json b/src/locales/fr.json index bc3fc33..e5a10e7 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -95,5 +95,10 @@ "alert_effect_unknown_effect": "Effet inconnu", "alert_effect_stop_moved": "Arrêt déplacé", "alert_effect_no_effect": "Aucun effet", - "alert_effect_accessibility_issue": "Problème d'accessibilité" + "alert_effect_accessibility_issue": "Problème d'accessibilité", + "show_seconds_in_trips": "Afficher les secondes dans les voyages", + "system_theme": "Système", + "dark_theme": "Sombre", + "light_theme": "Clair", + "12_hour_clock": "Système horaire sur 12 heures" } diff --git a/src/locales/it.json b/src/locales/it.json index 073a052..771f376 100644 --- a/src/locales/it.json +++ b/src/locales/it.json @@ -97,5 +97,10 @@ "alert_effect_unknown_effect": "Effetto sconosciuto", "alert_effect_stop_moved": "Fermata spostata", "alert_effect_no_effect": "Nessun effetto", - "alert_effect_accessibility_issue": "Problema di accessibilità" + "alert_effect_accessibility_issue": "Problema di accessibilità", + "show_seconds_in_trips": "Mostra secondi nei viaggi", + "system_theme": "Sistema", + "dark_theme": "Scuro", + "light_theme": "Chiaro", + "12_hour_clock": "Orologio a 12 ore" } diff --git a/src/locales/jp.json b/src/locales/jp.json index c699289..72852b9 100644 --- a/src/locales/jp.json +++ b/src/locales/jp.json @@ -97,5 +97,10 @@ "alert_effect_unknown_effect": "不明な影響", "alert_effect_stop_moved": "停留所が移動しました", "alert_effect_no_effect": "影響なし", - "alert_effect_accessibility_issue": "アクセシビリティの問題" + "alert_effect_accessibility_issue": "アクセシビリティの問題", + "show_seconds_in_trips": "トリップで秒を表示", + "system_theme": "システム", + "dark_theme": "ダーク", + "light_theme": "ライト", + "12_hour_clock": "12時間制" } diff --git a/src/locales/ko.json b/src/locales/ko.json index b92fc75..6ced039 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -96,5 +96,10 @@ "alert_effect_unknown_effect": "알 수 없는 효과", "alert_effect_stop_moved": "정류장 이동", "alert_effect_no_effect": "효과 없음", - "alert_effect_accessibility_issue": "접근성 문제" + "alert_effect_accessibility_issue": "접근성 문제", + "show_seconds_in_trips": "여행에서 초 표시", + "system_theme": "시스템", + "dark_theme": "다크모드", + "light_theme": "라이트모드", + "12_hour_clock": "12시간제" } diff --git a/src/locales/nl.json b/src/locales/nl.json index f098543..2eb30c5 100644 --- a/src/locales/nl.json +++ b/src/locales/nl.json @@ -97,5 +97,10 @@ "alert_effect_unknown_effect": "Onbekend effect", "alert_effect_stop_moved": "Halte verplaatst", "alert_effect_no_effect": "Geen effect", - "alert_effect_accessibility_issue": "Toegankelijkheidsprobleem" + "alert_effect_accessibility_issue": "Toegankelijkheidsprobleem", + "show_seconds_in_trips": "Seconden in reizen weergeven", + "system_theme": "Systeem", + "dark_theme": "Donker", + "light_theme": "Licht", + "12_hour_clock": "12-uurs klok" } diff --git a/src/locales/pl.json b/src/locales/pl.json index 06abda8..a4bae14 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -97,5 +97,10 @@ "alert_effect_unknown_effect": "Nieznany efekt", "alert_effect_stop_moved": "Przystanek przeniesiony", "alert_effect_no_effect": "Brak efektu", - "alert_effect_accessibility_issue": "Problem z dostępnością" + "alert_effect_accessibility_issue": "Problem z dostępnością", + "show_seconds_in_trips": "Pokaż sekundy w podróżach", + "system_theme": "System", + "dark_theme": "Ciemny", + "light_theme": "Jasny", + "12_hour_clock": "Zegar 12-godzinny" } diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json index b5829b1..268820c 100644 --- a/src/locales/zh-CN.json +++ b/src/locales/zh-CN.json @@ -75,25 +75,30 @@ "show_gtfs_ids": "显示 GTFS ID", "alert_cause_unknown_cause": "未知原因", "alert_cause_other_cause": "其他原因", -"alert_cause_technical_problem": "技術問題", -"alert_cause_labour_strike": "罷工", -"alert_cause_demonstration_street_blockage": "示威遊行", +"alert_cause_technical_problem": "技术问题", +"alert_cause_labour_strike": "罢工", +"alert_cause_demonstration_street_blockage": "示威游行", "alert_cause_accident": "事故", "alert_cause_holiday": "假期", -"alert_cause_weather": "天氣", -"alert_cause_maintenance": "維修", +"alert_cause_weather": "天气", +"alert_cause_maintenance": "维修", "alert_cause_construction": "施工", -"alert_cause_police_activity": "警方活動", -"alert_cause_medical_emergency": "醫療緊急情況", -"alert_effect_no_service": "無服務", -"alert_effect_reduced_service": "服務減少", -"alert_effect_significant_delays": "嚴重延誤", -"alert_effect_detour": "繞道", -"alert_effect_additional_service": "額外服務", -"alert_effect_modified_service": "服務變更", -"alert_effect_other_effect": "其他影響", -"alert_effect_unknown_effect": "未知影響", -"alert_effect_stop_moved": "站點遷移", -"alert_effect_no_effect": "無影響", -"alert_effect_accessibility_issue": "無障礙問題" +"alert_cause_police_activity": "警方活动", +"alert_cause_medical_emergency": "医疗紧急情况", +"alert_effect_no_service": "无服务", +"alert_effect_reduced_service": "服务减少", +"alert_effect_significant_delays": "严重延误", +"alert_effect_detour": "绕道", +"alert_effect_additional_service": "额外服务", +"alert_effect_modified_service": "服务变更", +"alert_effect_other_effect": "其他影响", +"alert_effect_unknown_effect": "未知影响", +"alert_effect_stop_moved": "站点迁移", +"alert_effect_no_effect": "无影响", +"alert_effect_accessibility_issue": "无障碍问题", +"show_seconds_in_trips": "顯示行程秒數", +"system_theme": "系统", +"dark_theme": "暗模式", +"light_theme": "亮模式", +"12_hour_clock": "十二小時制" } diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json index c270280..fd38f1c 100644 --- a/src/locales/zh-TW.json +++ b/src/locales/zh-TW.json @@ -72,5 +72,33 @@ "hidepreviousstops": "隱藏之前的停靠站", "shownpreviousstops": "顯示前 {n, number} 個之前的站點", "platform": "站台", - "show_gtfs_ids": "顯示 GTFS ID" + "show_gtfs_ids": "顯示 GTFS ID", + "alert_cause_unknown_cause": "未知原因", +"alert_cause_other_cause": "其他原因", +"alert_cause_technical_problem": "技術問題", +"alert_cause_labour_strike": "罷工", +"alert_cause_demonstration_street_blockage": "示威遊行", +"alert_cause_accident": "事故", +"alert_cause_holiday": "假期", +"alert_cause_weather": "天氣", +"alert_cause_maintenance": "維修", +"alert_cause_construction": "施工", +"alert_cause_police_activity": "警方活動", +"alert_cause_medical_emergency": "醫療緊急情況", +"alert_effect_no_service": "無服務", +"alert_effect_reduced_service": "服務減少", +"alert_effect_significant_delays": "嚴重延誤", +"alert_effect_detour": "繞道", +"alert_effect_additional_service": "額外服務", +"alert_effect_modified_service": "服務變更", +"alert_effect_other_effect": "其他影響", +"alert_effect_unknown_effect": "未知影響", +"alert_effect_stop_moved": "站點遷移", +"alert_effect_no_effect": "無影響", +"alert_effect_accessibility_issue": "無障礙問題", + "show_seconds_in_trips": "顯示行程中的秒數", + "system_theme": "系統", + "dark_theme": "暗模式", + "light_theme": "亮模式", + "12_hour_clock": "十二小時制" } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f4b82d9..b5b1566 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,6 +1,5 @@