84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
import { t } from '../i18n.js'
|
|
import { getXmrRates, formatFiat } from '../services/currency.js'
|
|
|
|
class AppFooter extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.rates = null
|
|
this.handleCurrencyChange = this.handleCurrencyChange.bind(this)
|
|
}
|
|
|
|
async connectedCallback() {
|
|
if (!this.querySelector('.footer-inner')) {
|
|
this.render()
|
|
}
|
|
this.updateTextContent()
|
|
await this.loadXmrRates()
|
|
window.addEventListener('currency-changed', this.handleCurrencyChange)
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
window.removeEventListener('currency-changed', this.handleCurrencyChange)
|
|
}
|
|
|
|
handleCurrencyChange() {
|
|
this.updateRateDisplay()
|
|
}
|
|
|
|
getCurrency() {
|
|
return localStorage.getItem('dgray_currency') || 'USD'
|
|
}
|
|
|
|
async loadXmrRates() {
|
|
try {
|
|
this.rates = await getXmrRates()
|
|
this.updateRateDisplay()
|
|
} catch (e) {
|
|
console.error('Failed to load XMR rates:', e)
|
|
}
|
|
}
|
|
|
|
updateRateDisplay() {
|
|
const rateEl = this.querySelector('.xmr-rate')
|
|
if (rateEl && this.rates) {
|
|
const currency = this.getCurrency()
|
|
const rate = this.rates[currency] || this.rates.USD
|
|
rateEl.textContent = `1 XMR ≈ ${formatFiat(rate, currency)}`
|
|
rateEl.classList.add('loaded')
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const year = new Date().getFullYear()
|
|
|
|
this.innerHTML = /* html */`
|
|
<div class="footer-inner container">
|
|
<p class="footer-copyright">
|
|
© ${year} dgray.io - <span data-i18n="footer.rights">${t('footer.rights')}</span>
|
|
<span class="footer-swiss">🇨🇭 Made in Switzerland</span>
|
|
</p>
|
|
<span class="xmr-rate" title="CoinGecko">1 XMR ≈ ...</span>
|
|
<nav class="footer-links">
|
|
<a href="#/about" data-i18n="footer.about">${t('footer.about')}</a>
|
|
<a href="#/privacy" data-i18n="footer.privacy">${t('footer.privacy')}</a>
|
|
<a href="#/terms" data-i18n="footer.terms">${t('footer.terms')}</a>
|
|
<a href="#/contact" data-i18n="footer.contact">${t('footer.contact')}</a>
|
|
</nav>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
updateTextContent() {
|
|
this.querySelectorAll('[data-i18n]').forEach(el => {
|
|
el.textContent = t(el.dataset.i18n)
|
|
})
|
|
}
|
|
|
|
updateTranslations() {
|
|
this.updateTextContent()
|
|
if (this.rates) this.updateRateDisplay()
|
|
}
|
|
}
|
|
|
|
customElements.define('app-footer', AppFooter)
|