@geops/rvf-mobility-web-component 0.1.9 → 0.1.11

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 (80) hide show
  1. package/.github/CODEOWNERS +37 -0
  2. package/.github/workflows/conventional-pr-title.yml +36 -0
  3. package/CHANGELOG.md +55 -0
  4. package/README.md +3 -1
  5. package/doc/package.json +5 -5
  6. package/doc/src/app/components/GeopsMobilityDoc.tsx +19 -0
  7. package/docutils.js +198 -0
  8. package/index.html +48 -217
  9. package/index.js +683 -91
  10. package/input.css +15 -1
  11. package/jest-setup.js +3 -2
  12. package/package.json +9 -8
  13. package/scripts/dev.mjs +1 -1
  14. package/search.html +38 -69
  15. package/src/GeolocationButton/GeolocationButton.tsx +6 -17
  16. package/src/LayerTree/LayerTree.tsx +44 -0
  17. package/src/LayerTree/TreeItem/TreeItem.tsx +145 -0
  18. package/src/LayerTree/TreeItem/index.tsx +1 -0
  19. package/src/LayerTree/TreeItemContainer/TreeItemContainer.tsx +16 -0
  20. package/src/LayerTree/TreeItemContainer/index.tsx +1 -0
  21. package/src/LayerTree/index.tsx +1 -0
  22. package/src/LayerTree/layersTreeContext.ts +4 -0
  23. package/src/LayerTree/layersTreeReducer.ts +156 -0
  24. package/src/Map/Map.tsx +57 -12
  25. package/src/MobilityMap/MobilityMap.tsx +22 -9
  26. package/src/MobilityMap/index.css +0 -13
  27. package/src/RealtimeLayer/RealtimeLayer.tsx +1 -1
  28. package/src/RvfButton/RvfButton.tsx +45 -0
  29. package/src/RvfButton/index.tsx +1 -0
  30. package/src/RvfExportMenu/RvfExportMenu.tsx +95 -0
  31. package/src/RvfExportMenu/index.tsx +1 -0
  32. package/src/RvfExportMenuButton/RvfExportMenuButton.tsx +27 -0
  33. package/src/RvfExportMenuButton/index.tsx +1 -0
  34. package/src/RvfFeatureDetails/RvfFeatureDetails.tsx +29 -0
  35. package/src/RvfFeatureDetails/index.tsx +1 -0
  36. package/src/RvfIconButton/RvfIconButton.tsx +35 -0
  37. package/src/RvfIconButton/index.tsx +1 -0
  38. package/src/RvfMobilityMap/RvfMobilityMap.tsx +132 -52
  39. package/src/RvfMobilityMap/index.css +0 -13
  40. package/src/RvfModal/RvfModal.tsx +52 -0
  41. package/src/RvfModal/index.tsx +1 -0
  42. package/src/RvfPoisLayer/RvfPoisLayer.tsx +39 -0
  43. package/src/RvfPoisLayer/index.tsx +1 -0
  44. package/src/RvfSharedMobilityLayerGroup/RvfSharedMobilityLayerGroup.tsx +88 -0
  45. package/src/RvfSharedMobilityLayerGroup/index.tsx +1 -0
  46. package/src/RvfSingleClickListener/RvfSingleClickListener.tsx +137 -0
  47. package/src/RvfSingleClickListener/index.tsx +1 -0
  48. package/src/RvfZoomButtons/RvfZoomButtons.tsx +73 -0
  49. package/src/RvfZoomButtons/index.tsx +1 -0
  50. package/src/Search/Search.tsx +11 -9
  51. package/src/SingleClickListener/index.tsx +1 -1
  52. package/src/StationsLayer/StationsLayer.tsx +0 -1
  53. package/src/StopsSearch/StopsSearch.tsx +38 -6
  54. package/src/TopicMenu/TopicMenu.tsx +143 -0
  55. package/src/TopicMenu/index.tsx +1 -0
  56. package/src/icons/Cancel/Cancel.tsx +21 -0
  57. package/src/icons/Cancel/cancel.svg +7 -0
  58. package/src/icons/Cancel/index.tsx +1 -0
  59. package/src/icons/Download/Download.tsx +20 -0
  60. package/src/icons/Download/download.svg +15 -0
  61. package/src/icons/Download/index.tsx +1 -0
  62. package/src/icons/Elevator/Elevator.tsx +1 -1
  63. package/src/icons/Geolocation/Geolocation.tsx +21 -0
  64. package/src/icons/Geolocation/index.tsx +1 -0
  65. package/src/icons/Menu/Menu.tsx +32 -0
  66. package/src/icons/Menu/index.tsx +1 -0
  67. package/src/icons/Menu/menu.svg +9 -0
  68. package/src/icons/Minus/Minus.tsx +19 -0
  69. package/src/icons/Minus/index.tsx +1 -0
  70. package/src/icons/Minus/minus.svg +7 -0
  71. package/src/icons/Plus/Plus.tsx +19 -0
  72. package/src/icons/Plus/index.tsx +1 -0
  73. package/src/icons/Plus/plus.svg +7 -0
  74. package/src/index.tsx +2 -0
  75. package/src/utils/constants.ts +9 -0
  76. package/src/utils/createMobiDataBwWfsLayer.ts +120 -0
  77. package/src/utils/exportPdf.ts +677 -0
  78. package/src/utils/hooks/useRvfContext.tsx +37 -0
  79. package/src/utils/hooks/useUpdatePermalink.tsx +2 -9
  80. package/tailwind.config.mjs +60 -8
