@deepkit/api-console-gui
Version:
API Console GUI
186 lines (183 loc) • 7.45 kB
JavaScript
import { __decorate } from "tslib";
import { Component, EventEmitter, Output, signal } from '@angular/core';
import { ButtonComponent, ButtonGroupComponent, IconComponent, TabButtonComponent, TableColumnDirective, TableComponent } from '@deepkit/desktop-ui';
import { DatePipe, DecimalPipe } from '@angular/common';
import { CodeHighlightComponent, ToggleBoxComponent } from '@deepkit/ui-library';
let HttpRequestsComponent = class HttpRequestsComponent {
constructor(client, store, cd, dialog, router) {
this.client = client;
this.store = store;
this.cd = cd;
this.dialog = dialog;
this.router = router;
this.requests = signal([]);
this.executeSelectedRoute = new EventEmitter();
this.selectRoute = new EventEmitter();
}
openRequest(r) {
window.open(r.url, '_blank');
}
isOrange(status) {
return status >= 400 && status < 500;
}
isRed(status) {
return status >= 500;
}
isOpen(r, i) {
return r.open === undefined ? i === 0 : r.open;
}
updateRequests() {
if (this.store.state.viewHttp.viewRequests === 'all') {
this.requests.set(this.store.state.requests);
}
else {
const route = this.store.state.route;
if (route) {
this.requests.set(this.store.state.requests.filter(r => {
return route.id === r.id;
}));
}
else {
if (this.requests().length > 0)
this.requests.set([]);
}
}
}
remove(index) {
this.store.set(state => {
const removed = state.requests.splice(index, 1);
for (const r of removed) {
localStorage.removeItem('@deepkit/api-console/request/result/' + r.bodyStoreId);
localStorage.removeItem('@deepkit/api-console/request/json/' + r.bodyStoreId);
}
});
this.updateRequests();
}
switchViewRequest(view) {
this.store.set(state => {
state.viewHttp.viewRequests = view;
});
this.updateRequests();
}
toggleServerStatsVisibility() {
this.store.set(state => {
state.viewHttp.serverStatsVisible = !state.viewHttp.serverStatsVisible;
});
}
};
__decorate([
Output()
], HttpRequestsComponent.prototype, "executeSelectedRoute", void 0);
__decorate([
Output()
], HttpRequestsComponent.prototype, "selectRoute", void 0);
HttpRequestsComponent = __decorate([
Component({
selector: 'api-console-http-routes',
template: `
<dui-button-group style="margin: 6px 10px; margin-top: 12px;">
<dui-tab-button (click)="switchViewRequest('selected')" [active]="store.state.viewHttp.viewRequests === 'selected'">Selected</dui-tab-button>
<dui-tab-button (click)="switchViewRequest('all')" [active]="store.state.viewHttp.viewRequests === 'all'">All</dui-tab-button>
</dui-button-group>
<div class="requests overlay-scrollbar-small">
(!requests().length) {
<div class="no-requests">
(store.state.viewHttp.viewRequests === 'all') {
<div>
No requests executed yet.
</div>
}
(store.state.viewHttp.viewRequests === 'selected') {
<div>
(store.state.route) {
<div>
No requests for this route executed yet.
</div>
}
</div>
}
(!store.state.route) {
<div>Select a route in the left sidebar first.</div>
}
(store.state.route && store.state.routeStates[store.state.route.id]) {
<div>
Press
<dui-button icon="play" (click)="executeSelectedRoute.emit()"></dui-button>
to execute a new http request.
</div>
}
</div>
}
(r of requests(); track $index; let i = $index) {
<div class="request">
<div class="line">
<dui-icon clickable (click)="r.open = !isOpen(r, i)" [name]="isOpen(r, i) ? 'arrow_down' : 'arrow_right'"></dui-icon>
<div class="method">{{ r.method }}</div>
<div class="url text-selection">
{{ r.url }}
</div>
<dui-icon clickable name="share" [disabled]="r.method !== 'GET'" (click)="openRequest(r)"></dui-icon>
<div class="status">
<div class="status-box" [class.orange]="isOrange(r.status)" [class.red]="r.error || isRed(r.status)">
{{ r.status === 0 ? r.error ? 'ERROR' : 'pending' : r.status }} {{ r.statusText }}
</div>
</div>
<dui-icon clickable (click)="remove(i)" name="garbage"></dui-icon>
</div>
(isOpen(r, i)) {
<div class="results">
<div class="request-info">
Executed at {{ r.created|date:'short' }} in {{ r.took|number:'0.0-3' }} ms. <code>{{ r.getHeader('content-type') }}</code>
</div>
<dui-button-group style="margin-bottom: 5px;">
<dui-tab-button (click)="r.tab = 'body'" [active]="r.tab === 'body'">Body</dui-tab-button>
<dui-tab-button (click)="r.tab = 'header'" [active]="r.tab === 'header'">Header</dui-tab-button>
</dui-button-group>
(r.tab === 'header') {
<dui-table [items]="r.headers" borderless no-focus-outline [virtualScrolling]="false">
<dui-table-column name="name" [width]="180" class="text-selection"></dui-table-column>
<dui-table-column name="value" [width]="280" class="text-selection"></dui-table-column>
</dui-table>
}
(r.tab === 'body') {
(r.error) {
<div>{{ r.error }}</div>
}
(r.json !== undefined) {
<div class="ts text-selection">
<code-highlight lang="json" [code]="r.json"></code-highlight>
</div>
}
(r.json === undefined) {
<pre class="text-selection overlay-scrollbar-small" style="padding-bottom: 8px;">{{ r.result }}</pre>
}
}
</div>
}
</div>
}
</div>
<deepkit-toggle-box title="Stats" [(visible)]="store.state.viewHttp.serverStatsVisible" (visibleChange)="store.store()">
<ng-container header>
{{ requests().length }}/{{ store.state.requests.length }} requests
</ng-container>
TODO
</deepkit-toggle-box>
`,
styleUrls: ['./results.component.scss'],
imports: [
ButtonGroupComponent,
TabButtonComponent,
ButtonComponent,
IconComponent,
DatePipe,
DecimalPipe,
TableComponent,
TableColumnDirective,
CodeHighlightComponent,
ToggleBoxComponent,
],
})
], HttpRequestsComponent);
export { HttpRequestsComponent };
//# sourceMappingURL=results.component.js.map