diff --git a/index.php b/index.php
index e5f74134f1ed7dfc868dfe42689246ef7bb0c614..b92e1d69c7d17e758a0af3907175c35c8e5e087d 100644
--- a/index.php
+++ b/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>
diff --git a/src/html/channel.html b/src/html/channel.html
new file mode 100644
index 0000000000000000000000000000000000000000..fe2c431d39dcc21c1f8b857c97322953a7db3e5e
--- /dev/null
+++ b/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=" "
+ data-fields="avatar, name"
+ widget-avatar="ldp-display-img"
+ bind-resources
+ ></ldp-display>
+ </div>
+</div>
diff --git a/src/html/channels.html b/src/html/channels.html
new file mode 100644
index 0000000000000000000000000000000000000000..1187d52392e5627688f2f3ccd0a7634c25c73c26
--- /dev/null
+++ b/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>
diff --git a/src/html/groups.html b/src/html/groups.html
deleted file mode 100644
index d5c2741965acb7cbcb8c16a770adf589699bc438..0000000000000000000000000000000000000000
--- a/src/html/groups.html
+++ /dev/null
@@ -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>
diff --git a/src/html/menu.html b/src/html/menu.html
index dc61f2272217fe710ff2a8723f8f1bdd8bbe01e8..341453c6a1c30fc1921eb8d1f1a6a6e36f128df0 100644
--- a/src/html/menu.html
+++ b/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>
diff --git a/src/scss/_channel.scss b/src/scss/_channel.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ce76d2288d878f8385d709ed7b8c761f8133136c
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/scss/_channels.scss b/src/scss/_channels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..efd811f897529c0f6c8c2426013d51c0d9a2313d
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
+
diff --git a/src/scss/_groupsList.scss b/src/scss/_groupsList.scss
deleted file mode 100644
index 29b7a2111289e709973bc5be59755c4272eda274..0000000000000000000000000000000000000000
--- a/src/scss/_groupsList.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/scss/_home.scss b/src/scss/_home.scss
deleted file mode 100644
index 0fd55864f9469fe9db314d0aa3a6283d5242095f..0000000000000000000000000000000000000000
--- a/src/scss/_home.scss
+++ /dev/null
@@ -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 */
diff --git a/src/scss/main.scss b/src/scss/main.scss
index d51d62dc7c9553a87181be3bdeda1abb95369e82..f8aee457ee4fd3e53c9d0000af440fe28feb4b4b 100644
--- a/src/scss/main.scss
+++ b/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";