Fix backend url and JS button trigger

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.

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>

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);

frontend/src/config.js

@@ -0,0 +1,6 @@
+
+var config = {
+    backendUrl: 'http://159.89.215.209:81'
+};
+
+export {config};