ayobami/node_task_2a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete node task 2a

Browse Source
This commit is contained in:
Ayobami
2025-07-28 06:42:00 +01:00
parent fe95626d9f
commit bd70df60b9
17 changed files with 1968 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/flow.html
+127
View File
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flow Builder</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto p-4 max-w-4xl">
<h1 class="text-3xl font-bold text-center mb-6">Flow Builder</h1>
<!-- Create Flow Section -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Create New Flow</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input
type="text"
id="flow-name"
placeholder="Flow Name"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<input
type="text"
id="flow-description"
placeholder="Description"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<button
id="create-flow-btn"
class="mt-4 bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
>
Create Flow
</button>
</div>
<!-- Add Task Section -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Add Task to Flow</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<select
id="flow-select"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select Flow</option>
</select>
<select
id="action-type"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select Action</option>
<option value="send_test_mail">Send Test Mail</option>
<option value="http_get_request">HTTP GET Request</option>
<option value="mysql_select">MySQL Select</option>
<option value="drive_upload">Drive Upload</option>
</select>
<input
type="text"
id="task-input"
placeholder="Input Data"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<input
type="number"
id="order-index"
placeholder="Order"
min="0"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<button
id="add-task-btn"
class="mt-4 bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600"
>
Add Task
</button>
</div>
<!-- Flow Details Section -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Flow Details</h2>
<div id="flow-details" class="space-y-4">
<!-- Flow details will be populated here -->
</div>
</div>
<!-- Execute Flow Section -->
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4">Execute Flow</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<select
id="execute-flow-select"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Select Flow to Execute</option>
</select>
<input
type="text"
id="execute-payload"
placeholder="Payload (optional)"
class="px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div class="mt-4 space-x-4">
<button
id="execute-btn"
class="bg-purple-500 text-white px-6 py-2 rounded hover:bg-purple-600"
>
Execute Flow
</button>
<button
id="webhook-btn"
class="bg-orange-500 text-white px-6 py-2 rounded hover:bg-orange-600"
>
Get Webhook URL
</button>
</div>
<div id="execution-results" class="mt-4 p-4 bg-gray-100 rounded hidden">
<!-- Execution results will be shown here -->
</div>
</div>
</div>
<script src="/flow.js"></script>
</body>
</html>