feature - members pages done for alpha-1

index.php

@@ -28,8 +28,7 @@
     <main id="mainContainer" class="container-fluid">
       <?php require_once('src/html/dashboard.html'); ?>
       <?php require_once('src/html/members.html'); ?>
-      <?php require_once('src/html/member.html'); ?>
+      <?php require_once('src/html/member.php'); ?>
-      <?php require_once('src/html/edit-profile.html'); ?>
       <?php require_once('src/html/projects.html'); ?>
       <?php require_once('src/html/project.html'); ?>
       <?php require_once('src/html/project-creation.html'); ?>
@@ -43,52 +42,53 @@
     </main>
 
     <!-- This is a hack : https://git.happy-dev.fr/happy-dev/xmpp-chat-component/issues/24 -->
-    <!--sib-chat
+    <sib-chat
+      id="chat-singleton"
       data-src="https://djangoldp.happy-dev.fr/users/1"
       data-authentication="login"
       data-auto-login="true"
       data-bosh-service-url="http://jabber.happy-dev.fr/http-bind/" // FIXME: make HTTPS
       data-debug="false"
       data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json">
-    </sib-chat-->
+    </sib-chat>
 
     <script>
       // Store url on load
       var currentRoute  = getCurrentRoute();
+      var previousRoute = "";
       var chatSingleton = document.querySelector("#chat-singleton");
       var body          = document.querySelector("body");
 
       function getCurrentRoute() {
         var pathnameSegments = window.location.pathname.split("/");
 
-        return pathnameSegments[1];
+        return pathnameSegments[pathnameSegments.length - 1];
       }
 
       // Listen for changes
-      //setInterval(function() {
+      setInterval(function() {
-          //if (currentRoute != window.location.href) {
+        previousRoute = currentRoute;
-            //currentRoute = getCurrentRoute();
+        currentRoute  = getCurrentRoute();
 
-            //insertChatIfNeeded();
+        if (previousRoute !== currentRoute) {
-          //}
+          insertChatIfNeeded();
-      //}, 250);
+        }
+      }, 250);
 
       // Inserts a chat in the current view if needed
       function insertChatIfNeeded() {
-        if (["project", "project-chat", "channel", "channel-chat", "member", "member-chat"].indexOf(currentRoute) > -1) {
+        console.log(currentRoute);
-          if (currentRoute.indexOf("chat") == -1) {
+        if (["project-chat", "channel-chat", "member-chat"].indexOf(currentRoute) > -1) {
-            currentRoute += "-chat";
-          }
           var currentView = document.querySelector("#" + currentRoute);
           if (currentView.querySelector("sib-chat") == null) {
             currentView.appendChild(chatSingleton);
-            currentView.style.display = 'block';
           }
         }
         else {
           body.appendChild(chatSingleton);
         }
       }
+      insertChatIfNeeded();
     </script>
   </body>
 </html>

src/html/member-chat.html

@@ -0,0 +1,2 @@
+<div id="member-chat" style="display: none">
+</div>

src/html/member-edit-profile.html

@@ -17,7 +17,7 @@
   //widget-avatar="ldp-form-img-upload"
 </script>
 
-<div id="edit-profile" style="display: none">
+<div id="member-edit-profile" style="display: none">
   <label for="avatar-input">
     <img id="avatar-preview" src="http://cdn.local/hdapp/members/alexandre-bourlier.jpg" style="width: 100%;"/>
   </label>
@@ -25,7 +25,7 @@
 
   <sib-form 
     class="edit-form"
-    data-src="<?php echo $sdn; ?>/members/1/" 
+    bind-resources
   ></sib-form>
 </div>
 

src/html/member-profile.html

@@ -0,0 +1,13 @@
+<div id="member-profile" style="display: none">
+  <sib-display 
+    id="member-info" 
+    data-fields="avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills"
+    widget-avatar="sib-display-img"
+    widget-user="hdapp-userinfo"
+    widget-cell="hdapp-usercell"
+    widget-number="sib-display-tel"
+    widget-roles="sib-display-lookuplist"
+    widget-skills="sib-display-lookuplist"
+    bind-resources
+  ></sib-display>
+</div>

src/html/member.html

@@ -1,26 +0,0 @@
-<div id="member" class="view-with-vertical-menu" style="display: none">
-  <div class="section info">
-    <i class="fa fa-pencil" aria-hidden="true"></i>
-    <i class="name fa fa-pencil" aria-hidden="true"></i>
-
-    <sib-display 
-      id="member-info" 
-      data-fields="avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills"
-      widget-avatar="sib-display-img"
-      widget-user="hdapp-userinfo"
-      widget-cell="hdapp-usercell"
-      widget-number="sib-display-tel"
-      widget-roles="sib-display-lookuplist"
-      widget-skills="sib-display-lookuplist"
-      bind-resources
-    ></sib-display>
-  </div>
-</div>
-
-<script>
-  document.querySelectorAll("#member-detail .fa-pencil").forEach((el) => {
-    el.addEventListener("click", (e) => {
-      document.getElementById('navbar-router').navigate('edit-profile');
-    });
-  });
-</script>

src/html/member.php

@@ -0,0 +1,21 @@
+<div id="member" style="display: none">
+  <div class="section info">
+    <sib-router id="member-router" default-route="member-profile">
+      <sib-route name="member-chat">
+        <button>Chat</button>
+      </sib-route>
+      <sib-route name="member-profile">
+        <button>Voir</button>
+      </sib-route>
+      <sib-route name="member-edit-profile">
+        <button>Éditer</button>
+      </sib-route>
+    </sib-router>
+
+    <div id="member-views-container">
+      <?php require_once('member-chat.html'); ?>
+      <?php require_once('member-profile.html'); ?>
+      <?php require_once('member-edit-profile.html'); ?>
+    </div>
+  </div>
+</div>

src/html/menu.html

@@ -11,7 +11,6 @@
         <span class="d-none d-md-inline">Membres</span>
       </sib-route>
       <sib-route class="d-none" name="member" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>
-      <sib-route class="d-none" name="edit-profile" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>
 
       <sib-route class="nav-item pb-2 align-self-stretch text-center text-md-left" name="projects">
         <i class="fa fa-tasks" aria-hidden="true"></i>

src/scss/_chat.scss

@@ -0,0 +1,17 @@
+sib-chat {
+  position:       absolute;
+  top:            $menu-height;
+  bottom:         0px;
+  left:           0px;
+  right:          0px;
+  margin:         auto;
+  display:        none;
+}
+
+#member-chat {
+  sib-chat {
+    display:  block;
+    top:      $menu-height + 30px;
+  }
+}
+

