Poiston kumoaminen

V2/page/code.js

@@ -86,10 +86,35 @@ function createDeleteButton(jump) {
     deleteDiv.setAttributeNode(delDivClass)
     let deleteButton = document.createTextNode('Poista')
     deleteDiv.appendChild(deleteButton)
-    deleteDiv.onclick = function() { removeJump(jump._id) }
+    deleteDiv.onclick = function() { cancelDelete(jump._id) }
     return deleteDiv
 }
 
+function cancelDelete(id) {
+    let jumpItem = document.getElementById(id)
+    jumpItem.innerHTML = 'Poistetaan...'
+    let cancelButtonSpan = document.createElement('span')
+    let cancelButtonSpanClass = document.createAttribute('class')
+    cancelButtonSpanClass.value = 'cancelDeleteButton'
+    cancelButtonSpan.setAttributeNode(cancelButtonSpanClass)
+    let cancelButton = document.createTextNode('Peruuta')
+    cancelButtonSpan.appendChild(cancelButton)
+    jumpItem.appendChild(cancelButtonSpan)
+    
+    let cancel = false
+    cancelButtonSpan.onclick = () => {
+        cancel = true
+        document.getElementById('jumpsList').innerHTML = ''
+        loadJumps()
+    }
+
+    setTimeout(() => {
+        if (!cancel) {
+            removeJump(id) 
+        }
+    }, 2500);
+}
+
 function showJumps(jumps, order) {
     let jumpsList = document.getElementById('jumpsList')
     let infoText = document.getElementById('infoText')
@@ -143,7 +168,6 @@ async function addJump() {
     let jump = await response.json()
     let jumpsList = document.getElementById('jumpsList')
     let li = createJumpListItem(jump)
-    // jumpsList.appendChild(li)
     jumpsList.prepend(li)
   
     let infoText = document.getElementById('infoText')
@@ -199,4 +223,4 @@ async function removeJump(id) {
         let infoText = document.getElementById('infoText')
         infoText.innerHTML = 'Ei hyppyjä'
     }
-}
\ No newline at end of file
+}

V2/page/styles.css

@@ -63,6 +63,12 @@ li {
     cursor: pointer;
 }
 
+.cancelDeleteButton {
+    float: right;
+    color: darkred;
+    cursor: pointer;
+}
+
 input[type=text] {
     border: 1px solid #ccc;
     padding: 5px;