121 lines
4.6 KiB
HTML
121 lines
4.6 KiB
HTML
<html>
|
||
<head>
|
||
<title>Hero Agent UI - OpenRPC Spec</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>OpenRPC Specification</h1>
|
||
<nav>
|
||
<a href="/">Dashboard</a>
|
||
<a href="/processes">Processes</a>
|
||
<a href="/jobs">Jobs</a>
|
||
<a href="/openrpc" class="active">OpenRPC</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="openrpc-spec-container">
|
||
<div class="spec-header">
|
||
<h2>@spec.title</h2>
|
||
<div class="spec-meta">
|
||
<span class="spec-version">Version: @spec.version</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-description">
|
||
<p>@spec.description</p>
|
||
</div>
|
||
|
||
<div class="methods-section">
|
||
<h3>Available Methods</h3>
|
||
<div class="methods-list">
|
||
@for method in methods
|
||
<div class="method-card">
|
||
<h4 class="method-name">@method.name</h4>
|
||
<p class="method-summary">@method.summary</p>
|
||
<p class="method-description">@method.description</p>
|
||
<button class="btn" onclick="showMethodExecutor('@method.name')">Execute Method</button>
|
||
</div>
|
||
@end
|
||
</div>
|
||
</div>
|
||
|
||
<div id="method-executor" class="method-executor hidden">
|
||
<h3>Method Executor</h3>
|
||
<div class="executor-content">
|
||
<div class="executor-header">
|
||
<h4 id="executor-method-name">Method Name</h4>
|
||
<button class="close-btn" onclick="hideMethodExecutor()">×</button>
|
||
</div>
|
||
|
||
<div class="executor-body">
|
||
<div class="params-section">
|
||
<h5>Parameters</h5>
|
||
<textarea id="params-editor" placeholder="Enter JSON parameters here..."></textarea>
|
||
</div>
|
||
|
||
<div class="executor-actions">
|
||
<button class="btn btn-primary" onclick="executeMethod()">Execute</button>
|
||
</div>
|
||
|
||
<div class="result-section">
|
||
<h5>Result</h5>
|
||
<pre id="result-display">Results will appear here...</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2025 Hero Agent System</p>
|
||
</footer>
|
||
|
||
<script src="/static/js/main.js"></script>
|
||
<script>
|
||
let currentMethod = '';
|
||
|
||
function showMethodExecutor(methodName) {
|
||
currentMethod = methodName;
|
||
document.getElementById('executor-method-name').textContent = methodName;
|
||
document.getElementById('method-executor').classList.remove('hidden');
|
||
document.getElementById('params-editor').value = '{\n \n}';
|
||
document.getElementById('result-display').textContent = 'Results will appear here...';
|
||
}
|
||
|
||
function hideMethodExecutor() {
|
||
document.getElementById('method-executor').classList.add('hidden');
|
||
}
|
||
|
||
function executeMethod() {
|
||
const params = document.getElementById('params-editor').value;
|
||
const specName = '@spec.title';
|
||
|
||
try {
|
||
// Validate JSON
|
||
JSON.parse(params);
|
||
|
||
// Execute the RPC call
|
||
fetch(`/api/openrpc/${specName}/${currentMethod}`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: params
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
document.getElementById('result-display').textContent = JSON.stringify(data, null, 2);
|
||
})
|
||
.catch(error => {
|
||
document.getElementById('result-display').textContent = `Error: ${error.message}`;
|
||
});
|
||
} catch (e) {
|
||
document.getElementById('result-display').textContent = `Invalid JSON: ${e.message}`;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |