@n1k1t/mock-server 0.1.60 → 0.1.61

package/src/gui/app/components/history.component/index.ts

@@ -0,0 +1,86 @@
+import hbs from 'handlebars';
+
+import type { History } from '../../../../server';
+
+import { ViewerComponent } from '../viewer.component';
+import { Component } from '../../models';
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class HistoryComponent extends Component {
+  public viewer = ViewerComponent.build({ depth: 2 }).hide();
+
+  constructor(public data: History['TPlain']) {
+    super();
+    this.refresh();
+  }
+
+  public provide(data: History['TPlain']) {
+    return Object.assign(this, { data });
+  }
+
+  public refresh(): this {
+    this.replace(template(this.data)).append(this.viewer);
+
+    this.viewer.provide({
+      event: this.data.snapshot.event,
+      transport: this.data.snapshot.transport,
+
+      ...(Object.keys(this.data.snapshot.flags).length && { flags: this.data.snapshot.flags }),
+      ...(this.data.expectation && {
+        expectation: {
+          id: this.data.expectation.id,
+          group: this.data.expectation.group,
+
+          ...(this.data.expectation.schema.forward && { forward: this.data.expectation.schema.forward }),
+        },
+      }),
+
+      ...(this.data.snapshot.cache?.isEnabled && { cache: this.data.snapshot.cache }),
+      ...(this.data.snapshot.seed && { seed: this.data.snapshot.seed }),
+      ...(this.data.snapshot.container && { container: this.data.snapshot.container }),
+
+      incoming: this.data.snapshot.incoming,
+
+      ...(this.data.snapshot.error && { error: this.data.snapshot.error }),
+      ...(this.data.status === 'completed' && { outgoing: this.data.snapshot.outgoing }),
+      ...(this.data.snapshot.forwarded && { forwarded: this.data.snapshot.forwarded }),
+      ...(this.data.snapshot.messages?.length && { messages: this.data.snapshot.messages }),
+    });
+
+    this.element.querySelector('div.meta')!.addEventListener('click', (event) =>
+      event.composedPath().some((element) => (<Element>element)?.classList?.contains('meta'))
+        ? this.viewer.isHidden ? this.viewer.show() : this.viewer.hide()
+        : null
+    );
+
+    return this;
+  }
+
+  public match(query: string): boolean {
+    const light = [
+      this.data.group,
+      this.data.expectation?.name,
+      this.data.snapshot.incoming.path,
+      this.data.snapshot.incoming.method,
+      this.data.snapshot.incoming.dataRaw,
+      this.data.snapshot.incoming.error,
+      String(this.data.snapshot.outgoing.status),
+      String(this.data.snapshot.seed ?? ''),
+      this.data.snapshot.outgoing.dataRaw,
+    ].some((value) => value?.includes(query));
+
+    return light || [
+      this.data.snapshot.incoming.query,
+      this.data.snapshot.incoming.headers,
+      this.data.snapshot.outgoing.headers,
+      this.data.snapshot.container,
+      this.data.snapshot.state,
+      this.data.snapshot.cache,
+    ].some((value) => JSON.stringify(value)?.includes(query))
+  }
+
+  static build(history: History['TPlain']) {
+    return new HistoryComponent(history);
+  }
+}

package/src/gui/app/components/history.component/style.scss

@@ -0,0 +1,5 @@
+div.history {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+}

package/src/gui/app/components/history.component/template.hbs

