From 325918329911b5e45779dd300465089d2ff2a5e0 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Sat, 7 Jul 2018 19:40:16 +0200
Subject: [PATCH] feature - avatar upload almost complete

---
 index.php                      |  2 ++
 src/html/channel-creation.html |  8 ++++++++
 src/html/channels.html         |  4 ++--
 src/html/client-creation.html  |  8 ++++++++
 src/html/edit-profile.html     | 13 ++++++-------
 src/html/menu.html             |  1 +
 6 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 src/html/channel-creation.html
 create mode 100644 src/html/client-creation.html

diff --git a/index.php b/index.php
index 0672ece..accbbab 100644
--- a/index.php
+++ b/index.php
@@ -34,9 +34,11 @@
       <?php require_once('src/html/project.html'); ?>
       <?php require_once('src/html/project-creation.html'); ?>
       <?php require_once('src/html/project-edition.html'); ?>
+      <?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/search.html'); ?>
     </main>
 
diff --git a/src/html/channel-creation.html b/src/html/channel-creation.html
new file mode 100644
index 0000000..33b81b6
--- /dev/null
+++ b/src/html/channel-creation.html
@@ -0,0 +1,8 @@
+<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/channels.html b/src/html/channels.html
index 82c1b7b..3afdcc1 100644
--- a/src/html/channels.html
+++ b/src/html/channels.html
@@ -1,9 +1,9 @@
 <div id="channels" style="display: none">
-  <ldp-display 
+  <sib-display 
     id="channels-list" 
     data-src="<?php echo $sdn; ?>/channels/" 
     data-fields="name, description" 
     search-fields="name, description"
     next="channel"
-  ></ldp-display>
+  ></sib-display>
 </div>
diff --git a/src/html/client-creation.html b/src/html/client-creation.html
new file mode 100644
index 0000000..1f1be0d
--- /dev/null
+++ b/src/html/client-creation.html
@@ -0,0 +1,8 @@
+<div id="new-client" style="display: none">
+  <h1>NEW CLIENT</h1>
+  <sib-form 
+    data-src="http://localhost:8000/clients/" 
+    data-fields="name, address, logo"
+  ></sib-form>
+</div>
+
diff --git a/src/html/edit-profile.html b/src/html/edit-profile.html
index baf28d0..76ab73c 100644
--- a/src/html/edit-profile.html
+++ b/src/html/edit-profile.html
@@ -1,5 +1,5 @@
 <script>
-  //class LDPFormImgUpload extends LDPWidget {
+  //class LDPFormImgUpload extends SIBWidget {
   //  get template() {
   //    return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
   //      <input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
@@ -21,13 +21,12 @@
   <label for="avatar-input">
     <img id="avatar-preview" src="http://cdn.local/hdapp/members/alexandre-bourlier.jpg" style="width: 100%;"/>
   </label>
-  <input type="file" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />`;
+  <input type="file" accept="image/*" id="avatar-input" name="avatar" value="http://cdn.hd-app.local/members/alexandre-bourlier.jpg" />
 
-  <ldp-form 
+  <sib-form 
     class="edit-form"
     data-src="<?php echo $sdn; ?>/members/1/" 
-    bind-resources
-  ></ldp-form>
+  ></sib-form>
 </div>
 
 <div id="crop-modal">
@@ -51,17 +50,17 @@
   const $cropPreview  = $(cropPreview);
 
   // Triggers cropping on image upload
-  avatarInput.addEventListener("change", (e) => {
+  avatarInput.addEventListener("change", function(e) {
     var img     = avatarInput.files[0];
     var reader  = new FileReader();
 
     reader.onloadend = function () {
       cropPreview.src = reader.result;
+      cropModal.classList.add("cropping-mode");
     }
 
     if (img) {
       reader.readAsDataURL(img);//reads the data as a URL
-      cropModal.classList.add("cropping-mode");
     } 
   });
   cropPreview.addEventListener("load", () => {
diff --git a/src/html/menu.html b/src/html/menu.html
index a4ec924..e6ccd8f 100644
--- a/src/html/menu.html
+++ b/src/html/menu.html
@@ -18,6 +18,7 @@
         <span class="d-none d-md-inline"> Projets</span>
       </sib-route>
       <sib-route name="new-project">New project</sib-route>
+      <sib-route name="new-client">New client</sib-route>
       <sib-route class="d-none" name="project" id-prefix="<?php echo $sdn; ?>/projects/"></sib-route>
       <sib-route class="d-none" name="project-edition" id-prefix="<?php echo $sdn; ?>/channels/"></sib-route>