working on offer card
This commit is contained in:
parent
0c6ad8bd85
commit
180d08e5eb
GPG key ID:
883EDBAA726BD96C
2 changed files with 144 additions and 82 deletions
|
|
@ -31,6 +31,12 @@
|
|||
flex-shrink: 0;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.myoffer-card {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin: 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
|
|
@ -65,6 +71,14 @@
|
|||
flex-shrink: 0;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.myoffer-card {
|
||||
width: 23%;
|
||||
min-width: 400px;
|
||||
height: 500px;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#create-offer-root {
|
||||
|
|
@ -85,16 +99,53 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.myoffer-card {
|
||||
text-align: start;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
#own-offers-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.myoffer-card > div {
|
||||
max-width: 200px;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
.myoffer-card {
|
||||
display: grid;
|
||||
grid-template-columns: 46% 8% 46%;
|
||||
grid-template-rows: 23% 1% 18% 1% 18% 1% 18% 1% 20%;
|
||||
}
|
||||
|
||||
.trade-desc {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.trade-desc > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.offer-card-content-title {
|
||||
color: gray;
|
||||
font-size: 0.8em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.offer-card-content-data {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.premium-desc {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.premium-desc > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.where-desc {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#create-offer-controls {
|
||||
|
|
|
|||
|
|
@ -193,6 +193,89 @@ class Offer {
|
|||
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');
|
||||
tradeDescDiv.classList.add('subtle-box');
|
||||
|
||||
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.id = 'you-sell-title';
|
||||
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');
|
||||
premiumDescDiv.classList.add('subtle-box');
|
||||
|
||||
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.classList.add('offer-card-content-tile');
|
||||
marketPriceData.innerText = `88000 €/BTC`;
|
||||
premiumDescDiv.append(marketPriceData);
|
||||
|
||||
const whereDescDiv = document.createElement('div');
|
||||
whereDescDiv.classList.add('where-desc');
|
||||
whereDescDiv.classList.add('subtle-box');
|
||||
|
||||
offerCard.append(tradeDescDiv, premiumDescDiv, whereDescDiv);
|
||||
|
||||
return offerCard;
|
||||
}
|
||||
}
|
||||
|
||||
class MyOffers {
|
||||
|
|
@ -223,83 +306,11 @@ class MyOffers {
|
|||
return;
|
||||
}
|
||||
|
||||
let offersHTML = '';
|
||||
this.ownOffersContainerElement.innerHTML = '';
|
||||
|
||||
for (const someOffer of this.offers) {
|
||||
let tradeDescription;
|
||||
if (someOffer.wants === 'BTC') {
|
||||
tradeDescription = `Vendes ${someOffer.trade_amount_eur} €. Compras 100 000 sats. `;
|
||||
} else {
|
||||
tradeDescription = `Vendes 100 000 sats. Compras ${someOffer.trade_amount_eur} €. `;
|
||||
this.ownOffersContainerElement.append(someOffer.buildHTML());
|
||||
}
|
||||
tradeDescription += `El premium es de ${someOffer.premium}%.`;
|
||||
|
||||
let paymentMethodsDescription = '';
|
||||
if (someOffer.is_onchain_accepted) {
|
||||
paymentMethodsDescription += 'Se acepta Bitcoin onchain. ';
|
||||
}
|
||||
if (someOffer.is_lightning_accepted) {
|
||||
paymentMethodsDescription += 'Se acepta Bitcoin Lightning.';
|
||||
}
|
||||
|
||||
let visibilityDescription = 'La oferta es visible para: ';
|
||||
if (someOffer.show_offer_to_trusted) {
|
||||
visibilityDescription += 'Tus confiados';
|
||||
}
|
||||
if (someOffer.show_offer_to_trusted_trusted) {
|
||||
visibilityDescription += ', los confiados de tus confiados';
|
||||
}
|
||||
if (someOffer.show_offer_to_all_members) {
|
||||
visibilityDescription += ', todos los miembros';
|
||||
}
|
||||
|
||||
const whereAndWhenDescription = `Te va bien quedar: ${someOffer.location_details} | ${someOffer.time_availability_details}.`;
|
||||
|
||||
let otherDescription = '';
|
||||
if (someOffer.are_big_notes_accepted) {
|
||||
otherDescription += 'Se aceptan billetes grandes (100, 200, 500).';
|
||||
}
|
||||
offersHTML += `
|
||||
<div class="shadowed-round-area myoffer-card">
|
||||
<div class="subtle-box trade-description">
|
||||
${tradeDescription}
|
||||
</div>
|
||||
<div class="subtle-box payment-methods-description">
|
||||
${paymentMethodsDescription}
|
||||
</div>
|
||||
<div class="subtle-box visibility-description">
|
||||
${visibilityDescription}
|
||||
</div>
|
||||
<div class="subtle-box">
|
||||
${whereAndWhenDescription}
|
||||
</div>
|
||||
<div class="subtle-box">
|
||||
${otherDescription}
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadowed-round-area myoffer-card">
|
||||
<ul>
|
||||
<li>uuid: ${someOffer.uuid}</li>
|
||||
<li>public_key: ${someOffer.public_key}</li>
|
||||
<li>wants: ${someOffer.wants}</li>
|
||||
<li>premium: ${someOffer.premium}</li>
|
||||
<li>trade_amount_eur: ${someOffer.trade_amount_eur}</li>
|
||||
<li>location_details: ${someOffer.location_details}</li>
|
||||
<li>time_availability_details: ${someOffer.time_availability_details}</li>
|
||||
<li>show_offer_to_trusted: ${someOffer.show_offer_to_trusted}</li>
|
||||
<li>show_offer_to_trusted_trusted: ${someOffer.show_offer_to_trusted_trusted}</li>
|
||||
<li>show_offer_to_all_members: ${someOffer.show_offer_to_all_members}</li>
|
||||
<li>is_onchain_accepted: ${someOffer.is_onchain_accepted}</li>
|
||||
<li>is_lightning_accepted: ${someOffer.is_lightning_accepted}</li>
|
||||
<li>are_big_notes_accepted: ${someOffer.are_big_notes_accepted}</li>
|
||||
<li>created_at: ${someOffer.created_at}</li>
|
||||
<li>last_updated_at: ${someOffer.last_updated_at}</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
this.ownOffersContainerElement.innerHTML = offersHTML;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue