improving description

src/public/css/offers.css

@@ -85,6 +85,12 @@
   margin-right: auto;
 }
 
+.myoffer-card {
+  text-align: start;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
 #create-offer-controls {
   text-align: center;
 }

src/public/javascript/offers.js

@@ -46,6 +46,8 @@ const publishOfferButton = document.getElementById('button-submit-offer');
 
 const offerCreatedPopup = document.getElementById('offer-created-confirmation');
 
+const ownOffersContainer = document.getElementById('own-offers-container');
+
 function toggleCreateOfferControls() {
   createOfferRoot.style.display =
     createOfferRoot.style.display === 'block' ? 'none' : 'block';
@@ -194,7 +196,8 @@ class Offer {
 }
 
 class MyOffers {
-  constructor() {
+  constructor(ownOffersContainerElement) {
+    this.ownOffersContainerElement = ownOffersContainerElement;
     this.offers = [];
   }
 
@@ -213,14 +216,88 @@ class MyOffers {
     }
   }
 
-  async render() {}
+  async render() {
+    if (!this.offers) {
+      this.ownOffersContainerElement.innerHTML =
+        '<p class="shadowed-round-area">Vaya, no hay nada por aquí...</p>';
+      return;
+    }
+
+    let offersHTML = '';
+
+    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';
+      }
+
+      offersHTML += `
+        <div class="shadowed-round-area myoffer-card">
+          <div class="trade-description">
+            ${tradeDescription}
+          </div>
+          <div class="payment-methods-description">
+            ${paymentMethodsDescription}
+          </div>
+          <div class="visibility-description">
+            ${visibilityDescription}
+          </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;
+  }
 }
 
 buttonStartCreateOffer.addEventListener('click', () => {
   toggleCreateOfferControls();
 });
 
-buttonViewMyOffers.addEventListener('click', () => {
+buttonViewMyOffers.addEventListener('click', async () => {
+  await myOffers.getOffersFromApi();
+  await myOffers.render();
   toggleViewMyOffersPanel();
 });
 
@@ -263,3 +340,5 @@ publishOfferButton.addEventListener('click', () => {
 });
 
 updateBtcInput();
+
+const myOffers = new MyOffers(ownOffersContainer);

src/views/offers.ejs

@@ -187,8 +187,8 @@
     </div>
     <div class="over-background" id="view-my-offers-root">
       <h2>Mis ofertas</h2>
+      <div id="own-offers-container">
         <p>Vaya, no hay nada por aquí...</p>
-      <div class="own-offer-container shadowed-round-area">
         Quieres comprar BTC a un premium de 3% (precio: 93.000€/BTC). Quieres
         comprar 100€/102 100SAT. Puedes quedar en: "Cualquier parte", y te va
         mejor: "en cualquier momento". Se puede usar Onchain y Lightning. Tu