extract offercard component
This commit is contained in:
parent
2da553f4d6
commit
6ac1f96ee3
GPG key ID:
883EDBAA726BD96C
2 changed files with 386 additions and 376 deletions
374
src/front/components/OfferCard.js
Normal file
374
src/front/components/OfferCard.js
Normal file
|
|
@ -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;
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
const PopupNotification = require('../components/PopupNotification');
|
const PopupNotification = require('../components/PopupNotification');
|
||||||
const CreateOfferModal = require('../components/CreateOfferModal');
|
const CreateOfferModal = require('../components/CreateOfferModal');
|
||||||
|
const OfferCard = require('../components/OfferCard');
|
||||||
|
|
||||||
const offerService = require('../services/offerService');
|
const offerService = require('../services/offerService');
|
||||||
|
|
||||||
|
|
@ -50,381 +51,6 @@ function offersPage() {
|
||||||
viewMyOffersRoot.style.display =
|
viewMyOffersRoot.style.display =
|
||||||
viewMyOffersRoot.style.display === 'block' ? 'none' : 'block';
|
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 {
|
class MyOffers {
|
||||||
constructor(ownOffersContainerElement) {
|
constructor(ownOffersContainerElement) {
|
||||||
|
|
@ -440,7 +66,17 @@ function offersPage() {
|
||||||
const offersData = (await offersResponse.json()).data;
|
const offersData = (await offersResponse.json()).data;
|
||||||
if (offersResponse.ok) {
|
if (offersResponse.ok) {
|
||||||
for (const record of offersData) {
|
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);
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue