asdasd

modules/fx-rates/assets/fx-rates-currencies.js

@@ -0,0 +1,158 @@
+(() => {
+  const root = document.getElementById('fx-rates-currencies');
+  if (!root) {
+    return;
+  }
+
+  const page = JSON.parse(root.dataset.page || '{}');
+  const currencies = Array.isArray(page.currencies) ? page.currencies : [];
+  const selected = new Set(
+    (Array.isArray(page.preferred_currencies) ? page.preferred_currencies : [])
+      .map((code) => String(code || '').trim().toUpperCase())
+      .filter(Boolean)
+  );
+  let displayBase = String(page.display_base_currency || '').trim().toUpperCase();
+
+  const nodes = {
+    tokenList: root.querySelector('[data-fx-token-list]'),
+    searchInput: root.querySelector('[data-fx-search-input]'),
+    suggestions: root.querySelector('[data-fx-suggestions]'),
+    displayBaseSelect: root.querySelector('[data-fx-display-base-select]'),
+    displayBaseHidden: root.querySelector('[data-fx-display-base-hidden]'),
+    hiddenPreferred: root.querySelector('[data-fx-hidden-preferred]'),
+  };
+
+  const escapeHtml = (value) => String(value || '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+
+  const currencyByCode = new Map(
+    currencies.map((currency) => [String(currency.code || '').toUpperCase(), currency])
+  );
+
+  const sortedSelectedCodes = () => Array.from(selected).sort((left, right) => left.localeCompare(right));
+
+  const ensureDisplayBase = () => {
+    const available = sortedSelectedCodes();
+    if (available.length === 0) {
+      displayBase = '';
+      return;
+    }
+    if (!displayBase || !selected.has(displayBase)) {
+      displayBase = available[0];
+    }
+  };
+
+  const renderHiddenInputs = () => {
+    if (!nodes.hiddenPreferred) {
+      return;
+    }
+    nodes.hiddenPreferred.innerHTML = sortedSelectedCodes()
+      .map((code) => `<input type="hidden" name="preferred_currencies[]" value="${escapeHtml(code)}">`)
+      .join('');
+    if (nodes.displayBaseHidden) {
+      nodes.displayBaseHidden.value = displayBase;
+    }
+  };
+
+  const renderDisplayBase = () => {
+    if (!nodes.displayBaseSelect) {
+      return;
+    }
+    ensureDisplayBase();
+    const available = sortedSelectedCodes();
+    nodes.displayBaseSelect.innerHTML = available.length
+      ? available.map((code) => `<option value="${escapeHtml(code)}" ${code === displayBase ? 'selected' : ''}>${escapeHtml(code)}</option>`).join('')
+      : '<option value="">Keine Waehrungen ausgewaehlt</option>';
+    nodes.displayBaseSelect.disabled = available.length === 0;
+  };
+
+  const removeCode = (code) => {
+    selected.delete(code);
+    renderAll();
+  };
+
+  const renderTokens = () => {
+    if (!nodes.tokenList) {
+      return;
+    }
+    const selectedCodes = sortedSelectedCodes();
+    if (selectedCodes.length === 0) {
+      nodes.tokenList.innerHTML = '<div class="fx-text">Noch keine bevorzugten Waehrungen ausgewaehlt.</div>';
+      return;
+    }
+    nodes.tokenList.innerHTML = selectedCodes.map((code) => {
+      const currency = currencyByCode.get(code) || { code, name: code };
+      return `
+        <button type="button" class="fx-token" data-remove-code="${escapeHtml(code)}" title="${escapeHtml(code)} entfernen">
+          <span>${escapeHtml(`${code} (${currency.name || code})`)}</span>
+          <span class="fx-token-close">x</span>
+        </button>
+      `;
+    }).join('');
+
+    nodes.tokenList.querySelectorAll('[data-remove-code]').forEach((button) => {
+      button.addEventListener('click', () => {
+        removeCode(String(button.getAttribute('data-remove-code') || '').toUpperCase());
+      });
+    });
+  };
+
+  const renderSuggestions = () => {
+    if (!nodes.suggestions || !nodes.searchInput) {
+      return;
+    }
+    const needle = String(nodes.searchInput.value || '').trim().toLowerCase();
+    if (!needle) {
+      nodes.suggestions.innerHTML = '';
+      return;
+    }
+    const matches = currencies
+      .filter((currency) => !selected.has(String(currency.code || '').toUpperCase()))
+      .filter((currency) => {
+        const code = String(currency.code || '').toLowerCase();
+        const name = String(currency.name || '').toLowerCase();
+        return code.includes(needle) || name.includes(needle);
+      })
+      .slice(0, 12);
+
+    nodes.suggestions.innerHTML = matches.map((currency) => `
+      <button type="button" class="fx-suggestion" data-add-code="${escapeHtml(String(currency.code || '').toUpperCase())}">
+        <strong>${escapeHtml(String(currency.code || '').toUpperCase())}</strong>
+        <span>${escapeHtml(String(currency.name || ''))}</span>
+      </button>
+    `).join('');
+
+    nodes.suggestions.querySelectorAll('[data-add-code]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const code = String(button.getAttribute('data-add-code') || '').toUpperCase();
+        if (code) {
+          selected.add(code);
+          if (nodes.searchInput) {
+            nodes.searchInput.value = '';
+          }
+          renderAll();
+        }
+      });
+    });
+  };
+
+  const renderAll = () => {
+    ensureDisplayBase();
+    renderTokens();
+    renderDisplayBase();
+    renderHiddenInputs();
+    renderSuggestions();
+  };
+
+  nodes.searchInput?.addEventListener('input', renderSuggestions);
+  nodes.displayBaseSelect?.addEventListener('change', () => {
+    displayBase = String(nodes.displayBaseSelect?.value || '').trim().toUpperCase();
+    renderHiddenInputs();
+  });
+
+  renderAll();
+})();