feat: [wip] - Implement html node

2025-10-06 00:16:49 +08:00 · 2024-11-20 22:42:04 +05:45
parent 9ffbeb23c6
commit d29addc652
4 changed files with 170 additions and 26 deletions
--- a/dag/v2/api.go
+++ b/dag/v2/api.go
@@ -3,6 +3,7 @@ package v2
 import (
 	"encoding/json"
 	"fmt"
+	"log"
 	"net/http"
 	"strings"

@@ -59,14 +60,18 @@ func (tm *DAG) taskStatusHandler(w http.ResponseWriter, r *http.Request) {
 		key = strings.Split(key, Delimiter)[0]
 		nodeID := strings.Split(value.NodeID, Delimiter)[0]
 		rs := jsonparser.Delete(value.Result.Data, "html_content")
+		status := value.Status
+		if status == StatusProcessing {
+			status = StatusCompleted
+		}
 		state := TaskState{
 			NodeID:    nodeID,
-			Status:    value.Status,
+			Status:    status,
 			UpdatedAt: value.UpdatedAt,
 			Result: Result{
 				Data:   rs,
 				Error:  value.Result.Error,
-				Status: value.Result.Status,
+				Status: status,
 			},
 		}
 		result[key] = state
@@ -79,5 +84,6 @@ func (tm *DAG) taskStatusHandler(w http.ResponseWriter, r *http.Request) {
 func (tm *DAG) Start(addr string) {
 	http.HandleFunc("/process", tm.render)
 	http.HandleFunc("/task/status", tm.taskStatusHandler)
+	log.Printf("Server listening on http://%s", addr)
 	http.ListenAndServe(addr, nil)
 }
--- a/examples/v2.go
+++ b/examples/v2.go
@@ -105,5 +105,5 @@ func main() {
 	if dag.Error != nil {
 		panic(dag.Error)
 	}
-	dag.Start(":8080")
+	dag.Start("0.0.0.0:8080")
 }
--- a/examples/webroot/form.html
+++ b/examples/webroot/form.html
@@ -4,24 +4,100 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Data Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f7fc;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            padding-top: 20px;
+        }
+        .container {
+            width: 80%;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 30px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        form {
+            display: grid;
+            gap: 15px;
+        }
+        label {
+            font-size: 16px;
+            color: #333;
+        }
+        input, select {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+            box-sizing: border-box;
+        }
+        input:focus, select:focus {
+            border-color: #0066cc;
+            outline: none;
+        }
+        input[type="submit"] {
+            background-color: #0066cc;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            border: none;
+            padding: 12px;
+            border-radius: 4px;
+            transition: background-color 0.3s;
+        }
+        input[type="submit"]:hover {
+            background-color: #005bb5;
+        }
+        .footer {
+            text-align: center;
+            margin-top: 40px;
+            padding-bottom: 20px;
+            font-size: 14px;
+            color: #555;
+        }
+    </style>
 </head>
 <body>
 <h1>Enter Your Information</h1>
-<form action="/process?task_id={{task_id}}&next=true" method="POST">
-    <label for="email">Email:</label><br>
-    <input type="email" id="email" name="email" value="s.baniya.np@gmail.com" required><br><br>
+<div class="container" id="result">
+    <form action="/process?task_id={{task_id}}&next=true" method="POST">
+        <div>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" value="s.baniya.np@gmail.com" required>
+        </div>

-    <label for="age">Age:</label><br>
-    <input type="number" id="age" name="age" value="18" required><br><br>
+        <div>
+            <label for="age">Age:</label>
+            <input type="number" id="age" name="age" value="18" required>
+        </div>

-    <label for="gender">Gender:</label><br>
+        <div>
+            <label for="gender">Gender:</label>
            <select id="gender" name="gender" required>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
-    </select><br><br>
+            </select>
+        </div>

+        <div>
            <input type="submit" value="Submit">
-</form>
+        </div>
+    </form>
+</div>
+
+<div class="footer">
+    <p>&copy; 2024 Task Manager</p>
+</div>
 </body>
 </html>
--- a/examples/webroot/result.html
+++ b/examples/webroot/result.html
@@ -15,16 +15,17 @@
        h1 {
            text-align: center;
            color: #333;
-            padding-top: 20px;
+            padding-top: 30px;
        }

        .container {
-            width: 80%;
+            width: 90%;
+            max-width: 900px;
            margin: 0 auto;
-            padding: 20px;
+            padding: 30px;
            background-color: white;
            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        table {
@@ -34,30 +35,49 @@
        }

        table th, table td {
-            padding: 10px;
+            padding: 15px;
            border: 1px solid #ddd;
            text-align: left;
+            vertical-align: top;
        }

        table th {
            background-color: #f1f1f1;
            color: #333;
+            font-weight: bold;
+        }
+
+        table tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+
+        table td pre {
+            background-color: #f5f5f5;
+            padding: 10px;
+            border-radius: 4px;
+            overflow: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
        }

        .status-pending {
            color: orange;
+            font-weight: bold;
        }

        .status-processing {
            color: blue;
+            font-weight: bold;
        }

        .status-completed {
            color: green;
+            font-weight: bold;
        }

        .status-failed {
            color: red;
+            font-weight: bold;
        }

        .node-result {
@@ -66,13 +86,53 @@

        .node-result h2 {
            color: #333;
+            margin-bottom: 20px;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding-bottom: 20px;
+            font-size: 14px;
+            color: #555;
        }
+
+        .footer a {
+            text-decoration: none;
+            color: #0066cc;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        .error-message {
+            color: red;
+            font-size: 18px;
+            margin-top: 20px;
+        }
+
+        .success-message {
+            color: green;
+            font-size: 18px;
+            margin-top: 20px;
+        }
+
+        .go-back {
+            display: inline-block;
+            margin-top: 10px;
+            padding: 10px 20px;
+            background-color: #0066cc;
+            color: white;
+            border-radius: 5px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .go-back:hover {
+            background-color: #005bb5;
+        }
+
    </style>
 </head>
 <body>
@@ -101,12 +161,13 @@
            .then(data => {
                if(data?.message) {
                    document.getElementById('result').innerHTML = `
-                        <p>Error loading task result. ${data.message}</p> <br> <a href="/form">Go back</a>`;
+                        <p class="error-message">Error loading task result: ${data.message}</p>
+                        <a href="/form" class="go-back">Go back</a>`;
                } else {
                    const container = document.getElementById('result');
                    let htmlContent = '';
                    htmlContent += `
-                        <h2>Final Task Result <a href="/process">Go back</a></h2>
+                        <h2 style="display: flex; justify-content: space-between"><span>Final Task Result</span><span><a href="/process">Go Back</a></span></h2>
                        <table>
                            <tr>
                                <th>Task ID</th>
@@ -152,10 +213,10 @@
            })
            .catch(error => {
                console.log(error)
-                document.getElementById('result').innerHTML = '<p>Error loading task result.</p>';
+                document.getElementById('result').innerHTML = '<p class="error-message">Error loading task result.</p>';
            });
    } else {
-        document.getElementById('result').innerHTML = '<p>Task ID not provided.</p>';
+        document.getElementById('result').innerHTML = '<p class="error-message">Task ID not provided.</p>';
    }

    function getStatusClass(status) {
@@ -173,5 +234,6 @@
        }
    }
 </script>
+
 </body>
 </html>