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 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);
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue