Add basic preset handling for multiple countries

- Introduce default/minimal preset set - Introduce URL param to change presets - Extend readme
zlant · Feb 4, 2022 · 2c838f8 · 2c838f8
1 parent 4b09eb2
commit 2c838f8
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 102 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,13 @@
 - [Open the viewer](https://zlant.github.io/parking-lanes/#16/52.4751/13.4435)
 - Learn more about the project [in the launch post](https://www.openstreetmap.org/user/acsd/diary/45026).
 
+## Avaliable URL params
+
+- Use [`presetCountry=russia`](https://zlant.github.io/parking-lanes/?presetCountry=russia) to change [the editor presets (traffic signs)](.src/parking/controls/editor/presets.ts) from `default` (minimal) to `russia`.
+
 ## Screenshots
 
-Viewer: 
+Viewer:
 
 <img src="https://i.imgur.com/VwH7Hmh.png" alt="Viewer UI">
 

diff --git a/src/parking/controls/editor/editor-form.ts b/src/parking/controls/editor/editor-form.ts
@@ -2,7 +2,7 @@ import { hyper } from 'hyperhtml/esm'
 import { OsmWay } from '../../../utils/types/osm-data'
 import { WaysInRelation } from '../../../utils/types/osm-data-storage'
 import { OsmKeyValue } from '../../../utils/types/preset'
-import { presets } from './presets'
+import { presetCountryNames, presets } from './presets'
 import { getAllTagsBlock } from '../lane-info'
 
 export function getLaneEditForm(osm: OsmWay, waysInRelation: WaysInRelation, cutLaneListener: (way: OsmWay) => void): HTMLFormElement {
@@ -197,8 +197,18 @@ function getTextInput(tag: string, value: string): HTMLInputElement {
                value="${value ?? ''}">`
 }
 
+function getPresetScope() {
+    const params = new URLSearchParams(document.location.search)
+    const scopeFromUrl = params.get('presetCountry') ?? 'default'
+    if (presetCountryNames().includes(scopeFromUrl))
+        return scopeFromUrl
+    else
+        return 'default'
+}
+
 function getPresetSigns(osm: OsmWay, side: 'both'|'left'|'right') {
-    return presets.map(x => hyper`
+    const presetScope = getPresetScope()
+    return presets[presetScope].map(x => hyper`
         <img src=${x.img.src}
              class="sign-preset"
              height=${x.img.height}

diff --git a/src/parking/controls/editor/presets.ts b/src/parking/controls/editor/presets.ts
@@ -1,106 +1,148 @@
-import { Preset } from '../../../utils/types/preset'
+import { Presets } from '../../../utils/types/preset'
 
-export const presets: Preset[] = [
-    {
-        key: 'noStopping',
-        tags: [
-            { k: 'parking:lane:{side}', v: 'no_stopping' },
-            { k: 'parking:condition:{side}', v: '' },
-            { k: 'parking:condition:{side}:time_interval', v: '' },
-            { k: 'parking:condition:{side}:default', v: '' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/no_stopping/no_stopping.svg',
-            height: 20,
-            width: 20,
-            alt: 'No Stopping Sign',
-            title: 'No Stopping',
+export function presetCountryNames() {
+    return Object.keys(presets).map(key => key)
+}
+
+export const presets: Presets = {
+    default: [
+        {
+            key: 'noStopping',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_stopping' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_stopping/no_stopping.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Stopping Sign',
+                title: 'No Stopping',
+            },
+        },
+        {
+            key: 'noParking',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_parking' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_parking/no_parking.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Parking Sign',
+                title: 'No Parking',
+            },
+        },
+    ],
+    russia: [
+        {
+            key: 'noStopping',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_stopping' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_stopping/no_stopping.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Stopping Sign',
+                title: 'No Stopping',
+            },
         },
-    },
-    {
-        key: 'noParking',
-        tags: [
-            { k: 'parking:lane:{side}', v: 'no_parking' },
-            { k: 'parking:condition:{side}', v: '' },
-            { k: 'parking:condition:{side}:time_interval', v: '' },
-            { k: 'parking:condition:{side}:default', v: '' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/no_parking/no_parking.svg',
-            height: 20,
-            width: 20,
-            alt: 'No Parking Sign',
-            title: 'No Parking',
+        {
+            key: 'noParking',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_parking' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_parking/no_parking.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Parking Sign',
+                title: 'No Parking',
+            },
         },
-    },
-    {
-        key: 'noParkingOdd',
-        tags: [
-            { k: 'parking:lane:{side}', v: 'no_parking' },
-            { k: 'parking:condition:{side}', v: '' },
-            { k: 'parking:condition:{side}:time_interval', v: '1-31/2' },
-            { k: 'parking:condition:{side}:default', v: 'free' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/no_parking/no_parking_on_odd_days.svg',
-            height: 20,
-            width: 20,
-            alt: 'No Parking on Odd Days Sign',
-            title: 'No Parking on Odd Days',
+        {
+            key: 'noParkingOdd',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_parking' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '1-31/2' },
+                { k: 'parking:condition:{side}:default', v: 'free' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_parking/no_parking_on_odd_days.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Parking on Odd Days Sign',
+                title: 'No Parking on Odd Days',
+            },
         },
-    },
-    {
-        key: 'noParkingEven',
-        tags: [
-            { k: 'parking:lane:{side}', v: 'no_parking' },
-            { k: 'parking:condition:{side}', v: '' },
-            { k: 'parking:condition:{side}:time_interval', v: '2-30/2' },
-            { k: 'parking:condition:{side}:default', v: 'free' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/no_parking/no_parking_on_even_days.svg',
-            height: 20,
-            width: 20,
-            alt: 'No Parking on Even Days Sign',
-            title: 'No Parking on Even Days',
+        {
+            key: 'noParkingEven',
+            tags: [
+                { k: 'parking:lane:{side}', v: 'no_parking' },
+                { k: 'parking:condition:{side}', v: '' },
+                { k: 'parking:condition:{side}:time_interval', v: '2-30/2' },
+                { k: 'parking:condition:{side}:default', v: 'free' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/no_parking/no_parking_on_even_days.svg',
+                height: 20,
+                width: 20,
+                alt: 'No Parking on Even Days Sign',
+                title: 'No Parking on Even Days',
+            },
         },
-    },
-    {
-        key: 'parking',
-        tags: [
-            { k: 'parking:lane:{side}', v: '' },
-            { k: 'parking:condition:{side}', v: 'free' },
-            { k: 'parking:condition:{side}:time_interval', v: '' },
-            { k: 'parking:condition:{side}:default', v: '' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/free_parking/free_parking_russia.svg',
-            height: 20,
-            width: 20,
-            alt: 'Free Parking Sign',
-            title: 'Free Parking',
+        {
+            key: 'parking',
+            tags: [
+                { k: 'parking:lane:{side}', v: '' },
+                { k: 'parking:condition:{side}', v: 'free' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/free_parking/free_parking_russia.svg',
+                height: 20,
+                width: 20,
+                alt: 'Free Parking Sign',
+                title: 'Free Parking',
+            },
         },
-    },
-    {
-        key: 'ticket',
-        tags: [
-            { k: 'parking:lane:{side}', v: '' },
-            { k: 'parking:condition:{side}', v: 'ticket' },
-            { k: 'parking:condition:{side}:time_interval', v: '' },
-            { k: 'parking:condition:{side}:default', v: '' },
-            { k: 'parking:condition:{side}:maxstay', v: '' },
-        ],
-        img: {
-            src: '/assets/paid_parking/paid_parking_russia.svg',
-            height: 20,
-            width: 40,
-            alt: 'Paid Parking Sign',
-            title: 'Paid Parking',
+        {
+            key: 'ticket',
+            tags: [
+                { k: 'parking:lane:{side}', v: '' },
+                { k: 'parking:condition:{side}', v: 'ticket' },
+                { k: 'parking:condition:{side}:time_interval', v: '' },
+                { k: 'parking:condition:{side}:default', v: '' },
+                { k: 'parking:condition:{side}:maxstay', v: '' },
+            ],
+            img: {
+                src: '/assets/paid_parking/paid_parking_russia.svg',
+                height: 20,
+                width: 40,
+                alt: 'Paid Parking Sign',
+                title: 'Paid Parking',
+            },
         },
-    },
-]
+    ],
+}
diff --git a/src/utils/types/preset.ts b/src/utils/types/preset.ts
@@ -4,6 +4,10 @@ export interface OsmKeyValue {
     v: string
 }
 
+export interface Presets {
+    [key: string]: Preset[]
+}
+
 export interface Preset {
     /** Name of this preset */
     key: string