createoffermodal is now one big ass object
This commit is contained in:
parent
a9779c207e
commit
95dd754992
GPG key ID:
883EDBAA726BD96C
2 changed files with 245 additions and 169 deletions
|
|
@ -9,88 +9,253 @@ const BitcoinMethodCheckboxes = require('../components/BitcoinMethodCheckboxes')
|
||||||
const TrustCheckboxes = require('../components/TrustCheckboxes');
|
const TrustCheckboxes = require('../components/TrustCheckboxes');
|
||||||
const BigNotesCheckbox = require('../components/BigNotesCheckbox');
|
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() {
|
function offersPage() {
|
||||||
const createOfferEventBus = new EventTarget();
|
const createOfferModal = new CreateOfferModal({
|
||||||
|
parentElement: document.body,
|
||||||
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();
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
publishOfferButton.render();
|
createOfferModal.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();
|
|
||||||
// -----------
|
// -----------
|
||||||
const navbuttonHome = document.getElementById('navbutton-home');
|
const navbuttonHome = document.getElementById('navbutton-home');
|
||||||
const navbuttonOffers = document.getElementById('navbutton-offers');
|
const navbuttonOffers = document.getElementById('navbutton-offers');
|
||||||
|
|
@ -131,59 +296,6 @@ function offersPage() {
|
||||||
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
|
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() {
|
function toggleOfferDeletedAlert() {
|
||||||
offerDeletedPopup.classList.remove('max-size-zero');
|
offerDeletedPopup.classList.remove('max-size-zero');
|
||||||
offerDeletedPopup.classList.add('revealed');
|
offerDeletedPopup.classList.add('revealed');
|
||||||
|
|
|
||||||
|
|
@ -31,42 +31,6 @@
|
||||||
<p>Vaya, no hay nada por aquí...</p>
|
<p>Vaya, no hay nada por aquí...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="create-offer-modal-root" class="full-screen-modal-background">
|
|
||||||
<div class="full-screen-modal" id="create-offer-root">
|
|
||||||
<div id="create-offer-controls">
|
|
||||||
<h2>Añade los detalles de tu oferta</h2>
|
|
||||||
<div id="buy-or-sell-area" class="create-offer-step"></div>
|
|
||||||
<div id="premium-area" class="create-offer-step">
|
|
||||||
<h3>Premium</h3>
|
|
||||||
<div id="premium-content-area"></div>
|
|
||||||
</div>
|
|
||||||
<div id="amount-area" class="create-offer-step">
|
|
||||||
<h3>¿Cuánto?</h3>
|
|
||||||
</div>
|
|
||||||
<div id="place-and-time-area" class="create-offer-step">
|
|
||||||
<h3>¿Dónde y cuándo?</h3>
|
|
||||||
<div id="place-and-time-boxes"></div>
|
|
||||||
</div>
|
|
||||||
<div id="bitcoin-methods-area" class="create-offer-step">
|
|
||||||
<h3>¿Cómo se mueve el Bitcoin?</h3>
|
|
||||||
<div id="bitcoin-methods-checkboxes"></div>
|
|
||||||
</div>
|
|
||||||
<div id="trust-area" class="create-offer-step">
|
|
||||||
<h3>¿Quién puede ver la oferta?</h3>
|
|
||||||
<div id="trusted-checkboxes-area"></div>
|
|
||||||
</div>
|
|
||||||
<div id="other-area" class="create-offer-step">
|
|
||||||
<h3>Extras</h3>
|
|
||||||
</div>
|
|
||||||
<div id="submit-button-area"></div>
|
|
||||||
<div id="close-offer-controls-area">
|
|
||||||
<button id="close-offer" class="button-secondary button-medium">
|
|
||||||
Volver
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
id="offer-created-confirmation"
|
id="offer-created-confirmation"
|
||||||
class="top-notification-good max-size-zero"
|
class="top-notification-good max-size-zero"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue