diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js
index f60febf..f0435a3 100644
--- a/src/front/pages/offers.js
+++ b/src/front/pages/offers.js
@@ -9,88 +9,253 @@ const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes')
const TrustCheckboxes = require('../components/TrustCheckboxes');
const BigNotesCheckbox = require('../components/BigNotesCheckbox');
+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);
+}
+
+class CreateOfferModal {
+ constructor({ parentElement }) {
+ this.element = null;
+ this.parentElement = parentElement;
+
+ 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.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';
+
+ const title = document.createElement('h2');
+ title.textContent = 'Añade los detalles de tu oferta';
+
+ const sections = [
+ { id: 'buy-or-sell-area', class: 'create-offer-step', title: '' },
+ {
+ id: 'premium-area',
+ class: 'create-offer-step',
+ title: 'Premium',
+ contentId: 'premium-content-area',
+ },
+ { id: 'amount-area', class: 'create-offer-step', title: '¿Cuánto?' },
+ {
+ id: 'place-and-time-area',
+ class: 'create-offer-step',
+ title: '¿Dónde y cuándo?',
+ contentId: 'place-and-time-boxes',
+ },
+ {
+ id: 'bitcoin-methods-area',
+ class: 'create-offer-step',
+ title: '¿Cómo se mueve el Bitcoin?',
+ contentId: 'bitcoin-methods-checkboxes',
+ },
+ {
+ id: 'trust-area',
+ class: 'create-offer-step',
+ title: '¿Quién puede ver la oferta?',
+ contentId: 'trusted-checkboxes-area',
+ },
+ { id: 'other-area', class: 'create-offer-step', title: 'Extras' },
+ ];
+
+ controls.appendChild(title);
+
+ sections.forEach((section) => {
+ const div = document.createElement('div');
+ div.id = section.id;
+ div.className = section.class;
+ if (section.title) {
+ const heading = document.createElement('h3');
+ heading.textContent = section.title;
+ div.appendChild(heading);
+ }
+ if (section.contentId) {
+ const contentDiv = document.createElement('div');
+ contentDiv.id = section.contentId;
+ div.appendChild(contentDiv);
+ }
+ controls.appendChild(div);
+ });
+
+ const submitButtonArea = document.createElement('div');
+ submitButtonArea.id = 'submit-button-area';
+
+ const closeButtonArea = document.createElement('div');
+ closeButtonArea.id = 'close-offer-controls-area';
+ const closeButton = document.createElement('button');
+ closeButton.id = 'close-offer';
+ closeButton.className = 'button-secondary button-medium';
+ closeButton.textContent = 'Volver';
+ closeButtonArea.appendChild(closeButton);
+
+ controls.appendChild(submitButtonArea);
+ controls.appendChild(closeButtonArea);
+
+ modal.appendChild(controls);
+ modalRoot.appendChild(modal);
+
+ this.parentElement.appendChild(this.element);
+
+ const createOfferEventBus = new EventTarget();
+
+ const mockPriceProvidingCallback = () => {
+ return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
+ };
+
+ this.publishOfferButton = new PublishOfferButton({
+ parentElement: document.getElementById('submit-button-area'),
+ id: 'button-submit-offer',
+ onClickCallback: async () => {
+ await this.createOffer();
+ //await myOffers.getOffersFromApi();
+ //await myOffers.render();
+ },
+ });
+ this.publishOfferButton.render();
+
+ this.buyOrSellButtonGroup = new BuyOrSellButtonGroup({
+ parentElement: document.getElementById('buy-or-sell-area'),
+ id: 'button-group-buy-or-sell',
+ });
+ this.buyOrSellButtonGroup.render();
+
+ this.premiumSelector = new PremiumSelector({
+ parentElement: document.getElementById('premium-content-area'),
+ id: 'premium-selector-area',
+ eventSink: createOfferEventBus,
+ });
+ this.premiumSelector.render();
+
+ const priceDisplay = new PriceDisplay({
+ parentElement: document.getElementById('premium-content-area'),
+ id: 'premium-price-display-area',
+ premiumProvidingCallback: () => {
+ return this.premiumSelector.getPremium();
+ },
+ priceProvidingCallback: mockPriceProvidingCallback,
+ });
+ priceDisplay.render();
+ createOfferEventBus.addEventListener('premium-changed', () => {
+ priceDisplay.updatePrices();
+ });
+
+ this.amountInput = new AmountInput({
+ parentElement: document.getElementById('amount-area'),
+ id: 'amount-area-content',
+ });
+
+ this.amountInput.render();
+
+ this.placeInput = new PlaceInput({
+ parentElement: document.getElementById('place-and-time-boxes'),
+ id: 'place-input',
+ });
+
+ this.placeInput.render();
+
+ this.timeInput = new TimeInput({
+ parentElement: document.getElementById('place-and-time-boxes'),
+ id: 'time-input',
+ });
+
+ this.timeInput.render();
+
+ this.btcMethodCheckboxes = new BitcoinMethodCheckboxes({
+ parentElement: document.getElementById('bitcoin-methods-checkboxes'),
+ });
+
+ this.btcMethodCheckboxes.render();
+
+ this.trustCheckboxes = new TrustCheckboxes({
+ parentElement: document.getElementById('trusted-checkboxes-area'),
+ });
+
+ this.trustCheckboxes.render();
+
+ this.bigNotesCheckbox = new BigNotesCheckbox({
+ parentElement: document.getElementById('other-area'),
+ });
+
+ this.bigNotesCheckbox.render();
+ }
+
+ 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 fetch('/api/offer', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ offerDetails }),
+ });
+
+ toggleOfferCreatedAlert();
+
+ this.toggle();
+ }
+}
+
function offersPage() {
- const createOfferEventBus = new EventTarget();
-
- const mockPriceProvidingCallback = () => {
- return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
- };
-
- const publishOfferButton = new PublishOfferButton({
- parentElement: document.getElementById('submit-button-area'),
- id: 'button-submit-offer',
- onClickCallback: async () => {
- await publishOffer();
- await myOffers.getOffersFromApi();
- await myOffers.render();
- },
+ const createOfferModal = new CreateOfferModal({
+ parentElement: document.body,
});
- publishOfferButton.render();
-
- const buyOrSellButtonGroup = new BuyOrSellButtonGroup({
- parentElement: document.getElementById('buy-or-sell-area'),
- id: 'button-group-buy-or-sell',
- });
- buyOrSellButtonGroup.render();
-
- const premiumSelector = new PremiumSelector({
- parentElement: document.getElementById('premium-content-area'),
- id: 'premium-selector-area',
- eventSink: createOfferEventBus,
- });
- premiumSelector.render();
-
- const priceDisplay = new PriceDisplay({
- parentElement: document.getElementById('premium-content-area'),
- id: 'premium-price-display-area',
- premiumProvidingCallback: () => {
- return premiumSelector.getPremium();
- },
- priceProvidingCallback: mockPriceProvidingCallback,
- });
- priceDisplay.render();
- createOfferEventBus.addEventListener('premium-changed', () => {
- priceDisplay.updatePrices();
- });
-
- const amountInput = new AmountInput({
- parentElement: document.getElementById('amount-area'),
- id: 'amount-area-content',
- });
-
- amountInput.render();
-
- const placeInput = new PlaceInput({
- parentElement: document.getElementById('place-and-time-boxes'),
- id: 'place-input',
- });
-
- placeInput.render();
-
- const timeInput = new TimeInput({
- parentElement: document.getElementById('place-and-time-boxes'),
- id: 'time-input',
- });
-
- timeInput.render();
-
- const btcMethodCheckboxes = new BitcoinMethodCheckboxes({
- parentElement: document.getElementById('bitcoin-methods-checkboxes'),
- });
-
- btcMethodCheckboxes.render();
-
- const trustCheckboxes = new TrustCheckboxes({
- parentElement: document.getElementById('trusted-checkboxes-area'),
- });
-
- trustCheckboxes.render();
-
- const bigNotesCheckbox = new BigNotesCheckbox({
- parentElement: document.getElementById('other-area'),
- });
-
- bigNotesCheckbox.render();
+ createOfferModal.render();
// -----------
const navbuttonHome = document.getElementById('navbutton-home');
const navbuttonOffers = document.getElementById('navbutton-offers');
@@ -131,59 +296,6 @@ function offersPage() {
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
}
- async function publishOffer() {
- const wants = buyOrSellButtonGroup.wants();
-
- const premium = premiumSelector.getPremium();
- const trade_amount_eur = amountInput.intEurAmount;
- const location_details = placeInput.inputText;
- const time_availability_details = timeInput.inputText;
- const is_onchain_accepted = btcMethodCheckboxes.isOnchainAccepted;
- const is_lightning_accepted = btcMethodCheckboxes.isLightningAccepted;
- const show_offer_to_trusted = trustCheckboxes.showOfferToTrusted;
- const show_offer_to_trusted_trusted =
- trustCheckboxes.showOfferToTrustedTrusted;
- const show_offer_to_all_members = trustCheckboxes.showOfferToAllMembers;
- const are_big_notes_accepted = 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 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');
diff --git a/src/views/offers.ejs b/src/views/offers.ejs
index 2fb3977..22141c7 100644
--- a/src/views/offers.ejs
+++ b/src/views/offers.ejs
@@ -31,42 +31,6 @@
Vaya, no hay nada por aquí...
-
-
-
-
Añade los detalles de tu oferta
-
-
-
-
¿Cuánto?
-
-
-
-
¿Cómo se mueve el Bitcoin?
-
-
-
-
¿Quién puede ver la oferta?
-
-
-
-
Extras
-
-
-
-
-
-
-
-