@geops/rvf-mobility-web-component 0.1.43 → 0.1.44

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 (21) hide show
  1. package/.yarnrc.yml +1 -0
  2. package/CHANGELOG.md +10 -0
  3. package/README.md +31 -3
  4. package/docutils.js +1 -1
  5. package/iframe.html +221 -11
  6. package/index.html +16 -5
  7. package/index.js +111 -106
  8. package/package.json +2 -2
  9. package/src/MobilityMap/MobilityMap.tsx +2 -2
  10. package/src/NotificationLayer/NotificationLayer.tsx +11 -189
  11. package/src/RouteStopTime/RouteStopTime.tsx +2 -2
  12. package/src/RvfFeatureDetails/RvfFeatureDetails.tsx +4 -3
  13. package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx +9 -3
  14. package/src/RvfMobilityMap/RvfMobilityMap.tsx +69 -22
  15. package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx +33 -21
  16. package/src/RvfTopics/RvfTopics.tsx +25 -1
  17. package/src/utils/constants.ts +7 -4
  18. package/src/utils/hooks/useMapContext.tsx +5 -0
  19. package/src/utils/sharingWFSUtils.ts +6 -0
  20. package/testNotification.json +103 -50641
  21. package/src/NotificationLayer/notificationUtils.ts +0 -437
