diff --git a/src/public/css/createProfile.css b/public/css/createProfile.css similarity index 100% rename from src/public/css/createProfile.css rename to public/css/createProfile.css diff --git a/src/public/css/invite.css b/public/css/invite.css similarity index 100% rename from src/public/css/invite.css rename to public/css/invite.css diff --git a/src/public/css/offers.css b/public/css/offers.css similarity index 100% rename from src/public/css/offers.css rename to public/css/offers.css diff --git a/src/public/css/seca.css b/public/css/seca.css similarity index 100% rename from src/public/css/seca.css rename to public/css/seca.css diff --git a/src/public/img/bolt-lightning-black.svg b/public/img/bolt-lightning-black.svg similarity index 100% rename from src/public/img/bolt-lightning-black.svg rename to public/img/bolt-lightning-black.svg diff --git a/src/public/img/bolt-lightning-gray.svg b/public/img/bolt-lightning-gray.svg similarity index 100% rename from src/public/img/bolt-lightning-gray.svg rename to public/img/bolt-lightning-gray.svg diff --git a/src/public/img/bolt-lightning-lasecagold.svg b/public/img/bolt-lightning-lasecagold.svg similarity index 100% rename from src/public/img/bolt-lightning-lasecagold.svg rename to public/img/bolt-lightning-lasecagold.svg diff --git a/src/public/img/bolt-lightning.svg b/public/img/bolt-lightning.svg similarity index 100% rename from src/public/img/bolt-lightning.svg rename to public/img/bolt-lightning.svg diff --git a/src/public/img/chains-black.svg b/public/img/chains-black.svg similarity index 100% rename from src/public/img/chains-black.svg rename to public/img/chains-black.svg diff --git a/src/public/img/chains-gray.svg b/public/img/chains-gray.svg similarity index 100% rename from src/public/img/chains-gray.svg rename to public/img/chains-gray.svg diff --git a/src/public/img/chains-lasecagold.svg b/public/img/chains-lasecagold.svg similarity index 100% rename from src/public/img/chains-lasecagold.svg rename to public/img/chains-lasecagold.svg diff --git a/src/public/img/chains.svg b/public/img/chains.svg similarity index 100% rename from src/public/img/chains.svg rename to public/img/chains.svg diff --git a/src/public/img/circle-check-green.svg b/public/img/circle-check-green.svg similarity index 100% rename from src/public/img/circle-check-green.svg rename to public/img/circle-check-green.svg diff --git a/src/public/img/circle-check-white.svg b/public/img/circle-check-white.svg similarity index 100% rename from src/public/img/circle-check-white.svg rename to public/img/circle-check-white.svg diff --git a/src/public/img/circle-xmark-gray.svg b/public/img/circle-xmark-gray.svg similarity index 100% rename from src/public/img/circle-xmark-gray.svg rename to public/img/circle-xmark-gray.svg diff --git a/src/public/img/circle-xmark.svg b/public/img/circle-xmark.svg similarity index 100% rename from src/public/img/circle-xmark.svg rename to public/img/circle-xmark.svg diff --git a/src/public/img/edit.svg b/public/img/edit.svg similarity index 100% rename from src/public/img/edit.svg rename to public/img/edit.svg diff --git a/src/public/img/envelope.svg b/public/img/envelope.svg similarity index 100% rename from src/public/img/envelope.svg rename to public/img/envelope.svg diff --git a/src/public/img/eur-bill-gray.svg b/public/img/eur-bill-gray.svg similarity index 100% rename from src/public/img/eur-bill-gray.svg rename to public/img/eur-bill-gray.svg diff --git a/src/public/img/eur-bill-lasecagold.svg b/public/img/eur-bill-lasecagold.svg similarity index 100% rename from src/public/img/eur-bill-lasecagold.svg rename to public/img/eur-bill-lasecagold.svg diff --git a/src/public/img/eur-bill.svg b/public/img/eur-bill.svg similarity index 100% rename from src/public/img/eur-bill.svg rename to public/img/eur-bill.svg diff --git a/src/public/img/laseca-logo-transparent-textonly.svg b/public/img/laseca-logo-transparent-textonly.svg similarity index 100% rename from src/public/img/laseca-logo-transparent-textonly.svg rename to public/img/laseca-logo-transparent-textonly.svg diff --git a/src/public/img/laseca_logo_white.png b/public/img/laseca_logo_white.png similarity index 100% rename from src/public/img/laseca_logo_white.png rename to public/img/laseca_logo_white.png diff --git a/src/public/img/lasecagold_ostrich.svg b/public/img/lasecagold_ostrich.svg similarity index 100% rename from src/public/img/lasecagold_ostrich.svg rename to public/img/lasecagold_ostrich.svg diff --git a/src/public/img/many-users-gray.svg b/public/img/many-users-gray.svg similarity index 100% rename from src/public/img/many-users-gray.svg rename to public/img/many-users-gray.svg diff --git a/src/public/img/many-users-lasecagold.svg b/public/img/many-users-lasecagold.svg similarity index 100% rename from src/public/img/many-users-lasecagold.svg rename to public/img/many-users-lasecagold.svg diff --git a/src/public/img/many-users.svg b/public/img/many-users.svg similarity index 100% rename from src/public/img/many-users.svg rename to public/img/many-users.svg diff --git a/src/public/img/message-exclamation.svg b/public/img/message-exclamation.svg similarity index 100% rename from src/public/img/message-exclamation.svg rename to public/img/message-exclamation.svg diff --git a/src/public/img/phone.svg b/public/img/phone.svg similarity index 100% rename from src/public/img/phone.svg rename to public/img/phone.svg diff --git a/src/public/img/signal-messenger.svg b/public/img/signal-messenger.svg similarity index 100% rename from src/public/img/signal-messenger.svg rename to public/img/signal-messenger.svg diff --git a/src/public/img/square-whatsapp.svg b/public/img/square-whatsapp.svg similarity index 100% rename from src/public/img/square-whatsapp.svg rename to public/img/square-whatsapp.svg diff --git a/src/public/img/telegram.svg b/public/img/telegram.svg similarity index 100% rename from src/public/img/telegram.svg rename to public/img/telegram.svg diff --git a/src/public/img/trash-can-darkred.svg b/public/img/trash-can-darkred.svg similarity index 100% rename from src/public/img/trash-can-darkred.svg rename to public/img/trash-can-darkred.svg diff --git a/src/public/img/trash-can-lasecagold.svg b/public/img/trash-can-lasecagold.svg similarity index 100% rename from src/public/img/trash-can-lasecagold.svg rename to public/img/trash-can-lasecagold.svg diff --git a/src/public/img/trash-can.svg b/public/img/trash-can.svg similarity index 100% rename from src/public/img/trash-can.svg rename to public/img/trash-can.svg diff --git a/src/public/img/user-gray.svg b/public/img/user-gray.svg similarity index 100% rename from src/public/img/user-gray.svg rename to public/img/user-gray.svg diff --git a/src/public/img/user-group-gray.svg b/public/img/user-group-gray.svg similarity index 100% rename from src/public/img/user-group-gray.svg rename to public/img/user-group-gray.svg diff --git a/src/public/img/user-group-lasecagold.svg b/public/img/user-group-lasecagold.svg similarity index 100% rename from src/public/img/user-group-lasecagold.svg rename to public/img/user-group-lasecagold.svg diff --git a/src/public/img/user-group.svg b/public/img/user-group.svg similarity index 100% rename from src/public/img/user-group.svg rename to public/img/user-group.svg diff --git a/src/public/img/user-lasecagold.svg b/public/img/user-lasecagold.svg similarity index 100% rename from src/public/img/user-lasecagold.svg rename to public/img/user-lasecagold.svg diff --git a/src/public/img/user.svg b/public/img/user.svg similarity index 100% rename from src/public/img/user.svg rename to public/img/user.svg diff --git a/src/public/img/white_ostrich.svg b/public/img/white_ostrich.svg similarity index 100% rename from src/public/img/white_ostrich.svg rename to public/img/white_ostrich.svg diff --git a/src/public/javascript/app.js b/public/javascript/app.js similarity index 100% rename from src/public/javascript/app.js rename to public/javascript/app.js diff --git a/src/public/javascript/createProfile.js b/public/javascript/createProfile.js similarity index 100% rename from src/public/javascript/createProfile.js rename to public/javascript/createProfile.js diff --git a/src/public/javascript/home.js b/public/javascript/home.js similarity index 100% rename from src/public/javascript/home.js rename to public/javascript/home.js diff --git a/src/public/javascript/invite.js b/public/javascript/invite.js similarity index 100% rename from src/public/javascript/invite.js rename to public/javascript/invite.js diff --git a/src/public/javascript/login.js b/public/javascript/login.js similarity index 100% rename from src/public/javascript/login.js rename to public/javascript/login.js diff --git a/public/javascript/offers.js b/public/javascript/offers.js new file mode 100644 index 0000000..4e57b19 --- /dev/null +++ b/public/javascript/offers.js @@ -0,0 +1,697 @@ +function offersPage() { + const buttonStartCreateOffer = document.getElementById( + 'button-start-create-offer' + ); + const buttonViewMyOffers = document.getElementById('button-view-my-offers'); + const closeOffer = document.getElementById('close-offer'); + const createOfferModalRoot = document.getElementById( + 'create-offer-modal-root' + ); + const viewMyOffersRoot = document.getElementById('view-my-offers-root'); + const buyOrSellButtonGroup = document.getElementById( + 'button-group-buy-or-sell' + ); + const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button'); + const buyButton = document.getElementById('button-buy-bitcoin'); + const sellButton = document.getElementById('button-sell-bitcoin'); + + const premiumValue = document.getElementById('premium-value'); + const buttonIncreasePremium = document.getElementById( + 'button-increase-premium' + ); + + const buttonDecreasePremium = document.getElementById( + 'button-decrease-premium' + ); + + const eurAmountInput = document.getElementById('input-eur-amount'); + const btcAmountInput = document.getElementById('input-btc-amount'); + + const placeInput = document.getElementById('place-input'); + const timeInput = document.getElementById('time-input'); + + const onchainCheckbox = document.getElementById('onchain-checkbox'); + const lightningCheckbox = document.getElementById('lightning-checkbox'); + + const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox]; + + const myTrustedCheckbox = document.getElementById('my-trusted-checkbox'); + const myTrustedTrustedCheckbox = document.getElementById( + 'my-trusted-trusted-checkbox' + ); + const allMembersCheckbox = document.getElementById('all-members-checkbox'); + + const bigNotesAcceptedCheckbox = document.getElementById( + 'large-bills-checkbox' + ); + + const publishOfferButton = document.getElementById('button-submit-offer'); + + const offerCreatedPopup = document.getElementById( + 'offer-created-confirmation' + ); + const offerDeletedPopup = document.getElementById( + 'offer-deleted-confirmation' + ); + + const ownOffersContainer = document.getElementById('own-offers-container'); + + function toggleCreateOfferModal() { + createOfferModalRoot.classList.toggle('shown'); + } + + function toggleViewMyOffersPanel() { + viewMyOffersRoot.style.display = + viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; + } + + function modifyPremiumValue(delta) { + const regexExpression = /-*\d+/; + const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]); + + const newValue = `${numValue + delta}%`; + + premiumValue.innerText = newValue; + } + + function toggleBuyOrSellButtonGroup() { + buyOrSellButtons.forEach((button) => { + if (button.classList.contains('selected')) { + button.classList.remove('selected'); + } else { + button.classList.add('selected'); + } + }); + } + + function readIntFromEurAmountInput() { + const eurAmountFieldValue = eurAmountInput.value; + const regularExpression = /([\d\s]+)/; + const matchResult = eurAmountFieldValue.match(regularExpression); + + if (!matchResult) { + return null; + } + + const numberString = matchResult[1]; + const cleanInputNumber = parseInt(numberString.replace(/\s/gi, '')); + + return cleanInputNumber; + } + + function validateAndFormatEurAmountInput() { + const cleanInputNumber = readIntFromEurAmountInput(); + eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid'); + if (cleanInputNumber) { + eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber); + eurAmountInput.classList.add('input-is-valid'); + return; + } + + eurAmountInput.classList.add('input-is-invalid'); + } + + function updateBtcInput() { + const eurToSatRate = 1021; + const cleanEurAmount = readIntFromEurAmountInput(); + + const satsAmount = cleanEurAmount * eurToSatRate; + const formattedSatsAmount = formatNumberWithSpaces(satsAmount); + btcAmountInput.value = formattedSatsAmount; + } + + function validateBitcoinMethodCheckboxes(clickedCheckbox) { + let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length; + if (checkedCount === 0) { + clickedCheckbox.checked = true; + } + } + + function applyTrustCheckboxConstraints(pressedCheckbox) { + if (pressedCheckbox === myTrustedTrustedCheckbox) { + console.log('first case!'); + if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) { + allMembersCheckbox.checked = false; + } + } + + if (pressedCheckbox === allMembersCheckbox) { + console.log('second case!'); + if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) { + myTrustedTrustedCheckbox.checked = true; + } + } + } + + async function publishOffer() { + let wants; + if (buyButton.classList.contains('selected')) { + wants = 'BTC'; + } + if (sellButton.classList.contains('selected')) { + wants = 'EUR'; + } + + const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100; + const trade_amount_eur = eurAmountInput.value; + const location_details = placeInput.value; + const time_availability_details = timeInput.value; + const is_onchain_accepted = onchainCheckbox.checked; + const is_lightning_accepted = lightningCheckbox.checked; + const show_offer_to_trusted = myTrustedCheckbox.checked; + const show_offer_to_trusted_trusted = myTrustedTrustedCheckbox.checked; + const show_offer_to_all_members = allMembersCheckbox.checked; + const are_big_notes_accepted = bigNotesAcceptedCheckbox.checked; + + const offerDetails = { + wants, + premium, + trade_amount_eur, + location_details, + time_availability_details, + is_onchain_accepted, + is_lightning_accepted, + show_offer_to_trusted, + show_offer_to_trusted_trusted, + show_offer_to_all_members, + are_big_notes_accepted, + }; + + await fetch('/api/offer', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ offerDetails }), + }); + + toggleOfferCreatedAlert(); + + toggleCreateOfferModal(); + } + + function toggleOfferCreatedAlert() { + offerCreatedPopup.classList.remove('max-size-zero'); + offerCreatedPopup.classList.add('revealed'); + setTimeout(() => { + offerCreatedPopup.classList.remove('revealed'); + }, 3000); + setTimeout(() => { + offerCreatedPopup.classList.add('max-size-zero'); + }, 4000); + } + + function toggleOfferDeletedAlert() { + offerDeletedPopup.classList.remove('max-size-zero'); + offerDeletedPopup.classList.add('revealed'); + setTimeout(() => { + offerDeletedPopup.classList.remove('revealed'); + }, 3000); + setTimeout(() => { + offerDeletedPopup.classList.add('max-size-zero'); + }, 4000); + } + + class Offer { + constructor(offerData) { + this.uuid = offerData.uuid; + this.public_key = offerData.public_key; + this.wants = offerData.wants; + this.premium = offerData.premium; + this.trade_amount_eur = offerData.trade_amount_eur; + this.location_details = offerData.location_details; + this.time_availability_details = offerData.time_availability_details; + this.show_offer_to_trusted = offerData.show_offer_to_trusted; + this.show_offer_to_trusted_trusted = + offerData.show_offer_to_trusted_trusted; + this.show_offer_to_all_members = offerData.show_offer_to_all_members; + this.is_onchain_accepted = offerData.is_onchain_accepted; + this.is_lightning_accepted = offerData.is_lightning_accepted; + this.are_big_notes_accepted = offerData.are_big_notes_accepted; + this.created_at = offerData.created_at; + this.last_updated_at = offerData.last_updated_at; + } + + buildHTML() { + const offerCard = document.createElement('div'); + offerCard.classList.add('myoffer-card'); + offerCard.classList.add('shadowed-round-area'); + + const tradeDescDiv = document.createElement('div'); + tradeDescDiv.classList.add('trade-desc'); + + const youBuyText = document.createElement('p'); + youBuyText.classList.add('offer-card-content-title'); + youBuyText.innerText = 'Compras'; + tradeDescDiv.append(youBuyText); + + const youBuyData = document.createElement('p'); + youBuyData.classList.add('offer-card-content-data'); + if (this.wants === 'BTC') { + youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`; + } + if (this.wants === 'EUR') { + youBuyData.innerText = `${this.trade_amount_eur} €`; + } + tradeDescDiv.append(youBuyData); + + const youSellText = document.createElement('p'); + youSellText.id = 'you-sell-title'; + youSellText.classList.add('offer-card-content-title'); + youSellText.innerText = 'Vendes'; + tradeDescDiv.append(youSellText); + + const youSellData = document.createElement('p'); + youSellData.classList.add('offer-card-content-data'); + if (this.wants === 'BTC') { + youSellData.innerText = `${this.trade_amount_eur} €`; + } + if (this.wants === 'EUR') { + youSellData.innerText = `${this.trade_amount_eur * 1021} sats`; + } + tradeDescDiv.append(youSellData); + + const premiumDescDiv = document.createElement('div'); + premiumDescDiv.classList.add('premium-desc'); + + const premiumTitle = document.createElement('p'); + premiumTitle.classList.add('offer-card-content-title'); + premiumTitle.innerText = 'Premium'; + premiumDescDiv.append(premiumTitle); + + const premiumData = document.createElement('p'); + premiumData.classList.add('offer-card-content-data'); + premiumData.innerText = `${this.premium * 100} %`; + premiumDescDiv.append(premiumData); + + const offerPriceTitle = document.createElement('p'); + offerPriceTitle.classList.add('offer-card-content-title'); + offerPriceTitle.innerText = 'Precio oferta'; + premiumDescDiv.append(offerPriceTitle); + + const offerPriceData = document.createElement('p'); + offerPriceData.classList.add('offer-card-content-data'); + offerPriceData.innerText = `90000 €/BTC`; + premiumDescDiv.append(offerPriceData); + + const marketPriceTitle = document.createElement('p'); + marketPriceTitle.classList.add('offer-card-content-title'); + marketPriceTitle.innerText = 'Precio mercado'; + premiumDescDiv.append(marketPriceTitle); + + const marketPriceData = document.createElement('p'); + marketPriceData.innerText = `88000 €/BTC`; + premiumDescDiv.append(marketPriceData); + + const whereDescDiv = document.createElement('div'); + whereDescDiv.classList.add('where-desc'); + + const whereDescTitle = document.createElement('p'); + whereDescTitle.classList.add('offer-card-content-title'); + whereDescTitle.innerText = 'Dónde'; + whereDescDiv.append(whereDescTitle); + + const whereDescData = document.createElement('p'); + whereDescData.classList.add('offer-long-text'); + whereDescData.innerText = `${this.location_details}`; + whereDescDiv.append(whereDescData); + + const whenDescDiv = document.createElement('div'); + whenDescDiv.classList.add('when-desc'); + + const whenDescTitle = document.createElement('p'); + whenDescTitle.classList.add('offer-card-content-title'); + whenDescTitle.innerText = 'Cúando'; + whenDescDiv.append(whenDescTitle); + + const whenDescData = document.createElement('p'); + whenDescData.classList.add('offer-long-text'); + whenDescData.innerText = `${this.time_availability_details}`; + whenDescDiv.append(whenDescData); + + const bitcoinMethodsDiv = document.createElement('div'); + bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); + + const bitcoinMethodsTitle = document.createElement('p'); + bitcoinMethodsTitle.classList.add('offer-card-content-title'); + bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados'; + bitcoinMethodsDiv.append(bitcoinMethodsTitle); + + const onchainAcceptedContainer = document.createElement('div'); + onchainAcceptedContainer.classList.add('left-icon-checkboxed-field'); + if (this.is_onchain_accepted) { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-lasecagold.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } else { + const onchainIcon = document.createElement('img'); + onchainIcon.src = '/img/chains-gray.svg'; + const onchainText = document.createElement('p'); + onchainText.innerText = 'Onchain'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); + } + const lightningAcceptedContainer = document.createElement('div'); + + lightningAcceptedContainer.classList.add('left-icon-checkboxed-field'); + if (this.is_lightning_accepted) { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } else { + const lightningIcon = document.createElement('img'); + lightningIcon.src = '/img/bolt-lightning-gray.svg'; + const lightningText = document.createElement('p'); + lightningText.innerText = 'Lightning'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + lightningAcceptedContainer.append( + lightningIcon, + lightningText, + checkIcon + ); + } + + bitcoinMethodsDiv.append( + onchainAcceptedContainer, + lightningAcceptedContainer + ); + + const visibilityDiv = document.createElement('div'); + visibilityDiv.classList.add('visibility-desc'); + + const visibilityTitle = document.createElement('p'); + visibilityTitle.classList.add('offer-card-content-title'); + visibilityTitle.innerText = 'Visibilidad'; + visibilityDiv.append(visibilityTitle); + + const showOfferToTrustedContainer = document.createElement('div'); + showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field'); + + if (this.show_offer_to_trusted) { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-lasecagold.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-gray.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } + + const showOfferToTrustedTrustedContainer = document.createElement('div'); + showOfferToTrustedTrustedContainer.classList.add( + 'right-icon-checkboxed-field' + ); + + if (this.show_offer_to_trusted_trusted) { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } + + const showOfferToAllMembersContainer = document.createElement('div'); + showOfferToAllMembersContainer.classList.add( + 'right-icon-checkboxed-field' + ); + + if (this.show_offer_to_all_members) { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } else { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-gray.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } + visibilityDiv.append( + showOfferToTrustedContainer, + showOfferToTrustedTrustedContainer, + showOfferToAllMembersContainer + ); + + const otherOfferFeaturesDiv = document.createElement('div'); + otherOfferFeaturesDiv.classList.add('other-desc'); + + const otherOfferFeaturesTitle = document.createElement('p'); + otherOfferFeaturesTitle.classList.add('offer-card-content-title'); + otherOfferFeaturesTitle.innerText = 'Otros'; + otherOfferFeaturesDiv.append(otherOfferFeaturesTitle); + + const areBigNotesAcceptedContainer = document.createElement('div'); + areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field'); + + if (this.are_big_notes_accepted) { + const areBigNotesAcceptedIcon = document.createElement('img'); + areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg'; + const areBigNotesAcceptedText = document.createElement('p'); + areBigNotesAcceptedText.innerText = 'Billetes grandes'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + areBigNotesAcceptedContainer.append( + areBigNotesAcceptedIcon, + areBigNotesAcceptedText, + checkIcon + ); + } else { + const areBigNotesAcceptedIcon = document.createElement('img'); + areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg'; + const areBigNotesAcceptedText = document.createElement('p'); + areBigNotesAcceptedText.innerText = 'Billetes grandes'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + areBigNotesAcceptedContainer.append( + areBigNotesAcceptedIcon, + areBigNotesAcceptedText, + checkIcon + ); + } + + otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer); + + const actionButtonsArea = document.createElement('p'); + actionButtonsArea.classList.add('offer-action-buttons-area'); + + const editActionArea = document.createElement('div'); + editActionArea.classList.add('offer-action-area'); + editActionArea.classList.add('subtle-box'); + const editActionIcon = document.createElement('img'); + editActionIcon.src = '/img/edit.svg'; + const editActionText = document.createElement('p'); + editActionText.innerText = 'Editar'; + editActionArea.append(editActionIcon, editActionText); + + const deleteActionArea = document.createElement('div'); + deleteActionArea.classList.add('offer-action-area'); + deleteActionArea.classList.add('subtle-box'); + const deleteActionIcon = document.createElement('img'); + deleteActionIcon.src = '/img/trash-can-darkred.svg'; + const deleteActionText = document.createElement('p'); + deleteActionText.innerText = 'Eliminar'; + deleteActionArea.append(deleteActionIcon, deleteActionText); + deleteActionArea.addEventListener('click', async () => { + await deleteOfferByUuid(this.uuid); + await myOffers.getOffersFromApi(); + await myOffers.render(); + toggleOfferDeletedAlert(); + }); + + actionButtonsArea.append(editActionArea, deleteActionArea); + + offerCard.append( + tradeDescDiv, + premiumDescDiv, + whereDescDiv, + whenDescDiv, + bitcoinMethodsDiv, + visibilityDiv, + otherOfferFeaturesDiv, + actionButtonsArea + ); + + return offerCard; + } + } + + class MyOffers { + constructor(ownOffersContainerElement) { + this.ownOffersContainerElement = ownOffersContainerElement; + this.offers = []; + } + + async getOffersFromApi() { + const offersResponse = await fetch('/api/publickey-offers'); + + this.offers = []; + + const offersData = (await offersResponse.json()).data; + if (offersResponse.ok) { + for (const record of offersData) { + this.offers.push(new Offer(record)); + } + } + } + + async render() { + if (this.offers.length === 0) { + this.ownOffersContainerElement.innerHTML = + '

Vaya, no hay nada por aquí...

'; + return; + } + this.ownOffersContainerElement.innerHTML = ''; + + for (const someOffer of this.offers) { + this.ownOffersContainerElement.append(someOffer.buildHTML()); + } + } + } + + async function deleteOfferByUuid(offerUuid) { + await fetch(`/api/offer/${offerUuid}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }); + } + + buttonStartCreateOffer.addEventListener('click', () => { + toggleCreateOfferModal(); + }); + + buttonViewMyOffers.addEventListener('click', async () => { + await myOffers.getOffersFromApi(); + await myOffers.render(); + toggleViewMyOffersPanel(); + }); + + closeOffer.addEventListener('click', () => { + toggleCreateOfferModal(); + }); + + buyOrSellButtons.forEach((button) => { + button.addEventListener('click', () => { + toggleBuyOrSellButtonGroup(); + }); + }); + + buttonIncreasePremium.addEventListener('click', () => { + modifyPremiumValue(1); + }); + + buttonDecreasePremium.addEventListener('click', () => { + modifyPremiumValue(-1); + }); + + eurAmountInput.addEventListener('blur', () => { + validateAndFormatEurAmountInput(); + updateBtcInput(); + }); + + eurAmountInput.addEventListener('input', () => { + eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, ''); + updateBtcInput(); + }); + + for (const btcMethodCheckbox of btcMethodCheckboxes) { + btcMethodCheckbox.addEventListener('click', () => { + validateBitcoinMethodCheckboxes(btcMethodCheckbox); + }); + } + + myTrustedTrustedCheckbox.addEventListener('click', () => { + applyTrustCheckboxConstraints(myTrustedTrustedCheckbox); + }); + + allMembersCheckbox.addEventListener('click', () => { + applyTrustCheckboxConstraints(allMembersCheckbox); + }); + + publishOfferButton.addEventListener('click', async () => { + await publishOffer(); + await myOffers.getOffersFromApi(); + await myOffers.render(); + }); + + updateBtcInput(); + + const myOffers = new MyOffers(ownOffersContainer); +} + +offersPage; diff --git a/src/public/javascript/utils.js b/public/javascript/utils.js similarity index 100% rename from src/public/javascript/utils.js rename to public/javascript/utils.js diff --git a/src/app.js b/src/app.js index dc3cf83..76a3146 100644 --- a/src/app.js +++ b/src/app.js @@ -21,7 +21,7 @@ function createApp(dependencies) { app.use('/', dependencies.webRoutes); app.use('/api', dependencies.apiRoutes); - app.use(express.static(path.join(__dirname, 'public'))); + app.use(express.static(path.join(__dirname, '../public'))); app.disable('etag'); //avoids 304 responses diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js deleted file mode 100644 index f38f202..0000000 --- a/src/public/javascript/offers.js +++ /dev/null @@ -1,685 +0,0 @@ -const buttonStartCreateOffer = document.getElementById( - 'button-start-create-offer' -); -const buttonViewMyOffers = document.getElementById('button-view-my-offers'); -const closeOffer = document.getElementById('close-offer'); -const createOfferModalRoot = document.getElementById('create-offer-modal-root'); -const viewMyOffersRoot = document.getElementById('view-my-offers-root'); -const buyOrSellButtonGroup = document.getElementById( - 'button-group-buy-or-sell' -); -const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button'); -const buyButton = document.getElementById('button-buy-bitcoin'); -const sellButton = document.getElementById('button-sell-bitcoin'); - -const premiumValue = document.getElementById('premium-value'); -const buttonIncreasePremium = document.getElementById( - 'button-increase-premium' -); - -const buttonDecreasePremium = document.getElementById( - 'button-decrease-premium' -); - -const eurAmountInput = document.getElementById('input-eur-amount'); -const btcAmountInput = document.getElementById('input-btc-amount'); - -const placeInput = document.getElementById('place-input'); -const timeInput = document.getElementById('time-input'); - -const onchainCheckbox = document.getElementById('onchain-checkbox'); -const lightningCheckbox = document.getElementById('lightning-checkbox'); - -const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox]; - -const myTrustedCheckbox = document.getElementById('my-trusted-checkbox'); -const myTrustedTrustedCheckbox = document.getElementById( - 'my-trusted-trusted-checkbox' -); -const allMembersCheckbox = document.getElementById('all-members-checkbox'); - -const bigNotesAcceptedCheckbox = document.getElementById( - 'large-bills-checkbox' -); - -const publishOfferButton = document.getElementById('button-submit-offer'); - -const offerCreatedPopup = document.getElementById('offer-created-confirmation'); -const offerDeletedPopup = document.getElementById('offer-deleted-confirmation'); - -const ownOffersContainer = document.getElementById('own-offers-container'); - -function toggleCreateOfferModal() { - createOfferModalRoot.classList.toggle('shown'); -} - -function toggleViewMyOffersPanel() { - viewMyOffersRoot.style.display = - viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; -} - -function modifyPremiumValue(delta) { - const regexExpression = /-*\d+/; - const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]); - - const newValue = `${numValue + delta}%`; - - premiumValue.innerText = newValue; -} - -function toggleBuyOrSellButtonGroup() { - buyOrSellButtons.forEach((button) => { - if (button.classList.contains('selected')) { - button.classList.remove('selected'); - } else { - button.classList.add('selected'); - } - }); -} - -function readIntFromEurAmountInput() { - const eurAmountFieldValue = eurAmountInput.value; - const regularExpression = /([\d\s]+)/; - const matchResult = eurAmountFieldValue.match(regularExpression); - - if (!matchResult) { - return null; - } - - const numberString = matchResult[1]; - const cleanInputNumber = parseInt(numberString.replace(/\s/gi, '')); - - return cleanInputNumber; -} - -function validateAndFormatEurAmountInput() { - const cleanInputNumber = readIntFromEurAmountInput(); - eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid'); - if (cleanInputNumber) { - eurAmountInput.value = formatNumberWithSpaces(cleanInputNumber); - eurAmountInput.classList.add('input-is-valid'); - return; - } - - eurAmountInput.classList.add('input-is-invalid'); -} - -function updateBtcInput() { - const eurToSatRate = 1021; - const cleanEurAmount = readIntFromEurAmountInput(); - - const satsAmount = cleanEurAmount * eurToSatRate; - const formattedSatsAmount = formatNumberWithSpaces(satsAmount); - btcAmountInput.value = formattedSatsAmount; -} - -function validateBitcoinMethodCheckboxes(clickedCheckbox) { - let checkedCount = btcMethodCheckboxes.filter((cb) => cb.checked).length; - if (checkedCount === 0) { - clickedCheckbox.checked = true; - } -} - -function applyTrustCheckboxConstraints(pressedCheckbox) { - if (pressedCheckbox === myTrustedTrustedCheckbox) { - console.log('first case!'); - if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) { - allMembersCheckbox.checked = false; - } - } - - if (pressedCheckbox === allMembersCheckbox) { - console.log('second case!'); - if (!myTrustedTrustedCheckbox.checked && allMembersCheckbox.checked) { - myTrustedTrustedCheckbox.checked = true; - } - } -} - -async function publishOffer() { - let wants; - if (buyButton.classList.contains('selected')) { - wants = 'BTC'; - } - if (sellButton.classList.contains('selected')) { - wants = 'EUR'; - } - - const premium = parseInt(premiumValue.innerText.match(/\d+/)[0]) / 100; - const trade_amount_eur = eurAmountInput.value; - const location_details = placeInput.value; - const time_availability_details = timeInput.value; - const is_onchain_accepted = onchainCheckbox.checked; - const is_lightning_accepted = lightningCheckbox.checked; - const show_offer_to_trusted = myTrustedCheckbox.checked; - const show_offer_to_trusted_trusted = myTrustedTrustedCheckbox.checked; - const show_offer_to_all_members = allMembersCheckbox.checked; - const are_big_notes_accepted = bigNotesAcceptedCheckbox.checked; - - const offerDetails = { - wants, - premium, - trade_amount_eur, - location_details, - time_availability_details, - is_onchain_accepted, - is_lightning_accepted, - show_offer_to_trusted, - show_offer_to_trusted_trusted, - show_offer_to_all_members, - are_big_notes_accepted, - }; - - await fetch('/api/offer', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ offerDetails }), - }); - - toggleOfferCreatedAlert(); - - toggleCreateOfferModal(); -} - -function toggleOfferCreatedAlert() { - offerCreatedPopup.classList.remove('max-size-zero'); - offerCreatedPopup.classList.add('revealed'); - setTimeout(() => { - offerCreatedPopup.classList.remove('revealed'); - }, 3000); - setTimeout(() => { - offerCreatedPopup.classList.add('max-size-zero'); - }, 4000); -} - -function toggleOfferDeletedAlert() { - offerDeletedPopup.classList.remove('max-size-zero'); - offerDeletedPopup.classList.add('revealed'); - setTimeout(() => { - offerDeletedPopup.classList.remove('revealed'); - }, 3000); - setTimeout(() => { - offerDeletedPopup.classList.add('max-size-zero'); - }, 4000); -} - -class Offer { - constructor(offerData) { - this.uuid = offerData.uuid; - this.public_key = offerData.public_key; - this.wants = offerData.wants; - this.premium = offerData.premium; - this.trade_amount_eur = offerData.trade_amount_eur; - this.location_details = offerData.location_details; - this.time_availability_details = offerData.time_availability_details; - this.show_offer_to_trusted = offerData.show_offer_to_trusted; - this.show_offer_to_trusted_trusted = - offerData.show_offer_to_trusted_trusted; - this.show_offer_to_all_members = offerData.show_offer_to_all_members; - this.is_onchain_accepted = offerData.is_onchain_accepted; - this.is_lightning_accepted = offerData.is_lightning_accepted; - this.are_big_notes_accepted = offerData.are_big_notes_accepted; - this.created_at = offerData.created_at; - this.last_updated_at = offerData.last_updated_at; - } - - buildHTML() { - const offerCard = document.createElement('div'); - offerCard.classList.add('myoffer-card'); - offerCard.classList.add('shadowed-round-area'); - - const tradeDescDiv = document.createElement('div'); - tradeDescDiv.classList.add('trade-desc'); - - const youBuyText = document.createElement('p'); - youBuyText.classList.add('offer-card-content-title'); - youBuyText.innerText = 'Compras'; - tradeDescDiv.append(youBuyText); - - const youBuyData = document.createElement('p'); - youBuyData.classList.add('offer-card-content-data'); - if (this.wants === 'BTC') { - youBuyData.innerText = `${this.trade_amount_eur * 1021} sats`; - } - if (this.wants === 'EUR') { - youBuyData.innerText = `${this.trade_amount_eur} €`; - } - tradeDescDiv.append(youBuyData); - - const youSellText = document.createElement('p'); - youSellText.id = 'you-sell-title'; - youSellText.classList.add('offer-card-content-title'); - youSellText.innerText = 'Vendes'; - tradeDescDiv.append(youSellText); - - const youSellData = document.createElement('p'); - youSellData.classList.add('offer-card-content-data'); - if (this.wants === 'BTC') { - youSellData.innerText = `${this.trade_amount_eur} €`; - } - if (this.wants === 'EUR') { - youSellData.innerText = `${this.trade_amount_eur * 1021} sats`; - } - tradeDescDiv.append(youSellData); - - const premiumDescDiv = document.createElement('div'); - premiumDescDiv.classList.add('premium-desc'); - - const premiumTitle = document.createElement('p'); - premiumTitle.classList.add('offer-card-content-title'); - premiumTitle.innerText = 'Premium'; - premiumDescDiv.append(premiumTitle); - - const premiumData = document.createElement('p'); - premiumData.classList.add('offer-card-content-data'); - premiumData.innerText = `${this.premium * 100} %`; - premiumDescDiv.append(premiumData); - - const offerPriceTitle = document.createElement('p'); - offerPriceTitle.classList.add('offer-card-content-title'); - offerPriceTitle.innerText = 'Precio oferta'; - premiumDescDiv.append(offerPriceTitle); - - const offerPriceData = document.createElement('p'); - offerPriceData.classList.add('offer-card-content-data'); - offerPriceData.innerText = `90000 €/BTC`; - premiumDescDiv.append(offerPriceData); - - const marketPriceTitle = document.createElement('p'); - marketPriceTitle.classList.add('offer-card-content-title'); - marketPriceTitle.innerText = 'Precio mercado'; - premiumDescDiv.append(marketPriceTitle); - - const marketPriceData = document.createElement('p'); - marketPriceData.innerText = `88000 €/BTC`; - premiumDescDiv.append(marketPriceData); - - const whereDescDiv = document.createElement('div'); - whereDescDiv.classList.add('where-desc'); - - const whereDescTitle = document.createElement('p'); - whereDescTitle.classList.add('offer-card-content-title'); - whereDescTitle.innerText = 'Dónde'; - whereDescDiv.append(whereDescTitle); - - const whereDescData = document.createElement('p'); - whereDescData.classList.add('offer-long-text'); - whereDescData.innerText = `${this.location_details}`; - whereDescDiv.append(whereDescData); - - const whenDescDiv = document.createElement('div'); - whenDescDiv.classList.add('when-desc'); - - const whenDescTitle = document.createElement('p'); - whenDescTitle.classList.add('offer-card-content-title'); - whenDescTitle.innerText = 'Cúando'; - whenDescDiv.append(whenDescTitle); - - const whenDescData = document.createElement('p'); - whenDescData.classList.add('offer-long-text'); - whenDescData.innerText = `${this.time_availability_details}`; - whenDescDiv.append(whenDescData); - - const bitcoinMethodsDiv = document.createElement('div'); - bitcoinMethodsDiv.classList.add('bitcoin-methods-desc'); - - const bitcoinMethodsTitle = document.createElement('p'); - bitcoinMethodsTitle.classList.add('offer-card-content-title'); - bitcoinMethodsTitle.innerText = 'Protocolos Bitcoin aceptados'; - bitcoinMethodsDiv.append(bitcoinMethodsTitle); - - const onchainAcceptedContainer = document.createElement('div'); - onchainAcceptedContainer.classList.add('left-icon-checkboxed-field'); - if (this.is_onchain_accepted) { - const onchainIcon = document.createElement('img'); - onchainIcon.src = '/img/chains-lasecagold.svg'; - const onchainText = document.createElement('p'); - onchainText.innerText = 'Onchain'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); - } else { - const onchainIcon = document.createElement('img'); - onchainIcon.src = '/img/chains-gray.svg'; - const onchainText = document.createElement('p'); - onchainText.innerText = 'Onchain'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - onchainAcceptedContainer.append(onchainIcon, onchainText, checkIcon); - } - const lightningAcceptedContainer = document.createElement('div'); - - lightningAcceptedContainer.classList.add('left-icon-checkboxed-field'); - if (this.is_lightning_accepted) { - const lightningIcon = document.createElement('img'); - lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; - const lightningText = document.createElement('p'); - lightningText.innerText = 'Lightning'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - lightningAcceptedContainer.append( - lightningIcon, - lightningText, - checkIcon - ); - } else { - const lightningIcon = document.createElement('img'); - lightningIcon.src = '/img/bolt-lightning-gray.svg'; - const lightningText = document.createElement('p'); - lightningText.innerText = 'Lightning'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - lightningAcceptedContainer.append( - lightningIcon, - lightningText, - checkIcon - ); - } - - bitcoinMethodsDiv.append( - onchainAcceptedContainer, - lightningAcceptedContainer - ); - - const visibilityDiv = document.createElement('div'); - visibilityDiv.classList.add('visibility-desc'); - - const visibilityTitle = document.createElement('p'); - visibilityTitle.classList.add('offer-card-content-title'); - visibilityTitle.innerText = 'Visibilidad'; - visibilityDiv.append(visibilityTitle); - - const showOfferToTrustedContainer = document.createElement('div'); - showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field'); - - if (this.show_offer_to_trusted) { - const showOfferToTrustedIcon = document.createElement('img'); - showOfferToTrustedIcon.src = '/img/user-lasecagold.svg'; - const showOfferToTrustedText = document.createElement('p'); - showOfferToTrustedText.innerText = 'Confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToTrustedContainer.append( - showOfferToTrustedIcon, - showOfferToTrustedText, - checkIcon - ); - } else { - const showOfferToTrustedIcon = document.createElement('img'); - showOfferToTrustedIcon.src = '/img/user-gray.svg'; - const showOfferToTrustedText = document.createElement('p'); - showOfferToTrustedText.innerText = 'Confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToTrustedContainer.append( - showOfferToTrustedIcon, - showOfferToTrustedText, - checkIcon - ); - } - - const showOfferToTrustedTrustedContainer = document.createElement('div'); - showOfferToTrustedTrustedContainer.classList.add( - 'right-icon-checkboxed-field' - ); - - if (this.show_offer_to_trusted_trusted) { - const showOfferToTrustedTrustedIcon = document.createElement('img'); - showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg'; - const showOfferToTrustedTrustedText = document.createElement('p'); - showOfferToTrustedTrustedText.innerText = 'Sus confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToTrustedTrustedContainer.append( - showOfferToTrustedTrustedIcon, - showOfferToTrustedTrustedText, - checkIcon - ); - } else { - const showOfferToTrustedTrustedIcon = document.createElement('img'); - showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg'; - const showOfferToTrustedTrustedText = document.createElement('p'); - showOfferToTrustedTrustedText.innerText = 'Sus confiados'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToTrustedTrustedContainer.append( - showOfferToTrustedTrustedIcon, - showOfferToTrustedTrustedText, - checkIcon - ); - } - - const showOfferToAllMembersContainer = document.createElement('div'); - showOfferToAllMembersContainer.classList.add('right-icon-checkboxed-field'); - - if (this.show_offer_to_all_members) { - const showOfferToAllMembersIcon = document.createElement('img'); - showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg'; - const showOfferToAllMembersText = document.createElement('p'); - showOfferToAllMembersText.innerText = 'Todos'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - showOfferToAllMembersContainer.append( - showOfferToAllMembersIcon, - showOfferToAllMembersText, - checkIcon - ); - } else { - const showOfferToAllMembersIcon = document.createElement('img'); - showOfferToAllMembersIcon.src = '/img/many-users-gray.svg'; - const showOfferToAllMembersText = document.createElement('p'); - showOfferToAllMembersText.innerText = 'Todos'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - showOfferToAllMembersContainer.append( - showOfferToAllMembersIcon, - showOfferToAllMembersText, - checkIcon - ); - } - visibilityDiv.append( - showOfferToTrustedContainer, - showOfferToTrustedTrustedContainer, - showOfferToAllMembersContainer - ); - - const otherOfferFeaturesDiv = document.createElement('div'); - otherOfferFeaturesDiv.classList.add('other-desc'); - - const otherOfferFeaturesTitle = document.createElement('p'); - otherOfferFeaturesTitle.classList.add('offer-card-content-title'); - otherOfferFeaturesTitle.innerText = 'Otros'; - otherOfferFeaturesDiv.append(otherOfferFeaturesTitle); - - const areBigNotesAcceptedContainer = document.createElement('div'); - areBigNotesAcceptedContainer.classList.add('left-icon-checkboxed-field'); - - if (this.are_big_notes_accepted) { - const areBigNotesAcceptedIcon = document.createElement('img'); - areBigNotesAcceptedIcon.src = '/img/eur-bill-lasecagold.svg'; - const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-check-green.svg'; - - areBigNotesAcceptedContainer.append( - areBigNotesAcceptedIcon, - areBigNotesAcceptedText, - checkIcon - ); - } else { - const areBigNotesAcceptedIcon = document.createElement('img'); - areBigNotesAcceptedIcon.src = '/img/eur-bill-gray.svg'; - const areBigNotesAcceptedText = document.createElement('p'); - areBigNotesAcceptedText.innerText = 'Billetes grandes'; - const checkIcon = document.createElement('img'); - checkIcon.src = '/img/circle-xmark-gray.svg'; - - areBigNotesAcceptedContainer.append( - areBigNotesAcceptedIcon, - areBigNotesAcceptedText, - checkIcon - ); - } - - otherOfferFeaturesDiv.append(areBigNotesAcceptedContainer); - - const actionButtonsArea = document.createElement('p'); - actionButtonsArea.classList.add('offer-action-buttons-area'); - - const editActionArea = document.createElement('div'); - editActionArea.classList.add('offer-action-area'); - editActionArea.classList.add('subtle-box'); - const editActionIcon = document.createElement('img'); - editActionIcon.src = '/img/edit.svg'; - const editActionText = document.createElement('p'); - editActionText.innerText = 'Editar'; - editActionArea.append(editActionIcon, editActionText); - - const deleteActionArea = document.createElement('div'); - deleteActionArea.classList.add('offer-action-area'); - deleteActionArea.classList.add('subtle-box'); - const deleteActionIcon = document.createElement('img'); - deleteActionIcon.src = '/img/trash-can-darkred.svg'; - const deleteActionText = document.createElement('p'); - deleteActionText.innerText = 'Eliminar'; - deleteActionArea.append(deleteActionIcon, deleteActionText); - deleteActionArea.addEventListener('click', async () => { - await deleteOfferByUuid(this.uuid); - await myOffers.getOffersFromApi(); - await myOffers.render(); - toggleOfferDeletedAlert(); - }); - - actionButtonsArea.append(editActionArea, deleteActionArea); - - offerCard.append( - tradeDescDiv, - premiumDescDiv, - whereDescDiv, - whenDescDiv, - bitcoinMethodsDiv, - visibilityDiv, - otherOfferFeaturesDiv, - actionButtonsArea - ); - - return offerCard; - } -} - -class MyOffers { - constructor(ownOffersContainerElement) { - this.ownOffersContainerElement = ownOffersContainerElement; - this.offers = []; - } - - async getOffersFromApi() { - const offersResponse = await fetch('/api/publickey-offers'); - - this.offers = []; - - const offersData = (await offersResponse.json()).data; - if (offersResponse.ok) { - for (const record of offersData) { - this.offers.push(new Offer(record)); - } - } - } - - async render() { - if (this.offers.length === 0) { - this.ownOffersContainerElement.innerHTML = - '

Vaya, no hay nada por aquí...

'; - return; - } - this.ownOffersContainerElement.innerHTML = ''; - - for (const someOffer of this.offers) { - this.ownOffersContainerElement.append(someOffer.buildHTML()); - } - } -} - -async function deleteOfferByUuid(offerUuid) { - await fetch(`/api/offer/${offerUuid}`, { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json', - }, - }); -} - -buttonStartCreateOffer.addEventListener('click', () => { - toggleCreateOfferModal(); -}); - -buttonViewMyOffers.addEventListener('click', async () => { - await myOffers.getOffersFromApi(); - await myOffers.render(); - toggleViewMyOffersPanel(); -}); - -closeOffer.addEventListener('click', () => { - toggleCreateOfferModal(); -}); - -buyOrSellButtons.forEach((button) => { - button.addEventListener('click', () => { - toggleBuyOrSellButtonGroup(); - }); -}); - -buttonIncreasePremium.addEventListener('click', () => { - modifyPremiumValue(1); -}); - -buttonDecreasePremium.addEventListener('click', () => { - modifyPremiumValue(-1); -}); - -eurAmountInput.addEventListener('blur', () => { - validateAndFormatEurAmountInput(); - updateBtcInput(); -}); - -eurAmountInput.addEventListener('input', () => { - eurAmountInput.value = eurAmountInput.value.replace(/[^0-9]/g, ''); - updateBtcInput(); -}); - -for (const btcMethodCheckbox of btcMethodCheckboxes) { - btcMethodCheckbox.addEventListener('click', () => { - validateBitcoinMethodCheckboxes(btcMethodCheckbox); - }); -} - -myTrustedTrustedCheckbox.addEventListener('click', () => { - applyTrustCheckboxConstraints(myTrustedTrustedCheckbox); -}); - -allMembersCheckbox.addEventListener('click', () => { - applyTrustCheckboxConstraints(allMembersCheckbox); -}); - -publishOfferButton.addEventListener('click', async () => { - await publishOffer(); - await myOffers.getOffersFromApi(); - await myOffers.render(); -}); - -updateBtcInput(); - -const myOffers = new MyOffers(ownOffersContainer);