Ayobami
128 lines
4.4 KiB
HTML
128 lines
4.4 KiB
HTML
<!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>
|