hubl/src/html/index.html

<div id="mainContainer" class="container-fluid">
  <div class="row pt-3">

    <!-- Menu -->
    <div class="col-md-2 menu">
      <div id="menu-title">HAPPY APP</div>
      <ldp-router root="ldp-root" default-route="home">
        <ldp-route name="members">Membres</ldp-route>
        <ldp-route name="projects">Projets</ldp-route>
        <ldp-route name="groups">Groupes</ldp-route>
        <ldp-route name="calendar">Agenda</ldp-route>
        <ldp-route name="drive">Drive</ldp-route>
        <!-- <ldp-route name="home">Home</ldp-route> -->
      </ldp-router>
      <div id="menu-placeholder" ><img src="https://dummyimage.com/220x300/666666/cccccc&text=Placeholder/20" alt="placeholder"></div>
    </div>

    <main id="ldp-root" class="col-md-10">
      <!-- HOME -->
      <div id="home" style="display: none">
        <div id="logoContainer">
          <img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
        </div>
      </div>

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

        <ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
        
        <!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
        set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->

        <!-- test direct dans data-fields -->
        <!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></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>

      <!-- PROJECTS -->
      <div id="projects" style="display: none">
        <h1 class="page-title" id="projectsListTitle">Projets</h1>
        <div id="projectsTable">
          <ol>
            <li id="categorieNumber">Numéro</li>
            <li id="categorieNumberAlt">N°</li>
            <li id="categorieTitle">Titre</li>
            <li id="categorieAssociate">Associé</li>
            <li id="categorieIncome">CA</li>
            <li id="categorieState">Etat</li>
          </ol>
          <ldp-display id="projectsList" data-src="http://lucky.alwaysdata.net/api/projects/" data-fields="number, title, associate, income-div, state" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
        </div>
        
<!-- project view -->
        <ldp-display id="projectTitle" data-fields="title, space, number" value-space="&#160-&#160"></ldp-display>
        <div id="projectDiv" style="display: none;">
          <div class="container-fluid" id="projectContainer">
            <div class="row">
            
            <div class="col-md-9" id="projectLeftCol">
              <div class="chat-box">
                <img src=".\img\chat_image.PNG" alt="Chat box">
              </div>
            </div>
              
            <div class="col-md-3" id="projectRightCol">
              <ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
              <button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
            </div>
              
            <!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
            </div>
          </div>
        </div>
        
        <script type="text/javascript">
          document.addEventListener("DOMContentLoaded", function (event) {
            var projectsListElt = document.querySelector('#projectsList');
            var projectsTableElt = document.querySelector('#projectsTable');
            var projectDivElt = document.querySelector('#projectDiv');
            var projectDetailElt = document.querySelector('#projectDetail');
            var projectTitleElt = document.querySelector('#projectTitle');
            var projectsListTitleElt = document.querySelector('#projectsListTitle');
            projectsListElt.addEventListener('select', function (event) {
              projectsTableElt.style.display = 'none';
              projectsListTitleElt.style.display = 'none';
              projectDivElt.style.display = 'block';
              projectTitleElt.style.display ='block';
              projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
              projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
            });
            projectDivElt.addEventListener('click', function (event) {
              if (event.target.id == "projectDivBackButton") {
                projectDivElt.style.display = 'none';
                projectTitleElt.style.display = 'none';
                projectsTableElt.style.display = 'block';
                projectsListTitleElt.style.display = 'block';
              }
            });
          });
        </script>
      </div>

      <!-- GROUPS -->
      <div id="groups" style="display: none">
        <h1 class="page-title">Groupes</h1>
        <!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
        <ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
        <!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
      </div>

      <!-- CALENDAR -->
      <div id="calendar" style="display: none">
        <h1 class="page-title">Agenda</h1>
        <ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
      </div>

      <!-- DRIVE -->
      <div id="drive" style="display: none">
        <h1 class="page-title">Drive</h1>
      </div>
    </main>
  </div>
</div>

<!--Profil Modal-->
<div id="profileDiv" style="display: none;">
  <ldp-display id="profileDetail" data-fields="profil-modal" set-profil-modal="picture, profil-content" widget-picture="ldp-display-img" set-profil-content="name, languages, country"></ldp-display>  
</div>