[Feat] Frontend trigger airflow from backend

cdfefacd · Manuella Ivana Uli Sianipar · 4e4b2df5 · cdfefacd · cdfefacd · cdfefacd
Commit cdfefacd authored 5 months ago by Manuella Ivana Uli Sianipar
--- a/.gitignore
+++ b/.gitignore
+.env
+config.json
\ No newline at end of file
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,10 +4,11 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Churn Prediction</title>
+    <script src="script.js" defer></script>
 </head>
 <body>
    <h1>Customer Churn Prediction Input</h1>
-    <form method="POST">
+    <form id="churnForm">
        <label for="customerID">Customer ID:</label>
        <input type="text" id="customerID" name="customerID" required><br>


--- a/frontend/script.js
+++ b/frontend/script.js
+document.addEventListener("DOMContentLoaded", () => {
+    fetch('config.json')
+        .then(response => response.json())
+        .then(config => {
+            const apiUrl = config.API_URL;
+            const form = document.getElementById("churnForm");
+
+            form.addEventListener("submit", async (event) => {
+                event.preventDefault();
+
+                const formData = new FormData(form);
+                const data = {};
+                formData.forEach((value, key) => {
+                    data[key] = value;
+                });
+
+                try {
+                    const response = await fetch(`${apiUrl}/`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(data)
+                    });
+
+                    if (response.ok) {
+                        const result = await response.json();
+                        alert('Data submitted successfully!');
+                        console.log('Response from API:', result);
+                    } else {
+                        const text = await response.text();
+                        if (text.startsWith('<')) {
+                            alert('Server returned an error page');
+                        } else {
+                            const error = JSON.parse(text);
+                            alert('Error: ' + (error.message || 'Unknown error'));
+                        }
+                    }
+                } catch (error) {
+                    alert('An error occurred: ' + error.message);
+                    console.error('Error:', error);
+                }
+            });
+        })
+        .catch(error => {
+            console.error("Error loading config.json:", error);
+        });
+});