New version

author: ache <ache@ache.one> 2019-10-28 20:03:55 +0100
committer: ache <ache@ache.one> 2019-10-28 20:03:55 +0100
commit: b4e8eba34ca96d9298295eb9c01c1fc3d9036f3b (patch)
tree: 2d89cf0276ab80a2ac0fd43b957c203ff646ffc7 /dir.html
parent: New interface (diff)
1 files changed, 164 insertions, 42 deletions
diff --git a/dir.html b/dir.html
index c6f63fb..95bbdcf 100644
--- a/dir.html
+++ b/dir.html
@@ -6,21 +6,19 @@
   <body>
 <div class="header"></div>
 <div class="main">
-<section id="navFile">
-<table>
-  <tbody>
+<section id="navFile"><table><tbody thisOne>
     {{range .ListFiles}}
-      <tr><td><a href="{{ .Path | formatURL }}">{{ .Name }}</a></td><td>{{ .Size | formatSize }}</td></tr>
+    <tr><td><table style="table-layout:fixed"><tbody><tr><td style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;border: none;'><a href="{{ .Path | formatURL }}" title="{{ .Name }}">{{ .Name }}</a></td></tr></tbody></table></td><td>{{ .Size | formatSize }}</td></tr>
     {{end}}
   </tbody>
 </table>
 </section>
 <section id="navDir">
-  <h2>Directories</h2>
+  <h2>Dir.</h2>
 <table>
-  <tbody>
+  <tbody thisOne>
   {{range .ListCols}}
-    <tr><td><a href="{{ .Path }}">{{ .Name }}</a></td></tr>
+    <tr><td> - <a href="{{ .Path }}" title="{{ .Name }}">{{ .Name | formatName }}</a></td></tr>
   {{end}}
 </table>
 </section>
@@ -34,7 +32,7 @@
   <div class="moveDiv">
     <label for="file_move1">Déplaçer : </label><br/>
     <input id="file_move1" type="input"> <br/>
-    <label for="file_move2">Vers : <br/>
+    <label for="file_move2">Vers : </label><br/>
     <input id="file_move2" type="input">
   </div>
   <hr/>
@@ -48,19 +46,44 @@
     <div id="bodyServResponse">
       <select multiple id="multiStatus">
       </select>
-      <div>
+    </div>
   </div>
 </section>
-<div id="footer">Create with love 💟 by <a href="https//ache.one">ache</a></div>
+<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 normSize = ( size ) => {
+  let unit = 0;
+  let nb = size;
+  while (nb > 1023.) {
+    unit++;
+    nb /= 1024.;
+  }
+
+  const unitStr = " KMGTPEZY";
+
+  if (unit > 0) {
+    return nb.toFixed(2) + unitStr[unit] + "io";
+  }
+  return "" + nb + "o";
+}
+
+
 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 ttd = document.createElement('TD');
+  const table = document.createElement('table');
+  const ttbody = document.createElement('tbody');
+  const ttr = document.createElement('TR');
+  ttbody.appendChild(ttr);
+  table.appendChild(ttbody);
+  ttd.appendChild(table);
+  table.style = "table-layout:fixed";
+
   const tr = document.createElement('TR');
 
   const name = document.createElement('TD');
