Channels list and detail pages done

index.php

@@ -38,6 +38,8 @@
       <?php require_once('src/html/member.html'); ?>
       <?php require_once('src/html/projects.html'); ?>
       <?php require_once('src/html/project.html'); ?>
+      <?php require_once('src/html/channels.html'); ?>
+      <?php require_once('src/html/channel.html'); ?>
     </main>
   </body>
 </html>

src/html/channel.html

@@ -0,0 +1,63 @@
+<script>
+  class LDPDisplayMember extends LDPWidget {
+    get template() {
+      return `
+        <div name="${this.name}">
+          <img src="${this.value.avatar}"/>
+          <span>${this.value.firstname} ${this.value.lastname}</span>
+        </div>
+      `;
+    }
+
+    render() {
+      store.get(this.value).then( (value) => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define("ldp-display-member", LDPDisplayMember);
+</script>
+
+<div id="channel" class="view-with-vertical-menu" style="display: none">
+  <ldp-router id="channel-page-router" class="vertical-menu border-left" default-route="channel-chat">
+    <ldp-route name="channel-chat">
+      <i class="fa fa-comment-o" aria-hidden="true"></i>
+    </ldp-route>
+    <ldp-route name="channel-detail">
+      <i class="fa fa-user" aria-hidden="true"></i>
+    </ldp-route>
+  </ldp-router>
+
+  <hd-chat-window
+    id="channel-chat" 
+    data-authentication="anonymous"
+    data-auto-login="true"
+    data-bosh-service-url="https://conversejs.org/http-bind/"
+    data-debug="false"
+    data-jid="nomnom.im"
+    data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
+    data-room-jid="anonymous@conference.nomnom.im">
+  </hd-chat-window>
+
+  <div id="channel-detail" style="display: none">
+    <ldp-display 
+      id="channel-info" 
+      data-fields="name, description, admin, owner"
+      value-admin="Administrateur"
+      widget-owner="ldp-display-member"
+      bind-resources
+    ></ldp-display>
+
+    <h2 class="section skills">Participants</h2>
+    <ldp-display 
+      id="chat-members" 
+      id-suffix="members"
+      set-name="firstname, name-separator, lastname"
+      value-name-separator="&nbsp;"
+      data-fields="avatar, name"
+      widget-avatar="ldp-display-img"
+      bind-resources
+      ></ldp-display>
+  </div>
+</div>

src/html/channels.html

@@ -0,0 +1,9 @@
+<div id="channels" style="display: none">
+  <ldp-display 
+    id="channels-list" 
+    data-src="http://localhost:8000/channels/" 
+    data-fields="name, description" 
+    search-fields="name, description"
+    next="channel"
+  ></ldp-display>
+</div>

src/html/groups.html

@@ -1,6 +0,0 @@
-<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>

src/html/menu.html

@@ -25,9 +25,12 @@
         Projet
       </ldp-route>
 
-      <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="groups">
+      <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="channels">
         <i class="fa fa-comments" aria-hidden="true"></i>
-        <span class="d-none d-md-inline"> Groupes</span>
+        <span class="d-none d-md-inline"> Channels</span>
+      </ldp-route>
+      <ldp-route class="nav-item d-none" name="channel" id-prefix="http://localhost:8000/channels/">
+        channel
       </ldp-route>
     </div>
   </ldp-router>

src/scss/_channel.scss

@@ -0,0 +1,62 @@
+#channel {
+  #channel-detail {
+    #channel-info {
+      display:      block;
+      padding-top:  10px;
+
+      div[name="name"] {
+        font-weight:  bold;
+      }
+    }
+
+    ldp-display-member {
+      img {
+        width:          50px;
+        border-radius:  100px;
+      }
+
+      span {
+        padding-left:  5px;
+      }
+    }
+
+    #chat-members {
+      ldp-display {
+        display:        flex;
+        align-items:    center;
+        margin-bottom:  10px;
+
+        img {
+          width:          50px;
+          border-radius:  100px;
+        }
+
+        div[name="name"] {
+          display:      flex;
+          margin-left:  10px;
+        }
+      }
+    }
+  }
+
+  div[name="admin"],
+  .section {
+    @extend %detail-section;
+    margin-top:  40px;
+  }
+}
+
+@media (min-width: $sm-with) {
+  #channel {
+    #channel-detail {
+      #channel-info {
+        ldp-display-client {
+          display:  block;
+          float:    right;
+          width:    300px;
+        }
+      }
+    }
+  }
+}
+

src/scss/_channels.scss

@@ -0,0 +1,25 @@
+#channels {
+  #channels-list {
+    display:          flex;
+    flex-direction:   column;
+    margin-top:       40px;
+
+    ldp-display {
+      @extend %td;
+      cursor:           pointer;
+      display:          flex;
+      align-items:      center;
+      height:           65px;
+
+      &:hover {
+        background-color:   $hd-color-faded;
+        color:              white;
+      }
+
+      ldp-display-div[name="name"] {
+        width:  130px;
+      }
+    }
+  }
+}
+

src/scss/_groupsList.scss

@@ -1,26 +0,0 @@
-#groupsList {
-    display: flex;
-    flex-direction: column;
-}
-
-#groupsList>ldp-display {
-    display: flex;
-    flex-direction: row;
-}
-
-#groupsList ul {
-    display: inline-flex;
-}
-
-
-/* TEST */
-#groupsList>ldp-display {
-    border: 1px dashed royalblue;
-
-}
-#groupsList ul {
-    border: 3px solid green;
-}
-#groupsList .title {
-    border: 3px solid blueviolet;
-}

src/scss/_home.scss

@@ -1,19 +0,0 @@
-#home {
-  height: 100%;
-}
-
-#logoContainer {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#logoContainer>img {
-  transition: transform .4s;
-}
-
-#logoContainer>img:hover {
-  transform: scale(1.5);
-}
-/* MEDIA QUERY Pour centrer sur un petit écran */

src/scss/main.scss

@@ -6,11 +6,11 @@
 @import "forms";
 
 // Specific
-@import "home";
 @import "menu";
+@import "dashboard";
 @import "members";
 @import "member";
-@import "groupsList";
-@import "project";
 @import "projects";
-@import "dashboard";
+@import "project";
+@import "channels";
+@import "channel";