Channels list and detail pages done

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>