@@ -0,0 +1,62 @@
+export default `
+  <div class="container history" id="{{id}}">
+    <div class="meta">
+      <div class="segment">
+        <span class="time">{{#toLocaleTime timestamp}}{{/toLocaleTime}}</span>
+
+        {{#if snapshot.error}}
+          <span class="error">
+            {{#compare snapshot.error.code.length 'lte' 24}}{{snapshot.error.code}}{{/compare}}
+            {{#compare snapshot.error.code.length 'gt' 24}}Error{{/compare}}
+          </span>
+        {{/if}}
+
+        {{#compare status 'eq' 'pending'}}
+          <span class="pending"><i class="fas fa-hourglass-start"></i></span>
+        {{/compare}}
+
+        {{#compare status 'eq' 'completed'}}
+          <span class="status
+            {{#compare snapshot.transport 'eq' 'http'}}
+              {{#compare snapshot.outgoing.status 'lt' 400}}green{{/compare}}
+              {{#compare snapshot.outgoing.status 'gte' 400}}red{{/compare}}
+            {{/compare}}
+          "><b>{{snapshot.outgoing.status}}</b> {{toSeconds duration}}s</span>
+        {{/compare}}
+
+        <span class="method" style="color: {{toColor snapshot.incoming.method}};">{{snapshot.incoming.method}}</span>
+        <span class="path">{{> truncated value=snapshot.incoming.path length=45}}</span>
+
+        {{#if snapshot.seed}}<span class="seed">{{snapshot.seed}}</span>{{/if}}
+      </div>
+
+      <span class="arrow"><i class="fas fa-chevron-right"></i></span>
+
+      {{#if expectation}}
+        {{>expectationMeta expectation format='short' isCached=snapshot.forwarded.isCached}}
+      {{else}}
+        <div class="segment"><span class="handled-with red">Nowhere</span></div>
+      {{/if}}
+    </div>
+
+    {{!-- {{#if snapshot.messages}}
+      <p class="messages-title">
+        <span class="count">Total messages <b>{{snapshot.messages.length}}</b></span>
+      </p>
+
+      <div class="messages">
+        {{#each snapshot.messages}}
+          <div id="{{id}}" class="message {{location}}">
+            <p class="header">
+              {{#compare location 'eq' 'incoming'}}<i class="fas fa-angle-right"></i>{{/compare}}
+              {{#compare location 'eq' 'outgoing'}}<i class="fas fa-angle-left"></i>{{/compare}}
+              <span class="time">{{#toLocaleTime timestamp}}{{/toLocaleTime}}</span>
+            </p>
+
+            <pre class="panel hidden"></pre>
+          </div>
+        {{/each}}
+      </div>
+    {{/if}} --}}
+  </div>
+`

package/src/gui/app/components/index.ts

@@ -0,0 +1,11 @@
+export * from './checkbox-area.component';
+export * from './expectation.component';
+export * from './history.component';
+export * from './curtain.component';
+export * from './loader.component';
+export * from './popups.component';
+export * from './search.component';
+export * from './header.component';
+export * from './empty.component';
+export * from './chart.component';
+export * from './panel.component';

package/src/gui/app/components/loader.component/index.ts

@@ -0,0 +1,12 @@
+import { CurtainComponent } from '../curtain.component';
+
+export class LoaderComponent extends CurtainComponent {
+  constructor() {
+    super({ isPreventedToManualClose: true });
+    this.append('<div><p>Ping pong</p><div class="loader"></div></div>').assignId('loader');
+  }
+
+  static build() {
+    return new LoaderComponent();
+  }
+}

package/src/gui/app/components/loader.component/style.scss

@@ -0,0 +1,39 @@
+@keyframes l43 {
+  0% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
+  16.67% { background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
+  33.33% { background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
+  50% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50% }
+  66.67% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0 }
+  83.33% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100% }
+  100% { background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50% }
+}
+
+.loader {
+  height: 20px;
+  aspect-ratio: 2.5;
+  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #0000);
+  background: var(--_g), var(--_g), var(--_g), var(--_g);
+  background-size: 20% 50%;
+  animation: l43 1s infinite linear;
+}
+
+div.curtain#loader {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0;
+  height: 100%;
+
+  p {
+    color: #fff;
+    font-weight: 100;
+    font-size: 25px;
+  }
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

package/src/gui/app/components/panel.component/index.ts

@@ -0,0 +1,52 @@
+import hbs from 'handlebars';
+import { Component, TElementPredicate } from '../../models';
+
+export type TPanelSize = 'XS' | 'S' | 'M' | 'L';
+
+export interface IPanelConfiguration {
+  title?: {
+    text: string;
+
+    description?: string;
+    icon?: string;
+  };
+
+  height?: TPanelSize;
+  width?: TPanelSize;
+
+  class?: string;
+}
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class PanelComponent extends Component {
+  private content = new Component(this.element.querySelector('div.content'));
+
+  constructor(provided: IPanelConfiguration = {}) {
+    super(template(provided));
+  }
+
+  public clear(): this {
+    this.content.clear();
+    return this;
+  }
+
+  public append(predicate: TElementPredicate): this {
+    this.content.append(predicate);
+    return this;
+  }
+
+  public prepend(predicate: TElementPredicate): this {
+    this.content.prepend(predicate);
+    return this;
+  }
+
+  public replace(predicate: TElementPredicate): this {
+    this.content.replace(predicate);
+    return this;
+  }
+
+  static build(configuration?: IPanelConfiguration) {
+    return new PanelComponent(configuration);
+  }
+}

package/src/gui/app/components/panel.component/style.scss

