219 lines
8.0 KiB
JavaScript
219 lines
8.0 KiB
JavaScript
(() => {
|
|
const root = document.getElementById('fx-rates-app');
|
|
if (!root) {
|
|
return;
|
|
}
|
|
|
|
const page = JSON.parse(root.dataset.page || '{}');
|
|
const settings = page.settings || {};
|
|
const nodes = {
|
|
message: root.querySelector('[data-bind="message"]'),
|
|
lastFetch: root.querySelector('[data-bind="last-fetch"]'),
|
|
defaultBase: root.querySelector('[data-bind="default-base"]'),
|
|
displayBase: root.querySelector('[data-bind="display-base"]'),
|
|
ratesBody: root.querySelector('[data-bind="rates-body"]'),
|
|
fetchesBody: root.querySelector('[data-bind="fetches-body"]'),
|
|
convertResult: root.querySelector('[data-bind="convert-result"]'),
|
|
defaultBaseInput: root.querySelector('input[name="default_base_currency"]'),
|
|
displayBaseInput: root.querySelector('input[name="display_base_currency"]'),
|
|
preferredCurrenciesInput: root.querySelector('input[name="preferred_currencies"]'),
|
|
convertFrom: root.querySelector('select[name="convert_from"]'),
|
|
convertTo: root.querySelector('select[name="convert_to"]'),
|
|
convertAmount: root.querySelector('input[name="convert_amount"]'),
|
|
};
|
|
const apiBase = '/api/fx-rates/v1';
|
|
|
|
const setMessage = (text, type = '') => {
|
|
if (!nodes.message) {
|
|
return;
|
|
}
|
|
nodes.message.textContent = text || '';
|
|
nodes.message.className = `fx-message${type ? ` is-${type}` : ''}`;
|
|
};
|
|
|
|
const setLoading = (state) => {
|
|
root.querySelectorAll('button[data-action]').forEach((button) => {
|
|
button.disabled = state;
|
|
});
|
|
};
|
|
|
|
const parsePreferredCurrencies = () => String(nodes.preferredCurrenciesInput?.value || '')
|
|
.split(/[\s,;]+/)
|
|
.map((item) => item.trim().toUpperCase())
|
|
.filter(Boolean);
|
|
|
|
const renderSnapshot = (snapshot) => {
|
|
const rates = snapshot && snapshot.rates ? snapshot.rates : null;
|
|
const entries = rates ? Object.entries(rates) : [];
|
|
if (!nodes.ratesBody) {
|
|
return;
|
|
}
|
|
|
|
if (!entries.length) {
|
|
nodes.ratesBody.innerHTML = '<tr><td colspan="2">Noch keine Wechselkurse fuer die ausgewaehlten Waehrungen gespeichert.</td></tr>';
|
|
return;
|
|
}
|
|
|
|
nodes.ratesBody.innerHTML = entries.map(([code, rate]) => {
|
|
const formatted = typeof rate === 'number'
|
|
? rate.toLocaleString('de-DE', { maximumFractionDigits: 8 })
|
|
: 'n/a';
|
|
return `<tr><td>${code}</td><td>${formatted}</td></tr>`;
|
|
}).join('');
|
|
};
|
|
|
|
const renderFetches = (fetches) => {
|
|
if (!nodes.fetchesBody) {
|
|
return;
|
|
}
|
|
const entries = Array.isArray(fetches) ? fetches : [];
|
|
if (!entries.length) {
|
|
nodes.fetchesBody.innerHTML = '<tr><td colspan="3">Noch keine Abrufe vorhanden.</td></tr>';
|
|
return;
|
|
}
|
|
nodes.fetchesBody.innerHTML = entries.map((entry) => `
|
|
<tr>
|
|
<td>${entry?.fetched_at || ''}</td>
|
|
<td>${entry?.base_currency || ''}</td>
|
|
<td>${entry?.provider || ''}</td>
|
|
</tr>
|
|
`).join('');
|
|
};
|
|
|
|
const request = async (path, options = {}) => {
|
|
const response = await fetch(`${apiBase}${path}`, {
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
...(options.body ? { 'Content-Type': 'application/json' } : {}),
|
|
...(options.headers || {}),
|
|
},
|
|
...options,
|
|
});
|
|
const payload = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
throw new Error(payload?.context?.message || payload?.error || `HTTP ${response.status}`);
|
|
}
|
|
return payload.data;
|
|
};
|
|
|
|
const loadLatest = async () => {
|
|
const base = String(
|
|
nodes.displayBaseInput?.value || settings.display_base_currency || settings.default_base_currency || 'EUR'
|
|
).trim().toUpperCase();
|
|
const preferred = parsePreferredCurrencies();
|
|
const query = new URLSearchParams();
|
|
query.set('base', base);
|
|
if (preferred.length) {
|
|
query.set('symbols', preferred.join(','));
|
|
}
|
|
|
|
const data = await request(`/latest?${query.toString()}`);
|
|
renderSnapshot(data);
|
|
if (nodes.lastFetch) {
|
|
nodes.lastFetch.textContent = data?.fetched_at || 'noch keiner';
|
|
}
|
|
if (nodes.displayBase) {
|
|
nodes.displayBase.textContent = base;
|
|
}
|
|
return data;
|
|
};
|
|
|
|
const calculateConversion = async () => {
|
|
if (!nodes.convertFrom || !nodes.convertTo || !nodes.convertAmount || !nodes.convertResult) {
|
|
return;
|
|
}
|
|
|
|
const from = String(nodes.convertFrom.value || '').trim().toUpperCase();
|
|
const to = String(nodes.convertTo.value || '').trim().toUpperCase();
|
|
const amount = Number(nodes.convertAmount.value || '0');
|
|
|
|
if (!from || !to || !Number.isFinite(amount)) {
|
|
nodes.convertResult.textContent = 'Bitte Quellwaehrung, Zielwaehrung und Betrag angeben.';
|
|
return;
|
|
}
|
|
|
|
if (from === to) {
|
|
nodes.convertResult.textContent = `${amount.toLocaleString('de-DE', { maximumFractionDigits: 8 })} ${from} = ${amount.toLocaleString('de-DE', { maximumFractionDigits: 8 })} ${to}`;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const query = new URLSearchParams({ from, to });
|
|
const data = await request(`/rate?${query.toString()}`);
|
|
const rate = Number(data?.rate || 0);
|
|
if (!Number.isFinite(rate) || rate <= 0) {
|
|
throw new Error('Kein Kurs verfuegbar.');
|
|
}
|
|
const converted = amount * rate;
|
|
nodes.convertResult.textContent = `${amount.toLocaleString('de-DE', { maximumFractionDigits: 8 })} ${from} = ${converted.toLocaleString('de-DE', { maximumFractionDigits: 8 })} ${to} | Kurs ${rate.toLocaleString('de-DE', { maximumFractionDigits: 8 })}`;
|
|
} catch (error) {
|
|
nodes.convertResult.textContent = error.message || 'Umrechnung konnte nicht berechnet werden.';
|
|
}
|
|
};
|
|
|
|
root.querySelector('[data-action="refresh-rates"]')?.addEventListener('click', async () => {
|
|
try {
|
|
setLoading(true);
|
|
setMessage('Ich rufe jetzt die aktuellen Kurse ab.');
|
|
const payload = {
|
|
force: true,
|
|
base: String(nodes.defaultBaseInput?.value || settings.default_base_currency || 'EUR').trim().toUpperCase(),
|
|
currencies: parsePreferredCurrencies(),
|
|
};
|
|
const data = await request('/refresh', { method: 'POST', body: JSON.stringify(payload) });
|
|
setMessage(`Aktuelle Kurse gespeichert. ${data?.updated_count || 0} Werte aktualisiert.`, 'success');
|
|
await loadLatest();
|
|
const recentFetches = await request('/recent-fetches?limit=12');
|
|
renderFetches(recentFetches);
|
|
await calculateConversion();
|
|
} catch (error) {
|
|
setMessage(error.message || 'Kurse konnten nicht aktualisiert werden.', 'error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
|
|
root.querySelector('[data-action="save-settings"]')?.addEventListener('click', async () => {
|
|
try {
|
|
setLoading(true);
|
|
setMessage('Ich speichere jetzt die Waehrungs-Auswahl.');
|
|
const payload = {
|
|
default_base_currency: String(nodes.defaultBaseInput?.value || '').trim().toUpperCase(),
|
|
display_base_currency: String(nodes.displayBaseInput?.value || '').trim().toUpperCase(),
|
|
preferred_currencies: parsePreferredCurrencies(),
|
|
};
|
|
const data = await request('/settings', { method: 'PUT', body: JSON.stringify(payload) });
|
|
if (nodes.defaultBase) {
|
|
nodes.defaultBase.textContent = data?.default_base_currency || '';
|
|
}
|
|
if (nodes.displayBase) {
|
|
nodes.displayBase.textContent = data?.display_base_currency || '';
|
|
}
|
|
setMessage('Waehrungs-Auswahl gespeichert.', 'success');
|
|
await loadLatest();
|
|
await calculateConversion();
|
|
} catch (error) {
|
|
setMessage(error.message || 'Waehrungs-Auswahl konnte nicht gespeichert werden.', 'error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
|
|
[nodes.convertFrom, nodes.convertTo, nodes.convertAmount].forEach((node) => {
|
|
node?.addEventListener('change', () => {
|
|
calculateConversion().catch(() => {});
|
|
});
|
|
node?.addEventListener('input', () => {
|
|
calculateConversion().catch(() => {});
|
|
});
|
|
});
|
|
|
|
renderFetches(page.recent_fetches || []);
|
|
|
|
loadLatest().catch((error) => {
|
|
setMessage(error.message || 'Letzter Snapshot konnte nicht geladen werden.', 'error');
|
|
});
|
|
calculateConversion().catch(() => {});
|
|
})();
|