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/chat.html
+49
View File
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Room</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-2xl">
<h1 class="text-3xl font-bold text-center mb-6">Chat Room</h1>
<div class="bg-white rounded-lg shadow-md p-6">
<div
id="chat-messages"
class="h-96 overflow-y-auto mb-4 border rounded p-4"
>
<ul id="message-list" class="space-y-2">
<!-- Messages will be populated here -->
</ul>
</div>
<div class="flex gap-2 mb-4">
<input
type="text"
id="message-input"
placeholder="Type your message..."
class="flex-1 px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
id="send-btn"
class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
>
Send
</button>
</div>
<button
id="save-btn"
class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600"
>
Save Chat
</button>
</div>
</div>
<script src="/chat.js"></script>
</body>
</html>
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>
views/index.html
+12 -5
View File
@@ -137,14 +137,21 @@ https://cdn.jsdelivr.net/npm/tailwindcss@4.1.11/dist/lib.min.js
<div
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center justify-center mt-8"
>
<div
class="w-24 h-24 flex items-center justify-center bg-blue-100 rounded mb-2"
<img
id="upload-preview"
src=""
alt="Latest upload"
class="w-24 h-24 object-cover rounded mb-2"
style="display: none"
/>
<input type="file" id="upload-input" accept="image/*" class="mb-2" />
<button
id="upload-btn"
class="bg-sky-400 text-white font-semibold px-8 py-2 rounded"
>
<span class="text-4xl">&#128247;</span>
</div>
<button class="bg-sky-400 text-white font-semibold px-8 py-2 rounded">
Upload
</button>
<span id="upload-error" class="text-xs text-red-500 mt-2"></span>
</div>
</div>
</div>