http-request-manager 18.15.32 → 18.15.34

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/spinner/spinner.component.scss

@@ -0,0 +1,19 @@
+.example-h2 {
+  margin: 24px 0;
+}
+:not(spinner-container).spinner-container {
+  position: relative;
+
+  .spinner-background {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    overflow: hidden;
+    border-color: rgba(103, 58, 183, 0.12);
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 10px;
+  }
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/file-downloader/spinner/spinner.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+
+@Component({
+    selector: 'app-spinner',
+    templateUrl: './spinner.component.html',
+    styleUrls: ['./spinner.component.scss'],
+    standalone: false
+})
+export class SpinnerComponent implements OnInit {
+
+  @Input() color: ThemePalette;
+
+  @Input() diameter?: number;
+  @Input() display?: string | number;
+  @Input() mode?: ProgressSpinnerMode;
+  @Input() strokeWidth?: number;
+  @Input() value = 0
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/app-session.model.ts

@@ -0,0 +1,30 @@
+import { App } from "./app.model"
+
+export interface AppSessionInterface {
+    cfid: string,
+    sessionid: string,
+    urltoken: string,
+    cftoken: string,
+}
+
+export class AppSession implements AppSessionInterface {
+
+  constructor(
+    public cfid = '',
+    public sessionid = '',
+    public urltoken = '',
+    public cftoken = '',
+  ) {}
+
+  static adapt(item?: any): AppSession {
+
+    return new AppSession(
+      item?.cfid,
+      item?.sessionid,
+      item?.urltoken,
+      item?.cftoken,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/app.model.ts

@@ -0,0 +1,19 @@
+export interface AppInterface {
+  applicationName: string
+}
+
+export class App implements AppInterface {
+
+  constructor(
+    public applicationName = ''
+  ) {}
+
+  static adapt(item?: any): App {
+
+    return new App(
+      item?.applicationName,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/get-sample.model.ts

@@ -0,0 +1,25 @@
+import { App } from "./app.model"
+import { AppSession } from "./app-session.model"
+
+export interface GetSampleInterface {
+  application: App,
+  session: AppSession
+}
+
+export class GetSample implements GetSampleInterface {
+
+  constructor(
+    public application = App.adapt(),
+    public session = AppSession.adapt(),
+  ) {}
+
+  static adapt(item?: any) {
+    
+    return new GetSample(
+      (item?.application) ? App.adapt(item.application) : App.adapt(),
+      (item?.session) ? AppSession.adapt(item.session) : AppSession.adapt(),
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-ai-prompt.ts

@@ -0,0 +1,19 @@
+export interface AIPromptInterface {
+  response: string
+}
+
+export class AIPrompt implements AIPromptInterface {
+
+  constructor(
+    public response = '',
+  ) {}
+
+  static adapt(item?: any): AIPrompt {
+
+    return new AIPrompt(
+      item?.response,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client-details.ts

@@ -0,0 +1,24 @@
+import { App } from "./app.model"
+
+export interface ClientDetailsInterface {
+  prod: string,
+  dev: string,
+}
+
+export class ClientDetails implements ClientDetailsInterface {
+
+  constructor(
+    public prod = '',
+    public dev = '',
+  ) {}
+
+  static adapt(item?: any): ClientDetails {
+
+    return new ClientDetails(
+      item?.prod,
+      item?.dev,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client-info.ts

@@ -0,0 +1,30 @@
+export interface ClientInfoInterface {
+  domain: string
+  service: string
+  id: number
+  name: string
+}
+
+export class ClientInfo implements ClientInfoInterface {
+
+  constructor(
+    public domain = '',
+    public service = '',
+    public id = 0,
+    public name = '',
+  ) {}
+
+  static adapt(item?: any): ClientInfo {
+
+    return new ClientInfo(
+      item?.domain,
+      item?.service,
+      item?.id,
+      (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '',
+    )
+
+  }
+
+}
+
+

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-client.model.ts

@@ -0,0 +1,49 @@
+export interface ClientDataInterface {
+  id: string|number
+  name: string
+  domain: string
+  service: string
+  spiffe: string
+  secret: string
+  created: number
+  modified: number
+  icon: string
+  imageFile: string
+  email: string
+}
+
+export class ClientData implements ClientDataInterface {
+
+  constructor(
+    public id: string|number = 0,
+    public name = '',
+    public domain = '',
+    public service = '',
+    public spiffe = '',
+    public secret = '',
+    public created = 0,
+    public modified = 0,
+    public icon = '',
+    public imageFile = '',
+    public email = '',
+  ) {}
+
+  static adapt(item?: any): ClientData {
+
+    return new ClientData(
+      item?.id,
+      item?.name,
+      item?.domain,
+      item?.service,
+      item?.spiffe,
+      item?.secret,
+      item?.created,
+      item?.modified,
+      item?.icon,
+      item?.imageFile,
+      item?.email,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-signals-manager-demo/models/sample-mapper-client-info.ts

@@ -0,0 +1,33 @@
+export interface ClientInfoMapperInterface {
+  id: number
+  first_name: string
+  last_name: string
+  email: string
+}
+
+export class ClientInfoMapper implements ClientInfoMapperInterface {
+
+  constructor(
+    public id = 0,
+    public first_name = '',
+    public last_name = '',
+    public email = '',
+  ) {}
+
+  static adapt(item?: any): ClientInfoMapper {
+
+    const first_name = (item?.name) ? item.name.split(' ')[0] : ''
+    const last_name = (item?.name) ? item.name.split(' ')[1] : ''
+
+    return new ClientInfoMapper(
+      item?.id,
+      first_name,
+      last_name,
+      item?.email,
+    )
+
+  }
+
+}
+
+

package/src/lib/http-request-services-demo/request-signals-manager-demo/request-signals-manager-demo.component.html

@@ -0,0 +1,380 @@
+<div style="margin: 2rem;">
+
+  <h2>
+    <span>HTTP Request Signals Manager</span>
+    <span style="margin-left: .5rem;">
+      <mat-icon color="accent">fiber_new</mat-icon>
+    </span>
+  </h2>
+
+  <div [formGroup]="requestForm" style="margin-top: 2rem;">
+    <div style="display: flex; gap: .5rem">
+      <mat-form-field appearance="outline">
+        <mat-label>Adapter (Model)</mat-label>
+        <mat-select formControlName="adapter" #adapterSelect>
+          <mat-option>None</mat-option>
+          @for (adapter of sampleAdaptors; track adapter) {
+            <mat-option [value]="adapter.value">
+              {{adapter.label}}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Mapper (Model)</mat-label>
+        <mat-select formControlName="mapper" #mapperSelect>
+          <mat-option>None</mat-option>
+          @for (mapper of sampleMappers; track mapper) {
+            <mat-option [value]="mapper.value">
+              {{mapper.label}}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    @if (adapterSelect.value || mapperSelect.value) {
+      <div style="display: flex; margin-bottom: 2rem;">
+        <div style="flex:1" class="box">
+          <h3>Adapter (Incoming)</h3>
+          @if (adapterSelect.value) {
+            <div>
+              {{ props(adapterSelect.value) | json }}
+            </div>
+          } @else {
+            No Transformation
+          }
+        </div>
+        <div style="flex:1" class="box">
+          <h3>Mapper (Outgoing)</h3>
+          @if (mapperSelect.value) {
+            <div>
+              {{ props(mapperSelect.value) | json }}
+            </div>
+          } @else {
+            No Transformation
+          }
+        </div>
+      </div>
+    }
+    <div>
+      <mat-form-field appearance="outline">
+        <mat-label>RestPath (/ delimited)</mat-label>
+        <input matInput placeholder="clients/list" formControlName="path">
+      </mat-form-field>
+    </div>
+    <div>
+      <div formArrayName="headers">
+        @for (task of headers.controls; track task; let i = $index) {
+          <div [formGroupName]="i">
+            <div style="display: flex; gap: .5rem">
+              <mat-form-field appearance="outline">
+                <mat-label>Key</mat-label>
+                <input matInput placeholder="authentication" formControlName="key">
+              </mat-form-field>
+              <mat-form-field appearance="outline" style="flex:1">
+                <mat-label>Value</mat-label>
+                <input matInput placeholder="sample" formControlName="value">
+              </mat-form-field>
+              <div style="margin-top: .5rem;">
+                <button mat-icon-button (click)="removeHeader(i)">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+      <button mat-stroked-button (click)="addHeader()" class="btn">Add Header</button>
+    </div>
+    <div style="margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;">
+      <div>
+        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>
+        @if (failedState.checked) {
+          <div style="display: flex; gap: .5rem; margin-top: 1rem;" formGroupName="retry">
+            <mat-form-field appearance="outline">
+              <mat-label>#of Times</mat-label>
+              <input matInput placeholder="3" formControlName="times" value="3">
+            </mat-form-field>
+            <mat-form-field appearance="outline">
+              <mat-label>Delay Until Next</mat-label>
+              <input matInput placeholder="3" formControlName="delay" value="3">
+            </mat-form-field>
+          </div>
+        }
+      </div>
+      <div>
+        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>
+        @if (pollingState.checked) {
+          <div>
+            <mat-form-field appearance="outline" style="margin-top: 1rem">
+              <mat-label>#of Seconds</mat-label>
+              <input matInput placeholder="3" formControlName="polling" value="3">
+            </mat-form-field>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-bottom: 1rem; margin-top: 2rem;">
+    @if (isPending()) {
+      <mat-progress-bar mode="indeterminate"
+      ></mat-progress-bar>
+    }
+    @if (pollingState.checked && !isPending()) {
+      <mat-progress-bar mode="determinate"
+        [value]="countdown()"
+      ></mat-progress-bar>
+    }
+  </div>
+
+  <div style="margin-top: 1rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">GET Request</h2>
+      <div>
+        <button mat-raised-button (click)="onGetRequest()" class="btn">Request</button>
+      </div>
+    </div>
+
+    @if (GET_error) {
+      <div style="margin-top: .5rem;">
+        <mat-error>{{ GET_error }}</mat-error>
+      </div>
+    }
+
+    @if (GET_result) {
+      <div style="margin-top: 1rem;">
+        {{ GET_result | json }}
+      </div>
+    }
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">POST Request</h2>
+      <div>
+        <button mat-raised-button (click)="onCreateRequest()" class="btn">Request</button>
+      </div>
+    </div>
+
+    @if (POST_error) {
+      <div style="margin-top: .5rem;">
+        <mat-error>{{ POST_error }}</mat-error>
+      </div>
+    }
+
+    @if (POST_result) {
+      <div style="margin-top: 1rem;">
+        {{ POST_result | json }}
+      </div>
+    }
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">PUT Request</h2>
+      <div>
+        <button mat-raised-button (click)="onUpdateRequest()" class="btn">Request</button>
+      </div>
+    </div>
+
+    @if (PUT_error) {
+      <div style="margin-top: .5rem;">
+        <mat-error>{{ PUT_error }}</mat-error>
+      </div>
+    }
+
+    <h3>Include Record ID in the RestPath</h3>
+
+    @if (PUT_result) {
+      <div style="margin-top: 1rem;">
+        {{ PUT_result | json }}
+      </div>
+    }
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">DELETE Request</h2>
+      <div>
+        <button mat-raised-button (click)="onDeleteRequest()" class="btn">Request</button>
+      </div>
+    </div>
+
+    <h3>Include Record ID in the RestPath</h3>
+
+    @if (DELETE_error) {
+      <div style="margin-top: .5rem;">
+        <mat-error>{{ DELETE_error }}</mat-error>
+      </div>
+    }
+
+    @if (DELETE_result) {
+      <div style="margin-top: 1rem;">
+        {{ DELETE_result | json }}
+      </div>
+    }
+
+  </div>
+
+  <div style="margin-top: 2rem">
+    <mat-divider></mat-divider>
+  </div>
+
+  <div style="margin-top: 2rem">
+    <div style="display: flex;">
+      <h2 style="flex:1">Streaming GET Request</h2>
+      <div>
+        <button mat-raised-button (click)="onStreamRequest()" class="btn">Request</button>
+      </div>
+    </div>
+
+    <!-- <div *ngIf="(STREAM_error$ | async) as stream_error" style="margin-top: .5rem;">
+    <mat-error>{{ stream_error }}</mat-error>
+  </div> -->
+
+  <div style="margin-top: 1rem;">
+    @if (STREAM_result; as data) {
+      <div class="container">
+        <table mat-table [dataSource]="data">
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef> ID </th>
+            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+          </ng-container>
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> First Name </th>
+            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+          </ng-container>
+          <ng-container matColumnDef="lastName">
+            <th mat-header-cell *matHeaderCellDef> Last Name </th>
+            <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
+          </ng-container>
+          <ng-container matColumnDef="age">
+            <th mat-header-cell *matHeaderCellDef> Age </th>
+            <td mat-cell *matCellDef="let element"> {{element.age}} </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+      </div>
+    }
+  </div>
+
+</div>
+
+<div style="margin-top: 2rem">
+  <mat-divider></mat-divider>
+</div>
+
+<div style="margin-top: 2rem">
+  <div style="display: flex;">
+    <h2 style="flex:1; padding-top: .5rem;">AI -@if (AIType === 1) {
+      <span>STREAMING</span>
+    } POST Request</h2>
+    <div style="display: flex; gap: 1rem;">
+      <button mat-raised-button [matMenuTriggerFor]="menu" style="min-width: 120px;">
+        <mat-icon>lan</mat-icon>
+        @if (AIType === 0) {
+          <span>Server</span>
+        } @else {
+          Local
+        }
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="onSelectAIType(0)">Server</button>
+        <button mat-menu-item (click)="onSelectAIType(1)">Local</button>
+      </mat-menu>
+      <div>
+        <button mat-raised-button (click)="onStreamPostRequest()" class="btn">Ask Me</button>
+      </div>
+    </div>
+  </div>
+
+  <div style="display: flex;">
+    <mat-form-field appearance="outline" style="flex:1">
+      <mat-label>Ask me a Question</mat-label>
+      <textarea matInput placeholder="Why is the sky blue?" [formControl]="questionControl"></textarea>
+    </mat-form-field>
+  </div>
+
+  @if (STREAM_AI_error) {
+    <div style="margin-top: .5rem;">
+      <mat-error>{{ STREAM_AI_error }}</mat-error>
+    </div>
+  }
+
+  @if (AIType === 1) {
+    <div style="color: red;">
+      You must have Ollama active and the 'phi3:latest' model to use this feature.
+    </div>
+  } @else {
+    <span style="color: gray;">
+      Define the RestPath to the API endpoint that will handle the AI request.
+      Use: 'ai/chat' for server
+    </span>
+  }
+
+  <div>
+    @if (STREAM_AI_result) {
+      <div style="margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;">
+        <p style="margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;">{{STREAM_AI_result}}</p>
+      </div>
+    }
+  </div>
+
+</div>
+
+<div style="margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;">
+  <mat-divider></mat-divider>
+</div>
+
+<div>
+  <div style="display: flex;">
+    <h2 style="flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;">
+      <div>
+        Download File
+      </div>
+      <div style="flex:1; margin-left: 1rem;">
+        <mat-slide-toggle #disable>
+          @if (disable.checked) {
+            <span>
+              Enable
+            </span>
+          } @else {
+            Disable
+          }
+        </mat-slide-toggle>
+      </div>
+    </h2>
+    <div>
+      <app-file-downloader
+        [disabled]="disable.checked"
+        [delayError]="3"
+        [apiRequest]="downloadRequest"
+        (completed)="onDownloadCompleted()"
+        (failed)="onDownloadFailed($event)"
+      ></app-file-downloader>
+    </div>
+  </div>
+</div>
+
+</div>

package/src/lib/http-request-services-demo/request-signals-manager-demo/request-signals-manager-demo.component.scss

@@ -0,0 +1,24 @@
+.btn {
+    min-width: 120px;
+}
+
+.mat-mdc-row .mat-mdc-cell {
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+  }
+
+  .mat-mdc-row:hover .mat-mdc-cell {
+    border-color: currentColor;
+    background-color: whitesmoke;
+  }
+
+  .container {
+    height: 400px;
+    overflow: auto;
+  }
+
+  .box {
+    padding: 10px;
+    border: 1px solid #ccc;
+  }