From 971282f01fe95cde82fcd37648f0e6ecb945d946 Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 9 Apr 2025 18:16:43 +0200 Subject: [PATCH 01/10] remove ids --- src/front/components/BigNotesCheckbox.js | 1 - src/front/pages/offers.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/front/components/BigNotesCheckbox.js b/src/front/components/BigNotesCheckbox.js index 005502c..6361a72 100644 --- a/src/front/components/BigNotesCheckbox.js +++ b/src/front/components/BigNotesCheckbox.js @@ -7,7 +7,6 @@ class BigNotesCheckbox { render() { const container = document.createElement('div'); - container.id = 'large-bills-area'; container.className = 'checkbox-row'; const checkbox = document.createElement('input'); diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index 95ccde8..bb0b8ed 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -158,7 +158,6 @@ class CreateOfferModal { this.trustCheckboxes.render(); const otherDiv = document.createElement('div'); - otherDiv.id = 'other-area'; otherDiv.className = 'create-offer-step'; const otherHeading = document.createElement('h3'); otherHeading.textContent = 'Extras'; From 1e02957bdca18b7a300d3f06625662e66efb59da Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 9 Apr 2025 18:17:40 +0200 Subject: [PATCH 02/10] class-ify some id-fied styles --- public/css/offers.css | 4 ++-- src/front/pages/offers.js | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/public/css/offers.css b/public/css/offers.css index 6942f0a..4d10d6e 100644 --- a/public/css/offers.css +++ b/public/css/offers.css @@ -243,7 +243,7 @@ margin-top: 0; } -#close-offer-controls-area { +.close-offer-controls-area { display: flex; justify-content: end; } @@ -386,7 +386,7 @@ width: 33%; } -#close-offer { +.close-offer { margin-left: auto; margin-right: auto; } diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index bb0b8ed..3eba71d 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -184,10 +184,9 @@ class CreateOfferModal { this.publishOfferButton.render(); const closeButtonArea = document.createElement('div'); - closeButtonArea.id = 'close-offer-controls-area'; + closeButtonArea.className = 'close-offer-controls-area'; const closeButton = document.createElement('button'); - closeButton.id = 'close-offer'; - closeButton.className = 'button-secondary button-medium'; + closeButton.className = 'close-offer button-secondary button-medium'; closeButton.textContent = 'Volver'; closeButtonArea.appendChild(closeButton); From fa0b56d2a6bcf2e6303f520b4006ab5d47bcd49a Mon Sep 17 00:00:00 2001 From: counterweight Date: Thu, 10 Apr 2025 08:44:04 +0200 Subject: [PATCH 03/10] close button works --- src/front/components/CloseModalButton.js | 21 +++++++++++++++++ src/front/pages/offers.js | 30 +++++++++--------------- 2 files changed, 32 insertions(+), 19 deletions(-) create mode 100644 src/front/components/CloseModalButton.js diff --git a/src/front/components/CloseModalButton.js b/src/front/components/CloseModalButton.js new file mode 100644 index 0000000..b857ea5 --- /dev/null +++ b/src/front/components/CloseModalButton.js @@ -0,0 +1,21 @@ +class CloseModalButton { + constructor({ parentElement, id, onClickCallback }) { + this.element = null; + this.parentElement = parentElement; + this.id = id; + this.onClickCallback = onClickCallback; + } + + render() { + const closeButton = document.createElement('button'); + closeButton.className = 'close-offer button-secondary button-medium'; + closeButton.textContent = 'Volver'; + + closeButton.addEventListener('click', this.onClickCallback); + + this.element = closeButton; + this.parentElement.appendChild(this.element); + } +} + +module.exports = CloseModalButton; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index 3eba71d..b7dcd2d 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -8,6 +8,7 @@ const TimeInput = require('../components/TimeInput'); const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes'); const TrustCheckboxes = require('../components/TrustCheckboxes'); const BigNotesCheckbox = require('../components/BigNotesCheckbox'); +const CloseModalButton = require('../components/CloseModalButton'); const PopupNotification = require('../components/PopupNotification'); const offerService = require('../services/offerService'); @@ -179,16 +180,21 @@ class CreateOfferModal { onClickCallback: async () => { await this.createOffer(); await this.onCreationCallback(); + this.toggle(); }, }); this.publishOfferButton.render(); const closeButtonArea = document.createElement('div'); closeButtonArea.className = 'close-offer-controls-area'; - const closeButton = document.createElement('button'); - closeButton.className = 'close-offer button-secondary button-medium'; - closeButton.textContent = 'Volver'; - closeButtonArea.appendChild(closeButton); + const closeButton = new CloseModalButton({ + parentElement: closeButtonArea, + onClickCallback: () => { + this.toggle(); + }, + }); + + closeButton.render(); controls.appendChild(submitButtonArea); controls.appendChild(closeButtonArea); @@ -234,8 +240,6 @@ class CreateOfferModal { }; await this.offerService.createOffer(offerDetails); - - this.toggle(); } } @@ -278,18 +282,10 @@ function offersPage() { '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 ownOffersContainer = document.getElementById('own-offers-container'); - function toggleCreateOfferModal() { - createOfferModalRoot.classList.toggle('shown'); - } - function toggleViewMyOffersPanel() { viewMyOffersRoot.style.display = viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; @@ -714,7 +710,7 @@ function offersPage() { } buttonStartCreateOffer.addEventListener('click', () => { - toggleCreateOfferModal(); + createOfferModal.toggle(); }); buttonViewMyOffers.addEventListener('click', async () => { @@ -723,10 +719,6 @@ function offersPage() { toggleViewMyOffersPanel(); }); - closeOffer.addEventListener('click', () => { - toggleCreateOfferModal(); - }); - const myOffers = new MyOffers(ownOffersContainer); } From d836c67c5886da26573615677a38db4756adc0e1 Mon Sep 17 00:00:00 2001 From: counterweight Date: Thu, 10 Apr 2025 08:56:49 +0200 Subject: [PATCH 04/10] less ids --- public/css/offers.css | 2 +- src/front/pages/offers.js | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/public/css/offers.css b/public/css/offers.css index 4d10d6e..577cc52 100644 --- a/public/css/offers.css +++ b/public/css/offers.css @@ -221,7 +221,7 @@ font-size: 0.9em; } -#create-offer-controls { +.create-offer-controls { text-align: center; overflow-y: auto; max-height: 800px; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index b7dcd2d..971722a 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -14,7 +14,6 @@ const PopupNotification = require('../components/PopupNotification'); const offerService = require('../services/offerService'); class CreateOfferModal { - // Stop relying on IDs constructor({ parentElement, onCreationCallback, offerService }) { this.element = null; this.parentElement = parentElement; @@ -35,15 +34,13 @@ class CreateOfferModal { render() { const modalRoot = document.createElement('div'); this.element = modalRoot; - modalRoot.id = 'create-offer-modal-root'; modalRoot.className = 'full-screen-modal-background'; const modal = document.createElement('div'); modal.className = 'full-screen-modal'; - modal.id = 'create-offer-root'; const controls = document.createElement('div'); - controls.id = 'create-offer-controls'; + controls.className = 'create-offer-controls'; const title = document.createElement('h2'); title.textContent = 'Añade los detalles de tu oferta'; @@ -94,7 +91,6 @@ class CreateOfferModal { }); const amountDiv = document.createElement('div'); - amountDiv.id = 'amount-area'; amountDiv.className = 'create-offer-step'; const amountHeading = document.createElement('h3'); amountHeading.textContent = '¿Cuánto?'; @@ -334,7 +330,6 @@ function offersPage() { 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); From 1bd4aa40e639ac89812c14c216273594946677b0 Mon Sep 17 00:00:00 2001 From: counterweight Date: Thu, 10 Apr 2025 08:58:51 +0200 Subject: [PATCH 05/10] move to component file --- src/front/components/CreateOfferModal.js | 239 +++++++++++++++++++++++ src/front/pages/offers.js | 238 +--------------------- 2 files changed, 240 insertions(+), 237 deletions(-) create mode 100644 src/front/components/CreateOfferModal.js diff --git a/src/front/components/CreateOfferModal.js b/src/front/components/CreateOfferModal.js new file mode 100644 index 0000000..b5301d1 --- /dev/null +++ b/src/front/components/CreateOfferModal.js @@ -0,0 +1,239 @@ +const PublishOfferButton = require('./PublishOfferButton'); +const BuyOrSellButtonGroup = require('./BuyOrSellButtonGroup'); +const PremiumSelector = require('./PremiumSelector'); +const PriceDisplay = require('./PriceDisplay'); +const AmountInput = require('./AmountInput'); +const PlaceInput = require('./PlaceInput'); +const TimeInput = require('./TimeInput'); +const BitcoinMethodCheckboxes = require('./BitcoinMethodCheckboxes'); +const TrustCheckboxes = require('./TrustCheckboxes'); +const BigNotesCheckbox = require('./BigNotesCheckbox'); +const CloseModalButton = require('./CloseModalButton'); + +class CreateOfferModal { + constructor({ parentElement, onCreationCallback, offerService }) { + this.element = null; + this.parentElement = parentElement; + this.onCreationCallback = onCreationCallback; + this.offerService = offerService; + + this.publishOfferButton = null; + this.buyOrSellButtonGroup = null; + this.premiumSelector = null; + this.amountInput = null; + this.placeInput = null; + this.timeInput = null; + this.btcMethodCheckboxes = null; + this.trustCheckboxes = null; + this.bigNotesCheckbox = null; + } + + render() { + const modalRoot = document.createElement('div'); + this.element = modalRoot; + modalRoot.className = 'full-screen-modal-background'; + + const modal = document.createElement('div'); + modal.className = 'full-screen-modal'; + + const controls = document.createElement('div'); + controls.className = 'create-offer-controls'; + + const title = document.createElement('h2'); + title.textContent = 'Añade los detalles de tu oferta'; + controls.appendChild(title); + + const buyOrSellDiv = document.createElement('div'); + buyOrSellDiv.className = 'create-offer-step'; + this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({ + parentElement: buyOrSellDiv, + }); + this.buyOrSellButtonGroup.render(); + controls.appendChild(buyOrSellDiv); + + const premiumDiv = document.createElement('div'); + premiumDiv.classList = 'premium-area'; + premiumDiv.className = 'create-offer-step'; + const premiumHeading = document.createElement('h3'); + premiumHeading.textContent = 'Premium'; + premiumDiv.appendChild(premiumHeading); + const premiumContentDiv = document.createElement('div'); + premiumContentDiv.classList = 'premium-content-area'; + premiumDiv.appendChild(premiumContentDiv); + controls.appendChild(premiumDiv); + + const createOfferEventBus = new EventTarget(); + + const mockPriceProvidingCallback = () => { + return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000); + }; + + this.premiumSelector = new PremiumSelector({ + parentElement: premiumContentDiv, + eventSink: createOfferEventBus, + }); + this.premiumSelector.render(); + + const priceDisplay = new PriceDisplay({ + parentElement: premiumContentDiv, + id: 'premium-price-display-area', + premiumProvidingCallback: () => { + return this.premiumSelector.getPremium(); + }, + priceProvidingCallback: mockPriceProvidingCallback, + }); + priceDisplay.render(); + createOfferEventBus.addEventListener('premium-changed', () => { + priceDisplay.updatePrices(); + }); + + const amountDiv = document.createElement('div'); + amountDiv.className = 'create-offer-step'; + const amountHeading = document.createElement('h3'); + amountHeading.textContent = '¿Cuánto?'; + amountDiv.appendChild(amountHeading); + controls.appendChild(amountDiv); + + this.amountInput = new AmountInput({ + parentElement: amountDiv, + }); + + this.amountInput.render(); + + const placeTimeDiv = document.createElement('div'); + placeTimeDiv.className = 'create-offer-step'; + const placeTimeHeading = document.createElement('h3'); + placeTimeHeading.textContent = '¿Dónde y cuándo?'; + placeTimeDiv.appendChild(placeTimeHeading); + const placeTimeContentDiv = document.createElement('div'); + placeTimeDiv.appendChild(placeTimeContentDiv); + controls.appendChild(placeTimeDiv); + + this.placeInput = new PlaceInput({ + parentElement: placeTimeContentDiv, + }); + + this.placeInput.render(); + + this.timeInput = new TimeInput({ + parentElement: placeTimeContentDiv, + }); + + this.timeInput.render(); + + const bitcoinMethodsDiv = document.createElement('div'); + bitcoinMethodsDiv.className = 'create-offer-step'; + const bitcoinMethodsHeading = document.createElement('h3'); + bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?'; + bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading); + const bitcoinMethodsContentDiv = document.createElement('div'); + bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv); + controls.appendChild(bitcoinMethodsDiv); + + this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({ + parentElement: bitcoinMethodsContentDiv, + }); + + this.btcMethodCheckboxes.render(); + + const trustDiv = document.createElement('div'); + trustDiv.className = 'create-offer-step'; + const trustHeading = document.createElement('h3'); + trustHeading.textContent = '¿Quién puede ver la oferta?'; + trustDiv.appendChild(trustHeading); + const trustContentDiv = document.createElement('div'); + trustDiv.appendChild(trustContentDiv); + controls.appendChild(trustDiv); + + this.trustCheckboxes = new TrustCheckboxes({ + parentElement: trustContentDiv, + }); + + this.trustCheckboxes.render(); + + const otherDiv = document.createElement('div'); + otherDiv.className = 'create-offer-step'; + const otherHeading = document.createElement('h3'); + otherHeading.textContent = 'Extras'; + otherDiv.appendChild(otherHeading); + controls.appendChild(otherDiv); + + this.bigNotesCheckbox = new BigNotesCheckbox({ + parentElement: otherDiv, + }); + + this.bigNotesCheckbox.render(); + //Continue moving components up here + + const submitButtonArea = document.createElement('div'); + submitButtonArea.classList.add('submit-button-area'); + this.publishOfferButton = new PublishOfferButton({ + parentElement: submitButtonArea, + id: 'button-submit-offer', + onClickCallback: async () => { + await this.createOffer(); + await this.onCreationCallback(); + this.toggle(); + }, + }); + this.publishOfferButton.render(); + + const closeButtonArea = document.createElement('div'); + closeButtonArea.className = 'close-offer-controls-area'; + const closeButton = new CloseModalButton({ + parentElement: closeButtonArea, + onClickCallback: () => { + this.toggle(); + }, + }); + + closeButton.render(); + + controls.appendChild(submitButtonArea); + controls.appendChild(closeButtonArea); + + modal.appendChild(controls); + modalRoot.appendChild(modal); + + this.parentElement.appendChild(this.element); + } + + toggle() { + this.element.classList.toggle('shown'); + } + + async createOffer() { + const wants = this.buyOrSellButtonGroup.wants(); + + const premium = this.premiumSelector.getPremium(); + const trade_amount_eur = this.amountInput.intEurAmount; + const location_details = this.placeInput.inputText; + const time_availability_details = this.timeInput.inputText; + const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted; + const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted; + const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted; + const show_offer_to_trusted_trusted = + this.trustCheckboxes.showOfferToTrustedTrusted; + const show_offer_to_all_members = + this.trustCheckboxes.showOfferToAllMembers; + const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted; + + 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 this.offerService.createOffer(offerDetails); + } +} + +module.exports = CreateOfferModal; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index 971722a..a88e96b 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -1,244 +1,8 @@ -const PublishOfferButton = require('../components/PublishOfferButton'); -const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup'); -const PremiumSelector = require('../components/PremiumSelector'); -const PriceDisplay = require('../components/PriceDisplay'); -const AmountInput = require('../components/AmountInput'); -const PlaceInput = require('../components/PlaceInput'); -const TimeInput = require('../components/TimeInput'); -const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes'); -const TrustCheckboxes = require('../components/TrustCheckboxes'); -const BigNotesCheckbox = require('../components/BigNotesCheckbox'); -const CloseModalButton = require('../components/CloseModalButton'); const PopupNotification = require('../components/PopupNotification'); +const CreateOfferModal = require('../components/CreateOfferModal'); const offerService = require('../services/offerService'); -class CreateOfferModal { - constructor({ parentElement, onCreationCallback, offerService }) { - this.element = null; - this.parentElement = parentElement; - this.onCreationCallback = onCreationCallback; - this.offerService = offerService; - - this.publishOfferButton = null; - this.buyOrSellButtonGroup = null; - this.premiumSelector = null; - this.amountInput = null; - this.placeInput = null; - this.timeInput = null; - this.btcMethodCheckboxes = null; - this.trustCheckboxes = null; - this.bigNotesCheckbox = null; - } - - render() { - const modalRoot = document.createElement('div'); - this.element = modalRoot; - modalRoot.className = 'full-screen-modal-background'; - - const modal = document.createElement('div'); - modal.className = 'full-screen-modal'; - - const controls = document.createElement('div'); - controls.className = 'create-offer-controls'; - - const title = document.createElement('h2'); - title.textContent = 'Añade los detalles de tu oferta'; - controls.appendChild(title); - - const buyOrSellDiv = document.createElement('div'); - buyOrSellDiv.className = 'create-offer-step'; - this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({ - parentElement: buyOrSellDiv, - }); - this.buyOrSellButtonGroup.render(); - controls.appendChild(buyOrSellDiv); - - const premiumDiv = document.createElement('div'); - premiumDiv.classList = 'premium-area'; - premiumDiv.className = 'create-offer-step'; - const premiumHeading = document.createElement('h3'); - premiumHeading.textContent = 'Premium'; - premiumDiv.appendChild(premiumHeading); - const premiumContentDiv = document.createElement('div'); - premiumContentDiv.classList = 'premium-content-area'; - premiumDiv.appendChild(premiumContentDiv); - controls.appendChild(premiumDiv); - - const createOfferEventBus = new EventTarget(); - - const mockPriceProvidingCallback = () => { - return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000); - }; - - this.premiumSelector = new PremiumSelector({ - parentElement: premiumContentDiv, - eventSink: createOfferEventBus, - }); - this.premiumSelector.render(); - - const priceDisplay = new PriceDisplay({ - parentElement: premiumContentDiv, - id: 'premium-price-display-area', - premiumProvidingCallback: () => { - return this.premiumSelector.getPremium(); - }, - priceProvidingCallback: mockPriceProvidingCallback, - }); - priceDisplay.render(); - createOfferEventBus.addEventListener('premium-changed', () => { - priceDisplay.updatePrices(); - }); - - const amountDiv = document.createElement('div'); - amountDiv.className = 'create-offer-step'; - const amountHeading = document.createElement('h3'); - amountHeading.textContent = '¿Cuánto?'; - amountDiv.appendChild(amountHeading); - controls.appendChild(amountDiv); - - this.amountInput = new AmountInput({ - parentElement: amountDiv, - }); - - this.amountInput.render(); - - const placeTimeDiv = document.createElement('div'); - placeTimeDiv.className = 'create-offer-step'; - const placeTimeHeading = document.createElement('h3'); - placeTimeHeading.textContent = '¿Dónde y cuándo?'; - placeTimeDiv.appendChild(placeTimeHeading); - const placeTimeContentDiv = document.createElement('div'); - placeTimeDiv.appendChild(placeTimeContentDiv); - controls.appendChild(placeTimeDiv); - - this.placeInput = new PlaceInput({ - parentElement: placeTimeContentDiv, - }); - - this.placeInput.render(); - - this.timeInput = new TimeInput({ - parentElement: placeTimeContentDiv, - }); - - this.timeInput.render(); - - const bitcoinMethodsDiv = document.createElement('div'); - bitcoinMethodsDiv.className = 'create-offer-step'; - const bitcoinMethodsHeading = document.createElement('h3'); - bitcoinMethodsHeading.textContent = '¿Cómo se mueve el Bitcoin?'; - bitcoinMethodsDiv.appendChild(bitcoinMethodsHeading); - const bitcoinMethodsContentDiv = document.createElement('div'); - bitcoinMethodsDiv.appendChild(bitcoinMethodsContentDiv); - controls.appendChild(bitcoinMethodsDiv); - - this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({ - parentElement: bitcoinMethodsContentDiv, - }); - - this.btcMethodCheckboxes.render(); - - const trustDiv = document.createElement('div'); - trustDiv.className = 'create-offer-step'; - const trustHeading = document.createElement('h3'); - trustHeading.textContent = '¿Quién puede ver la oferta?'; - trustDiv.appendChild(trustHeading); - const trustContentDiv = document.createElement('div'); - trustDiv.appendChild(trustContentDiv); - controls.appendChild(trustDiv); - - this.trustCheckboxes = new TrustCheckboxes({ - parentElement: trustContentDiv, - }); - - this.trustCheckboxes.render(); - - const otherDiv = document.createElement('div'); - otherDiv.className = 'create-offer-step'; - const otherHeading = document.createElement('h3'); - otherHeading.textContent = 'Extras'; - otherDiv.appendChild(otherHeading); - controls.appendChild(otherDiv); - - this.bigNotesCheckbox = new BigNotesCheckbox({ - parentElement: otherDiv, - }); - - this.bigNotesCheckbox.render(); - //Continue moving components up here - - const submitButtonArea = document.createElement('div'); - submitButtonArea.classList.add('submit-button-area'); - this.publishOfferButton = new PublishOfferButton({ - parentElement: submitButtonArea, - id: 'button-submit-offer', - onClickCallback: async () => { - await this.createOffer(); - await this.onCreationCallback(); - this.toggle(); - }, - }); - this.publishOfferButton.render(); - - const closeButtonArea = document.createElement('div'); - closeButtonArea.className = 'close-offer-controls-area'; - const closeButton = new CloseModalButton({ - parentElement: closeButtonArea, - onClickCallback: () => { - this.toggle(); - }, - }); - - closeButton.render(); - - controls.appendChild(submitButtonArea); - controls.appendChild(closeButtonArea); - - modal.appendChild(controls); - modalRoot.appendChild(modal); - - this.parentElement.appendChild(this.element); - } - - toggle() { - this.element.classList.toggle('shown'); - } - - async createOffer() { - const wants = this.buyOrSellButtonGroup.wants(); - - const premium = this.premiumSelector.getPremium(); - const trade_amount_eur = this.amountInput.intEurAmount; - const location_details = this.placeInput.inputText; - const time_availability_details = this.timeInput.inputText; - const is_onchain_accepted = this.btcMethodCheckboxes.isOnchainAccepted; - const is_lightning_accepted = this.btcMethodCheckboxes.isLightningAccepted; - const show_offer_to_trusted = this.trustCheckboxes.showOfferToTrusted; - const show_offer_to_trusted_trusted = - this.trustCheckboxes.showOfferToTrustedTrusted; - const show_offer_to_all_members = - this.trustCheckboxes.showOfferToAllMembers; - const are_big_notes_accepted = this.bigNotesCheckbox.areBigNotesAccepted; - - 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 this.offerService.createOffer(offerDetails); - } -} - function offersPage() { const offerCreatedPopup = new PopupNotification({ parentElement: document.body, From 042bb43d9ce745531deed9438f42efc216e2afee Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 16 Apr 2025 16:38:10 +0200 Subject: [PATCH 06/10] fix some css for small screen --- public/css/offers.css | 2 -- public/css/seca.css | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/css/offers.css b/public/css/offers.css index 577cc52..6a4e706 100644 --- a/public/css/offers.css +++ b/public/css/offers.css @@ -223,8 +223,6 @@ .create-offer-controls { text-align: center; - overflow-y: auto; - max-height: 800px; padding: 20px; } diff --git a/public/css/seca.css b/public/css/seca.css index 1cc3034..35b6217 100644 --- a/public/css/seca.css +++ b/public/css/seca.css @@ -141,6 +141,8 @@ h1 { padding: 10px; width: fit-content; max-width: 95%; + max-height: 90vh; + overflow: auto; margin: 20px auto; } From 371204785d77554498f28768a0cd7e068badec1c Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 16 Apr 2025 16:41:39 +0200 Subject: [PATCH 07/10] refactor Offer to OfferCard --- src/front/pages/offers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index a88e96b..de827b2 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -50,7 +50,7 @@ function offersPage() { viewMyOffersRoot.style.display = viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; } - class Offer { + class OfferCard { constructor(offerData) { this.uuid = offerData.uuid; this.public_key = offerData.public_key; @@ -440,7 +440,7 @@ function offersPage() { const offersData = (await offersResponse.json()).data; if (offersResponse.ok) { for (const record of offersData) { - this.offers.push(new Offer(record)); + this.offers.push(new OfferCard(record)); } } } From 2da553f4d6cf540403ad386c743d5648d6844552 Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 16 Apr 2025 16:56:02 +0200 Subject: [PATCH 08/10] some opportunistic refactors --- src/front/services/loginService.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/front/services/loginService.js b/src/front/services/loginService.js index e97196a..852b438 100644 --- a/src/front/services/loginService.js +++ b/src/front/services/loginService.js @@ -4,14 +4,9 @@ const requestAndRespondLoginChallenge = async ({ onRejectedPubKeyCallback, onRejectedSignatureCallback, }) => { - onRejectedPubKeyCallback = () => { - document.querySelector('#rejected-nostr-nudges').style.display = 'block'; - }; - onRejectedSignatureCallback = onRejectedPubKeyCallback; - let challengeResponse; try { - challengeResponse = await fetch('/api/login/nostr-challenge', { + challengeResponse = await fetch(constants.API_PATHS.loginNostrChallenge, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -49,7 +44,7 @@ const requestAndRespondLoginChallenge = async ({ let verifyResponse; try { - verifyResponse = await fetch('/api/login/nostr-verify', { + verifyResponse = await fetch(constants.API_PATHS.loginNostrVerify, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(signedEvent), From 6ac1f96ee38c3ee1376359aa2d7a6d87d2110348 Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 16 Apr 2025 16:56:10 +0200 Subject: [PATCH 09/10] extract offercard component --- src/front/components/OfferCard.js | 374 ++++++++++++++++++++++++++++ src/front/pages/offers.js | 388 +----------------------------- 2 files changed, 386 insertions(+), 376 deletions(-) create mode 100644 src/front/components/OfferCard.js diff --git a/src/front/components/OfferCard.js b/src/front/components/OfferCard.js new file mode 100644 index 0000000..5c11452 --- /dev/null +++ b/src/front/components/OfferCard.js @@ -0,0 +1,374 @@ +class OfferCard { + constructor({ offerData, deleteButtonCallback }) { + 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; + + this.deleteButtonCallback = deleteButtonCallback; + } + + 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.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 this.deleteButtonCallback(); + }); + + actionButtonsArea.append(editActionArea, deleteActionArea); + + offerCard.append( + tradeDescDiv, + premiumDescDiv, + whereDescDiv, + whenDescDiv, + bitcoinMethodsDiv, + visibilityDiv, + otherOfferFeaturesDiv, + actionButtonsArea + ); + + return offerCard; + } +} + +module.exports = OfferCard; diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index de827b2..04ebc55 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -1,5 +1,6 @@ const PopupNotification = require('../components/PopupNotification'); const CreateOfferModal = require('../components/CreateOfferModal'); +const OfferCard = require('../components/OfferCard'); const offerService = require('../services/offerService'); @@ -50,381 +51,6 @@ function offersPage() { viewMyOffersRoot.style.display = viewMyOffersRoot.style.display === 'block' ? 'none' : 'block'; } - class OfferCard { - 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.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(); - offerDeletedPopup.displayTemporarily(3000); - }); - - actionButtonsArea.append(editActionArea, deleteActionArea); - - offerCard.append( - tradeDescDiv, - premiumDescDiv, - whereDescDiv, - whenDescDiv, - bitcoinMethodsDiv, - visibilityDiv, - otherOfferFeaturesDiv, - actionButtonsArea - ); - - return offerCard; - } - } class MyOffers { constructor(ownOffersContainerElement) { @@ -440,7 +66,17 @@ function offersPage() { const offersData = (await offersResponse.json()).data; if (offersResponse.ok) { for (const record of offersData) { - this.offers.push(new OfferCard(record)); + this.offers.push( + new OfferCard({ + offerData: record, + deleteButtonCallback: async () => { + await deleteOfferByUuid(record.uuid); + await this.getOffersFromApi(); + await this.render(); + offerDeletedPopup.displayTemporarily(3000); + }, + }) + ); } } } From 2aa61f46dbda1523e53bac4c7cf947a1cbea3d8c Mon Sep 17 00:00:00 2001 From: counterweight Date: Wed, 16 Apr 2025 19:44:22 +0200 Subject: [PATCH 10/10] transfer delete offer to service --- src/front/pages/offers.js | 11 +---------- src/front/services/offerService.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js index 04ebc55..01c6ab3 100644 --- a/src/front/pages/offers.js +++ b/src/front/pages/offers.js @@ -70,7 +70,7 @@ function offersPage() { new OfferCard({ offerData: record, deleteButtonCallback: async () => { - await deleteOfferByUuid(record.uuid); + await offerService.deleteOffer(record.uuid); await this.getOffersFromApi(); await this.render(); offerDeletedPopup.displayTemporarily(3000); @@ -95,15 +95,6 @@ function offersPage() { } } - async function deleteOfferByUuid(offerUuid) { - await fetch(`/api/offer/${offerUuid}`, { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json', - }, - }); - } - buttonStartCreateOffer.addEventListener('click', () => { createOfferModal.toggle(); }); diff --git a/src/front/services/offerService.js b/src/front/services/offerService.js index 7b5151c..591a0f0 100644 --- a/src/front/services/offerService.js +++ b/src/front/services/offerService.js @@ -10,6 +10,16 @@ const createOffer = async (offerDetails) => { }); }; +const deleteOffer = async (offerUuid) => { + await fetch(`${constants.API_PATHS.offer}/${offerUuid}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }); +}; + module.exports = { createOffer, + deleteOffer, };