jwetzell/showbridge-webui
1
0
Fork 0
mirror of https://github.com/jwetzell/showbridge-webui.git synced 2026-08-17 20:24:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

add basics for connecting to running instance

Browse Source
This commit is contained in:
Joel Wetzell
2026-03-11 21:04:33 -05:00
parent 335b5618f1
commit dee9867a6b
14 changed files with 240 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/config/config.component.ts
+3
View File
@@ -8,6 +8,7 @@ import { ConfigService } from '../../services/config.service';
import { SchemaService } from '../../services/schema.service';
import { ModuleListComponent } from '../module-list/module-list.component';
import { RouteListComponent } from '../route-list.component/route-list.component';
import { EventsService } from '../../services/events.service';
@Component({
selector: 'app-config',
@@ -39,6 +40,8 @@ export class ConfigComponent {
public configService = inject(ConfigService);
public schemaService = inject(SchemaService);
public eventsService = inject(EventsService);
modulesUpdated(modules: ModuleConfiguration[] | undefined) {
if (modules === undefined) {
console.error('modules is undefined, not updating');
src/app/components/module/module.component.html
+11 -3
View File
@@ -4,14 +4,22 @@
isInError() ? 'border-red-500' : 'border-gray-600'
}} border-solid w-full h-full"
>
<div class="flex items-center justify-center border-gray-600 border-b-2">
<div class="flex-grow ml-1 mr-3 text-white">
<div class="flex items-center justify-center mx-2">
<div class="flex items-center">
<mat-icon [style.color]="inputIndicatorColor()" matTooltip="Input Indicator">south</mat-icon>
</div>
<div class="text-white">
{{ schema().title || module()?.type }}
</div>
<div class="flex items-center justify-center" (click)="delete.emit()">
<div class="flex items-center">
<mat-icon [style.color]="outputIndicatorColor()" matTooltip="Output Indicator">north</mat-icon>
</div>
<div class="flex-grow"></div>
<div class="flex items-center justify-center hover:bg-gray-700" (click)="delete.emit()">
<mat-icon class="!text-red-500">close</mat-icon>
</div>
</div>
<hr class="bg-gray-600 h-0.5 border-0">
<div>
<form [formGroup]="formGroup" class="h-full">
<div class="m-2">
src/app/components/module/module.component.ts
+31 -2
View File
@@ -1,4 +1,4 @@
import { Component, computed, inject, input, model, output } from '@angular/core';
import { Component, computed, inject, input, model, output, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
@@ -8,6 +8,8 @@ import { SchemaService } from '../../services/schema.service';
import { ParamsFormComponent } from '../params-form/params-form.component';
import { JsonPipe } from '@angular/common';
import { MatTooltipModule } from '@angular/material/tooltip';
import { EventsService } from '../../services/events.service';
import { tap, debounceTime } from 'rxjs';
@Component({
selector: 'app-module',
@@ -42,8 +44,11 @@ export class ModuleComponent {
type: new FormControl(''),
});
private schemaService = inject(SchemaService);
inputIndicatorColor = signal<string>('gray');
outputIndicatorColor = signal<string>('gray');
private schemaService = inject(SchemaService);
private eventsService = inject(EventsService);
ngOnInit(): void {
this.formGroup.patchValue({
id: this.module()?.id,
@@ -64,6 +69,30 @@ export class ModuleComponent {
return undefined;
});
});
if (this.id() !== undefined) {
this.eventsService
.getInputEventsForSource(this.id()!)
.pipe(
tap((inputEvent) => {
this.inputIndicatorColor.set(inputEvent.error ? 'red' : 'greenyellow');
}),
debounceTime(100),
)
.subscribe((inputEvent) => {
this.inputIndicatorColor.set('gray');
});
this.eventsService
.getOutputEventsForDestination(this.id()!)
.pipe(
tap((outputEvent) => {
this.outputIndicatorColor.set(outputEvent.error ? 'red' : 'greenyellow');
}),
debounceTime(100),
)
.subscribe((outputEvent) => {
this.outputIndicatorColor.set('gray');
});
}
}
paramsUpdated(params: any) {
src/app/components/processor/processor.component.html
+2 -1
View File
@@ -5,7 +5,7 @@
isInError() ? 'border-red-500' : 'border-gray-600'
}} border-solid w-fit h-full"
>
<div class="flex items-center justify-center border-gray-600 border-b-2">
<div class="flex items-center justify-center">
<div class="flex-grow ml-1 mr-3 text-white">
{{ schema()?.title || processor()?.type }}
</div>
@@ -14,6 +14,7 @@
</div>
</div>
@if (hasParams()) {
<hr class="bg-gray-600 h-0.5 border-0">
<div>
<app-params-form
[paramsSchema]="schema()?.properties?.params"
src/app/components/route/route.component.html
+3 -1
View File
@@ -5,12 +5,14 @@
isInError() ? 'border-red-500' : 'border-gray-600'
}} border-solid w-full h-full"
>
<div class="flex items-center justify-end border-gray-600 border-b-2">
<div class="flex items-center justify-end mx-2">
<div [style.backgroundColor]="indicatorColor()" class="h-2 w-2 rounded-full"></div>
<div class="flex-grow text-left ml-2 text-white">Route {{ index() }}</div>
<div class="flex items-center justify-center hover:bg-gray-700" (click)="delete.emit()">
<mat-icon class="!text-red-500">close</mat-icon>
</div>
</div>
<hr class="bg-gray-600 h-0.5 border-0">
<div>
<form [formGroup]="formGroup">
<div class="m-2">
src/app/components/route/route.component.ts
+17 -1
View File
@@ -1,4 +1,4 @@
import { Component, computed, inject, input, model, output } from '@angular/core';
import { Component, computed, inject, input, model, output, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
@@ -9,6 +9,8 @@ import { JsonPipe } from '@angular/common';
import { ProcessorComponent } from '../processor/processor.component';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { EventsService } from '../../services/events.service';
import { debounceTime, tap } from 'rxjs';
@Component({
selector: 'app-route',
@@ -55,6 +57,9 @@ export class RouteComponent {
public schemaService = inject(SchemaService);
private snackBar = inject(MatSnackBar);
private eventsService = inject(EventsService);
indicatorColor = signal<string>('gray');
ngOnInit(): void {
this.formGroup.patchValue({
@@ -73,6 +78,17 @@ export class RouteComponent {
return undefined;
});
});
if (this.index() !== undefined) {
this.eventsService.getRouteEventsForIndex(this.index()!).pipe(
tap((routeEvent)=>{
this.indicatorColor.set(routeEvent.error ? 'red' : 'greenyellow');
}),
debounceTime(100)
).subscribe((routeEvent) => {
this.indicatorColor.set('gray')
})
}
}
isInError(): boolean {