package/index.html CHANGED
@@ -18,10 +18,12 @@
18
18
  }
19
19
  </script>
20
20
  <script type="module" src="./index.js"></script>
21
+ <script src="./docutils.js"></script>
21
22
  <link rel="stylesheet" type="text/css" href="./output.css" />
22
23
  <style>
23
24
  ::-webkit-scrollbar {
24
- width: 3px;
25
+ width: 10px;
26
+ height: 10px;
25
27
  }
26
28
  a {
27
29
  text-decoration: underline;
@@ -29,248 +31,77 @@
29
31
  </style>
30
32
  </head>
31
33
  <body class="p-8">
32
- <div id="doc" style="display: none" class="mx-auto max-w-5xl space-y-4">
34
+ <!-- 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 id="doc" style="display: none" class="mx-auto max-w-3xl space-y-4">
33
37
  <h1 class="flex gap-4"><img src="./Logo.svg">Mobility Web Component</h1>
34
38
  <p>This is a demo of the Mobility Web Component.</p>
35
39
  <h2>Usage example</h2>
36
40
  <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded"></pre>
37
41
 
38
- <!-- Default -->
39
42
  <geops-mobility
40
43
  class="h-96 block resize overflow-auto w-full"
41
44
  ></geops-mobility>
42
45
 
43
46
  <br />
44
- <!-- <h2 class="text-xl font-bold">Attributes</h2> -->
45
- <!-- <button
46
- class="border rounded p-2 hover:bg-slate-200"
47
- onclick="toggleBooleanAttribute('search')"
48
- >
49
- Toggle search
50
- </button> -->
51
-
52
- <!-- <table class="table-auto w-full" >
53
- <thead>
54
- <tr>
55
- <th class="border px-4 py-2">Name</th>
56
- <th class="border px-4 py-2">Default</th>
57
- <th class="border px-4 py-2">Description</th>
58
- <th class="border px-4 py-2">Selected</th>
59
- </tr>
60
- </thead>
61
- <tbody>
62
- <tr>
63
- <td class="border px-4 py-2">apikey</td>
64
- <td class="border px-4 py-2"></td>
65
- <td class="border px-4 py-2"></td>
66
- <td class="border px-4 py-2">
67
- <input
68
- type="text"
69
- class="border"
70
- value=""
71
- onchange="map.setAttribute('apikey', this.value)"/>
72
- </td>
73
- </tr>
74
-
75
- <tr>
76
- <td class="border px-4 py-2">search</td>
77
- <td class="border px-4 py-2">true</td>
78
- <td class="border px-4 py-2"></td>
79
- <td class="border px-4 py-2">
80
- <select
81
- class="border px-4 py-2"
82
- name="baselayer"
83
- onchange="map.setAttribute(this.name, this.value)">
84
- <option value="travic_v2">travic_v2</option>
85
- <option value="base_dark_v2">base_dark_v2</option>
86
- </select>
87
- </td>
88
- </tr>
89
-
90
- <tr>
91
- <td class="border px-4 py-2">realtime</td>
92
- <td class="border px-4 py-2">true</td>
93
- <td class="border px-4 py-2"></td>
94
- <td class="border px-4 py-2">
95
- <input
96
- name="realtime"
97
- type="checkbox"
98
- checked
99
- onchange="toggleBooleanAttribute(this.name)"/>
100
- </td>
101
- </tr>
102
- <tr>
103
- <td class="border px-4 py-2">search</td>
104
- <td class="border px-4 py-2">true</td>
105
- <td class="border px-4 py-2"></td>
106
- <td class="border px-4 py-2">
107
- <input
108
- name="search"
109
- type="checkbox"
110
- checked
111
- onchange="toggleBooleanAttribute(this.name)"/>
112
- </td>
113
- </tr>
114
- </tbody>
115
- </table> -->
116
-
117
- <!-- <br />
47
+ <h2 class="text-xl font-bold">Attributes</h2>
48
+ <div id="attributes"></div>
49
+ <h2 class="text-xl font-bold">Events</h2>
50
+ <div id="events"></div>
51
+ <br />
118
52
  <br />
119
- <h1 class="text-xl font-bold">More mobility web components</h1>
53
+ <!--h1 class="text-xl font-bold">More mobility web components</h1>
120
54
  <p>
121
55
  <a href="search.html" target="_blank"
122
56
  >&gt;&gt; Usage example Search Component</a
123
57
  >
124
58
  </p> -->
125
59
  </div>
126
-
127
60
  <br />
128
61
  <br />
129
62
  <script type="text/javascript">
130
- params = new URLSearchParams(window.location.search);
131
-
132
- // There should be only on map on the html page at this point
133
- const doc = document.querySelectorAll("#doc");
134
- const map = document.querySelector("geops-mobility");
135
-
136
- if (params.get("fullscreen") === "true") {
137
- map.parentElement.removeChild(map);
138
- map.className = "absolute w-full h-full inset-0";
139
- document.body.appendChild(map);
140
- document.body.style = "padding:0;";
141
- } else {
142
- doc.forEach((d) => (d.style.display = "block"));
143
- }
144
- params.delete("fullscreen");
63
+ const pkgSrc = "https://www.unpkg.com/@geops/rvf-mobility-web-component";
64
+ const wc = document.querySelector("geops-mobility");
145
65
 
146
- if (
147
- params.get("permalink") !== "false" &&
148
- params.get("x") &&
149
- params.get("y")
150
- ) {
151
- map.setAttribute("center", `${params.get("x")},${params.get("y")}`);
152
- params.delete("x");
153
- params.delete("y");
154
- }
155
-
156
- if (params.get("permalink") !== "false" && params.get("z")) {
157
- map.setAttribute("zoom", params.get("z"));
158
- params.delete("z");
159
- }
160
-
161
- // Apply all url parameters as attribute of the web component
162
- params.forEach((value, key) => {
163
- map.setAttribute(key, value);
164
- const input = document.querySelector(`input[name=${key}]`);
165
- if (input) {
166
- if (input.type === "checkbox") {
167
- input.checked = value !== "false";
168
- } else {
169
- input.value = value;
170
- }
171
- }
172
- });
173
-
174
- // if (!map.getAttribute("apikey")) {
175
- // fetch("https://backend.developer.geops.io/publickey")
176
- // .then((response) => response.json())
177
- // .then((data) => {
178
- // if (data && data.success) {
179
- // map.setAttribute("apikey", data.key);
180
- // }
181
- // });
182
- // }
183
-
184
- // Listen StopsSearch event
185
- window.addEventListener("mwc:stopssearchselect", (event) => {
186
- console.log("mwc:stopssearchselect event: ", event.data);
187
- // window.top.postMessage(event.data, "*");
188
- });
189
-
190
- // Send url search params to parent window
191
- window.addEventListener("mwc:attribute", (event) => {
192
- console.log("mwc:attribute event: ", event.data);
193
- window.top.postMessage(new URLSearchParams(event.data).toString(), "*");
194
- });
195
-
196
- // Listen window event
197
- window.addEventListener("message", (event) => {
198
- console.log("message event: ", event);
199
- });
200
-
201
- function toggleBooleanAttribute(name) {
202
- const value = map.getAttribute(name);
203
- map.setAttribute(name, value === "false" ? "true" : "false");
204
- const urlParams = new URLSearchParams(window.location.search);
205
- urlParams.set(name, map.getAttribute(name));
206
- window.history.replaceState(
207
- {},
208
- "",
209
- `${window.location.pathname}?${urlParams}`,
210
- );
211
- generateCodeText();
212
- }
213
66
  const attrs = [
214
- "apikey",
215
- "baselayer",
216
- "center",
217
- "geolocation",
218
- "mapsurl",
219
- "mots",
220
- "notification",
221
- "notificationat",
222
- "notificationurl",
223
- "notificationbeforelayerid",
67
+ // "apikey",
68
+ // "baselayer",
69
+ // "center",
70
+ // "geolocation",
71
+ // "mapsurl",
72
+ // "mots",
73
+ // "notification",
74
+ // "notificationat",
75
+ // "notificationurl",
76
+ // "notificationbeforelayerid",
224
77
  "realtime",
225
- "realtimeUrl",
78
+ // "realtimeUrl",
226
79
  "search",
227
- "tenant",
228
- "zoom",
229
- "permalink",
80
+ // "tenant",
81
+ // "zoom",
82
+ // "permalink",
230
83
  ];
231
84
 
232
- function generateCodeText() {
233
- const codeElt = document.querySelector("#code");
234
- let codeText = "";
235
- codeText = `&lt;script\n\ttype="module"\n\tsrc="https://www.unpkg.com/@geops/rvf-mobility-web-component"&gt;
236
- &lt;/script&gt;
237
- &lt;geops-mobility style="height:600px;width:100%;" `;
238
-
239
- attrs.forEach((key) => {
240
- if (key == "apikey") {
241
- // codeText += `\n\tapikey="YOUR_GEOPS_API_KEY"`;
242
- } else if (map.getAttribute(key) !== null) {
243
- codeText += `\n\t${[key, '"' + map.getAttribute(key) + '"'].join("=")}`;
244
- } else if (key == "center") {
245
- // codeText += `\n\tcenter="831634,5933959"`;
246
- } else if (key == "zoom") {
247
- // codeText += `\n\tzoom="13"`;
248
- } else if (key == "baselayer") {
249
- // codeText += `\n\tbaselayer="travic_v2"`;
250
- }
251
- });
252
-
253
- code.innerHTML = codeText + `&gt;\n&lt;/geops-mobility&gt;`;
254
- }
255
-
256
- // Initialize value of inputs fields
257
- function initInputs() {
258
- attrs.forEach((key) => {
259
- const input = document.querySelector(`input[name=${key}]`);
260
- if (input) {
261
- input.value = map.getAttribute(key) || "";
262
- }
263
- });
264
- const inputs = document.querySelectorAll("input");
265
- inputs.forEach((input) => {
266
- input.addEventListener("change", () => {
267
- generateCodeText();
268
- });
269
- });
270
- }
271
-
272
- initInputs();
273
- generateCodeText();
85
+ const booleanAttrs = [
86
+ "geolocation",
87
+ "notification",
88
+ "realtime",
89
+ "search",
90
+ "permalink",
91
+ ];
92
+
93
+ const events = [
94
+ "singleclick",
95
+ // "mwc:attribute",
96
+ ];
97
+
98
+ document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs);
99
+ document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
100
+ document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
101
+ wc.addEventListener('mwc:attribute', (event) => {
102
+ document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
103
+ });
104
+ applyPermalinkParameters(wc);
274
105
  </script>
275
106
  </body>
276
107
  </html>