@geops/rvf-mobility-web-component 0.1.65 → 0.1.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/docutils.js +100 -36
  3. package/index.html +48 -20
  4. package/index.js +88 -72
  5. package/package.json +1 -1
  6. package/search.html +25 -22
  7. package/src/LayerTree/TreeItem/TreeItem.tsx +1 -1
  8. package/src/MapsetLayer/MapsetLayer.tsx +33 -12
  9. package/src/MobilityMap/MobilityMapAttributes.ts +14 -3
  10. package/src/MobilitySearch/MobilitySearchAttributes.ts +12 -0
  11. package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx +1 -1
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@geops/rvf-mobility-web-component",
3
3
  "license": "UNLICENSED",
4
4
  "description": "Web components for rvf in the domains of mobility and logistics.",
5
- "version": "0.1.65",
5
+ "version": "0.1.67",
6
6
  "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
7
7
  "type": "module",
8
8
  "main": "index.js",
package/search.html CHANGED
@@ -24,15 +24,19 @@
24
24
  width: 3px;
25
25
  height: 3px;
26
26
  }
27
+
27
28
  a {
28
29
  text-decoration: underline;
29
30
  }
30
31
  </style>
31
32
  </head>
32
- </head>
33
+
33
34
  <body class="p-8">
34
35
  <!-- tailwind hack to add class used in docutils -->
35
- <div class="border px-4 py-2 table-auto w-full flex gap-4 p-2 bg-black text-white hover:bg-gray-700" style="display:none;"></div>
36
+ <div
37
+ class="flex w-full table-auto gap-4 border bg-black pt-2 mt-2 px-4 py-2 text-white hover:bg-gray-700"
38
+ style="display: none"
39
+ ></div>
36
40
  <div
37
41
  id="doc"
38
42
  style="display: none"
@@ -43,7 +47,9 @@
43
47
  <p>This web component launches a search on the <b>geOps Stops API</b></p>
44
48
  <p>Every parameters of the <b>geOps Stops API</b>:</p>
45
49
  <ul class="pl-8">
46
- <li class="list-disc">can be passed as a string attribute of the web component.</li>
50
+ <li class="list-disc">
51
+ can be passed as a string attribute of the web component.
52
+ </li>
47
53
  <li class="list-disc">
48
54
  can be passed as an URL parameter of this page, they will be
49
55
  automatically apply to the web component.
@@ -51,30 +57,34 @@
51
57
  </ul>
52
58
  <p>
53
59
  The list of parameters of the <b>geOps Stops API</b> can be found
54
- <a href="https://developer.geops.io/apis/stops#parameters" target="_blank">here</a>.
60
+ <a
61
+ href="https://developer.geops.io/apis/stops#parameters"
62
+ target="_blank"
63
+ >here</a
64
+ >.
55
65
  </p>
56
66
 
57
67
  <h2 class="text-xl font-bold">Usage example</h2>
58
- <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded"></pre>
68
+ <pre id="code" class="rounded bg-slate-800 p-4 text-slate-200"></pre>
59
69
 
60
70
  <geops-mobility-search
61
71
  id="search"
62
- class="max-w-3xl block border"
72
+ class="block max-w-3xl border"
63
73
  limit="5"
64
74
  mots="rail,bus"
65
75
  ></geops-mobility-search>
66
76
 
67
- <br />
68
- <div id="attributesDoc">
77
+ <div id="attributesDoc" class="space-y-4">
69
78
  <h2 class="text-xl font-bold">Attributes</h2>
70
79
  <div id="attributes"></div>
71
80
  </div>
72
- <div id="eventsDoc">
81
+ <div id="eventsDoc" class="space-y-4">
73
82
  <h2 class="text-xl font-bold">Events</h2>
74
83
  <pre class="rounded bg-slate-800 p-4 text-slate-200">
75
84
  document.getElementById('search').addEventListener('mwc:attribute', (event) => {
76
85
  console.log('Display last data received:', event.data);
77
- });</pre
86
+ });
87
+ </pre
78
88
  >
79
89
  <div id="events"></div>
80
90
  </div>
