gctf2023/web/glacier-exchange/chall/assets/scripts/index.js

103 lines
3.6 KiB
JavaScript
Raw Permalink Normal View History

2023-11-24 18:05:41 +00:00
(function() {
new Vue({
el: '#app',
data: {
dropdownVisibility: {
source: false,
target: false
},
sourceCoinAmount: 0,
sourceCoinFilter: '',
targetCoinFilter: '',
sourceCoinValue: 'cashout',
targetCoinValue: 'ascoin',
balances: [],
coins: [],
club: false
},
methods: {
changeSourceCoin(name) {
this.sourceCoinValue = name;
this.dropdownVisibility.source = false;
this.sourceCoinFilter = '';
},
changeTargetCoin(name) {
this.targetCoinValue = name;
this.dropdownVisibility.target = false;
this.targetCoinFilter = '';
},
swapCoins() {
const tmp = this.sourceCoinValue;
this.sourceCoinValue = this.targetCoinValue;
this.targetCoinValue = tmp;
},
fetchCoins() {
fetch("/api/fetch_coins").then(res => res.json()).then(coins => {
this.coins = coins;
})
},
fetchBalances() {
fetch("/api/wallet/balances").then(res => res.json()).then(balances => {
this.balances = balances;
})
},
convert() {
fetch("/api/wallet/transaction", {
method: "POST",
body: JSON.stringify({
sourceCoin: this.sourceCoinValue,
targetCoin: this.targetCoinValue,
balance: this.sourceCoinAmount
}),
headers: {
"Content-Type": "application/json"
}
}).then(_ => {
this.fetchBalances();
this.sourceCoinAmount = 0;
})
},
joinGlacierClub() {
fetch("/api/wallet/join_glacier_club", {method: "POST"}).then(res => res.json()).then(club => {
this.club = club;
this.$refs.modalGlacierclub.classList.add('is-active')
})
},
closeClubModal() {
this.$refs.modalGlacierclub.classList.remove('is-active')
}
},
computed: {
filteredSourceCoins() {
return this.coins.filter(coin => coin.value.includes(this.sourceCoinFilter) && coin.name !== this.targetCoinValue);
},
filteredTargetCoins() {
return this.coins.filter(coin => coin.value.includes(this.targetCoinFilter) && coin.name !== this.sourceCoinValue);
},
sourceCoin() {
return this.coins.filter(coin => coin.name === this.sourceCoinValue)[0];
},
targetCoin() {
return this.coins.filter(coin => coin.name === this.targetCoinValue)[0];
}
},
mounted() {
this.fetchCoins();
this.fetchBalances();
},
delimiters: ['$$', '$$'],
})
})();
(function() {
setInterval(_ => {
document.querySelectorAll("[data-adjust-width-to]").forEach(element => {
const referenceElementId = element.dataset.adjustWidthTo;
if(!referenceElementId) return;
const referenceElement = document.getElementById(referenceElementId);
if(!referenceElement) return;
element.style.width = `${referenceElement.offsetWidth}px`;
})
})
})();