addressbook/Vanilla/public/assets/js/functions.js

/*
 * Copyright (c) 2022. Micha Espey <tracer@24unix.net>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 */

function addAddress(url) {
    location.href = url
}

function editAddress(id) {
    if (document.getElementById('edit_button_' + id).value === 'Save') {
        // save
        const url = "/address/update";
        fetch(url, {
            method: "POST",
            body: JSON.stringify({
                id: id,
                owner: document.getElementById('owner_' + id).value,
                first: document.getElementById('first_' + id).value,
                last: document.getElementById('last_' + id).value,
                street: document.getElementById('street_' + id).value,
                zip: document.getElementById('zip_' + id).value,
                city: document.getElementById('city_' + id).value,
                phone: document.getElementById('phone_' + id).value,
            })
        })
            .then(
                response => response.text()
            ).then(
            json => {
                let jsonObject = JSON.parse(json)
                if (jsonObject.status === 200) {
                    setInfo('Data successfully saved.')
                } else {
                    setError(jsonObject.message);
                }
            }
        );

        document.getElementById('first_' + id).disabled = true
        document.getElementById('last_' + id).disabled = true
        document.getElementById('street_' + id).disabled = true
        document.getElementById('zip_' + id).disabled = true
        document.getElementById('city_' + id).disabled = true
        document.getElementById('phone_' + id).disabled = true

        document.getElementById('edit_button_' + id).value = 'Edit'
    } else {
        //switch to edit
        document.getElementById('first_' + id).disabled = false
        document.getElementById('last_' + id).disabled = false
        document.getElementById('street_' + id).disabled = false
        document.getElementById('zip_' + id).disabled = false
        document.getElementById('city_' + id).disabled = false
        document.getElementById('phone_' + id).disabled = false

        document.getElementById('edit_button_' + id).value = 'Save'
    }
}

function deleteAddress(id) {
    if (confirm('Are you sure?')) {
        const url = "/address/delete";
        fetch(url, {
            method: "POST",
            body: JSON.stringify({
                id: id
            })
        })
            .then(
                response => response.text()
            ).then(
            json => {
                let jsonObject = JSON.parse(json)
                if (jsonObject.status === 200) {
                    setInfo('Data successfully saved.')
                } else {
                    setError(jsonObject.message);
                }
            }
        );
        let row = document.getElementById('row_' + id)
        row.parentNode.removeChild(row)
    }
}

function upCase(text) {
    return text[0].toUpperCase() + text.substring(1);
}

function sortBy(column) {
    // clear titles
    const titles = ['first', 'last', 'street', 'zip', 'city', 'phone']
    titles.forEach((title) =>
        document.getElementById(title).innerHTML = upCase(title)
    )

    console.log("col", column)
    console.log("curcol", currentColumn)

    if (currentColumn === column) {
        console.log("in switch")
        // switch direction on every call on same column
        if (currentSortOrder === 'asc') {
            currentSortOrder = 'desc'
        } else {
            currentSortOrder = 'asc'
        }
        console.log("col", column)
    } else {
        currentColumn = column
    }

    let currentTitleElement = document.getElementById(column)
    let currentTitle = currentTitleElement.innerHTML
    let newTitle

    if (currentSortOrder === 'asc') {
        newTitle = currentTitle[0] + currentTitle.substring(1) + '&nbsp;&#11015;'
    } else {
        newTitle = currentTitle[0] + currentTitle.substring(1) + '&nbsp;&#11014;'
    }
    currentTitleElement.innerHTML = newTitle

    const table = document.getElementById('address_table');
    let dirty = true;
    // loop until clean
    while (dirty) {
        // assume we are finished
        dirty = false
        const rows = table.rows;
        for (let i = 1; i < (rows.length - 2); i++) {
            let x = rows[i]
            let rowXId = x.id
            let rowXNumber = rowXId.match(/\d+/)
            let valueX = document.getElementById(column + '_' + rowXNumber).value

            let y = rows[i + 1]
            let rowYId = y.id
            let rowYNumber = rowYId.match(/\d+/)
            let valueY = document.getElementById(column + '_' + rowYNumber).value

            let sortOrder
            if (currentSortOrder === 'asc') {
                sortOrder = 1
            } else {
                sortOrder = -1
            }
            if (valueX.localeCompare(valueY) === sortOrder) {
                x.parentNode.insertBefore(y, x);
                dirty = true
            }
        }
    }
}


function setInfo(info) {
    const infoBox = document.getElementById('info_box')
    infoBox.innerHTML = info
    infoBox.style.display = 'block'
    infoBox.classList.add('panel_float')
    setTimeout(() => {
        infoBox.style.display = 'none'
    }, 2500)
}

function setError(error) {
    const errorBox = document.getElementById('error_box')
    const errorText = document.getElementById('error_text')
    const infoButton = document.getElementById('info_button')
    if (errorBox.style.display === 'block') {
        errorBox.style.display = 'none'
        return
    }
    if (infoButton != null) {
        infoButton.disabled = true
    }
    errorText.innerHTML = error
    errorBox.style.display = 'block'
    errorBox.classList.add('panel_float')
}

function closeError() {
    const errorBox = document.getElementById('error_box')
    const infoButton = document.getElementById('info_button')
    if (infoButton) {
        infoButton.disabled = false
    }
    errorBox.style.display = 'none'

}

// global scope
let currentSortOrder = 'desc'
let currentColumn = 'last'

document.addEventListener('DOMContentLoaded', () => {
    const table = document.getElementById('address_table') || false
    if (table) {
        sortBy('last')
    }
})