@@ -83,9 +93,11 @@ document.getElementById('search').addEventListener('mwc:attribute', (event) => {
83
93
  <h1 class="text-xl font-bold">More mobility web components</h1>
84
94
  <p>
85
95
  <a href="index.html" target="_blank"
86
- >&gt;&gt; Usage example Map Component</a
87
- >
96
+ >&gt;&gt; Usage example Map Component
97
+ </a>
88
98
  </p>
99
+ <br />
100
+ <br />
89
101
  </div>
90
102
  <br />
91
103
  <br />
@@ -94,24 +106,15 @@ document.getElementById('search').addEventListener('mwc:attribute', (event) => {
94
106
  const wc = document.querySelector("geops-mobility-search");
95
107
 
96
108
  window.addEventListener("load", () => {
97
-
98
109
  const attributes = window.MobilitySearchAttributes;
99
110
  const events = window.MobilitySearchEvents;
100
- const descriptionByEvent = {
111
+ const descriptionByEvent = {
101
112
  "mwc:stopssearchselect":
102
113
  "Only when search attribute is 'true'. Event fired when a stop is selected in the stops search results. The event data contains the selected stop.",
103
114
  "mwc:attribute":
104
115
  "Event fired when an web component's attribute is changed. The event data contains the list of all attributes and their values.",
105
116
  };
106
117
 
107
- // Add special parameters
108
- window.MobilityMapAttributes.fullscreen = {
109
- type: "boolean",
110
- defaultValue: "false",
111
- description: `Load the page in fullscreen mode.`,
112
- reload: true,
113
- };
114
-
115
118
  onLoad(wc, attributes, events, pkgSrc);
116
119
  });
117
120
  </script>
package/src/LayerTree/TreeItem/TreeItem.tsx CHANGED
@@ -129,7 +129,7 @@ function TreeItem({
129
129
  className={`flex-1 cursor-pointer`}
130
130
  htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
131
131
  >
132
- {typeof title === "string" ? t(title) : title}
132
+ {typeof title === "string" ? t(title) || title : title}
133
133
  </label>
134
134
  {renderedLayers.length > 0 && (
135
135
  <button
package/src/MapsetLayer/MapsetLayer.tsx CHANGED
@@ -18,7 +18,9 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
18
18
  map,
19
19
  mapsetbbox,
20
20
  mapsetplanid,
21
+ mapsettags,
21
22
  mapsettenants,
23
+ mapsettimestamp,
22
24
  mapseturl,
23
25
  setMapsetLayer,
24
26
  } = useMapContext();
@@ -27,34 +29,53 @@ function MapsetLayer(props?: Partial<MapsetLayerOptions>) {
27
29
  if (!baseLayer || !map) {
28
30
  return null;
29
31
  }
32
+
33
+ let bbox = undefined;
34
+ if (mapsetbbox) {
35
+ bbox = mapsetbbox?.split(",").map((coord) => {
36
+ return Number(coord.trim());
37
+ });
38
+ if (
39
+ bbox.length === 4 &&
40
+ !bbox.some((coord) => {
41
+ return Number.isNaN(coord);
42
+ })
43
+ ) {
44
+ bbox = transformExtent(bbox, "EPSG:3857", "EPSG:4326");
45
+ }
46
+ } else {
47
+ bbox = transformExtent(
48
+ map.getView()?.calculateExtent(map.getSize()),
49
+ "EPSG:3857",
50
+ "EPSG:4326",
51
+ );
52
+ }
30
53
  return new MtbMapsetLayer({
31
54
  apiKey: apikey,
32
- bbox:
33
- mapsetbbox?.split(",").map((coord) => {
34
- return Number(coord.trim());
35
- }) ||
36
- transformExtent(
37
- map.getView()?.calculateExtent(map.getSize()),
38
- "EPSG:3857",
39
- "EPSG:4326",
40
- ),
55
+ bbox,
41
56
  mapseturl: mapseturl || undefined,
42
57
  name: LAYER_NAME_MAPSET,
43
58
  planId: mapsetplanid ?? undefined,
59
+ tags: mapsettags?.split(",").map((t) => {
60
+ return t.trim();
61
+ }),
44
62
  tenants: mapsettenants?.split(",").map((t) => {
45
63
  return t.trim();
46
64
  }),
65
+ timestamp: mapsettimestamp || new Date().toISOString(), // Load only standard plan
47
66
  zoom: map.getView().getZoom(),
48
67
  ...(props || {}),
49
68
  });
50
69
  }, [
51
- apikey,
52
70
  baseLayer,
53
71
  map,
54
72
  mapsetbbox,
55
- mapsettenants,
56
- mapsetplanid,
73
+ apikey,
57
74
  mapseturl,
75
+ mapsetplanid,
76
+ mapsettags,
77
+ mapsettenants,
78
+ mapsettimestamp,
58
79
  props,
59
80
  ]);
60
81
 
package/src/MobilityMap/MobilityMapAttributes.ts CHANGED
@@ -42,7 +42,9 @@ export type MobilityMapAttributeName =
42
42
  | "mapset"
43
43
  | "mapsetbbox"
44
44
  | "mapsetplanid"
45
+ | "mapsettags"
45
46
  | "mapsettenants"
47
+ | "mapsettimestamp"
46
48
  | "mapseturl"
47
49
  | "mapsurl"
48
50
  | "maxextent"
@@ -181,7 +183,7 @@ where:
181
183
  },
182
184
  mapset: {
183
185
  defaultValue: "false",
184
- description: `Add the mapset layer to the map. This layer will display mapset plans on the map.`,
186
+ description: `Add the mapset layer to the map. This layer will display mapset plans on the map. By default, it will load only the standard plans valid at the current time.`,
185
187
  public: true,
186
188
  type: "boolean",
187
189
  },
@@ -192,12 +194,21 @@ where:
192
194
  public: false,
193
195
  },
194
196
  mapsetplanid: {
195
- description: "The id of the mapset plan to display.",
197
+ description:
198
+ "The id of the mapset plan to display. Mostly for debugging purposes.",
196
199
  public: false,
197
200
  },
201
+ mapsettags: {
202
+ description: `The ${geopsMapsetApiLink} tags to get the plans from.`,
203
+ public: true,
204
+ },
198
205
  mapsettenants: {
199
206
  defaultValue: "rvf",
200
- description: `The ${geopsMapsetApiLink} tenant to get the mapset from.`,
207
+ description: `The ${geopsMapsetApiLink} tenant to get the plans from.`,
208
+ public: false,
209
+ },
210
+ mapsettimestamp: {
211
+ description: `The ${geopsMapsetApiLink} timestamp used to load valid standard plan. If not defined it will use the current time.`,
201
212
  public: false,
202
213
  },
203
214
  mapseturl: {
package/src/MobilitySearch/MobilitySearchAttributes.ts CHANGED
@@ -25,43 +25,55 @@ export type MobilitySearchAttributes = Record<
25
25
  const attrs: MobilitySearchAttributes = {
26
26
  apikey: {
27
27
  description: `Your ${geopsApiLink}`,
28
+ public: true,
28
29
  },
29
30
  bbox: {
30
31
  description: `The extent where to search the stops (minx,miny,maxx,maxy). See the ${geopsStopsApiLink} documentation.`,
32
+ public: true,
31
33
  },
32
34
  countrycode: {
33
35
  description: "The country code to filter the results (IT, DE, CH ...)",
36
+ public: true,
34
37
  },
35
38
  event: {
36
39
  defaultValue: "mwc:stopssearchselect",
37
40
  description: "The event's name to listen to when a stop is selected.",
41
+ public: true,
38
42
  },
39
43
  field: {
40
44
  description: `Which field to look up, default all of them, Possible values:id, name, coords. See the ${geopsStopsApiLink} documentation.`,
45
+ public: true,
41
46
  },
42
47
  limit: {
43
48
  defaultValue: "5",
44
49
  description: `The number of suggestions to show. See the ${geopsStopsApiLink} documentation.`,
50
+ public: true,
45
51
  },
46
52
  mots: {
47
53
  description: `Commas separated list of mots used to filter the results (rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car). See the ${geopsStopsApiLink} documentation.`,
54
+ public: true,
48
55
  },
49
56
  onselect: {
50
57
  description: null, //`Function called when a stop is selected. The function receives the selected stop as parameter.`,
58
+ public: false,
51
59
  },
52
60
  params: {
53
61
  description: `JSON string with additional parameters to pass to the request to the API. Ex: {"{ 'key': 'value' }"}. See the ${geopsStopsApiLink} documentation.`,
62
+ public: true,
54
63
  },
55
64
  prefagencies: {
56
65
  description: `comma seperated list, order chooses which agency will be preferred as
57
66
  ident_source (for id and code fields). Possible values: sbb, db. See the ${geopsStopsApiLink} documentation.`,
67
+ public: true,
58
68
  },
59
69
  reflocation: {
60
70
  description: `Coordinates in WGS84 (in lat,lon order) used to rank stops close to this position higher. See the ${geopsStopsApiLink} documentation.`,
71
+ public: true,
61
72
  },
62
73
  url: {
63
74
  defaultValue: "https://api.geops.io/stops/v1/",
64
75
  description: `The URL to the ${geopsStopsApiLink}.`,
76
+ public: true,
65
77
  },
66
78
  };
67
79
 
package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx CHANGED
@@ -24,7 +24,7 @@ function OverlayDetailsHeader({
24
24
  const layerConfig = useLayerConfig(layer?.get("name"));
25
25
  return (
26
26
  <OverlayHeader
27
- title={t(layerConfig?.title || "")}
27
+ title={t(layerConfig?.title || "") || (layerConfig?.title ?? "")}
28
28
  {...props}
29
29
  ></OverlayHeader>
30
30
  );