{{template "base" .}}

{{define "content" }}
    <div class="container">
        <div class="row">
            <div class="col">
                <h1 class="mt-5">Test microservices</h1>
                <hr>
                <a id="brokerBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test Broker</a>
                <a id="authBrokerBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test Auth</a>
                <a id="logBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test Log</a>
                <a id="mailBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test Mail</a>
                <a id="logGBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test gRPC log</a>

                <div id="output" class="mt-5" style="outline: 1px solid silver; padding: 2em;">
                    <span class="text-muted">Output shows here...</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h4 class="mt-5">Sent</h4>
                <div class="mt-1" style="outline: 1px solid silver; padding: 2em;">
                    <pre id="payload"><span class="text-muted">Nothing sent yet...</span></pre>
                </div>
            </div>
            <div class="col">
                <h4 class="mt-5">Received</h4>
                <div class="mt-1" style="outline: 1px solid silver; padding: 2em;">
                    <pre id="received"><span class="text-muted">Nothing received yet...</span></pre>
                </div>
            </div>
        </div>
    </div>
{{end}}

{{define "js"}}
    <script>
    let brokerBtn = document.getElementById("brokerBtn");
    let authBrokerBtn = document.getElementById("authBrokerBtn");
    let logBtn = document.getElementById("logBtn");
    let logGBtn = document.getElementById("logGBtn");
    let output = document.getElementById("output");
    let sent = document.getElementById("payload");
    let recevied = document.getElementById("received");
    let mailBtn = document.getElementById("mailBtn");

    mailBtn.addEventListener("click", function() {

        const payload = {
            action: "mail",
            mail: {
                from: "me@example.com",
                to: "you@there.com",
                subject: "Test email",
                message: "Hello world!",
            }
        }

        const headers = new Headers();
        headers.append("Content-Type", "application/json");

        const body = {
            method: 'POST',
            body: JSON.stringify(payload),
            headers: headers,
        }

        fetch("http:\/\/localhost:8080/handle", body)
        .then((response) => response.json())
        .then((data) => {
            sent.innerHTML = JSON.stringify(payload, undefined, 4);
            received.innerHTML = JSON.stringify(data, undefined, 4);
            if (data.error) {
                output.innerHTML += `<br><strong>Error:</strong> ${data.message}`;
            } else {
                output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
            }
        })
        .catch((error) => {
            output.innerHTML += "<br><br>Eror: " + error;
        })
    })

    logGBtn.addEventListener("click", function() {
        const payload = {
            action: "log",
            log: {
                name: "event",
                data: "Some kind of gRPC data",
            }
        }

        const headers = new Headers();
        headers.append("Content-Type", "application/json");

        const body = {
            method: "POST",
            body: JSON.stringify(payload),
            headers: headers,
        }

        fetch("http:\/\/localhost:8080/log-grpc", body)
        .then((response) => response.json())
        .then((data) => {
            sent.innerHTML = JSON.stringify(payload, undefined, 4);
            received.innerHTML = JSON.stringify(data, undefined, 4);
            if (data.error) {
                output.innerHTML += `<br><strong>Error:</strong> ${data.message}`;
            } else {
                output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
            }
        })
        .catch((error) => {
            output.innerHTML += "<br><br>Error: " + error;
        })        
    })

    logBtn.addEventListener("click", function() {
        const payload = {
            action: "log",
            log: {
                name: "event",
                data: "Some kind of data",
            }
        }

        const headers = new Headers();
        headers.append("Content-Type", "application/json");

        const body = {
            method: "POST",
            body: JSON.stringify(payload),
            headers: headers,
        }

        fetch("http:\/\/localhost:8080/handle", body)
        .then((response) => response.json())
        .then((data) => {
            sent.innerHTML = JSON.stringify(payload, undefined, 4);
            received.innerHTML = JSON.stringify(data, undefined, 4);
            if (data.error) {
                output.innerHTML += `<br><strong>Error:</strong> ${data.message}`;
            } else {
                output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
            }
        })
        .catch((error) => {
            output.innerHTML += "<br><br>Error: " + error;
        })        
    })

    authBrokerBtn.addEventListener("click", function() {

        const payload = {
            action: "auth",
            auth: {
                email: "admin@example.com",
                password: "verysecret",
            }
        }

        const headers = new Headers();
        headers.append("Content-Type", "application/json");

        const body = {
            method: 'POST',
            body: JSON.stringify(payload),
            headers: headers,
        }

        fetch("http:\/\/localhost:8080/handle", body)
        .then((response) => response.json())
        .then((data) => {
            sent.innerHTML = JSON.stringify(payload, undefined, 4);
            received.innerHTML = JSON.stringify(data, undefined, 4);
            if (data.error) {
                output.innerHTML += `<br><strong>Error:</strong> ${data.message}`;
            } else {
                output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
            }
        })
        .catch((error) => {
            output.innerHTML += "<br><br>Eror: " + error;
        })
    })

    brokerBtn.addEventListener("click", function() {

        const body = {
            method: 'POST',
        }

        fetch("http:\/\/localhost:8080", body)
        .then((response) => response.json())
        .then((data) => {
            sent.innerHTML ="empty post request";
            received.innerHTML = JSON.stringify(data, undefined, 4);
            if (data.error) {
                console.log(data.message);
            } else {
                output.innerHTML += `<br><strong>Response from broker service</strong>: ${data.message}`;
            }
        })
        .catch((error) => {
            output.innerHTML += "<br><br>Eror: " + error;
        })
    })
        
    </script>
{{end}}
