diff --git a/src/public/css/offers.css b/src/public/css/offers.css index 65fe5e2..8f1d296 100644 --- a/src/public/css/offers.css +++ b/src/public/css/offers.css @@ -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 { diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index 18ac641..b5ee702 100644 --- a/src/public/javascript/offers.js +++ b/src/public/javascript/offers.js @@ -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} €. `; - } - 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 += ` -
-
- ${tradeDescription} -
-
- ${paymentMethodsDescription} -
-
- ${visibilityDescription} -
-
- ${whereAndWhenDescription} -
-
- ${otherDescription} -
-
-
- -
- `; + this.ownOffersContainerElement.append(someOffer.buildHTML()); } - - this.ownOffersContainerElement.innerHTML = offersHTML; } }