- WIP on lean's api JS console

This commit is contained in:
Dave Mc Nicoll 2025-02-10 23:01:56 +00:00
parent 3d81b71473
commit 1f341d6781
4 changed files with 34 additions and 11 deletions

View File

@ -0,0 +1,7 @@
class ApiConsole {
constructor(options) {
}
}

View File

@ -9,14 +9,6 @@ use Picea\Extension\UrlExtension;
class RouteDescriptor class RouteDescriptor
{ {
public string $routeLine = <<<HTML
<li>
<span><a href='%s' title="%s" style='font-family:monospace;font-size:.85em'>%s</a> - %s</span>
<span style='color:#ac1b1b'>%s</span>
<small style="color:#374300">%s</small>
</li>
HTML;
public function __construct( public function __construct(
public object $controller, public object $controller,
protected UrlExtension $urlExtension, protected UrlExtension $urlExtension,
@ -45,7 +37,7 @@ HTML;
'path' => $base.$path, 'path' => $base.$path,
'cleaned' => $cleaned, 'cleaned' => $cleaned,
'description'=> $route->description, 'description'=> $route->description,
'methods' =>implode(', ', (array)$route->method), 'methods' => $route->method,
]; ];
} }
} }

View File

@ -1,9 +1,31 @@
{% function printMethods(array|string $methods) %}
{% foreach (array) $methods as $method %}
<a style="color:#ac1b1b" href="#" class="method-item" data-method="{{ $method }}">{{ $method }}</a>
{% endforeach %}
{% endfunction %}
<ul> <ul>
{% foreach $routes as $route %} {% foreach $routes as $route %}
<li> <li>
<span><a href="{{ $route['route'] }}" title="{{ $route['path'] }}" style='font-family:monospace;font-size:.85em'>{{ $route['cleaned'] }}</a> - {{= $route['description'] }}</span> <span><a href="{{ $route['route'] }}" title="{{ $route['path'] }}" style='font-family:monospace;font-size:.85em'>{{ $route['cleaned'] }}</a> - {{= $route['description'] }}</span>
<span style='color:#ac1b1b'>{{ $route['methods'] }}</span> <span>{{ printMethods($route['methods']) }}</span>
<small style="color:#374300">{{ $route['name'] }}</small> <small style="color:#374300">{{ $route['name'] }}</small>
</li> </li>
{% endforeach %} {% endforeach %}
</ul> </ul>
<div class="api-console">
<label>Corps / body (JSON)</label>
<ui-textarea name="breeder_description">
<div slot="input">
{% ui:textarea "body" %}
</div>
</ui-textarea>
<div></div>
</div>
<script type="text/javascript">
document.querySelectorAll('[data-method]').forEach((e) => {
});
</script>

View File

@ -31,6 +31,8 @@
ol .title { display: flex;justify-content: space-between;background: #ffffffb2;padding: 9px 5px;border: 1px solid #fff;} ol .title { display: flex;justify-content: space-between;background: #ffffffb2;padding: 9px 5px;border: 1px solid #fff;}
.field-desc > div {padding:5px;} .field-desc > div {padding:5px;}
.api-console {padding:20px 15px;border:1px solid #aeaeae;border-left-width: 5px;background:#ccc}
.forms ol {background: #ccdef2;} .forms ol {background: #ccdef2;}
.forms li {border-color: #859aae;} .forms li {border-color: #859aae;}
.forms .form-name {background: #9cc5e6;color: #284168;font-size:110%} .forms .form-name {background: #9cc5e6;color: #284168;font-size:110%}