refactor: redo frontend js
This commit is contained in:
recanman
parent
3ade0bffce
commit
e4831ee3d9
1 changed files with 49 additions and 67 deletions
116
src/js/main.js
116
src/js/main.js
|
|
@ -1,22 +1,22 @@
|
|||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||
|
||||
import '../css/custom.css';
|
||||
|
||||
import Tooltip from "bootstrap/js/dist/tooltip";
|
||||
var tooltipTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-toggle="tooltip"]')
|
||||
);
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new Tooltip(tooltipTriggerEl, { placement: "top" });
|
||||
});
|
||||
import Tooltip from 'bootstrap/js/dist/tooltip';
|
||||
|
||||
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-toggle="tooltip"]'));
|
||||
const tooltipList = tooltipTriggerList.map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl, { placement: 'top' }));
|
||||
console.log(tooltipList);
|
||||
|
||||
let lastModifiedField = 'xmr';
|
||||
const exchangeRates = {};
|
||||
|
||||
var exchangeRates = {};
|
||||
const runConvert = () =>
|
||||
lastModifiedField === 'xmr' ? xmrConvert() : fiatConvert();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const copyXMRBtn = document.getElementById('copyXMRBtn');
|
||||
const copyFiatBtn = document.getElementById('copyFiatBtn');
|
||||
const xmrInput = document.getElementById('xmrInput');
|
||||
|
|
@ -31,66 +31,50 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
selectBox.value = button.textContent;
|
||||
if (lastModifiedField === 'xmr') {
|
||||
xmrConvert();
|
||||
} else {
|
||||
fiatConvert();
|
||||
}
|
||||
runConvert();
|
||||
history.pushState(null, '', `?in=${button.textContent}`);
|
||||
});
|
||||
});
|
||||
|
||||
// Add event listeners for the copy buttons
|
||||
copyXMRBtn.addEventListener('click', copyToClipBoardXMR);
|
||||
copyFiatBtn.addEventListener('click', copyToClipBoardFiat);
|
||||
copyXMRBtn.addEventListener('click', copyToClipboardXMR);
|
||||
copyFiatBtn.addEventListener('click', copyToClipboardFiat);
|
||||
|
||||
// Add event listeners for the XMR input field
|
||||
xmrInput.addEventListener('change', () => xmrConvert(xmrInput.value));
|
||||
xmrInput.addEventListener('change', xmrConvert);
|
||||
xmrInput.addEventListener('keyup', () => {
|
||||
xmrInput.value = xmrInput.value.replace(/[^\.^,\d]/g, '');
|
||||
xmrInput.value = xmrInput.value.replace(/\,/, '.');
|
||||
xmrInput.value = xmrInput.value.replace(/[^\.^,\d]/g, '').replace(/\,/, '.');
|
||||
if (xmrInput.value.split('.').length > 2) {
|
||||
xmrInput.value = xmrInput.value.slice(0, -1);
|
||||
}
|
||||
xmrConvert(xmrInput.value);
|
||||
});
|
||||
xmrInput.addEventListener('input', () => {
|
||||
lastModifiedField = 'xmr';
|
||||
xmrConvert();
|
||||
});
|
||||
xmrInput.addEventListener('input', () => lastModifiedField = 'xmr');
|
||||
|
||||
// Add event listeners for the fiat input field
|
||||
fiatInput.addEventListener('change', () => fiatConvert(fiatInput.value));
|
||||
fiatInput.addEventListener('change', fiatConvert);
|
||||
fiatInput.addEventListener('keyup', () => {
|
||||
fiatInput.value = fiatInput.value.replace(/[^\.^,\d]/g, '');
|
||||
fiatInput.value = fiatInput.value.replace(/\,/, '.');
|
||||
fiatInput.value = fiatInput.value.replace(/[^\.^,\d]/g, '').replace(/\,/, '.');
|
||||
if (fiatInput.value.split('.').length > 2) {
|
||||
fiatInput.value = fiatInput.value.slice(0, -1);
|
||||
}
|
||||
fiatConvert(fiatInput.value);
|
||||
});
|
||||
fiatInput.addEventListener('input', () => {
|
||||
lastModifiedField = 'fiat';
|
||||
fiatConvert();
|
||||
});
|
||||
fiatInput.addEventListener('input', () => lastModifiedField = 'fiat');
|
||||
|
||||
// Add event listener for the select box to change the conversion
|
||||
selectBox.addEventListener('change', () => {
|
||||
if (lastModifiedField === 'xmr') {
|
||||
xmrConvert(selectBox.value)
|
||||
} else {
|
||||
fiatConvert(selectBox.value)
|
||||
}
|
||||
});
|
||||
selectBox.addEventListener('change', runConvert);
|
||||
|
||||
// Hide the conversion buttons if JavaScript is enabled
|
||||
convertXMRToFiatBtn.style.display = 'none';
|
||||
convertFiatToXMRBtn.style.display = 'none';
|
||||
|
||||
// Fetch updated exchange rates immediately, then every 5 seconds
|
||||
fetchUpdatedExchangeRates();
|
||||
fetchUpdatedExchangeRates(true)
|
||||
setInterval(fetchUpdatedExchangeRates, 5000);
|
||||
});
|
||||
|
||||
function fetchUpdatedExchangeRates() {
|
||||
function fetchUpdatedExchangeRates(showAlert = false) {
|
||||
fetch('/coingecko.php')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
|
|
@ -102,13 +86,12 @@ function fetchUpdatedExchangeRates() {
|
|||
updateTimeElement(data.time);
|
||||
|
||||
// Re-execute the appropriate conversion function
|
||||
if (lastModifiedField === 'xmr') {
|
||||
xmrConvert();
|
||||
} else {
|
||||
fiatConvert();
|
||||
}
|
||||
runConvert();
|
||||
})
|
||||
.catch(error => console.error('Error fetching exchange rates:', error));
|
||||
.catch(e => {
|
||||
const msg = `Error fetching exchange rates: ${e}`;
|
||||
showAlert ? alert(msg) : console.error(msg);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTimeElement(unixTimestamp) {
|
||||
|
|
@ -123,41 +106,40 @@ function updateTimeElement(unixTimestamp) {
|
|||
u.parentElement.innerHTML = u.parentElement.innerHTML.replace('Europe/Berlin', Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
}
|
||||
|
||||
function copyToClipBoardXMR() {
|
||||
var content = document.getElementById('xmrInput');
|
||||
function copyToClipboardXMR() {
|
||||
const content = document.getElementById('xmrInput');
|
||||
content.select();
|
||||
|
||||
// Using deprecated execCommand for compatibility with older browsers
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
function copyToClipBoardFiat() {
|
||||
var content = document.getElementById('fiatInput');
|
||||
function copyToClipboardFiat() {
|
||||
const content = document.getElementById('fiatInput');
|
||||
content.select();
|
||||
|
||||
// Using deprecated execCommand for compatibility with older browsers
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
function fiatConvert(value) {
|
||||
let fiatAmount = document.getElementById("fiatInput").value;
|
||||
let xmrValue = document.getElementById("xmrInput");
|
||||
let selectBox = document.getElementById("selectBox").value;
|
||||
function fiatConvert() {
|
||||
const fiatAmount = document.getElementById('fiatInput').value;
|
||||
const xmrValue = document.getElementById('xmrInput');
|
||||
const selectBox = document.getElementById('selectBox').value;
|
||||
|
||||
if (exchangeRates[selectBox]) {
|
||||
let value = fiatAmount / exchangeRates[selectBox];
|
||||
const value = fiatAmount / exchangeRates[selectBox];
|
||||
xmrValue.value = value.toFixed(12);
|
||||
}
|
||||
}
|
||||
|
||||
function xmrConvert(value) {
|
||||
let xmrAmount = document.getElementById("xmrInput").value;
|
||||
let fiatValue = document.getElementById("fiatInput");
|
||||
let selectBox = document.getElementById("selectBox").value;
|
||||
function xmrConvert() {
|
||||
const xmrAmount = document.getElementById('xmrInput').value;
|
||||
const fiatValue = document.getElementById('fiatInput');
|
||||
const selectBox = document.getElementById('selectBox').value;
|
||||
|
||||
if (exchangeRates[selectBox]) {
|
||||
let value = xmrAmount * exchangeRates[selectBox];
|
||||
fiatValue.value = value.toFixed(selectBox == 'BTC' || selectBox == 'LTC' || selectBox == 'ETH' || selectBox == 'XAG' || selectBox == 'XAU' ? 8 : 2);
|
||||
const value = xmrAmount * exchangeRates[selectBox];
|
||||
fiatValue.value = value.toFixed(['BTC', 'LTC', 'ETH', 'XAG', 'XAU'].includes(selectBox) ? 8 : 2);
|
||||
}
|
||||
}
|
||||
|
||||
window.copyToClipBoardXMR = copyToClipBoardXMR;
|
||||
window.copyToClipBoardFiat = copyToClipBoardFiat;
|
||||
window.fiatConvert = fiatConvert;
|
||||
window.xmrConvert = xmrConvert;
|
||||
}
|
||||
Loading…
Reference in a new issue