From cdfefacd3cb3b467a3736da5cccdc5ec394722af Mon Sep 17 00:00:00 2001
From: manuellaiv <13521051@std.stei.itb.ac.id>
Date: Thu, 9 Jan 2025 00:24:02 +0700
Subject: [PATCH] [Feat] Frontend trigger airflow from backend
---
.gitignore | 2 ++
frontend/index.html | 3 ++-
frontend/script.js | 48 +++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 52 insertions(+), 1 deletion(-)
create mode 100644 .gitignore
create mode 100644 frontend/script.js
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..39bdb3d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.env
+config.json
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 88ae730..1d594b5 100644
--- 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>
diff --git a/frontend/script.js b/frontend/script.js
new file mode 100644
index 0000000..6a18e52
--- /dev/null
+++ b/frontend/script.js
@@ -0,0 +1,48 @@
+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);
+ });
+});
--
GitLab