feat: add issuer specific fip validity to operator pages (#684)

For each FIP issues a file called `validity.yaml` can be added to the
corresponding operator directory, including information which how many
coupons for which operator are issued. For example, let's have a look
the at `validity.yaml` for FIP issuer DB:

```yml
_anchors:
  coupon-4fields: &coupon-4fields
    status: valid
    text:
      de: "1 Freifahrtschein mit jeweils 4 Feldern pro Jahr. Jedes Feld ist zwei Tage gültig."
      en: "1 coupon with 4 fields each per year. Each field is valid for two days."
      fr: "1 coupon avec 4 champs chacun par an. Chaque champ est valable deux jours."
  coupon-not-available: &coupon-not-available
    status: invalid
    text:
      de: "Nicht verfügbar"
      en: "Not available"
      fr: "Non disponible"
  reduced-50: &reduced-50
    status: valid
    text:
      de: "50 % Rabatt"
      en: "50 % discount"
      fr: "50 % de réduction"
pkp:
  fip-coupon: *coupon-4fields
  fip-coupon-relatives: *coupon-4fields
  fip-reduced-ticket: *reduced-50
zssk:
  fip-coupon: *coupon-4fields
  fip-coupon-relatives: *coupon-not-available
  fip-reduced-ticket: *reduced-50
```

Resolves #446

TODO:

- [x] Add to archetype
- [x] Transform all shortcodes
- [x] Add Params from RDG
- [x] Add Params from Discord
(https://discord.com/channels/1250522473188032512/1451295200743002163/1451295200743002163)
- [x] Obtain information from:
https://discord.com/channels/1250522473188032512/1433782574806728804/1470447474345775198
- [x] Replace `__info-button` with internal button
- [x] Handle Euskotren FIP Ticket
- [x] Stena line two fields
- [x] Remove own operator from table
- [x] Unify DB text
- [x] Merge relatives and active employee coupon section in one table
and separate retirees

---------

Co-authored-by: Robert Schuster <77234379+therobrob@users.noreply.github.com>
Co-authored-by: Robert Schuster <robert.r.schuster@deutschebahn.com>

Author: MoritzWeber0

.pre-commit-config.yaml

@@ -23,6 +23,7 @@ repos:
       - id: check-xml
         exclude: "^layouts/_default/rss.xml$"
       - id: check-yaml
+        exclude: "validity.yaml$"
       - id: debug-statements
       - id: destroyed-symlinks
       - id: end-of-file-fixer

AGENTS.md

@@ -18,20 +18,20 @@
 
 ### Translations
 
-| Deutsch                      | Englisch                  | Französisch                         |
-| ---------------------------- | ------------------------- | ----------------------------------- |
-| FIP Freifahrtschein          | FIP Coupon                | Coupon FIP                          |
-| FIP Globalpreis              | FIP Global Fare           | Tarif Global FIP                    |
-| FIP 50 Ticket                | FIP 50 Ticket             | Billet FIP 50                       |
-| FIP Ausweis                  | FIP Card                  | Carte FIP                           |
-| <operator> Ticketschalter    | <operator> Ticket Office  | Guichet <operator>                  |
-| <operator> Website           | <operator> Website        | Site Web <operator>                 |
-| <operator> Telefon           | <operator> Telephone      | Téléphone <operator>                |
-| <operator> Fahrkartenautomat | <operator> Ticket Machine | Distributeurs de billets <operator> |
-| Grenzpunkt                   | Border Point              | Point frontière                     |
-| FIP Rabatt / FIP Ermäßigung  | FIP Discount              | Remise FIP / Réduction FIP          |
-| FIP Freifahrt Angehörige     | FIP Coupon for relatives  | Coupon FIP pour les ayants droit    |
-| SBB                          | SBB                       | CFF                                 |
+| Deutsch                            | Englisch                  | Französisch                         |
+| ---------------------------------- | ------------------------- | ----------------------------------- |
+| FIP Freifahrtschein                | FIP Coupon                | Coupon FIP                          |
+| FIP Globalpreis                    | FIP Global Fare           | Tarif Global FIP                    |
+| FIP 50 Ticket                      | FIP 50 Ticket             | Billet FIP 50                       |
+| FIP Ausweis                        | FIP Card                  | Carte FIP                           |
+| <operator> Ticketschalter          | <operator> Ticket Office  | Guichet <operator>                  |
+| <operator> Website                 | <operator> Website        | Site Web <operator>                 |
+| <operator> Telefon                 | <operator> Telephone      | Téléphone <operator>                |
+| <operator> Fahrkartenautomat       | <operator> Ticket Machine | Distributeurs de billets <operator> |
+| Grenzpunkt                         | Border Point              | Point frontière                     |
+| FIP Rabatt / FIP Ermäßigung        | FIP Discount              | Remise FIP / Réduction FIP          |
+| FIP Freifahrtschein für Angehörige | FIP Coupon for relatives  | Coupon FIP pour les ayants droit    |
+| SBB                                | SBB                       | CFF                                 |
 
 #### Headlines
 

archetypes/operator/index.de.md

@@ -33,10 +33,17 @@ operator: "{{ .File.ContentBaseName }}"
   Die Ticketkategorien können je nach Betreiber abweichen.
 -->
 
-FIP Freifahrtschein: <✅/⛔> \
-FIP Freifahrt Angehörige: <✅/⛔> \
-FIP 50 Tickets: <✅/⛔> \
-FIP Globalpreis: <✅/⛔>
+<!--
+  Verwende die folgenden Shortcodes, um die FIP-Gültigkeit anzuzeigen. Die folgenden Parameter können übergeben werden:
+  - `type`: fip-coupon, fip-reduced-ticket, fip-global-fare, additional
+  - `status`: valid, invalid, unknown
+  - `text`: Optionaler benutzerdefinierter Text zur Anzeige
+  - `disable_dialog`: true/false (Standard: false) - Auf true setzen, um den Dialog zu deaktivieren
+-->
+
+{{< fip-validity type="fip-coupon" status="valid" >}}
+{{< fip-validity type="fip-reduced-ticket" status="valid" >}}
+{{< fip-validity type="fip-global-fare" status="valid" disable_dialog="true" >}}
 
 <!--
   Wo gelten FIP 50 Tickets/FIP Freifahrtscheine und gibt es Einschränkungen? Welches Ticket wird bei Einreise benötigt (z. B. durchgehendes FIP 50 Ticket oder FIP Freifahrtscheine beider Länder)

archetypes/operator/index.en.md

@@ -33,10 +33,17 @@ operator: "{{ .File.ContentBaseName }}"
   The ticket categories may vary depending on the operator.
 -->
 
-FIP Coupon: <✅/⛔> \
-FIP Coupon for relatives: <✅/⛔> \
-FIP 50 Tickets: <✅/⛔> \
-FIP Global Fare: <✅/⛔>
+<!--
+  Use the following shortcodes to display FIP validity. The following parameters can be passed:
+  - `type`: fip-coupon, fip-reduced-ticket, fip-global-fare, additional
+  - `status`: valid, invalid, unknown
+  - `text`: Optional custom text to display
+  - `disable_dialog`: true/false (default: false) - Set to true to disable the dialog
+-->
+
+{{< fip-validity type="fip-coupon" status="valid" >}}
+{{< fip-validity type="fip-reduced-ticket" status="valid" >}}
+{{< fip-validity type="fip-global-fare" status="valid" disable_dialog="true" >}}
 
 <!--
   Where are FIP 50 Tickets/FIP Coupons valid and are there any restrictions? Which ticket is required for entry (e.g., continuous FIP 50 ticket or FIP Coupons of both countries)?

archetypes/operator/index.fr.md

@@ -33,10 +33,17 @@ operator: "{{ .File.ContentBaseName }}"
   Les catégories de billets peuvent varier selon l’opérateur.
 -->
 
-Coupon FIP : <✅/⛔> \
-Coupon FIP pour les ayants droit : <✅/⛔> \
-Billets FIP 50 : <✅/⛔> \
-Tarif Global FIP : <✅/⛔>
+<!--
+  Utilisez les shortcodes suivants pour afficher la validité FIP. Les paramètres suivants peuvent être transmis :
+  - `type` : fip-coupon, fip-reduced-ticket, fip-global-fare, additional
+  - `status` : valid, invalid, unknown
+  - `text` : Texte personnalisé optionnel à afficher
+  - `disable_dialog` : true/false (par défaut : false) - Définir sur true pour désactiver la boîte de dialogue
+-->
+
+{{< fip-validity type="fip-coupon" status="valid" >}}
+{{< fip-validity type="fip-reduced-ticket" status="valid" >}}
+{{< fip-validity type="fip-global-fare" status="valid" disable_dialog="true" >}}
 
 <!--
   Où les Billets FIP 50 / Coupons FIP sont-ils valables et quelles sont les restrictions ? Quel billet est nécessaire pour le voyage (par ex. Billet FIP 50 continu ou Coupons FIP des deux pays) ?

assets/js/dropdown.js

@@ -30,4 +30,20 @@ document.addEventListener("DOMContentLoaded", function () {
   registerEventListeners("language-switcher");
   registerEventListeners("navbar-country-selection");
   registerEventListeners("navbar-operator-selection");
+  [
+    "fip-validity-issuer",
+    "fip-validity-dialog-fip-coupon",
+    "fip-validity-dialog-fip-reduced-ticket",
+  ].forEach((id) => {
+    if (document.querySelector(`#${id}-button`)) {
+      registerEventListeners(id);
+    }
+  });
 });
+
+export const closeDropdown = (id) => {
+  const button = document.querySelector(`#${id}-button`);
+  const dropdown = document.querySelector(`#${id}-dropdown`);
+  button.setAttribute("aria-expanded", "false");
+  dropdown.setAttribute("aria-hidden", "true");
+};

assets/js/fipValidityComparison.js

@@ -0,0 +1,86 @@
+import { closeDropdown } from "./dropdown.js";
+
+const ISSUER_KEY = "fipguide-issuer";
+
+document.addEventListener("DOMContentLoaded", function () {
+  const restoreFns = [];
+
+  document
+    .querySelectorAll("[data-fip-validity-button]")
+    .forEach(function (button) {
+      const dropdownId = button.id.replace(/-button$/, "");
+      const scope = button.closest("dialog") || document;
+      const label = button.querySelector("[data-fip-validity-label]");
+      const logoSlot = button.querySelector("[data-fip-validity-logo]");
+      const options = scope.querySelectorAll("[data-fip-option]");
+      const wrappers = scope.querySelectorAll("[data-fip-issuer]");
+      const selectFirstMessages = scope.querySelectorAll(
+        "[data-fip-select-first]",
+      );
+
+      function showIssuer(slug) {
+        wrappers.forEach(function (wrapper) {
+          if (wrapper.dataset.fipIssuer === slug) {
+            wrapper.removeAttribute("hidden");
+          } else {
+            wrapper.setAttribute("hidden", "");
+          }
+        });
+        selectFirstMessages.forEach(function (msg) {
+          msg.setAttribute("hidden", "");
+        });
+      }
+
+      function selectOption(slug, text, { sync = true } = {}) {
+        options.forEach(function (option) {
+          option.setAttribute(
+            "aria-selected",
+            option.dataset.fipOption === slug ? "true" : "false",
+          );
+        });
+        label.textContent = text;
+        const operatorLogo = scope
+          .querySelector(`[data-fip-option="${slug}"]`)
+          ?.querySelector("img");
+        logoSlot.innerHTML = "";
+        if (operatorLogo) {
+          logoSlot.appendChild(operatorLogo.cloneNode());
+        }
+        showIssuer(slug);
+        closeDropdown(dropdownId);
+        localStorage.setItem(ISSUER_KEY, slug);
+        if (sync) {
+          restoreFns.forEach(function (fn) {
+            if (fn !== restore) fn();
+          });
+        }
+      }
+
+      options.forEach(function (option) {
+        option.addEventListener("click", function () {
+          selectOption(option.dataset.fipOption, option.textContent.trim());
+        });
+      });
+
+      function restore() {
+        const savedSlug = localStorage.getItem(ISSUER_KEY);
+        if (savedSlug) {
+          const savedOption = scope.querySelector(
+            `[data-fip-option="${savedSlug}"]`,
+          );
+          if (savedOption) {
+            selectOption(savedSlug, savedOption.textContent.trim(), {
+              sync: false,
+            });
+            return;
+          }
+        }
+      }
+
+      restoreFns.push(restore);
+    });
+
+  restoreFns.forEach((fn) => {
+    fn();
+  });
+});

assets/js/main.js

@@ -10,3 +10,4 @@ import "./search.js";
 import "./interactiveMap.js";
 import "./expander.js";
 import "./dialog.js";
+import "./fipValidityComparison.js";

assets/sass/_variables.scss

@@ -28,6 +28,18 @@ $tag-colors-dark: (
   info: #d1d1d1,
 );
 
+$fip-validity-colors: (
+  valid: map-get($tag-colors, success),
+  invalid: map-get($tag-colors, error),
+  unknown: map-get($tag-colors, info),
+);
+
+$fip-validity-colors-dark: (
+  valid: map-get($tag-colors-dark, success),
+  invalid: map-get($tag-colors-dark, error),
+  unknown: map-get($tag-colors-dark, info),
+);
+
 $highlight-colors: (
   tip: #116278,
   inofficial: #42454a,
@@ -60,6 +72,10 @@ html {
   --color-success: #096640;
   --color-error: #ad1731;
 
+  @each $name, $color in $fip-validity-colors {
+    --fip-validity-#{$name}: #{$color};
+  }
+
   @each $name, $color in $tag-colors {
     --tag-#{$name}-bg: #{mix(white, $color, 90%)};
     --tag-#{$name}-color: #{$color};
@@ -78,6 +94,7 @@ html {
   --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
   --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
   --border: 0.1rem solid transparent;
+  --border-visible: 0.1rem solid #d0d0d0;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
   --outline-focus-indicator: #257fa8;
 
@@ -101,6 +118,10 @@ html[data-theme="dark"] {
     --color-success: #2ea44f;
     --color-error: #f85149;
 
+    @each $name, $color in $fip-validity-colors-dark {
+      --fip-validity-#{$name}: #{$color};
+    }
+
     @each $name, $color in $tag-colors-dark {
       --tag-#{$name}-bg: #{mix(black, $color, 65%)};
       --tag-#{$name}-color: #{$color};
@@ -116,6 +137,7 @@ html[data-theme="dark"] {
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
     --pagefind-ui-background: var(--bg-default);
     --border: 0.1rem solid #3d444d;
+    --border-visible: 0.1rem solid #3d444d;
     --outline-focus-indicator: #2e9acb;
   }
 }

assets/sass/button.scss

@@ -32,4 +32,9 @@
   &__internal {
     border: none;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 }