code.js

function init() {
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = 'Ladataan tehtävälista palvelimelta, odota...'
    loadJumps()
}

async function loadJumps() {
    let response = await fetch('http://localhost:3000/jumps')
    let jumps = await response.json()
    console.log(jumps)
    showJumps(jumps)
}

function createJumpListItem(jump) {    
    let li = document.createElement('li')
    let li_attr_id = document.createAttribute('id')
    let li_attr_class = document.createAttribute('class')
    li_attr_class.value = 'jumpItem'
    li.setAttributeNode(li_attr_class)
    li_attr_id.value = jump._id
    li.setAttributeNode(li_attr_id)

    let spanDate = document.createElement('span')
    let spanClassDate = document.createAttribute('class')
    spanClassDate.value = 'headerJumpDate'
    spanDate.setAttributeNode(spanClassDate)
    let jumpDate = document.createTextNode(jump.date)
    spanDate.appendChild(jumpDate)
    let jumpHeader = document.createTextNode('#' + jump.number)
    li.appendChild(jumpHeader)
    li.appendChild(spanDate)

    let spanMore = document.createElement('span')
    let spanClassMore = document.createAttribute('class')
    spanClassMore.value = 'headerMore'
    spanMore.setAttributeNode(spanClassMore)
    let moreButton = document.createTextNode('▼')
    spanMore.appendChild(moreButton)
    li.appendChild(spanMore)
    
    return li
}

// function createJumpListItem(jump) {    // Tähän sisennys hommat
//     let li = document.createElement('li')
//     let li_attr = document.createAttribute('id')
//     li_attr.value = jump._id
//     li.setAttributeNode(li_attr)
//     let jumpSpecs = document.createTextNode(jump.number + " " + jump.date)
//     li.appendChild(jumpSpecs)
//     // spanit
//     let edit_span = document.createElement('span')
//     let edit_span_attr = document.createAttribute('class')
//     let del_span = document.createElement('span')
//     let del_span_attr = document.createAttribute('class')
//     // edit
//     edit_span_attr.value = "edit"
//     edit_span.setAttributeNode(edit_span_attr)
//     let edit = document.createTextNode(" edit ")
//     edit_span.appendChild(edit)
//     edit_span.onclick = function() { editJump(jump._id) }
//     li.appendChild(edit_span)
//     // delete
//     del_span_attr.value = 'delete'
//     del_span.setAttributeNode(del_span_attr)
//     let x = document.createTextNode(' x ')
//     del_span.appendChild(x)
//     del_span.onclick = function() { removeJump(jump._id) }
//     li.appendChild(del_span)
//     return li
// }

function showJumps(jumps) {
    let jumpsList = document.getElementById('jumpsList')
    let infoText = document.getElementById('infoText')
    // no jumps
    if (jumps.length === 0) {
        infoText.innerHTML = 'Ei hyppyjä'
    } else {    
        jumps.slice().reverse().forEach(jump => {
            let li = createJumpListItem(jump)        
            jumpsList.appendChild(li)
        })
    infoText.innerHTML = ''
    }
}

async function addJump() {
    let newJumpNumber = document.getElementById('newJumpNumber')
    let newJumpDate = document.getElementById('newJumpDate')
    let newJumpHeight = document.getElementById('newJumpHeight')
    let newJumpFalltime = document.getElementById('newJumpFalltime')
    const data = { 
        'number': newJumpNumber.value,
        'date': newJumpDate.value,
        'height': newJumpHeight.value,
        'falltime':newJumpFalltime.value
    }
    const response = await fetch('http://localhost:3000/jumps', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    let jump = await response.json()
    let jumpsList = document.getElementById('jumpsList')
    let li = createJumpListItem(jump)
    jumpsList.appendChild(li)
  
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = ''
    newJumpNumber.value = ''
    newJumpDate.value = ''
    newJumpHeight.value = ''
    newJumpFalltime.value = ''
}

function editJump(id){
    let li = document.getElementById(id)
    let number = document.getElementById("newJumpNumber")
    let jump_content = li.innerHTML.slice(0, -63)
    number.value = jump_content
    let button = document.getElementById("addJumpBtn")
    button.style.backgroundColor = "yellow"
    button.innerHTML = "Tallenna"
    button.onclick = function() { saveJump(id) }
}

async function saveJump(id){  // Erheitä esim text newJump.value
    let newJump = document.getElementById('newJump')
    const data = { 'text': newJump.value }
    const response = await fetch('http://localhost:3000/jumps/'+id, {
        method: 'PUT',
        headers: {
        'Content-Type': 'application/json'
        },
    body: JSON.stringify(data)
    })
    let jump = await response.json()
    document.getElementById(jump._id).firstChild.nodeValue = jump.text
    let addButton = document.getElementById('btn')
    addButton.setAttribute('onclick', "addJump()")
    addButton.innerHTML = "Lissee"
    addButton.style.backgroundColor = ""
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = ''
    newJump.value = ''
}

async function removeJump(id) {
    const response = await fetch('http://localhost:3000/jumps/'+id, {
        method: 'DELETE'
    })
    let responseJson = await response.json()
    let li = document.getElementById(id)
    li.parentNode.removeChild(li)
  
    let jumpsList = document.getElementById('jumpsList')
    if (!jumpsList.hasChildNodes()) {
        let infoText = document.getElementById('infoText')
        infoText.innerHTML = 'Ei tehtäviä'
    }
}