feature - avatar upload almost complete

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>
 

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>
+

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>

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>
+

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", () => {

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>