monaca-stock-management-firebase-display.js

// Real time update with Firebase for the Products
const getRealTimeUpdatesForProducts = (elementName, pageName) => {
  ...
  db.collection('products').onSnapshot((doc) => {
    let result = '';
    doc.docs.forEach((doc) => {
      ...
      const data = doc.data();
      result += `
        <div class="card-bg block block-strong inset">
          <div class="display-flex justify-content-space-between">
            <div>
              <p>Product Code: <span>${data.code}</span></p>
              <p>Name: <span>${data.name}</span></p>
              <p>Shop: <span>${data.shop}</span></p>
              <p>Price: <span>${data.price}</span></p>
              <p>Quantity: <span>${data.quantity}</span></p>
            </div>
            <i class="icon f7-icons">
              <a href="/edit-product/${doc.id}/" data-product-id="${doc.id}" class="get-product-details-data">pencil</a>
            </i>
          </div>
          <div class="block display-flex justify-content-center">
            <div>`;
      if (yahooApiKey) {
        if (pageName == "HOME")
          result += `<img style="width:146px;height:146px" id="${data.code}" src="${data.image}"/>`
        else if (pageName == "PRODUCT")
          result += `<img style="width:146px;height:146px" id="${data.code}_img" src="${data.image}"/>`
      } else {
        if (pageName == "HOME")
          result += `<img style="width:146px;height:146px" id="${data.code}" src="assets/pictures/camera.png">`
        else if (pageName == "PRODUCT")
          result += `<img style="width:146px;height:146px" id="${data.code}_img" src="assets/pictures/camera.png">`
      }
      result += `
        </div>
          </div>
            <div class="display-flex justify-content-center">
              <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#">
                <div id="minus" class="stepper-button-minus update-quantity-minus" data-quantity="${data.quantity}" data-product-id="${doc.id}"></div>
                <div id="plus" class="stepper-button-plus update-quantity-plus" data-quantity="${data.quantity}" data-product-id="${doc.id}"></div>
              </div>
            </div>   
        </div>`;

      if (data.image == "") 
        try{
          getImage(data, pageName);
        } catch {
          console.log('Object not found.');
        }
    });

    ...

    elementName.innerHTML = result;
  });
}