diff --git a/index.php b/index.php
index f3fd076c72cbe1d9e08df2e6f80629819393f7e5..8c9fab989814bce5dbb106f4d4b89bd66180ea8b 100644
--- a/index.php
+++ b/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-edition.html'); ?>
- <?php require_once('src/html/channel-creation.html'); ?>
+ <?php require_once('src/html/channel.php'); ?>
<?php require_once('src/html/search.html'); ?>
</main>
</body>
diff --git a/src/html/channel-chat.html b/src/html/channel-chat.html
new file mode 100644
index 0000000000000000000000000000000000000000..eadce5385ece919b38192c1051e563cd32f369bb
--- /dev/null
+++ b/src/html/channel-chat.html
@@ -0,0 +1,4 @@
+<div id="channel-chat" style="display: none">
+ <i>Chat coming soon...</i>
+</div>
+
diff --git a/src/html/channel-create.html b/src/html/channel-create.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef9e711c5f14c11f5ab44be66dc73812a8125b72
--- /dev/null
+++ b/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>
+
diff --git a/src/html/channel-creation.html b/src/html/channel-creation.html
deleted file mode 100644
index 33b81b6ca70769c826007507fda949b77f900975..0000000000000000000000000000000000000000
--- a/src/html/channel-creation.html
+++ /dev/null
@@ -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>
-
diff --git a/src/html/channel-edit.html b/src/html/channel-edit.html
new file mode 100644
index 0000000000000000000000000000000000000000..b3c66e18a5b7fb7c42fff446470649a5bf913b9d
--- /dev/null
+++ b/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>
diff --git a/src/html/channel-edition.html b/src/html/channel-edition.html
deleted file mode 100644
index f6c9ff489ee29a7ac148d819eaa7f7b22460a0ec..0000000000000000000000000000000000000000
--- a/src/html/channel-edition.html
+++ /dev/null
@@ -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>
diff --git a/src/html/channel-profile.html b/src/html/channel-profile.html
new file mode 100644
index 0000000000000000000000000000000000000000..2186fc5ce937f391f03e50c38509b717ef107a53
--- /dev/null
+++ b/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>
diff --git a/src/html/channel.html b/src/html/channel.html
deleted file mode 100644
index 5434e536be8285e9c18f371700c0a52e816a80c1..0000000000000000000000000000000000000000
--- a/src/html/channel.html
+++ /dev/null
@@ -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=" "
- data-fields="avatar, name"
- widget-avatar="ldp-display-img"
- bind-resources
- ></ldp-display>
- </div>
-</div>
diff --git a/src/html/channel.php b/src/html/channel.php
new file mode 100644
index 0000000000000000000000000000000000000000..612396f04e3cdeb75c2a2b1505aba08381806ae8
--- /dev/null
+++ b/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>
diff --git a/src/html/client-creation.html b/src/html/client-creation.html
index 9ee6fc083adea355976b3e4bacfb0d54e2b91004..693520bee56cd400f5a4d0a2e1e665d5915cfcfd 100644
--- a/src/html/client-creation.html
+++ b/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"
diff --git a/src/html/menu.html b/src/html/menu.html
index 6f1872294e60659735d8d4584171672d7f217d65..892a10fc5fe13ee1f06a579ad6fd81901e6123a7 100644
--- a/src/html/menu.html
+++ b/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 class="d-none" name="project-edition" id-prefix="<?php echo $sdn; ?>/channels/"></sib-route>
+ <sib-route name="client-create">New client</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>