@@ -0,0 +1,60 @@
+div.panel {
+  display: inline-block;
+  border-radius: 5px;
+  margin: 0 5px 5px 0;
+  padding: 5px 10px;
+  background-color: lighten($color-dark, 3);
+
+  button { flex-shrink: 0 }
+
+  & > p {
+    margin-top: 5px;
+    margin-left: 5px;
+    margin-bottom: 10px;
+    color: rgba(#fff, .2);
+    font-size: 14px;
+
+    i { margin-right: 10px }
+    i, span.title { color: rgba(#fff, .5) }
+    span.description { margin-left: 10px }
+
+    span.description:before {
+      content: '—';
+      margin-right: 10px;
+    }
+  }
+
+  & > div.content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.width-L {
+    max-width: 1300px;
+    width: 100%;
+  }
+
+  &.width-M {
+    max-width: 630px;
+    width: calc(50% - 25px);
+  }
+
+  &.width-S {
+    max-width: 410px;
+    width: calc(33.33% - 25px);
+  }
+
+  &.width-XS {
+    max-width: 305px;
+    width: calc(25% - 25px);
+  }
+
+  &.height-S > div.content {
+    min-height: 100px;
+  }
+
+  &.height-XS > div.content {
+    min-height: 60px;
+  }
+}

package/src/gui/app/components/panel.component/template.hbs

@@ -0,0 +1,13 @@
+export default `
+  <div class="panel {{class}} {{#if width}}width-{{width}}{{/if}} {{#if height}}height-{{height}}{{/if}}">
+    {{#if title}}
+      <p class="title">
+        {{#if title.icon}}<i class="{{title.icon}}"></i>{{/if}}
+        <span class="title">{{{title.text}}}</span>
+        {{#if title.description}}<span class="description">{{{title.description}}}</span>{{/if}}
+      </p>
+    {{/if}}
+
+    <div class="content"></div>
+  </div>
+`

package/src/gui/app/components/popups.component/index.ts

@@ -0,0 +1,26 @@
+import hbs from 'handlebars';
+import { Component } from '../../models';
+
+export interface IPopupPushOptions {
+  level?: 'info' | 'warning' | 'error';
+}
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class PopupsComponent extends Component {
+  constructor() {
+    super();
+    this.element.classList.add('popups');
+  }
+
+  public push(message: string, options: IPopupPushOptions = {}) {
+    const popup = this.compileHtmlStringToElement(template({ message, level: options.level ?? 'info' }));
+
+    this.element.prepend(popup);
+    setTimeout(() => popup.remove(), 3000);
+  }
+
+  static build() {
+    return new PopupsComponent();
+  }
+}

package/src/gui/app/components/popups.component/style.scss

@@ -0,0 +1,51 @@
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  5% {
+    opacity: 1;
+    transform: none;
+  }
+  95% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+}
+
+div.popups {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: +101;
+
+  div.popup-message {
+    display: flex;
+    background-color: lighten($color-dark, 80);
+    color: $color-dark;
+    padding: 10px 15px;
+    width: 240px;
+    border-radius: 10px;
+    font-size: 14px;
+    text-align: center;
+    align-items: center;
+    margin-top: 5px;
+    box-shadow: 0 5px 10px 10px rgba(#000, .1);
+    animation: popup 3s ease-in-out forwards;
+
+    &.error { background-color: $color-red }
+    &.warning { background-color: $color-main }
+
+    span { flex-basis: 90%; }
+
+    i {
+      font-size: 25px;
+      margin-right: 10px;
+      margin-left: 5px;
+    }
+  }
+}

package/src/gui/app/components/popups.component/template.hbs

@@ -0,0 +1,9 @@
+export default `
+  <div class="popup-message {{level}}">
+    {{#compare level 'eq' 'info'}}<i class="fas fa-check"></i>{{/compare}}
+    {{#compare level 'eq' 'warning'}}<i class="fas fa-exclamation-triangle"></i>{{/compare}}
+    {{#compare level 'eq' 'error'}}<i class="fas fa-times"></i>{{/compare}}
+
+    <span>{{{message}}}</span>
+  </div>
+`

package/src/gui/app/components/search.component/index.ts

@@ -0,0 +1,67 @@
+import hbs from 'handlebars';
+import _ from 'lodash';
+
+import { EventEmitter } from 'events';
+
+import { Component } from '../../models';
+import { TFunction } from '../../../../../types';
+
+interface IEvents {
+  input: [string];
+  clear: [];
+}
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class SearchComponent extends Component {
+  private events = new EventEmitter();
+
+  private input = this.element.querySelector('input')!;
+  private button = this.element.querySelector('button')!;
+
+  constructor(public options?: { title?: string }) {
+    super(template({ title: options?.title ?? 'Type something' }));
+
+    this.button.classList.add('hidden');
+    this.button.addEventListener('click', () => this.clear());
+
+    this.on('input', () => {
+      this.button.classList.remove('hidden');
+      this.element.classList.add('filled');
+    });
+
+    this.on('clear', () => {
+      this.button.classList.add('hidden');
+      this.element.classList.remove('filled');
+    });
+
+    this.input.addEventListener('keydown', _.debounce(
+      () => this.input.value ? this.emit('input', this.input.value) : this.clear(),
+      350
+    ));
+  }
+
+  public clear(): this {
+    this.input.value = '';
+    return this.emit('clear');
+  }
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  static build(options?: SearchComponent['options']) {
+    return new SearchComponent(options);
+  }
+}

package/src/gui/app/components/search.component/style.scss

@@ -0,0 +1,43 @@
+div.search {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 10px;
+  width: 410px;
+  padding: 2px 10px;
+  margin: auto;
+  margin-bottom: 50px;
+  background-color: rgba(#fff, .05);
+  opacity: .4;
+  transition-duration: .1s;
+
+  & > i {
+    width: 20px;
+    margin: 0 15px;
+  }
+
+  &:hover, &.filled {
+    opacity: 1;
+  }
+
+  button {
+    display: inline-block !important;
+    background-color: transparent;
+    font-size: 20px;
+    padding: 10px 15px;
+    margin: 0;
+    color: rgba(#fff, .2);
+
+    i { margin: 0 }
+    &:hover { color: #fff }
+  }
+
+  div.input {
+    background-color: transparent;
+    width: 380px;
+
+    &:before {
+      text-align: center;
+    }
+  }
+}

package/src/gui/app/components/search.component/template.hbs

@@ -0,0 +1,7 @@
+export default `
+  <div class="search">
+    <i class="fas fa-search"></i>
+    <div class="input" title="{{title}}"><input data-key="search" type="text"></div>
+    <button><i class="far fa-times-circle"></i></button>
+  </div>
+`

package/src/gui/app/components/viewer.component/index.ts

@@ -0,0 +1,28 @@
+import JsonFormatter from '../../../../../../../packages/json-formatter';
+import hbs from 'handlebars';
+
+import { Component } from '../../models';
+import context from '../../context';
+
+const template = hbs.compile(require('./template.hbs'));
+
+export class ViewerComponent extends Component {
+  public instance = new JsonFormatter({}, this.options?.depth ?? 3, {
+    theme: 'custom',
+    afterCopyHandler: () => context.shared.popups.push('Copied!'),
+  });
+
+  constructor(public options?: { depth?: number }) {
+    super(template({}));
+    this.provide({});
+  }
+
+  public provide(payload: object | null): this {
+    this.instance.json = payload;
+    return this.clear().append(this.instance.render());
+  }
+
+  static build(options?: ViewerComponent['options']) {
+    return new ViewerComponent(options);
+  }
+}

package/src/gui/app/components/viewer.component/style.scss

@@ -0,0 +1,38 @@
+@import '../../../../../../../packages/json-formatter/src/theme';
+
+div.viewer {
+  background-color: lighten($color-dark, 3);
+  margin-bottom: 20px;
+  margin-top: 0;
+  padding: 10px;
+  overflow: hidden;
+
+  &.hidden {
+    display: none;
+  }
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  .json-formatter-custom.json-formatter-row {
+    @include jsonFormatterTheme(
+      $font-family: $font-family,
+      $default-color: rgba(#fff, .2),
+      $string-color: white,
+      $number-color: adjust-hue($color-main, 80),
+      $boolean-color: adjust-hue($color-main, 320),
+      $null-color: #EEC97D,
+      $undefined-color: rgb(239, 143, 190),
+      $rotate-time: 100ms,
+      $toggler-opacity: .2,
+      $toggler-color: #fff,
+      $bracket-color: rgba(#fff, .2),
+      $key-color: adjust-hue($color-main, 180),
+      $url-color: #027BFF
+    );
+
+    .json-formatter-string {
+      max-height: 60px;
+    }
+  }
+}

package/src/gui/app/components/viewer.component/template.hbs

@@ -0,0 +1,3 @@
+export default `
+  <div class="viewer container"></div>
+`