Delete UX

1 files changed, 44 insertions, 0 deletions

diff --git a/dir.html b/dir.html
index da8ab1c..a0767ec 100644
--- a/dir.html
+++ b/dir.html
@@ -73,9 +73,46 @@ const onSelectFile = () => {
   for( ; i < input.files.length ; i++) {
     upload(input.files[i]);
   }
+};
+
+const deleteMethode = url => {
+  fetch( url , {
+    method: 'DELETE',
+  }).then(
+    response => {
+      console.log(response);
+    }
+  ).then(
+    success => {
+      console.log(success);
+    }
+  ).catch(
+    error => {
+      console.log(error);
+    }
+  );
+};
+
+const onPageLoad = () => {
+  console.log("🦊");
+  const as = Array.from(document.getElementsByTagName('a'));
+
+  as.forEach( e => {
+    const a = document.createElement('a');
+    a.appendChild(document.createTextNode('X'));
+    a.classList.add('delete');
+    a.href = "#";
+    a.onclick = () => false;
+    a.addEventListener('click', () => {
+      deleteMethode('/' + e.href.split('/').slice(3).join('/'))
+      return false;
+    }, false);
+    e.parentNode.insertBefore(a, e.nextSibling);
+  });
 }
 
 input.addEventListener('change', onSelectFile, false);
+window.addEventListener('load', onPageLoad, false);
 </script>
 <style>
 body {
@@ -108,6 +145,13 @@ h1 {
   grid-area: f;
   background-color: #fcffa0;
 }
+.delete {
+  color: red;
+}
+.delete:hover {
+  color: #3b4045;
+  text-decoration: none;
+}
 </style>
 </body>
 </html>