hubl/src/html/members.html

<div id="members" style="display: none">
  <div class="page-header">
    <h1>Membres</h1>
  </div>

  <ldp-display 
    id="profilesList" 
    data-src="http://localhost:8000/users/" 
    set-name="firstname, name-separator, lastname"
    value-name-separator="&nbsp;"
    set-location="city, city-separator, country"
    value-city-separator=",&nbsp;"
    data-fields="avatar, name, location"
    widget-avatar="ldp-display-img"
    search-fields="city"
  ></ldp-display>
  
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function (event) {
      var profilesListElt = document.querySelector('#profilesList');
      var profileDivElt = document.querySelector('#profileDiv');
      var profileDetailElt = document.querySelector('#profileDetail');

      profilesListElt.addEventListener('select', function (event) {
        profileDivElt.style.display = 'flex';
        profileDetailElt.setAttribute("data-src", event.detail.resource['@id']);
      });
      profileDivElt.addEventListener('click', function (event) {
        if (event.target.id == "profileDiv") {
          profileDivElt.style.display = 'none';
        }
      });
    });
  </script>
</div>