@@ -72,14 +95,41 @@ const addFile = (filename, fileURL, fileSize) => {
   const size = document.createElement('TD');
   size.appendChild(document.createTextNode(fileSize));
 
-  tr.appendChild(name);
+  name.style = "text-overflow: ellipsis; overflow: hidden; white-space: nowrap;border: none;";
+  ttr.append(name);
+  tr.appendChild(ttd);
   tr.appendChild(size);
 
+  const aFill = document.createElement('a');
+  const a = document.createElement('a');
+  const td = document.createElement('td');
+  const moveInput = document.getElementById('file_move1');
+
+  a.appendChild(document.createTextNode('🗙'));
+  aFill.appendChild(document.createTextNode('↩'));
+  a.classList.add('delete');
+  aFill.classList.add('fill');
+  a.href = "#";
+  aFill.href = "#";
+  a.onclick = () => false;
+  aFill.onclick = () => false;
+  td.appendChild(aFill);
+  td.appendChild(a);
+  a.addEventListener('click', () => {
+    deleteMethode(fileURL, tr)
+    return false;
+  }, false);
+  aFill.addEventListener('click', () => {
+    moveInput.value = filename;
+  }, false);
+
+  tr.appendChild(td);
+
+
   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');
@@ -126,16 +176,66 @@ const upload = (file) => {
   }
   uri += l.pathname
 
-  console.log(uri)
-
   if( uri[uri.length - 1] !== '/' ) {
     uri += '/'
   }
 
   uri += file.name
 
-  console.log(uri)
 
+
+  var xhr = new XMLHttpRequest();
+  xhr.file = file;
+
+
+  if ( xhr.upload ) {
+    const multiStatus = document.getElementById('multiStatus');
+    const option = document.createElement('option');
+    option.classList.add('ok');
+    const statusLine = document.createTextNode("");
+    option.appendChild(statusLine);
+    multiStatus.insertBefore(option, multiStatus.firstChild);
+
+    xhr.addEventListener('loadend', (e) => {
+      statusLine.nodeValue = "" + xhr.status + " - Uploaded : " + file.name
+
+      const navFile = document.getElementById('navFile');
+      const rest = navFile.querySelector('tbody');
+
+      let denyChil = undefined;
+
+      Array.from(rest.children).forEach( (child) =>  {
+        console.log(child);
+        let tmp_Element = child;
+        while( tmp_Element && tmp_Element.tagName != 'A') {
+          tmp_Element = tmp_Element.firstElementChild;
+        }
+        if(tmp_Element && tmp_Element.innerHTML == file.name)
+          denyChil = child;
+
+      });
+
+      if(denyChil)
+        rest.removeChild(denyChil);
+
+      addFile(file.name, uri, normSize(file.size));
+    });
+
+    let i_status = 0;
+    xhr.upload.onprogress = function(e) {
+      const done = e.position || e.loaded, total = e.totalSize || e.total;
+      const per = (Math.floor(done/total*1000)/10);
+      const c_status = ["◜ ", " ◝", " ◞", "◟ "][i_status%3]
+      statusLine.nodeValue = c_status + ' uploading ' + per + '%'; 
+      i_status++;
+    };
+  }
+
+
+  xhr.open('put', uri, true);
+  xhr.send(file);
+
+  /*
   fetch( encodeURI(uri) , {
     method: 'PUT',
     headers: {
@@ -164,6 +264,7 @@ const upload = (file) => {
       console.log(error);
     }
   );
+  */
 };
 
 const onSelectFile = () => {
@@ -174,7 +275,6 @@ const onSelectFile = () => {
 };
 const mkcolEvent = (event) => {
   if( event.key == 'Enter' ) {
-    console.log("");
     const l = window.location;
     const n = mkcol.value;
 
@@ -195,7 +295,6 @@ const mkcolMethode = (url, name) => {
     method: 'MKCOL',
   }).then(
     response => {
-      console.log(response);
       if( response.ok ) {
         const multiStatus = document.getElementById('multiStatus');
         const option = document.createElement('option');
@@ -209,11 +308,10 @@ const mkcolMethode = (url, name) => {
         option.appendChild(statusLine);
         multiStatus.insertBefore(option, multiStatus.firstChild);
       }
-      console.log(response);
     }
   ).catch(
     error => {
-      console.log(error);
+      ;
     }
   );
 };
@@ -223,8 +321,8 @@ const deleteMethode = (url, th) => {
     method: 'DELETE',
   }).then(
     response => {
-      console.log(response);
       if( response.ok ) {
+
         if( th ) th.parentNode.removeChild(th)
         const multiStatus = document.getElementById('multiStatus');
         const option = document.createElement('option');
@@ -234,15 +332,14 @@ const deleteMethode = (url, th) => {
           filename = filename[filename.length - 1];
         else
           filename = url;
-        const statusLine = document.createTextNode(response.status + " - Deleted : " + filename);
+        const statusLine = document.createTextNode(response.status + " - Deleted : " + decodeURI(filename));
         option.appendChild(statusLine);
         multiStatus.insertBefore(option, multiStatus.firstChild);
       }
-      console.log(response);
     }
   ).catch(
     error => {
-      console.log(error);
+      ;
     }
   );
 };
@@ -250,11 +347,18 @@ const deleteMethode = (url, th) => {
 const onPageLoad = () => {
   const as = Array.from(document.getElementsByTagName('a'));
 
-  as.filter( e => e.parentNode.parentNode.tagName == "TR").forEach( e => {
+  as.filter( e => e.parentNode.parentNode.tagName == "TR" ).forEach( e => {
     const aFill = document.createElement('a');
     const a = document.createElement('a');
     const td = document.createElement('td');
     const moveInput = document.getElementById('file_move1');
+
+    let tr = e.parentNode.parentNode;
+    while( tr && !tr.parentNode.hasAttribute("thisOne") )
+      tr = tr.parentNode;
+    if( !tr )
+      return false;
+
     a.appendChild(document.createTextNode('🗙'));
     aFill.appendChild(document.createTextNode('↩'));
     a.classList.add('delete');
@@ -263,17 +367,20 @@ const onPageLoad = () => {
     aFill.href = "#";
     a.onclick = () => false;
     aFill.onclick = () => false;
+    aFill.title = e.href.split('/').slice(3).join('/');
+    a.title = '/' + e.href.split('/').slice(3).join('/');
     td.appendChild(aFill);
     td.appendChild(a);
     a.addEventListener('click', () => {
-      deleteMethode('/' + e.href.split('/').slice(3).join('/'), e.parentNode.parentNode)
+      deleteMethode('/' + e.href.split('/').slice(3).join('/'), tr)
       return false;
     }, false);
     aFill.addEventListener('click', () => {
       moveInput.value = e.href.split('/').slice(3).join('/');
     }, false);
 
-    e.parentNode.parentNode.appendChild(td);
+    if( tr )
+      tr.appendChild(td);
   });
 }
 
@@ -295,6 +402,8 @@ body {
   margin-top: -8px;
   padding-top: 20px;
   padding-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
   width: 100%;
 
   display: grid;
@@ -326,37 +435,52 @@ body {
   background-size: contain;
   background-repeat: no-repeat;
 }
-#navDir {
-  grid-area: navDir;
-  background-color: #ffa0fc;
-  margin: 3%;
-  padding: 5%;
-}
 #davS {
   grid-area: davS;
   background-color: #0ff0af;
   margin-top: 0%;
-  margin-left: 3%;
-  margin-right: 3%;
   padding: 5%;
 }
+#navDir {
+  grid-area: navDir;
+  background-color: #ffa0fc;
+  width: 100%;
+}
 #navDir table {
-  margin: 20px;
+  table-layout: fixed;
+  width: 100%;
+}
+#navDir h2 {
+  padding: 3%;
+}
+#navDir table td:first-child{
+  display: inline;
+  word-wrap:break-word;
+}
+#navDir table td {
+  display: inline-block;
+  word-wrap:break-word;
 }
 
 #navFile {
   grid-area: navFile;
   background-color: #00ff64;
-  margin: 1.7%;
-  padding: 5%;
+  display: table;
+}
+#navFile table td:first-child {
+}
+#navFile table td {
+  border: 1px solid pink;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 #navFile table {
-  margin: 20px;
+  width: 100%;
 }
 #dav {
   grid-area: dav;
   background-color: #33CCDD;
-  margin: 3%;
   padding: 5%;
 }
 #dav .mkdirDiv, .moveDiv, .repDiv {
@@ -373,8 +497,6 @@ body {
 #footer {
   grid-area: f;
   background-color: #fcffa0;
-  margin-left: 3%;
-  margin-right: 3%;
 }
 .ok {
   color: green;
author	ache <ache@ache.one>	2019-10-28 20:03:55 +0100
committer	ache <ache@ache.one>	2019-10-28 20:03:55 +0100
commit	b4e8eba34ca96d9298295eb9c01c1fc3d9036f3b (patch)
tree	2d89cf0276ab80a2ac0fd43b957c203ff646ffc7 /dir.html
parent	New interface (diff)