package/mq
1
0
Fork 0
mirror of https://github.com/oarkflow/mq.git synced 2025-10-06 00:16:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: [wip] - Implement html node

Browse Source
This commit is contained in:
sujit
2024-11-20 22:42:04 +05:45
parent 9ffbeb23c6
commit d29addc652
4 changed files with 170 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dag/v2/api.go
View File

@@ -3,6 +3,7 @@ package v2
import ( import (
"encoding/json" "encoding/json"
"fmt" "fmt"
"log"
"net/http" "net/http"
"strings" "strings"
@@ -59,14 +60,18 @@ func (tm *DAG) taskStatusHandler(w http.ResponseWriter, r *http.Request) {
key = strings.Split(key, Delimiter)[0] key = strings.Split(key, Delimiter)[0]
nodeID := strings.Split(value.NodeID, Delimiter)[0] nodeID := strings.Split(value.NodeID, Delimiter)[0]
rs := jsonparser.Delete(value.Result.Data, "html_content") rs := jsonparser.Delete(value.Result.Data, "html_content")
status := value.Status
if status == StatusProcessing {
status = StatusCompleted
}
state := TaskState{ state := TaskState{
NodeID: nodeID, NodeID: nodeID,
Status: value.Status, Status: status,
UpdatedAt: value.UpdatedAt, UpdatedAt: value.UpdatedAt,
Result: Result{ Result: Result{
Data: rs, Data: rs,
Error: value.Result.Error, Error: value.Result.Error,
Status: value.Result.Status, Status: status,
}, },
} }
result[key] = state result[key] = state
@@ -79,5 +84,6 @@ func (tm *DAG) taskStatusHandler(w http.ResponseWriter, r *http.Request) {
func (tm *DAG) Start(addr string) { func (tm *DAG) Start(addr string) {
http.HandleFunc("/process", tm.render) http.HandleFunc("/process", tm.render)
http.HandleFunc("/task/status", tm.taskStatusHandler) http.HandleFunc("/task/status", tm.taskStatusHandler)
log.Printf("Server listening on http://%s", addr)
http.ListenAndServe(addr, nil) http.ListenAndServe(addr, nil)
} }

2
examples/v2.go
View File

@@ -105,5 +105,5 @@ func main() {
if dag.Error != nil { if dag.Error != nil {
panic(dag.Error) panic(dag.Error)
} }
dag.Start(":8080") dag.Start("0.0.0.0:8080")
} }

104
examples/webroot/form.html
View File

@@ -4,24 +4,100 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Data Form</title> <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> </head>
<body> <body>
<h1>Enter Your Information</h1> <h1>Enter Your Information</h1>
<form action="/process?task_id={{task_id}}&next=true" method="POST"> <div class="container" id="result">
<label for="email">Email:</label><br> <form action="/process?task_id={{task_id}}&next=true" method="POST">
<input type="email" id="email" name="email" value="s.baniya.np@gmail.com" required><br><br> <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> <div>
<input type="number" id="age" name="age" value="18" required><br><br> <label for="age">Age:</label>
<input type="number" id="age" name="age" value="18" required>
</div>
<label for="gender">Gender:</label><br> <div>
<select id="gender" name="gender" required> <label for="gender">Gender:</label>
<option value="male">Male</option> <select id="gender" name="gender" required>
<option value="female">Female</option> <option value="male">Male</option>
<option value="other">Other</option> <option value="female">Female</option>
</select><br><br> <option value="other">Other</option>
</select>
</div>
<input type="submit" value="Submit"> <div>
</form> <input type="submit" value="Submit">
</div>
</form>
</div>
<div class="footer">
<p>&copy; 2024 Task Manager</p>
</div>
</body> </body>
</html> </html>

80
examples/webroot/result.html
View File

@@ -15,16 +15,17 @@
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
padding-top: 20px; padding-top: 30px;
} }
.container { .container {
width: 80%; width: 90%;
max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 30px;
background-color: white; background-color: white;
border-radius: 8px; 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 { table {
@@ -34,30 +35,49 @@
} }
table th, table td { table th, table td {
padding: 10px; padding: 15px;
border: 1px solid #ddd; border: 1px solid #ddd;
text-align: left; text-align: left;
vertical-align: top;
} }
table th { table th {
background-color: #f1f1f1; background-color: #f1f1f1;
color: #333; 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 { .status-pending {
color: orange; color: orange;
font-weight: bold;
} }
.status-processing { .status-processing {
color: blue; color: blue;
font-weight: bold;
} }
.status-completed { .status-completed {
color: green; color: green;
font-weight: bold;
} }
.status-failed { .status-failed {
color: red; color: red;
font-weight: bold;
} }
.node-result { .node-result {
@@ -66,13 +86,53 @@
.node-result h2 { .node-result h2 {
color: #333; color: #333;
margin-bottom: 20px;
} }
.footer { .footer {
text-align: center; text-align: center;
margin-top: 40px; margin-top: 40px;
padding-bottom: 20px; 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> </style>
</head> </head>
<body> <body>
@@ -101,12 +161,13 @@
.then(data => { .then(data => {
if(data?.message) { if(data?.message) {
document.getElementById('result').innerHTML = ` 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 { } else {
const container = document.getElementById('result'); const container = document.getElementById('result');
let htmlContent = ''; let htmlContent = '';
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> <table>
<tr> <tr>
<th>Task ID</th> <th>Task ID</th>
@@ -152,10 +213,10 @@
}) })
.catch(error => { .catch(error => {
console.log(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 { } 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) { function getStatusClass(status) {
@@ -173,5 +234,6 @@
} }
} }
</script> </script>
</body> </body>
</html> </html>