package/.yarnrc.yml ADDED
@@ -0,0 +1 @@
1
+ nodeLinker: node-modules
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.1.44](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.43...v0.1.44) (2025-07-28)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * display runs using url parameter ([07c9691](https://github.com/geops/rvf-mobility-web-component/commit/07c96913e3550fc7056213648806d4edc570dda9))
11
+ * fix linethrough color ([8e0e2e5](https://github.com/geops/rvf-mobility-web-component/commit/8e0e2e5b29cdb2125b5158b74bf14830bd4be455))
12
+ * use new moco styling ([#28](https://github.com/geops/rvf-mobility-web-component/issues/28)) ([4774639](https://github.com/geops/rvf-mobility-web-component/commit/4774639cbdf413b90d401bb768eba44a04045a23))
13
+ * use the new wfs for stations ([521c3dc](https://github.com/geops/rvf-mobility-web-component/commit/521c3dcb1fd161c64eead2bcaa1bfe4b41eb0827))
14
+
5
15
  ### [0.1.43](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.42...v0.1.43) (2025-04-14)
6
16
 
7
17
 
package/README.md CHANGED
@@ -1,10 +1,38 @@
1
- # mobility-web-component
1
+ # rvf-mobility-web-component
2
+
3
+ This project is a fork of the @geops/mobility-web-component project for RVF.
4
+
5
+ RVF uses only the `geops-mobility` web component not the `geops-mobility-search` web component.
6
+
7
+ RVF uses the npm package `@geops/rvf-mobility-web-component`, no iframe is used to display the map.
8
+
9
+ Design is done by bemerkt.de company, we received 2 Sketch files link to implment the desisgn.
10
+
11
+ The [Vercel app](https://rvf-mobility-web-component-geops.vercel.app/) is the offical documention for the customer, make sure it is up to date and exhaustive.
12
+
13
+ Most components in RVF are mostly very generic and could be migrate to the main mobility-web-component repository in the future.
14
+
15
+ ## Links
16
+
17
+ - [Vercel app](https://rvf-mobility-web-component-geops.vercel.app/)
18
+ [NPM package](https://www.npmjs.com/package/@geops/rvf-mobility-web-component)
19
+ - [Sketch file design system](https://www.sketch.com/s/71e4d120-f65f-4451-80c8-0a7e60e22265/p/22207D12-0F28-49D1-BCA4-1EDEF8B8BFE9/canvas)
20
+ - [Sketch file design website](https://www.sketch.com/s/25c65997-d5d5-426f-b86c-a68c2de03524)
21
+ - [VAG colors](https://www.vag-freiburg.de/fahrplan/linien-fahrplaene)
22
+ - [Client test website](https://relaunch.rvf.de/geops-test)
23
+ - [Netzplan on client production website](https://www.rvf.de/fahrtinfo/netzplan)
24
+ - [Tarifzone on client production website](https://www.rvf.de/fahrtinfo/ticket-waehlen#c4656)
25
+ - [Carsharing on client production website](https://www.rvf.de/fahrtinfo/rundum-mobil/carsharing)
26
+ - [Bikesharing on client production website](https://www.rvf.de/fahrtinfo/rundum-mobil/frelo-fahrradverleihsystem)
27
+
28
+ ## General
2
29
 
3
30
  This project contains a set of web components allowing to use easily the [geOps APIs](https://developer.geops.io/):
4
31
 
5
32
  - [`<geops-mobility>`](#geops-mobility-web-component): a web component used to display a map using different [geOps APIs](https://developer.geops.io/).
6
33
  - [`<geops-mobility-search>`](#geops-mobility-search-web-component): a search input to search stops using the [geOps Stops API](https://developer.geops.io/apis/stops).
7
34
 
35
+
8
36
  ## `<geops-mobility>` web component
9
37
 
10
38
  A web component used to display a map using different [geOps APIs](https://developer.geops.io/).
@@ -14,14 +42,14 @@ You can also display MOCO notifications.
14
42
 
15
43
  ### Demo
16
44
 
17
- You can see the web component in action using the [demo app](https://mobility-web-component.geops.io/).
45
+ You can see the web component in action using the [demo app](https://rvf-mobility-web-component-geops.vercel.app/).
18
46
 
19
47
  ### Usage Example
20
48
 
21
49
  ```html
22
50
  <html>
23
51
  <body>
24
- <script type="module" src="https://www.unpkg.com/@geops/mobility-web-component)"></script>
52
+ <script type="module" src="https://www.unpkg.com/@geops/rvf-mobility-web-component)"></script>
25
53
  <geops-mobility apikey="YOUR_GEOPS_API_KEY" style="display: block;width: 400px;height: 800px;"></geops-mobility>
26
54
  </body>
27
55
  </html>
package/docutils.js CHANGED
@@ -139,7 +139,7 @@ function generateCodeText(
139
139
 
140
140
  attrs.forEach((key) => {
141
141
  const attributeValue = wc.getAttribute(key);
142
- const inputValue = document.querySelector(`[name=${key}]`).value;
142
+ const inputValue = document.querySelector(`[name=${key}]`)?.value;
143
143
  if (attributeValue !== null && attributeValue === inputValue) {
144
144
  codeText += `\n\t${[key, '"' + wc.getAttribute(key) + '"'].join("=")}`;
145
145
  }
package/iframe.html CHANGED
@@ -7,7 +7,6 @@
7
7
  <meta name="description" content="" />
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1" />
9
9
  <link rel="stylesheet" type="text/css" href="./output.css" />
10
- <script type="module" src="./bundle.js"></script>
11
10
  <style>
12
11
  iframe {
13
12
  width: 100vw;
@@ -18,17 +17,228 @@
18
17
  <body>
19
18
  <iframe
20
19
  id="iframe"
21
- src="/?realtime=false&baselayer=travic_v2_network_plans&type=notification&notificationurl=https%3A%2F%2Fmoco.dev.geops.io%2Fapi%2Fv1%2Fexport%2Fnotification%2F%3Fsso_config%3Dsob&notificationbeforelayerid=netzplan_line_lable&maxzoom=12&center=955768,5922646"
20
+ src="/?permalink=true&notification=false&realtime=false&layertree=false&share=false&print=false&geolocation=false&toolbar=false&fullscreen=true&layers=haltestellen%2Ctarifzonen%2Cliniennetz"
22
21
  frameborder="0"
23
22
  ></iframe>
23
+
24
+ <script type="module">
25
+ const testNotification = {
26
+ type: "FeatureCollection",
27
+ properties: {
28
+ id: 373496,
29
+ affected_time_intervals: [
30
+ {
31
+ start: "2025-07-22T00:53:00Z",
32
+ end: "2026-01-31T10:53:00Z",
33
+ time_of_day_start: null,
34
+ time_of_day_end: null,
35
+ },
36
+ ],
37
+ publications: [
38
+ {
39
+ visible_from: "2025-07-22T00:53:00Z",
40
+ visible_until: "2026-01-31T10:53:00Z",
41
+ channel: "DEFAULT",
42
+ index: 0,
43
+ },
44
+ ],
45
+ links: [],
46
+ images: [],
47
+ sso_config: "rvf",
48
+ title: "Test Olivier Baustellen Icon",
49
+ long_description: "<p></p><p></p>",
50
+ category: "DISRUPTION",
51
+ start_stop: null,
52
+ end_stop: null,
53
+ size: "M",
54
+ default_language: "de",
55
+ title_de: "",
56
+ title_fr: "",
57
+ title_it: "",
58
+ title_en: "",
59
+ summary_de: "",
60
+ summary_fr: "",
61
+ summary_it: "",
62
+ summary_en: "",
63
+ reason_de: "",
64
+ reason_fr: "",
65
+ reason_it: "",
66
+ reason_en: "",
67
+ description_de: "",
68
+ description_fr: "",
69
+ description_it: "",
70
+ description_en: "",
71
+ consequence_de: "",
72
+ consequence_fr: "",
73
+ consequence_it: "",
74
+ consequence_en: "",
75
+ duration_text_de: "",
76
+ duration_text_fr: "",
77
+ duration_text_it: "",
78
+ duration_text_en: "",
79
+ recommendation_de: "",
80
+ recommendation_fr: "",
81
+ recommendation_it: "",
82
+ recommendation_en: "",
83
+ reasons: [
84
+ {
85
+ name: "Ebbe",
86
+ category_name: "Umwelteinflüsse",
87
+ },
88
+ ],
89
+ },
90
+ features: [
91
+ {
92
+ type: "Feature",
93
+ geometry: {
94
+ type: "GeometryCollection",
95
+ geometries: [
96
+ {
97
+ type: "MultiLineString",
98
+ coordinates: [
99
+ [
100
+ [7.8407629, 47.9976417],
101
+ [7.8392181, 47.9956185],
102
+ [7.8388936, 47.9952356],
103
+ [7.8386947, 47.9950218],
104
+ [7.8384108, 47.9947526],
105
+ [7.8380985, 47.994413],
106
+ [7.8368156, 47.9927414],
107
+ [7.8358579, 47.9915824],
108
+ [7.8354873, 47.9912014],
109
+ [7.8351931, 47.9909404],
110
+ [7.8347127, 47.9905598],
111
+ [7.8338045, 47.9898814],
112
+ [7.8335515, 47.9896813],
113
+ [7.8333915, 47.9895502],
114
+ [7.8330709, 47.9892549],
115
+ [7.8328081, 47.9889703],
116
+ [7.8326371, 47.9887606],
117
+ [7.8312279, 47.9869586],
118
+ [7.8307153, 47.9862716],
119
+ [7.8305208, 47.9859568],
120
+ [7.8303354, 47.9856163],
121
+ [7.83014, 47.9850787],
122
+ [7.8300422, 47.9846474],
123
+ [7.8300134, 47.9844463],
124
+ [7.8299849, 47.9840377],
125
+ [7.8299854, 47.9838421],
126
+ [7.8299991, 47.98365],
127
+ [7.8300606, 47.9832408],
128
+ [7.8301049, 47.9830608],
129
+ [7.8301581, 47.9828987],
130
+ [7.8303579, 47.9823999],
131
+ [7.8304637, 47.9821919],
132
+ [7.8305602, 47.9820268],
133
+ [7.8307651, 47.9817381],
134
+ [7.8310239, 47.9814693],
135
+ [7.8312993, 47.9812478],
136
+ [7.8314977, 47.9811074],
137
+ [7.8316265, 47.981028],
138
+ [7.8319596, 47.9808514],
139
+ [7.8323491, 47.9806874],
140
+ [7.8326678, 47.9805751],
141
+ [7.8395337, 47.9783842],
142
+ [7.8400986, 47.9782221],
143
+ [7.8404738, 47.9781315],
144
+ [7.8407542, 47.9780815],
145
+ [7.8415426, 47.9779725],
146
+ [7.841862, 47.9779416],
147
+ [7.8422848, 47.9779229],
148
+ [7.8429746, 47.9779376],
149
+ [7.8437005, 47.9780116],
150
+ [7.8442791, 47.9781033],
151
+ [7.8445816, 47.9781669],
152
+ [7.8448517, 47.9782296],
153
+ [7.8451824, 47.9783267],
154
+ [7.8457854, 47.9785354],
155
+ [7.8462674, 47.9787433],
156
+ [7.8465396, 47.9788815],
157
+ [7.8467435, 47.9789946],
158
+ [7.848202, 47.9798678],
159
+ [7.8488439, 47.9802292],
160
+ [7.8488183, 47.9802385],
161
+ [7.8491591, 47.9804256],
162
+ [7.8496107, 47.9806426],
163
+ [7.8501096, 47.9808449],
164
+ [7.8516554, 47.9813942],
165
+ [7.8549883, 47.9825315],
166
+ ],
167
+ [
168
+ [7.8549883, 47.9825315],
169
+ [7.8585318, 47.9837596],
170
+ [7.8595929, 47.9841761],
171
+ [7.8602711, 47.9844194],
172
+ [7.8609517, 47.9846273],
173
+ [7.8611318, 47.9846707],
174
+ [7.8616726, 47.9847623],
175
+ [7.8618228, 47.9847777],
176
+ [7.8627388, 47.9848238],
177
+ [7.8657203, 47.9849385],
178
+ [7.8672775, 47.9850355],
179
+ [7.8675543, 47.9850712],
180
+ [7.868149, 47.9851731],
181
+ [7.8704429, 47.9856081],
182
+ [7.8715154, 47.9857248],
183
+ [7.8720517, 47.9857397],
184
+ [7.8725915, 47.98572],
185
+ [7.8730456, 47.9856808],
186
+ [7.873747, 47.9855902],
187
+ [7.8834769, 47.9841235],
188
+ [7.8853988, 47.9838487],
189
+ [7.8862027, 47.9837171],
190
+ [7.8873554, 47.9835097],
191
+ [7.8885522, 47.9832639],
192
+ [7.895159545, 47.981790004],
193
+ ],
194
+ ],
195
+ },
196
+ ],
197
+ },
198
+ properties: {
199
+ graph: "osm",
200
+ is_icon_ref: true,
201
+ stops: [
202
+ {
203
+ uid: "3a888fcdb9a5371e",
204
+ name: "Freiburg(Breisgau) Hbf",
205
+ external_id: "8000107",
206
+ external_code: "RF",
207
+ },
208
+ {
209
+ uid: "a33509cdf7463912",
210
+ name: "Freiburg-Littenweiler",
211
+ external_id: "8002068",
212
+ external_code: "RFLT",
213
+ },
214
+ ],
215
+ affected_products: [
216
+ {
217
+ name: "S1",
218
+ operator: "",
219
+ },
220
+ ],
221
+ disruption_type: "DISRUPTION",
222
+ periods: [],
223
+ severity: "severe",
224
+ severity_group: "high",
225
+ condition: "unknown",
226
+ condition_group: "information",
227
+ },
228
+ },
229
+ ],
230
+ };
231
+
232
+ const iframe = document.getElementById("iframe");
233
+ iframe.addEventListener("load", function () {
234
+ setTimeout(() => {
235
+ console.log("Sending notification to iframe:", testNotification);
236
+ this.contentWindow.postMessage(
237
+ { notification: testNotification },
238
+ "*",
239
+ );
240
+ }, 0);
241
+ });
242
+ </script>
24
243
  </body>
25
- <script type="module">
26
- import testNotification from "./testNotification.json" assert { type: "json" };
27
- const iframe = document.getElementById("iframe");
28
- iframe.addEventListener("load", function () {
29
- setTimeout(() => {
30
- this.contentWindow.postMessage({ notification: testNotification }, "*");
31
- }, 500);
32
- });
33
- </script>
34
244
  </html>
package/index.html CHANGED
@@ -41,8 +41,7 @@
41
41
  <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded overflow-auto"></pre>
42
42
 
43
43
  <geops-mobility
44
- class="h-96 block resize overflow-hidden w-full border rounded-[16px]"
45
- ></geops-mobility>
44
+ class="h-96 block resize overflow-hidden w-full border rounded-[16px]"></geops-mobility>
46
45
 
47
46
  <br />
48
47
  <h2 class="text-xl font-bold">Attributes</h2>
@@ -75,7 +74,7 @@
75
74
  "layertree",
76
75
  // "mapsurl",
77
76
  // "mots",
78
- // "notification",
77
+ "notification",
79
78
  // "notificationat",
80
79
  // "notificationurl",
81
80
  // "notificationbeforelayerid",
@@ -90,6 +89,9 @@
90
89
  "toolbar",
91
90
  "maxextent",
92
91
  "embed",
92
+ "debug",
93
+ "fullscreen",
94
+ "runs",
93
95
  ];
94
96
 
95
97
  const booleanAttrs = [
@@ -104,8 +106,12 @@
104
106
  "toolbar",
105
107
  "search",
106
108
  "embed",
109
+ "debug",
110
+ "fullscreen",
111
+ "runs",
107
112
  ];
108
113
  const booleanTrueByDefault = [ "details", "print", "share", "layertree", "geolocation", "toolbar", "realtime"];
114
+ const reloadAttrs = [ "fullscreen" ]
109
115
 
110
116
  const events = [
111
117
  "singleclick",
@@ -128,16 +134,21 @@
128
134
  layers: "A comma separated list of layers: echtzeit,haltestellen,verkaufsstellen,liniennetz,tarifzonen,fahrradfrelo,fahrradandere,cargobikefrelo,cargobikeandere,grueneflotte,naturenergie,autoandere,e-roller,mitfahrpunkt,pois",
129
135
  details: "Show shared mobility details in the sidebar when we click on an shared mobility feature.",
130
136
  realtime: "Show/hide the realtime data in the map. Default to true.",
131
- embed: "Activate/deactivate the embedded navigation mode. In this mode zooming with mouse wheel is deactivated and, on touch device, you can only navigate with two finger, a warning message is displayed to warn the user. Default to false."
137
+ embed: "Activate/deactivate the embedded navigation mode. In this mode zooming with mouse wheel is deactivated and, on touch device, you can only navigate with two finger, a warning message is displayed to warn the user. Default to false.",
138
+ debug: "Displays debug information for vehicles when true, use only for debugging. Default to false.",
139
+ fullscreen: "Load the component in fullscreen mode. Default to false.",
140
+ runs: "Shows the number of trips on a line in the sidebar, use only for debugging. Default to false.",
141
+ notification: "Show/hide the notifications (coming from geOps MOCO API) layer on the map. Default to false.",
132
142
  };
133
143
 
134
- document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs, booleanTrueByDefault, descriptionByAttr);
144
+ document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs, booleanTrueByDefault, descriptionByAttr, reloadAttrs);
135
145
  document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
136
146
  document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
137
147
  wc.addEventListener('mwc:attribute', (event) => {
138
148
  document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
139
149
  });
140
150
  wc.addEventListener('mwc:permalink', (event) => {
151
+ console.log("Permalink event received", event.data);
141
152
  window.parent?.postMessage({type:"mwc:permalink", data: event.data}, '*');
142
153
  });
143
154
  applyPermalinkParameters(wc);