SW 2022-05-13

<!-- owmap_example.HTML -->
<!-- exemplo de utilização de ums serviço terceiro, externo, por pedido assíncrono -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openweathermap.org - Exemplo de pedido</title>
    <script src="owmap_example.js"></script>
</head>
<body>
    <h1>Exemplo de pedido à API de "Weather" de
        <a href="https://openweathermap.org">https://openweathermap.org</a>
    </h1>
    <form>
        <label for="idLocal">O nome de uma localização:</label>
        <select id="idSelectPredefinedLocations">
            <option>Santarém, Portugal</option>
            <option>Lisboa, Portugal</option>
            <option selected>Santiago do Chile, Chile</option>
        </select>
        <br>
        <input
            type="text"
            id="idLocal"
            placeholder="Cidade, País">
        <input type="button" id="idBtnObterResposta" value="obter resposta">
    </form>
    <hr>
    <section id="idSectionFeedback"></section>
</body>
</html>


//owmap_example.js

window.onload = boot

const ID_SELECT_PREDEFINED_LOCALS = "idSelectPredefinedLocations",
    ID_BTN_OBTER_RESPOSTA = "idBtnObterResposta",
    ID_LOCAL = "idLocal",
    ID_SECTION_FEEDBACK = "idSectionFeedback"

var oSelectPreDefLocals, oBtnObterResposta, oLocal, oSFeedback

function id(pId){return document.getElementById(pId)}

function boot(){
    oSelectPreDefLocals = id(ID_SELECT_PREDEFINED_LOCALS)
    oBtnObterResposta = id(ID_BTN_OBTER_RESPOSTA)
    oLocal = id(ID_LOCAL)
    oSFeedback = id(ID_SECTION_FEEDBACK)

    oBtnObterResposta.onclick = obterResposta
}//boot

const OWMAP_BASE_URL =
    "https://api.openweathermap.org/data/2.5/weather?"

function buildRequest(
    pLocal,
    pApiKey=MY_KEY
){
    var strLocal = encodeURIComponent(pLocal)
    var strReq = `${OWMAP_BASE_URL}q=${strLocal}&appid=${pApiKey}`
    return strReq
}//buildRequest

function obterResposta(){
    //fabricar o pedido
    var strIdLocal = oLocal.value.trim()
    var strLocal = strIdLocal==="" ? oSelectPreDefLocals.value : strIdLocal
    var strReq=buildRequest(strLocal) //URL

    //mostra apenas uma a que permite executar o pedido
    oSFeedback.innerHTML = `<a href="${strReq}">${strReq}</a>`

    //enviar o pedido + visualizar a resposta a pedido
    ajaxGet(
        strReq,
        oSFeedback
    )
}//obterResposta

function ajaxGet(
    pUrlReq, //API endpoint
    pWhereToReply,
    pAsync=true
){
    var oReq = new XMLHttpRequest()
    if(oReq){
        oReq.open(
            "GET",
            pUrlReq,
            true
        )
        oReq.onreadystatechange = respondeMudancaNaMaturidadeDoPedido
        oReq.mWhereToReply = pWhereToReply
        oReq.send(null)

        return true
    }
    else{
        return false
    }
}//ajaxGet

function respondeMudancaNaMaturidadeDoPedido(){
    var bResponseReady = this.readyState===4 && this.status===200
    if(bResponseReady){
        this.mWhereToReply.innerHTML = this.responseText
        this.oResponse = json.parse(this.responseText)
    }
    else{
        this.mWhereToReply.innerHTML+=`Current state: ${this.readyState}<br>`
    }
}//respondeMudancaNaMaturidadeDoPedido