udemy-go-microservices/front-end/cmd/web/templates/test.page.gohtml

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

                <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 output = document.getElementById("output");
        let sent = document.getElementById("payload");
        let received = document.getElementById("received");

        brokerBtn.addEventListener("click", () => {
            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>Error: " + error;
                });
        });

        authBrokerBtn.addEventListener("click", () => {
            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) {
                        console.log(data.message);
                        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", () => {
            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) {
                        console.log(data.message);
                        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;
                });
        });

    </script>
{{end}}