web/js/pis.js

hideLoading()

async function findByOrigDest() {
    showLoading()
    const formData = await fetchOrigDest()
    log(`findByOrigDest: Searching for PIS Code for ${JSON.stringify(formData)}`)
    const endpoint = `pis/${formData.origin}/${formData.destination}`
    const json = await getApi(endpoint)
    if (json == false) {
        await noData()
    } else {
        await displayData(json)
    }
    document.getElementById('crs-box').style = 'display:none'
    document.getElementById('result-box').style = 'display:block'
    hideLoading()
}

async function fetchOrigDest() {
    var orig = document.getElementById("origin").value
    var dest = document.getElementById("destination").value
    return {origin: orig, destination: dest}
}

async function displayData(json) {
    // Receives the JSON Respose ([{},{}]) containing one or more possible
    // PIS codes.  Display the code and the stops with a method of scrolling between them.
    // Maybe as a table or a carousel?
    const div = document.getElementById('result-box')
    const tableHtml = `<table id="result-table">
                      <tr>
                        <th class="code">Code</th>
                        <th class="stops">Stations</th>
                      </tr>
                    </table>`
    div.insertAdjacentHTML("beforeend", tableHtml)
    const table = document.getElementById('result-table')
    const data = JSON.parse(json)
    for(var i = 0; i < data.length; i++) {
        let row = `<tr><td class="code">${data[i][code]}</td>
                         <td class="stops">${data[i][stops]}</td></tr>`
        table.insertAdjacentHTML("beforeend", row)
    }
}

async function noData() {
    msg = '<p>No results found</p>'
    document.getElementById('result-box').insertAdjacentHTML("beforeend", msg)
}

async function reset() {
    document.getElementById('origin').value = ""
    document.getElementById('destination').value = ""
    document.getElementById('result-box').style = 'display:none'
    document.getElementById('crs-box').style = 'display:block'
}