- 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
{
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 object $controller,
protected UrlExtension $urlExtension,
@ -45,7 +37,7 @@ HTML;
'path' => $base.$path,
'cleaned' => $cleaned,
'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>
{% foreach $routes as $route %}
<li>
<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>
</li>
{% 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;}
.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 li {border-color: #859aae;}
.forms .form-name {background: #9cc5e6;color: #284168;font-size:110%}