From d03959957a3b0b3bf8cd123824392e99b736a319 Mon Sep 17 00:00:00 2001
From: vinchent <vinchent@vinchent.xyz>
Date: Wed, 28 Aug 2024 09:49:39 +0200
Subject: [PATCH] Test broker from the FE

---
 front-end/cmd/web/templates/test.page.gohtml | 27 +++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/front-end/cmd/web/templates/test.page.gohtml b/front-end/cmd/web/templates/test.page.gohtml
index 8319358..fd95f88 100644
--- a/front-end/cmd/web/templates/test.page.gohtml
+++ b/front-end/cmd/web/templates/test.page.gohtml
@@ -7,6 +7,8 @@
                 <h1 class="mt-5">Test microservices</h1>
                 <hr>
 
+                <a id="brokerBtn" class="btn btn-outline-secondary" href="javascript:void(0);">Test Broker</a>
+
                 <div id="output" class="mt-5" style="outline: 1px solid silver; padding: 2em;">
                     <span class="text-muted">Output shows here...</span>
                 </div>
@@ -31,6 +33,29 @@
 
 {{define "js"}}
     <script>
-        
+        let brokerBtn = document.getElementById("brokerBtn");
+        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;
+                });
+        });
     </script>
 {{end}}