src/scss/_member.scss

@@ -32,8 +32,8 @@
 
 #member-detail {
   #member-info {
-    ldp-display-mailto,
+    sib-display-mailto,
-    ldp-display-tel {
+    sib-display-tel {
       display:    block;
     }
 
@@ -63,18 +63,6 @@
   .section {
     position: relative;
 
-    i {
-      position:     absolute;
-      display:      block;
-      top:          5px;
-      right:        10px;
-      cursor:       pointer;
-
-      &.name {
-        top:    290px;
-      }
-    }
-
     h2 {
       @extend %detail-section;
       margin-top:  40px;
@@ -85,7 +73,7 @@
     display:      flex;
     flex-wrap:    wrap;
 
-    ldp-display {
+    sib-display {
       display:            block;
       background-color:   $hd-color; 
       color:              white;
@@ -100,7 +88,7 @@
 @media (min-width: $sm-with) {
   #member-detail {
     #member-info {
-      ldp-display-img {
+      sib-display-img {
         display:  block;
         float:    right;
         width:    300px;

src/scss/_styles.scss

@@ -11,19 +11,3 @@ html, body, #mainContainer {
   padding-top:   $menu-height;
 }
 
-hd-chat-window {
-  position:       absolute;
-  top:            0px;
-  bottom:         0px;
-  left:           0px;
-  right:          0px;
-  margin:         auto;
-  padding-top:    $menu-height;
-  padding-right:  $vertical-menu-width;
-  display:        none;
-}
-.chat-wrapper {
-  hd-chat-window {
-    display:  block;
-  }
-}

src/scss/main.scss

@@ -17,3 +17,4 @@
 @import "channels";
 @import "channel";
 @import "search";
+@import "chat";