New interface

1 files changed, 148 insertions, 9 deletions

diff --git a/dir.html b/dir.html
index fd3747d..c6f63fb 100644
--- a/dir.html
+++ b/dir.html
@@ -45,13 +45,77 @@
   <hr/>
   <div class="repDiv">
     Réponse du server :
-    <div id="bodyServResponse"><div>
+    <div id="bodyServResponse">
+      <select multiple id="multiStatus">
+      </select>
+      <div>
   </div>
 </section>
 <div id="footer">Create with love 💟 by <a href="https//ache.one">ache</a></div>
 </div>
 <script language="javascript">
 const input = document.getElementById('fileinput');
+const mkcol = document.getElementById('mkcol_input');
+
+const addFile = (filename, fileURL, fileSize) => {
+  // <tr><td><a href="{{ .Path | formatURL }}">{{ .Name }}</a></td><td>{{ .Size | formatSize }}</td></tr>
+  const navFile = document.getElementById('navFile');
+  const tbody = navFile.firstChild.firstChild;
+  const tr = document.createElement('TR');
+
+  const name = document.createElement('TD');
+  const link = document.createElement('A');
+  link.href = fileURL;
+  link.appendChild(document.createTextNode(filename));
+  name.appendChild(link);
+
+  const size = document.createElement('TD');
+  size.appendChild(document.createTextNode(fileSize));
+
+  tr.appendChild(name);
+  tr.appendChild(size);
+
+  tbody.appendChild(tr);
+  return tr;
+}
+const addDir = (dirname, dirURL) => {
+  // <tr><td><a href="{{ .Path }}">{{ .Name }}</a></td></tr>
+  const navDir = document.getElementById('navDir');
+  const tbody = navDir.firstChild.firstChild;
+  const tr = document.createElement('TR');
+
+  const name = document.createElement('TD');
+  const link = document.createElement('A');
+  link.href = dirURL;
+  link.appendChild(document.createTextNode(dirname));
+  name.appendChild(link);
+
+  tr.appendChild(name);
+
+  tbody.appendChild(tr);
+  return tr;
+}
+const updateDirs = (dirPath) => {
+  
+}
+const updateFiles = (dirPath) => {
+  
+}
+const parserXML = (txt) => {
+  let xmlDoc;
+
+  if (window.DOMParser) {
+    const parser = new DOMParser();
+    xmlDoc = parser.parseFromString(txt, "text/xml");
+  }
+  else { // Internet Explorer
+    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+    xmlDoc.async = false;
+    xmlDoc.loadXML(txt);
+  }
+
+  return xmlDoc;
+}
 
 const upload = (file) => {
   const l = window.location;
@@ -77,9 +141,18 @@ const upload = (file) => {
     headers: {
       "Content-Type": file.type
     },
-    body: file // This is your file object
+    body: file
   }).then(
     response => {
+      if( response.ok ) {
+        const multiStatus = document.getElementById('multiStatus');
+        const option = document.createElement('option');
+        option.classList.add('ok');
+        const statusLine = document.createTextNode(response.status + " - Uploaded : " + file.name);
+        option.appendChild(statusLine);
+        multiStatus.insertBefore(option, multiStatus.firstChild);
+      }
+
       console.log(response);
     }
   ).then(
@@ -99,6 +172,51 @@ const onSelectFile = () => {
     upload(input.files[i]);
   }
 };
+const mkcolEvent = (event) => {
+  if( event.key == 'Enter' ) {
+    console.log("");
+    const l = window.location;
+    const n = mkcol.value;
+
+    let uri = l.pathname;
+
+    if( uri[uri.length - 1] !== '/' ) {
+      uri += '/'
+    }
+    uri += n;
+    if( uri[uri.length - 1] !== '/' ) {
+      uri += '/'
+    }
+    mkcolMethode(uri, n);
+  }
+}
+const mkcolMethode = (url, name) => {
+  fetch( url , {
+    method: 'MKCOL',
+  }).then(
+    response => {
+      console.log(response);
+      if( response.ok ) {
+        const multiStatus = document.getElementById('multiStatus');
+        const option = document.createElement('option');
+        option.classList.add('ok');
+        let filename = url.split('/');
+        if( filename.length > 0 )
+          filename = filename[filename.length - 1];
+        else
+          filename = url;
+        const statusLine = document.createTextNode(response.status + " - Created 📁 : " + filename);
+        option.appendChild(statusLine);
+        multiStatus.insertBefore(option, multiStatus.firstChild);
+      }
+      console.log(response);
+    }
+  ).catch(
+    error => {
+      console.log(error);
+    }
+  );
+};
 
 const deleteMethode = (url, th) => {
   fetch( url , {
@@ -106,11 +224,21 @@ const deleteMethode = (url, th) => {
   }).then(
     response => {
       console.log(response);
-    }
-  ).then(
-    success => {
-      if( th ) th.parentNode.removeChild(th)
-      console.log(success);
+      if( response.ok ) {
+        if( th ) th.parentNode.removeChild(th)
+        const multiStatus = document.getElementById('multiStatus');
+        const option = document.createElement('option');
+        option.classList.add('ok');
+        let filename = url.split('/');
+        if( filename.length > 0 )
+          filename = filename[filename.length - 1];
+        else
+          filename = url;
+        const statusLine = document.createTextNode(response.status + " - Deleted : " + filename);
+        option.appendChild(statusLine);
+        multiStatus.insertBefore(option, multiStatus.firstChild);
+      }
+      console.log(response);
     }
   ).catch(
     error => {
@@ -149,6 +277,7 @@ const onPageLoad = () => {
   });
 }
 
+mkcol.addEventListener('keydown', mkcolEvent, false);
 input.addEventListener('change', onSelectFile, false);
 window.addEventListener('load', onPageLoad, false);
 </script>
@@ -244,12 +373,22 @@ body {
 #footer {
   grid-area: f;
   background-color: #fcffa0;
-  margin-left:3%;
-  margin-right:3%;
+  margin-left: 3%;
+  margin-right: 3%;
+}
+.ok {
+  color: green;
 }
 .delete {
   color: red;
 }
+.ok:hover {
+  color: #407D30;
+  text-decoration: none;
+}
+#multiStatus {
+  width: 100%;
+}
 .delete:hover {
   color: #3b4045;
   text-decoration: none;