From 9b942fb7c821fce1aabd5721c2858f43fcd249a6 Mon Sep 17 00:00:00 2001
From: Panos Syskakis <75637426+Pansysk75@users.noreply.github.com>
Date: Tue, 26 Dec 2023 00:37:17 +0200
Subject: [PATCH] Fix backend url and JS button trigger

---
 frontend/README.md     |  2 +-
 frontend/builds.html   | 35 ++---------------------------------
 frontend/src/builds.js |  9 +++++++--
 frontend/src/config.js |  6 ++++++
 4 files changed, 16 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/config.js

diff --git a/frontend/README.md b/frontend/README.md
index 744e42d..7853373 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -5,6 +5,6 @@ This is the frontend of the pc components app.
 Instructions:  
 Serve using python's http server:  
 ```bash
-python -m http.server --directory public 8000
+python -m http.server 8000
 ```
 Then navigate to `localhost:8000` in your browser.
diff --git a/frontend/builds.html b/frontend/builds.html
index 8296280..e10ff6f 100644
--- a/frontend/builds.html
+++ b/frontend/builds.html
@@ -33,43 +33,12 @@ <h1  class = "header">PC Components Picker</h1>
       <h3>PC Build Viewer</h3>
       <label for="buildId">Enter Build ID:</label>
       <input type="number" id="buildId" name="buildId">
-      <button onclick="fetchBuild()">Get Build</button>
+      <button id="getBuild" type="button">Get Build</button>
     </div>
     <div id="buildDetails">
         <!-- Build details will be displayed here -->
     </div>
+    <script src="src/builds.js" type="module"></script>
 
-    <script src="src/builds.js"></script>
-    <!-- <script>
-        function fetchBuild() {
-            var buildId = document.getElementById('buildId').value;
-            var backendUrl = 'http://localhost:81';
-            var url = backendUrl + '/build/' + buildId;
-            console.log('Fetching build from ' + url);
-            // If response is successful, parse the JSON and display the build
-            // Else, display the error
-            fetch(url)
-                .then(response => {
-                    if (response.ok) {
-                        return response.json();
-                    } else if (response.status === 404) {
-                        throw new Error('Build not found');
-                    } else {
-                        throw new Error('Something went wrong');
-                    }
-                })
-                .then(build => displayBuild(build))
-                .catch(error => displayError(error));
-        }
-
-        function displayBuild(build) {
-            var buildDetails = document.getElementById('buildDetails');
-            buildDetails.innerHTML = JSON.stringify(build, null, 2);
-        }
-        function displayError(error) {
-            var buildDetails = document.getElementById('buildDetails');
-            buildDetails.innerHTML = error;
-        }
-    </script> -->
 </body>
 </html>
diff --git a/frontend/src/builds.js b/frontend/src/builds.js
index 79a121e..66b34ae 100644
--- a/frontend/src/builds.js
+++ b/frontend/src/builds.js
@@ -1,7 +1,8 @@
+import {config} from './config.js';
+
 function fetchBuild() {
     var buildId = document.getElementById('buildId').value;
-    var backendUrl = 'http://localhost:81';
-    var url = backendUrl + '/build/' + buildId;
+    var url = config.backendUrl + '/build/' + buildId;
     console.log('Fetching build from ' + url);
     // If response is successful, parse the JSON and display the build
     // Else, display the error
@@ -19,6 +20,10 @@ function fetchBuild() {
         .catch(error => displayError(error));
 }
 
+// Hook to getBuild button
+var getBuildButton = document.getElementById('getBuild');
+getBuildButton.addEventListener('click', fetchBuild);
+
 function displayBuild(build) {
     var buildDetails = document.getElementById('buildDetails');
     buildDetails.innerHTML = JSON.stringify(build, null, 2);
diff --git a/frontend/src/config.js b/frontend/src/config.js
new file mode 100644
index 0000000..7de3bc5
--- /dev/null
+++ b/frontend/src/config.js
@@ -0,0 +1,6 @@
+
+var config = {
+    backendUrl: 'http://159.89.215.209:81'
+};
+
+export {config};
\ No newline at end of file