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)

    li.appendChild(jumpItemFullInfo(jump))  // KORJAA piilottus tuplaklikkaus

    // Shows and hides rest of the jump info
    li.onclick = function() {
        let clickedItem = document.getElementById(jump._id).getElementsByClassName('fullJumpInfo')[0]
        if (clickedItem.style.display != 'none') {
            clickedItem.style.display = 'none'
        }
        else {
            clickedItem.style.display = 'list-item'
        }
    }
    return li
}


function jumpItemFullInfo(jump) {
    const specs = [
        jump.height,
        jump.falltime
    ]
    let ul = document.createElement('ul')
    let ulClass = document.createAttribute('class')
    ulClass.value = 'fullJumpInfo'
    ul.setAttributeNode(ulClass)
    specs.forEach(spec => {
        let li = document.createElement('li')
        let jumpSpec = document.createTextNode(spec)
        li.appendChild(jumpSpec)
        ul.appendChild(li)
    });
    return ul
}

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ä'
    }
}