New paths

author: ache <ache@ache.one> 2020-02-11 19:38:49 +0100
committer: ache <ache@ache.one> 2020-02-11 19:38:49 +0100
commit: fd455b04fd31a84cfd666b21f5814cd7d48c92d1 (patch)
tree: 742cba532e32cd1f669a614c010d9081aaa7aed4 /src/dir.tmpl
parent: Use template for xml (diff)
1 files changed, 520 insertions, 0 deletions
diff --git a/src/dir.tmpl b/src/dir.tmpl
new file mode 100644
index 0000000..9c864f7
--- /dev/null
+++ b/src/dir.tmpl
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    {{if .Name}}<title>{{ .Name }}</title>{{end}}
+  </head>
+  <body>
+<div class="header"></div>
+<div class="main">
+<section id="navFile"><table><tbody thisOne>
+    {{range .ListFiles}}
+    <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>Dir.</h2>
+<table>
+  <tbody thisOne>
+  {{range .ListCols}}
+    <tr><td> - <a href="{{ .Path }}" title="{{ .Name }}">{{ .Name | formatName }}</a></td></tr>
+  {{end}}
+</table>
+</section>
+<section id="davS">
+  <div class="uploadDiv">
+    <label for="fileinput">Envoyer un fichier : </label><br/>
+    <input id="fileinput" type="file">
+  </div>
+</section>
+<section id="dav">
+  <div class="moveDiv">
+    <label for="file_move1">Déplaçer : </label><br/>
+    <input id="file_move1" type="input"> <br/>
+    <label for="file_move2">Vers : </label><br/>
+    <input id="file_move2" type="input">
+  </div>
+  <hr/>
+  <div class="mkdirDiv">
+    <label for="mkcol_input">Créer un dossier : </label><br/>
+    <input id="mkcol_input" type="input">
+  </div>
+  <hr/>
+  <div class="repDiv">
+    Réponse du server :
+    <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 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) => {
+  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');
+  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));
+
+  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) => {
+  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;
+
+  let uri = l.protocol + '//' + l.hostname;
+  if( l.port !== '80' ) {
+    uri += ':' + l.port
+  }
+  uri += l.pathname
+
+  if( uri[uri.length - 1] !== '/' ) {
+    uri += '/'
+  }
+
+  uri += file.name
+
+
+
+  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: {
+      "Content-Type": file.type
+    },
+    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(
+    success => {
+      console.log(success);
+    }
+  ).catch(
+    error => {
+      console.log(error);
+    }
+  );
+  */
+};
+
+const onSelectFile = () => {
+  let i = 0;
+  for( ; i < input.files.length ; i++) {
+    upload(input.files[i]);
+  }
+};
+const mkcolEvent = (event) => {
+  if( event.key == 'Enter' ) {
+    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 => {
+      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);
+      }
+    }
+  ).catch(
+    error => {
+      ;
+    }
+  );
+};
+
+const deleteMethode = (url, th) => {
+  fetch( url , {
+    method: 'DELETE',
+  }).then(
+    response => {
+      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 : " + decodeURI(filename));
+        option.appendChild(statusLine);
+        multiStatus.insertBefore(option, multiStatus.firstChild);
+      }
+    }
+  ).catch(
+    error => {
+      ;
+    }
+  );
+};
+
+const onPageLoad = () => {
+  const as = Array.from(document.getElementsByTagName('a'));
+
+  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');
+    aFill.classList.add('fill');
+    a.href = "#";
+    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('/'), tr)
+      return false;
+    }, false);
+    aFill.addEventListener('click', () => {
+      moveInput.value = e.href.split('/').slice(3).join('/');
+    }, false);
+
+    if( tr )
+      tr.appendChild(td);
+  });
+}
+
+mkcol.addEventListener('keydown', mkcolEvent, false);
+input.addEventListener('change', onSelectFile, false);
+window.addEventListener('load', onPageLoad, false);
+</script>
+<style>
+body {
+  background: url(/pink_davy.svg);
+
+  padding-left: 10%;
+  padding-right: 10%;
+}
+
+.main {
+  background-color: white;
+  border-radius: 25px;
+  margin-top: -8px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
+  width: 100%;
+
+  display: grid;
+  grid-template-columns: calc(100% / 5) calc(100% / 2.5 + 100% / 5 ) calc(100%/5);
+  grid-template-areas: "navDir  navFile dav"
+  "navDir  navFile dav"
+  "navDir  davS davS"
+  "navDir  f f";
+
+}
+@media screen and (max-width: 900px) {
+  body {
+    padding-left: 5%;
+    padding-right: 5%;
+  }
+  .main {
+    grid-template-columns: 100%;
+    grid-template-areas: "navDir"
+    "navFile"
+    "dav"
+    "davS"
+    "f"
+  }
+}
+.header {
+  padding: 15%;
+  margin-top: -17px;
+  background: url(/ban_davy.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+#davS {
+  grid-area: davS;
+  background-color: #0ff0af;
+  margin-top: 0%;
+  padding: 5%;
+}
+#navDir {
+  grid-area: navDir;
+  background-color: #ffa0fc;
+  width: 100%;
+}
+#navDir table {
+  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;
+  display: table;
+}
+#navFile table td:first-child {
+}
+#navFile table td {
+  border: 1px solid pink;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#navFile table {
+  width: 100%;
+}
+#dav {
+  grid-area: dav;
+  background-color: #33CCDD;
+  padding: 5%;
+}
+#dav .mkdirDiv, .moveDiv, .repDiv {
+  margin: 2%;
+}
+#dav input {
+  width: 80%;
+}
+#bodyServResponse {
+  text-indent: 5%;
+  color: white;
+}
+
+#footer {
+  grid-area: f;
+  background-color: #fcffa0;
+}
+.ok {
+  color: green;
+}
+.delete {
+  color: red;
+}
+.ok:hover {
+  color: #407D30;
+  text-decoration: none;
+}
+#multiStatus {
+  width: 100%;
+}
+.delete:hover {
+  color: #3b4045;
+  text-decoration: none;
+}
+</style>
+</body>
+</html>
author	ache <ache@ache.one>	2020-02-11 19:38:49 +0100
committer	ache <ache@ache.one>	2020-02-11 19:38:49 +0100
commit	fd455b04fd31a84cfd666b21f5814cd7d48c92d1 (patch)
tree	742cba532e32cd1f669a614c010d9081aaa7aed4 /src/dir.tmpl
parent	Use template for xml (diff)