feature/basic functionality added

This commit is contained in:
Joaquin committed 2025-05-13 13:17:18 -07:00
1 parent 4f73959cfb
commit 8166245ab1
3 files changed
+56 -37

No files matched your search

+40 -31
View File
@@ -5,38 +5,47 @@ function getLocation() {
} }
function update(data) { function update(data) {
document.getElementById("loading").style = "display: none"; if (data.data.message != "error") {
document.getElementById("currencyExchange").style = "display: flex"; document.getElementById("loading").style = "display: none";
document.getElementById("currencyExchange").style = "display: flex";
document.getElementById("yourFlag").src = `/static/svgs/flags/${data.data.country}.svg`
document.getElementById("yourFlag").alt = data.data.country;
document.getElementById("flagTag").innerHTML = `(${data.data.country})`;
document.getElementById("exchangeFlag").src = `/static/svgs/flags/USD.svg`;
document.getElementById("exchangeFlag").alt = "USD";
document.getElementById("exFlagTag").innerHTML = "(USD)";
document.getElementById("dropdown-country-button").value = data.data.toCurrencyRates["USD"]; document.getElementById("yourFlag").src = `/static/svgs/flags/${data.data.country}.svg`
document.getElementById("yourFlag").alt = data.data.country;
updateExchange(document.getElementById("dropdown-country-button").value); document.getElementById("flagTag").innerHTML = `(${data.data.country})`;
const dropdown = document.getElementById("dropdown"); document.getElementById("exchangeFlag").src = `/static/svgs/flags/USD.svg`;
let countries = Object.keys(data.data.toCurrencyRates); document.getElementById("exchangeFlag").alt = "USD";
document.getElementById("exFlagTag").innerHTML = "(USD)";
countries.forEach(item => {
if (dropdown.querySelector(`button[value="${data.data.toCurrencyRates[item]}"]`)) { document.getElementById("dropdown-country-button").value = data.data.toCurrencyRates["USD"];
return;
} updateExchange(document.getElementById("dropdown-country-button").value);
const listItem = document.createElement("li"); const dropdown = document.getElementById("dropdown");
listItem.innerHTML = `<button onclick="switchButton(this)" type="button" value="${data.data.toCurrencyRates[item]}" class="country Button inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem"> let countries = Object.keys(data.data.toCurrencyRates);
<span class="inline-flex items-center">
<img src="/static/svgs/flags/${item}.svg" class="h-4 w-4 me-2" alt="${item}"> (${item}) countries.forEach(item => {
</span> if (dropdown.querySelector(`button[value="${data.data.toCurrencyRates[item]}"]`)) {
</button>`; return;
}
dropdown.appendChild(listItem);
}); const listItem = document.createElement("li");
listItem.innerHTML = `<button onclick="switchButton(this)" type="button" value="${data.data.toCurrencyRates[item]}" class="country Button inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
<span class="inline-flex items-center">
<img src="/static/svgs/flags/${item}.svg" class="h-4 w-4 me-2" alt="${item}"> (${item})
</span>
</button>`;
dropdown.appendChild(listItem);
});
} else {
document.getElementById("loading").style = "display: none";
document.getElementById("exFrom").style = "display: none";
document.getElementById("dropdown-country-button").style = "display: none";
document.getElementById("currencyExchange").style = "display: flex";
document.getElementById("exchange").innerHTML = "Country not supported";
document.getElementById("exchange").className = "block rounded-lg text-center p-2.5 w-50 z-20 text-sm border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-blue-500";
}
} }
function switchButton(clickedButton) { function switchButton(clickedButton) {
+12 -4
View File
@@ -544,11 +544,19 @@ module.exports = (middleware, users, plans, assets) => {
country = data.results[0].formatted_address; country = data.results[0].formatted_address;
let results = await getRates(country); let results = await getRates(country);
req.session.geoData = {
country: results.abbreviation, if (!results.exRates) {
toCurrencyRates: results.exRates, req.session.geoData = {
geoData: req.session.geoData message: "error"
}
} else {
req.session.geoData = {
country: results.abbreviation,
toCurrencyRates: results.exRates,
geoData: req.session.geoData
}
} }
} }
return res.status(status.Ok).send({ data: req.session.geoData }); return res.status(status.Ok).send({ data: req.session.geoData });
+4 -2
View File
@@ -17,12 +17,12 @@
</div> </div>
<div style="display: none;" class="flex items-center" id="currencyExchange"> <div style="display: none;" class="flex items-center" id="currencyExchange">
<div class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"> <div id="exFrom" class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
<img src="" id="yourFlag" class="h-4 w-4 me-2" alt=""> <img src="" id="yourFlag" class="h-4 w-4 me-2" alt="">
<p id="flagTag"></p> <p id="flagTag"></p>
</div> </div>
<div class="relative w-full"> <div class="relative w-full">
<p id="exchange" class="block text-center p-2.5 w-40 z-20 text-sm text-gray-900 bg-gray-50 border-s-0 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"> <p id="exchange" class="block text-center p-2.5 w-40 z-20 text-sm border bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-blue-500">
</p> </p>
</div> </div>
<button id="dropdown-country-button" value="" data-dropdown-toggle="dropdown-country" class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-e-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button"> <button id="dropdown-country-button" value="" data-dropdown-toggle="dropdown-country" class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-e-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
@@ -38,6 +38,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<% } else if(geoData.message == "error") { %>
<p>error</p>
<% } else { %> <% } else { %>
<div class="flex items-center"> <div class="flex items-center">
<div class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"> <div class="shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">