code.js

function init() {
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = 'Ladataan hyppyjä palvelimelta, odota...'
    jumpOrder = 'desc'
    loadJumps()

    // Send form with enter
    window.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            document.getElementById("addJumpBtn").click();
        }});
}

async function loadJumps() {
    let response = await fetch('http://localhost:3000/jumps')
    jumpsJSON = await response.json()
    showJumps(jumpsJSON)
    let jumpOrderButton = document.getElementById('sortJumpsButton')
    jumpOrderButton.style = 'display: block;'
}

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))

    // Shows and hides rest of the jump info
    li.onclick = function() {
        let arrow = document.getElementById(jump._id).getElementsByClassName('headerMore')[0]
        let clickedItem = document.getElementById(jump._id).getElementsByClassName('fullJumpInfo')[0]
            if (clickedItem.style.display != 'none') {
                clickedItem.style.display = 'none'
                arrow.innerHTML = '▼'
            }
            else {
                clickedItem.style.display = 'list-item'
                arrow.innerHTML = '▲'
            }
        }
    return li
}
var totalFalltime = 0
function jumpItemFullInfo(jump) {
    totalFalltime += parseInt(jump.falltime)
    const specs = [
        'Paikka: ' + jump.place,
        'Lentokone: ' + jump.plane,
        'Päävarjo: ' + jump.canopy,
        'Korkeus: ' + jump.height + ' m',
        'Vapaapudotusaika: ' + jump.falltime + ' s ' + `(yht. ${totalFalltime} s)`,
        jump.comments,
        jump.link
    ]
    let ul = document.createElement('ul')
    let ulClass = document.createAttribute('class')
    ulClass.value = 'fullJumpInfo'
    ul.setAttributeNode(ulClass)
    let ulStyle = document.createAttribute('style')
    ulStyle.value = 'display: none;'
    ul.setAttributeNode(ulStyle)    

    specs.forEach((spec, index, specs) => {
        let li = document.createElement('li')
        let jumpSpec = document.createTextNode(spec)
        if (index === specs.length - 1 && spec != '' && spec != undefined) {
            li.appendChild(createHyperlink(spec))
            ul.appendChild(li)
        }
        else if (spec != '') {
            li.appendChild(jumpSpec)
            ul.appendChild(li)
        }
    })
    ul.appendChild(createDeleteButton(jump))
    return ul
}

function createHyperlink(link) {
    if (link.slice(0,4) != 'http') {
        link = `https://${link}`
    }
    let a = document.createElement('a')
    let href = document.createAttribute('href')
    href.value = link
    a.setAttributeNode(href)
    let target = document.createAttribute('target')
    target.value = '_blank'
    a.setAttributeNode(target)
    let linkText = document.createTextNode(link)
    a.appendChild(linkText)
    return a
}

function createDeleteButton(jump) {
    let deleteDiv = document.createElement('div')
    let delDivClass = document.createAttribute('class')
    delDivClass.value = 'jumpItemDeleteButton'
    deleteDiv.setAttributeNode(delDivClass)
    let deleteButton = document.createElement('img')
    deleteButton.src = "../img/trash.png"
    deleteDiv.appendChild(deleteButton)
    deleteButton.onclick = function() { cancelDelete(jump._id) }
    return deleteDiv
}

function cancelDelete(id) {
    let jumpItem = document.getElementById(id)
    let jumpIndex = jumpsJSON.findIndex(jump => jump._id === id)
    let jumpNumber = jumpsJSON[jumpIndex].number
    jumpItem.innerHTML = `#${jumpNumber} 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 = ''
        showJumps(jumpsJSON)
    }

    setTimeout(() => {
        if (!cancel) {
            removeJump(id)
        }
    }, 2500);
}

function showJumps(jumps) {
    let jumpsList = document.getElementById('jumpsList')
    let infoText = document.getElementById('infoText')

    if (jumps.length === 0) {
        infoText.innerHTML = 'Ei hyppyjä'
    } else {
        if (jumpOrder == 'desc') {
            jumps.sort((a, b) => a.number - b.number)
        } else {
            jumps.sort((a, b) => b.number - a.number)
        }
        jumps.reverse().forEach(jump => {
            let li = createJumpListItem(jump)        
            jumpsList.appendChild(li)
        })
        infoText.innerHTML = ''
    }
}

function changeJumpOrder() {
    document.getElementById('jumpsList').innerHTML = ''
    let button = document.getElementById('sortJumpsButton')
    if (button.innerHTML == 'Järjestys ▼') {
        button.innerHTML = 'Järjestys ▲'
        jumpOrder = 'desc'
        showJumps(jumpsJSON)
    } else {
        button.innerHTML = 'Järjestys ▼'
        jumpOrder = 'asc'
        showJumps(jumpsJSON)
    }
}

async function addJump() {
    const keys = ['Number','Date','Place','Plane','Canopy',
                  'Height','Falltime','Comments','Link']
    let data = {}

    keys.forEach(key => {
        let variableName = 'newJump' + key
        let element = document.getElementById(variableName)
        let dataKey = key.toLowerCase()
        data[`${dataKey}`] = element.value
        element.value = ''
    })

    try {
        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.prepend(li)
    } catch (error) {
        console.log(error)
    }
      
    let infoText = document.getElementById('infoText')
    infoText.innerHTML = ''
    loadJumps()
}

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)
    removeLocally(id)
  
    let jumpsList = document.getElementById('jumpsList')
    if (!jumpsList.hasChildNodes()) {
        let infoText = document.getElementById('infoText')
        infoText.innerHTML = 'Ei hyppyjä'
    }
}

function removeLocally(id) {
    var index = jumpsJSON.findIndex(jump => jump._id === id)
    if (index > -1) {
        jumpsJSON.splice(index, 1)
    }
}