...
This commit is contained in:
		| @@ -1,12 +1,14 @@ | ||||
| {{ extends "../layouts/base" }} | ||||
| {{extends "../layouts/base"}} | ||||
|  | ||||
| {{ block title() }}OpenRPC UI - HeroApp UI{{ end }} | ||||
| {{block title()}} | ||||
| OpenRPC UI | ||||
| {{end}} | ||||
|  | ||||
| {{ block css() }} | ||||
| {{block css()}} | ||||
| <link rel="stylesheet" href="/static/css/rpcui.css"> | ||||
| {{ end }} | ||||
| {{end}} | ||||
|  | ||||
| {{ block body() }} | ||||
| {{block body()}} | ||||
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> | ||||
|   <h1 class="h2">OpenRPC UI</h1> | ||||
| </div> | ||||
| @@ -23,9 +25,9 @@ | ||||
|             <label for="spec" class="form-label">Specification</label> | ||||
|             <select class="form-select" id="spec" name="spec" onchange="this.form.submit()"> | ||||
|               <option value="">Select a specification</option> | ||||
|               {{ if .SpecList }} | ||||
|                 {{ range .SpecList }} | ||||
|                 <option value="{{ . }}" {{ if eq . $.SelectedSpec }}selected{{ end }}>{{ . }}</option> | ||||
|               {{ if SpecList }} | ||||
|                 {{ range spec := SpecList }} | ||||
|                 <option value="{{ spec }}" > | ||||
|                 {{ end }} | ||||
|               {{ else }} | ||||
|                 <option value="" disabled>No specifications available</option> | ||||
| @@ -34,7 +36,7 @@ | ||||
|           </div> | ||||
|           <div class="col-md-4"> | ||||
|             <label for="socketPath" class="form-label">Socket Path</label> | ||||
|             <input type="text" class="form-control" id="socketPath" name="socketPath" value="{{ .SocketPath }}" placeholder="e.g., /tmp/rpc.sock"> | ||||
|             <input type="text" class="form-control" id="socketPath" name="socketPath" value="{{ SocketPath }}" placeholder="e.g., /tmp/rpc.sock"> | ||||
|           </div> | ||||
|           <div class="col-md-4 d-flex align-items-end"> | ||||
|             <button type="submit" class="btn btn-primary">Apply</button> | ||||
| @@ -49,26 +51,24 @@ | ||||
|   <div class="col-md-12"> | ||||
|     <div class="alert alert-info"> | ||||
|       <p>This is the OpenRPC UI page. It allows you to interact with OpenRPC specifications.</p> | ||||
|       <p>Currently available specs: {{ if .SpecList }}{{ len(.SpecList) }}{{ else }}0{{ end }}</p> | ||||
|       <p>Currently available specs: {{ if SpecList }}{{ len(SpecList) }}{{ else }}0{{ end }}</p> | ||||
|     </div> | ||||
|   </div> | ||||
| </div> | ||||
|  | ||||
| {{ if .SelectedSpec }} | ||||
| {{ if SelectedSpec }} | ||||
| <div class="row"> | ||||
|   <!-- Method Tree --> | ||||
|   <div class="col-md-3"> | ||||
|     <div class="card"> | ||||
|       <div class="card-header"> | ||||
|         <h5>Methods</h5> | ||||
|       </div> | ||||
|       <div class="card-header"><h5>Methods</h5></div> | ||||
|       <div class="card-body p-0"> | ||||
|         <div class="method-tree list-group list-group-flush"> | ||||
|           {{ if .Methods }} | ||||
|             {{ range .Methods }} | ||||
|             <a href="/rpcui?spec={{ $.SelectedSpec }}&method={{ . }}&socketPath={{ $.SocketPath }}"  | ||||
|                class="list-group-item list-group-item-action method-item {{ if eq . $.SelectedMethod }}active{{ end }}"> | ||||
|               {{ . }} | ||||
|           {{ if Methods }} | ||||
|             {{ range m := Methods }} | ||||
|             <a href="/rpcui?spec={{ SelectedSpec }}&method={{ m }}&socketPath={{ SocketPath }}" | ||||
|                class="list-group-item list-group-item-action method-item {{ if eq(m, SelectedMethod) }}active{{ end }}"> | ||||
|               {{ m }} | ||||
|             </a> | ||||
|             {{ end }} | ||||
|           {{ else }} | ||||
| @@ -81,46 +81,29 @@ | ||||
|  | ||||
|   <!-- Method Details --> | ||||
|   <div class="col-md-9"> | ||||
|     {{ if .Method }} | ||||
|     {{ if Method }} | ||||
|     <div class="card mb-4"> | ||||
|       <div class="card-header"> | ||||
|         <h5>{{ .Method.Name }}</h5> | ||||
|         {{ if .Method.Description }} | ||||
|         <p class="text-muted mb-0">{{ .Method.Description }}</p> | ||||
|         {{ end }} | ||||
|         <h5>{{ Method.Name }}</h5> | ||||
|         {{ if Method.Description }}<p class="text-muted mb-0">{{ Method.Description }}</p>{{ end }} | ||||
|       </div> | ||||
|       <div class="card-body"> | ||||
|         <!-- Parameters --> | ||||
|         <h6>Parameters</h6> | ||||
|         <table class="table table-sm schema-table"> | ||||
|           <thead> | ||||
|             <tr> | ||||
|               <th>Name</th> | ||||
|               <th>Type</th> | ||||
|               <th>Required</th> | ||||
|               <th>Description</th> | ||||
|             </tr> | ||||
|           </thead> | ||||
|           <thead><tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead> | ||||
|           <tbody> | ||||
|             {{ if .Method.Params }} | ||||
|               {{ range .Method.Params }} | ||||
|             {{ if Method.Params }} | ||||
|               {{ range p := Method.Params }} | ||||
|               <tr> | ||||
|                 <td>{{ .Name }}</td> | ||||
|                 <td><code>{{ .Schema.Type }}</code></td> | ||||
|                 <td> | ||||
|                   {{ if .Required }} | ||||
|                   <span class="schema-required">Yes</span> | ||||
|                   {{ else }} | ||||
|                   <span class="schema-optional">No</span> | ||||
|                   {{ end }} | ||||
|                 </td> | ||||
|                 <td>{{ .Description }}</td> | ||||
|                 <td>{{ p.Name }}</td> | ||||
|                 <td><code>{{ p.Schema.Type }}</code></td> | ||||
|                 <td>{{ if p.Required }}<span class="schema-required">Yes</span>{{ else }}<span class="schema-optional">No</span>{{ end }}</td> | ||||
|                 <td>{{ p.Description }}</td> | ||||
|               </tr> | ||||
|               {{ end }} | ||||
|             {{ else }} | ||||
|               <tr> | ||||
|                 <td colspan="4">No parameters</td> | ||||
|               </tr> | ||||
|               <tr><td colspan="4">No parameters</td></tr> | ||||
|             {{ end }} | ||||
|           </tbody> | ||||
|         </table> | ||||
| @@ -128,18 +111,12 @@ | ||||
|         <!-- Result --> | ||||
|         <h6 class="mt-4">Result</h6> | ||||
|         <table class="table table-sm schema-table"> | ||||
|           <thead> | ||||
|             <tr> | ||||
|               <th>Name</th> | ||||
|               <th>Type</th> | ||||
|               <th>Description</th> | ||||
|             </tr> | ||||
|           </thead> | ||||
|           <thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead> | ||||
|           <tbody> | ||||
|             <tr> | ||||
|               <td>{{ .Method.Result.Name }}</td> | ||||
|               <td><code>{{ .Method.Result.Schema.Type }}</code></td> | ||||
|               <td>{{ .Method.Result.Description }}</td> | ||||
|               <td>{{ Method.Result.Name }}</td> | ||||
|               <td><code>{{ Method.Result.Schema.Type }}</code></td> | ||||
|               <td>{{ Method.Result.Description }}</td> | ||||
|             </tr> | ||||
|           </tbody> | ||||
|         </table> | ||||
| @@ -147,10 +124,10 @@ | ||||
|         <!-- Try It --> | ||||
|         <h6 class="mt-4">Try It</h6> | ||||
|         <form id="rpcForm" class="mb-3"> | ||||
|           <input type="hidden" name="selectedMethod" value="{{ .SelectedMethod }}"> | ||||
|           <input type="hidden" name="selectedMethod" value="{{ SelectedMethod }}"> | ||||
|           <div class="mb-3"> | ||||
|             <label for="paramsEditor" class="form-label">Parameters:</label> | ||||
|             <textarea class="form-control code-editor" id="paramsEditor" rows="10">{{ .ExampleParams }}</textarea> | ||||
|             <textarea class="form-control code-editor" id="paramsEditor" rows="10">{{ ExampleParams }}</textarea> | ||||
|           </div> | ||||
|           <button type="submit" class="btn btn-primary">Execute</button> | ||||
|         </form> | ||||
| @@ -159,27 +136,22 @@ | ||||
|           <h6>Result:</h6> | ||||
|           <pre id="resultOutput" class="bg-light p-2 rounded"></pre> | ||||
|         </div> | ||||
|  | ||||
|         <div id="errorContainer" class="result-container d-none"> | ||||
|           <h6>Error:</h6> | ||||
|           <pre id="errorOutput" class="bg-light p-2 rounded text-danger"></pre> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     {{ else if .SelectedMethod }} | ||||
|     <div class="alert alert-warning"> | ||||
|       Method not found: {{ .SelectedMethod }} | ||||
|     </div> | ||||
|     {{ else if SelectedMethod }} | ||||
|       <div class="alert alert-warning">Method not found: {{ SelectedMethod }}</div> | ||||
|     {{ else }} | ||||
|     <div class="alert alert-info"> | ||||
|       Select a method from the list to view details. | ||||
|     </div> | ||||
|       <div class="alert alert-info">Select a method from the list to view details.</div> | ||||
|     {{ end }} | ||||
|   </div> | ||||
| </div> | ||||
| {{ end }} | ||||
| {{ end }} | ||||
| {{end}} | ||||
|  | ||||
| {{ block scripts() }} | ||||
| {{block scripts()}} | ||||
| <script src="/static/js/rpcui.js"></script> | ||||
| {{ end }} | ||||
| {{end}} | ||||
|   | ||||
		Reference in New Issue
	
	Block a user