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

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.
 
+### [0.1.44](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.43...v0.1.44) (2025-07-28)
+
+
+### Bug Fixes
+
+* display runs using url parameter ([07c9691](https://github.com/geops/rvf-mobility-web-component/commit/07c96913e3550fc7056213648806d4edc570dda9))
+* fix linethrough color ([8e0e2e5](https://github.com/geops/rvf-mobility-web-component/commit/8e0e2e5b29cdb2125b5158b74bf14830bd4be455))
+* 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))
+* use the new wfs for stations ([521c3dc](https://github.com/geops/rvf-mobility-web-component/commit/521c3dcb1fd161c64eead2bcaa1bfe4b41eb0827))
+
+### [0.1.43](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.42...v0.1.43) (2025-04-14)
+
+
+### Bug Fixes
+
+* use POST request ([5a8a5a0](https://github.com/geops/rvf-mobility-web-component/commit/5a8a5a0056f21a61a68b1ed62c9ae540820251cd))
+* use prod url for lines ([feecba9](https://github.com/geops/rvf-mobility-web-component/commit/feecba92159ebf6743a4cf1bda685792e91bef80))
+
 ### [0.1.42](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.41...v0.1.42) (2025-04-08)
 
 

package/README.md

@@ -1,10 +1,38 @@
-# mobility-web-component
+# rvf-mobility-web-component
+
+This project is a fork of the @geops/mobility-web-component project for RVF.
+
+RVF uses only the `geops-mobility` web component not the `geops-mobility-search` web component.
+
+RVF uses the npm package `@geops/rvf-mobility-web-component`, no iframe is used to display the map.
+
+Design is done by bemerkt.de company, we received 2 Sketch files link to implment the desisgn.
+
+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.
+
+Most components in RVF are mostly very generic and could be migrate to the main mobility-web-component repository in the future.
+
+## Links
+
+- [Vercel app](https://rvf-mobility-web-component-geops.vercel.app/)
+  [NPM package](https://www.npmjs.com/package/@geops/rvf-mobility-web-component)
+- [Sketch file design system](https://www.sketch.com/s/71e4d120-f65f-4451-80c8-0a7e60e22265/p/22207D12-0F28-49D1-BCA4-1EDEF8B8BFE9/canvas)
+- [Sketch file design website](https://www.sketch.com/s/25c65997-d5d5-426f-b86c-a68c2de03524)
+- [VAG colors](https://www.vag-freiburg.de/fahrplan/linien-fahrplaene)
+- [Client test website](https://relaunch.rvf.de/geops-test)
+- [Netzplan on client production website](https://www.rvf.de/fahrtinfo/netzplan)
+- [Tarifzone on client production website](https://www.rvf.de/fahrtinfo/ticket-waehlen#c4656)
+- [Carsharing on client production website](https://www.rvf.de/fahrtinfo/rundum-mobil/carsharing)
+- [Bikesharing on client production website](https://www.rvf.de/fahrtinfo/rundum-mobil/frelo-fahrradverleihsystem)
+
+## General
 
 This project contains a set of web components allowing to use easily the [geOps APIs](https://developer.geops.io/):
 
 - [`<geops-mobility>`](#geops-mobility-web-component): a web component used to display a map using different [geOps APIs](https://developer.geops.io/).
 - [`<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).
 
+
 ## `<geops-mobility>` web component
 
 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.
 
 ### Demo
 
-You can see the web component in action using the [demo app](https://mobility-web-component.geops.io/).
+You can see the web component in action using the [demo app](https://rvf-mobility-web-component-geops.vercel.app/).
 
 ### Usage Example
 
 ```html
 <html>
   <body>
-    <script type="module" src="https://www.unpkg.com/@geops/mobility-web-component)"></script>
+    <script type="module" src="https://www.unpkg.com/@geops/rvf-mobility-web-component)"></script>
     <geops-mobility apikey="YOUR_GEOPS_API_KEY" style="display: block;width: 400px;height: 800px;"></geops-mobility>
   </body>
 </html>

package/docutils.js

@@ -139,7 +139,7 @@ function generateCodeText(
 
   attrs.forEach((key) => {
     const attributeValue = wc.getAttribute(key);
-    const inputValue = document.querySelector(`[name=${key}]`).value;
+    const inputValue = document.querySelector(`[name=${key}]`)?.value;
     if (attributeValue !== null && attributeValue === inputValue) {
       codeText += `\n\t${[key, '"' + wc.getAttribute(key) + '"'].join("=")}`;
     }

package/iframe.html

@@ -7,7 +7,6 @@
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" type="text/css" href="./output.css" />
-    <script type="module" src="./bundle.js"></script>
     <style>
       iframe {
         width: 100vw;
@@ -18,17 +17,228 @@
   <body>
     <iframe
       id="iframe"
-      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"
+      src="/?permalink=true&notification=false&realtime=false&layertree=false&share=false&print=false&geolocation=false&toolbar=false&fullscreen=true&layers=haltestellen%2Ctarifzonen%2Cliniennetz"
       frameborder="0"
     ></iframe>
+
+    <script type="module">
+      const testNotification = {
+        type: "FeatureCollection",
+        properties: {
+          id: 373496,
+          affected_time_intervals: [
+            {
+              start: "2025-07-22T00:53:00Z",
+              end: "2026-01-31T10:53:00Z",
+              time_of_day_start: null,
+              time_of_day_end: null,
+            },
+          ],
+          publications: [
+            {
+              visible_from: "2025-07-22T00:53:00Z",
+              visible_until: "2026-01-31T10:53:00Z",
+              channel: "DEFAULT",
+              index: 0,
+            },
+          ],
+          links: [],
+          images: [],
+          sso_config: "rvf",
+          title: "Test Olivier Baustellen Icon",
+          long_description: "<p></p><p></p>",
+          category: "DISRUPTION",
+          start_stop: null,
+          end_stop: null,
+          size: "M",
+          default_language: "de",
+          title_de: "",
+          title_fr: "",
+          title_it: "",
+          title_en: "",
+          summary_de: "",
+          summary_fr: "",
+          summary_it: "",
+          summary_en: "",
+          reason_de: "",
+          reason_fr: "",
+          reason_it: "",
+          reason_en: "",
+          description_de: "",
+          description_fr: "",
+          description_it: "",
+          description_en: "",
+          consequence_de: "",
+          consequence_fr: "",
+          consequence_it: "",
+          consequence_en: "",
+          duration_text_de: "",
+          duration_text_fr: "",
+          duration_text_it: "",
+          duration_text_en: "",
+          recommendation_de: "",
+          recommendation_fr: "",
+          recommendation_it: "",
+          recommendation_en: "",
+          reasons: [
+            {
+              name: "Ebbe",
+              category_name: "Umwelteinflüsse",
+            },
+          ],
+        },
+        features: [
+          {
+            type: "Feature",
+            geometry: {
+              type: "GeometryCollection",
+              geometries: [
+                {
+                  type: "MultiLineString",
+                  coordinates: [
+                    [
+                      [7.8407629, 47.9976417],
+                      [7.8392181, 47.9956185],
+                      [7.8388936, 47.9952356],
+                      [7.8386947, 47.9950218],
+                      [7.8384108, 47.9947526],
+                      [7.8380985, 47.994413],
+                      [7.8368156, 47.9927414],
+                      [7.8358579, 47.9915824],
+                      [7.8354873, 47.9912014],
+                      [7.8351931, 47.9909404],
+                      [7.8347127, 47.9905598],
+                      [7.8338045, 47.9898814],
+                      [7.8335515, 47.9896813],
+                      [7.8333915, 47.9895502],
+                      [7.8330709, 47.9892549],
+                      [7.8328081, 47.9889703],
+                      [7.8326371, 47.9887606],
+                      [7.8312279, 47.9869586],
+                      [7.8307153, 47.9862716],
+                      [7.8305208, 47.9859568],
+                      [7.8303354, 47.9856163],
+                      [7.83014, 47.9850787],
+                      [7.8300422, 47.9846474],
+                      [7.8300134, 47.9844463],
+                      [7.8299849, 47.9840377],
+                      [7.8299854, 47.9838421],
+                      [7.8299991, 47.98365],
+                      [7.8300606, 47.9832408],
+                      [7.8301049, 47.9830608],
+                      [7.8301581, 47.9828987],
+                      [7.8303579, 47.9823999],
+                      [7.8304637, 47.9821919],
+                      [7.8305602, 47.9820268],
+                      [7.8307651, 47.9817381],
+                      [7.8310239, 47.9814693],
+                      [7.8312993, 47.9812478],
+                      [7.8314977, 47.9811074],
+                      [7.8316265, 47.981028],
+                      [7.8319596, 47.9808514],
+                      [7.8323491, 47.9806874],
+                      [7.8326678, 47.9805751],
+                      [7.8395337, 47.9783842],
+                      [7.8400986, 47.9782221],
+                      [7.8404738, 47.9781315],
+                      [7.8407542, 47.9780815],
+                      [7.8415426, 47.9779725],
+                      [7.841862, 47.9779416],
+                      [7.8422848, 47.9779229],
+                      [7.8429746, 47.9779376],
+                      [7.8437005, 47.9780116],
+                      [7.8442791, 47.9781033],
+                      [7.8445816, 47.9781669],
+                      [7.8448517, 47.9782296],
+                      [7.8451824, 47.9783267],
+                      [7.8457854, 47.9785354],
+                      [7.8462674, 47.9787433],
+                      [7.8465396, 47.9788815],
+                      [7.8467435, 47.9789946],
+                      [7.848202, 47.9798678],
+                      [7.8488439, 47.9802292],
+                      [7.8488183, 47.9802385],
+                      [7.8491591, 47.9804256],
+                      [7.8496107, 47.9806426],
+                      [7.8501096, 47.9808449],
+                      [7.8516554, 47.9813942],
+                      [7.8549883, 47.9825315],
+                    ],
+                    [
+                      [7.8549883, 47.9825315],
+                      [7.8585318, 47.9837596],
+                      [7.8595929, 47.9841761],
+                      [7.8602711, 47.9844194],
+                      [7.8609517, 47.9846273],
+                      [7.8611318, 47.9846707],
+                      [7.8616726, 47.9847623],
+                      [7.8618228, 47.9847777],
+                      [7.8627388, 47.9848238],
+                      [7.8657203, 47.9849385],
+                      [7.8672775, 47.9850355],
+                      [7.8675543, 47.9850712],
+                      [7.868149, 47.9851731],
+                      [7.8704429, 47.9856081],
+                      [7.8715154, 47.9857248],
+                      [7.8720517, 47.9857397],
+                      [7.8725915, 47.98572],
+                      [7.8730456, 47.9856808],
+                      [7.873747, 47.9855902],
+                      [7.8834769, 47.9841235],
+                      [7.8853988, 47.9838487],
+                      [7.8862027, 47.9837171],
+                      [7.8873554, 47.9835097],
+                      [7.8885522, 47.9832639],
+                      [7.895159545, 47.981790004],
+                    ],
+                  ],
+                },
+              ],
+            },
+            properties: {
+              graph: "osm",
+              is_icon_ref: true,
+              stops: [
+                {
+                  uid: "3a888fcdb9a5371e",
+                  name: "Freiburg(Breisgau) Hbf",
+                  external_id: "8000107",
+                  external_code: "RF",
+                },
+                {
+                  uid: "a33509cdf7463912",
+                  name: "Freiburg-Littenweiler",
+                  external_id: "8002068",
+                  external_code: "RFLT",
+                },
+              ],
+              affected_products: [
+                {
+                  name: "S1",
+                  operator: "",
+                },
+              ],
+              disruption_type: "DISRUPTION",
+              periods: [],
+              severity: "severe",
+              severity_group: "high",
+              condition: "unknown",
+              condition_group: "information",
+            },
+          },
+        ],
+      };
+
+      const iframe = document.getElementById("iframe");
+      iframe.addEventListener("load", function () {
+        setTimeout(() => {
+          console.log("Sending notification to iframe:", testNotification);
+          this.contentWindow.postMessage(
+            { notification: testNotification },
+            "*",
+          );
+        }, 0);
+      });
+    </script>
   </body>
-  <script type="module">
-    import testNotification from "./testNotification.json" assert { type: "json" };
-    const iframe = document.getElementById("iframe");
-    iframe.addEventListener("load", function () {
-      setTimeout(() => {
-        this.contentWindow.postMessage({ notification: testNotification }, "*");
-      }, 500);
-    });
-  </script>
 </html>

package/index.html

@@ -41,8 +41,7 @@
       <pre id="code" class="bg-slate-800 text-slate-200 p-4 rounded overflow-auto"></pre>
 
       <geops-mobility
-        class="h-96 block resize overflow-hidden w-full border rounded-[16px]"
-      ></geops-mobility>
+        class="h-96 block resize overflow-hidden w-full border rounded-[16px]"></geops-mobility>
 
       <br />
       <h2 class="text-xl font-bold">Attributes</h2>
@@ -75,7 +74,7 @@
           "layertree",
           // "mapsurl",
           // "mots",
-          // "notification",
+          "notification",
           // "notificationat",
           // "notificationurl",
           // "notificationbeforelayerid",
@@ -90,6 +89,9 @@
           "toolbar",
           "maxextent",
           "embed",
+          "debug",
+          "fullscreen",
+          "runs",
         ];
 
       const booleanAttrs = [
@@ -104,8 +106,12 @@
         "toolbar",
         "search",
         "embed",
+        "debug",
+        "fullscreen",
+        "runs",
       ];
       const booleanTrueByDefault = [ "details", "print", "share", "layertree", "geolocation", "toolbar", "realtime"];
+      const reloadAttrs = [ "fullscreen" ]
 
       const events = [
         "singleclick",
@@ -128,16 +134,21 @@
         layers: "A comma separated list of layers: echtzeit,haltestellen,verkaufsstellen,liniennetz,tarifzonen,fahrradfrelo,fahrradandere,cargobikefrelo,cargobikeandere,grueneflotte,naturenergie,autoandere,e-roller,mitfahrpunkt,pois",
         details: "Show shared mobility details in the sidebar when we click on an shared mobility feature.", 
         realtime: "Show/hide the realtime data in the map. Default to true.",
-        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."
+        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.",
+        debug: "Displays debug information for vehicles when true, use only for debugging. Default to false.",
+        fullscreen: "Load the component in fullscreen mode. Default to false.",
+        runs: "Shows the number of trips on a line in the sidebar, use only for debugging. Default to false.",
+        notification: "Show/hide the notifications (coming from geOps MOCO API) layer on the map. Default to false.",
       };
 
-      document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs, booleanTrueByDefault, descriptionByAttr);
+      document.querySelector('#attributes').innerHTML = generateAttributesTable(wc, attrs, booleanAttrs, booleanTrueByDefault, descriptionByAttr, reloadAttrs);
       document.querySelector('#events').innerHTML = generateEventsTable(wc, events);
       document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
       wc.addEventListener('mwc:attribute', (event) => {
         document.querySelector('#code').innerHTML = generateCodeText(wc, attrs, pkgSrc);
       });
       wc.addEventListener('mwc:permalink', (event) => {
+        console.log("Permalink event received", event.data);
         window.parent?.postMessage({type:"mwc:permalink", data: event.data}, '*');
       });
       applyPermalinkParameters(wc);