code.js

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

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

function createTodoListItem(jump) {
    let li = document.createElement('li')
    let li_attr = document.createAttribute('id')
    li_attr.value= jump._id
    li.setAttributeNode(li_attr)
    let text = document.createTextNode(jump.text)
    li.appendChild(text)
    // 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() { editTodo(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() { removeTodo(jump._id) }
    li.appendChild(del_span)
    return li
}

function showTodos(jumps) {
    let jumpsList = document.getElementById('jumpsList')
    let infoText = document.getElementById('infoText')
    // no jumps
    if (jumps.length === 0) {
        infoText.innerHTML = 'Ei tehtäviä'
    } else {    
        jumps.forEach(jump => {
            let li = createTodoListItem(jump)        
            jumpsList.appendChild(li)
        })
    infoText.innerHTML = ''
    }
}

async function addJump() {
    let newJumpNumber = document.getElementById('newJumpNumber')
    let newJumpDate = document.getElementById('newJumpDate')
    const data = { 
        'number': newJumpNumber.value,
        'date': newJumpDate.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 = createTodoListItem(jump)
    jumpsList.appendChild(li)
  
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = ''
    newTodo.value = ''
}

function editTodo(id){
    let li = document.getElementById(id)
    let input = document.getElementById("newTodo")
    let jump_content = li.innerHTML.slice(0, -63)
    input.value = jump_content
    let button = document.getElementById("btn")
    button.style.backgroundColor = "yellow"
    button.innerHTML = "Tallenna"
    button.onclick = function() { saveTodo(id) }
}

async function saveTodo(id){
    let newTodo = document.getElementById('newTodo')
    const data = { 'text': newTodo.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 = ''
    newTodo.value = ''
}

async function removeTodo(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ä'
    }
}