feature - network pages cleaned up

index.php

@@ -33,9 +33,7 @@
       <?php require_once('src/html/project.php'); ?>
       <?php require_once('src/html/client-creation.html'); ?>
       <?php require_once('src/html/channels.html'); ?>
-      <?php require_once('src/html/channel.html'); ?>
+      <?php require_once('src/html/channel.php'); ?>
-      <?php require_once('src/html/channel-edition.html'); ?>
-      <?php require_once('src/html/channel-creation.html'); ?>
       <?php require_once('src/html/search.html'); ?>
     </main>
   </body>

src/html/channel-chat.html

@@ -0,0 +1,4 @@
+<div id="channel-chat" style="display: none">
+  <i>Chat coming soon...</i>
+</div>
+

src/html/channel-create.html

@@ -0,0 +1,9 @@
+<div id="channel-create" style="display: none">
+  <sib-form 
+    data-src="http://localhost:8000/channels/" 
+    range-owner="<?php echo $sdn; ?>/members/"
+    widget-members="sib-form-multiple-dropdown"
+    range-members="<?php echo $sdn; ?>/members/"
+  ></sib-form>
+</div>
+

src/html/channel-creation.html

@@ -1,8 +0,0 @@
-<div id="new-channel" style="display: none">
-  <h1>NEW CHANNEL</h1>
-  <sib-form 
-    data-src="http://localhost:8000/channels/" 
-    data-fields="name, address, logo"
-  ></sib-form>
-</div>
-

src/html/channel-edit.html

@@ -0,0 +1,8 @@
+<div id="channel-edit" style="display: none">
+  <sib-form 
+    range-owner="<?php echo $sdn; ?>/members/"
+    widget-members="sib-form-multiple-dropdown"
+    range-members="<?php echo $sdn; ?>/members/"
+    bind-resources
+  ></sib-form>
+</div>

src/html/channel-edition.html

@@ -1,7 +0,0 @@
-<div id="channel-edition" style="display: none">
-  <ldp-form 
-    class="edit-form"
-    data-src="<?php echo $sdn; ?>/channels/1/" 
-    bind-resources
-  ></ldp-form>
-</div>

src/html/channel-profile.html

@@ -0,0 +1,38 @@
+<script>
+  document.addEventListener("WebComponentsReady", function(event) { 
+    class HDAppMember extends SIBWidget {
+      get template() {
+        return `
+          <div name="${this.name}">
+            <img src="${this.value.avatar}"/>
+          </div>
+        `;
+      }
+
+      render() {
+        store.get(this.value).then( (value) => {
+          this._value = value;
+          this.innerHTML = this.template;
+        });
+      }
+    }
+    customElements.define("hdapp-member", HDAppMember);
+  });
+</script>
+
+<div id="channel-profile" style="display: none">
+  <sib-display 
+    data-fields="name, description, owner"
+    widget-owner="hdapp-member"
+    bind-resources
+  ></sib-display>
+
+  <h2 class="section skills">Participants</h2>
+  <sib-display 
+    id-suffix="members"
+    data-fields="avatar, user"
+    widget-avatar="sib-display-img"
+    widget-user="hdapp-userinfo"
+    bind-resources
+  ></sib-display>
+</div>

src/html/channel.html

@@ -1,56 +0,0 @@
-<script>
-  document.addEventListener("WebComponentsReady", function(event) { 
-    class LDPDisplayMember extends SIBWidget {
-      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" aria-hidden="true"></i>
-    </ldp-route>
-    <ldp-route name="channel-detail">
-      <i class="fa fa-user" aria-hidden="true"></i>
-    </ldp-route>
-  </ldp-router>
-
-  <div id="channel-chat" class="chat-wrapper"></div>
-
-  <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/channel.php

@@ -0,0 +1,23 @@
+<div id="channel" style="display: none">
+  <sib-router id="channel-router" default-route="channel-profile">
+    <sib-route name="channel-chat">
+      <button>Chat</button>
+    </sib-route>
+    <sib-route name="channel-profile">
+      <button>Info</button>
+    </sib-route>
+    <sib-route name="channel-edit">
+      <button>Éditer</button>
+    </sib-route>
+    <sib-route name="channel-create">
+      <button>Nouveau</button>
+    </sib-route>
+  </sib-router>
+
+  <div id="network-views-container">
+    <?php require_once('channel-chat.html'); ?>
+    <?php require_once('channel-profile.html'); ?>
+    <?php require_once('channel-edit.html'); ?>
+    <?php require_once('channel-create.html'); ?>
+  </div>
+</div>

src/html/client-creation.html

@@ -1,4 +1,4 @@
-<div id="new-client" style="display: none">
+<div id="client-create" style="display: none">
   <sib-form 
     data-src="http://localhost:8000/clients/" 
     data-fields="name, address, logo"

src/html/menu.html

@@ -17,12 +17,11 @@
         <span class="d-none d-md-inline"> Projets</span>
       </sib-route>
       <sib-route class="d-none" name="project" id-prefix="<?php echo $sdn; ?>/projects/"></sib-route>
-      <sib-route name="new-client">New client</sib-route>
+      <sib-route name="client-create">New client</sib-route>
-      <sib-route class="d-none" name="project-edition" id-prefix="<?php echo $sdn; ?>/channels/"></sib-route>
 
       <sib-route class="nav-item 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"> Channels</span>
+        <span class="d-none d-md-inline"> Network</span>
       </sib-route>
       <sib-route class="d-none" name="channel" id-prefix="<?php echo $sdn; ?>/channels/"></sib-route>
       <sib-route class="d-none" name="channel-edition" id-prefix="<?php echo $sdn; ?>/channels/"></sib-route>