add config preview with a bunch of other tweaks

src/app/app.config.ts

@@ -1,10 +1,7 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(appRoutes),
   ],
 };

src/app/app.html

@@ -1,48 +1,48 @@
 <div class="h-screen max-h-screen flex flex-col">
-  <mat-toolbar color="primary" class="w-full">
-    @if(eventsService.status() === 'open') {
-      <div matTooltip="Connected" class="h-3 w-3 rounded-full bg-green-400 mr-2"></div>
-    } @else if (eventsService.status() === 'closed') {
-      <div matTooltip="Disconnected" class="h-3 w-3 rounded-full bg-orange-400 mr-2"></div>
-    } @else if (eventsService.status() === 'error') {
-      <div matTooltip="Error" class="h-3 w-3 rounded-full bg-red-400 mr-2"></div>
-    }
-    <span>showbridge</span>
-    <div>
-       <label class="ml-4 mr-2">URL:</label>
-       <input
-         type="text"
-         class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm"
-         [placeholder]="'http://localhost:8000'"
-         [value]="settingsService.baseUrl()"
-         (change)="settingsService.baseUrl.set($event.target.value)"
-        />
-    </div>
-    <span class="flex-auto"></span>
-    <button mat-icon-button matTooltip="Download Config" (click)="downloadConfig()">
-      <mat-icon>download</mat-icon>
-    </button>
-    @if (configService.pendingConfigIsValid()) {
-      <button mat-icon-button matTooltip="Apply Config" (click)="applyConfig()" [disabled]="!configService.configIsDirty()">
-        <mat-icon>save</mat-icon>
-      </button>
-    } @else {
-      <div
-        class="flex items-center justify-center text-red-500 hover:cursor-pointer"
-        matTooltip="Config Errors"
-      >
-        <mat-icon>error</mat-icon>
+  <div class="w-full">
+    <mat-toolbar color="primary">
+      @if(eventsService.status() === 'open') {
+        <div matTooltip="Connected" class="h-3 w-3 rounded-full bg-green-400 mr-2"></div>
+      } @else if (eventsService.status() === 'closed') {
+        <div matTooltip="Disconnected" class="h-3 w-3 rounded-full bg-orange-400 mr-2"></div>
+      } @else if (eventsService.status() === 'error') {
+        <div matTooltip="Error" class="h-3 w-3 rounded-full bg-red-400 mr-2"></div>
+      }
+      <span>showbridge</span>
+      <div>
+         <label class="ml-4 mr-2">URL:</label>
+         <input
+           type="text"
+           class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm"
+           [placeholder]="'http://localhost:8000'"
+           [value]="settingsService.baseUrl()"
+           (change)="settingsService.baseUrl.set($event.target.value)"
+          />
       </div>
-    }
-  </mat-toolbar>
-  <div class="flex-grow h-full overflow-y-auto">
-    <router-outlet></router-outlet>
-    <!-- @if (configService.currentlyShownConfig() && schemaService.schemasLoaded()) {
-      <app-config [(config)]="configService.currentlyShownConfig"></app-config>
-    } @else {
-      <div class="flex items-center justify-center mt-28">
-        <mat-spinner></mat-spinner>
-      </div>
-    } -->
+      <span class="flex-auto"></span>
+      @if (configService.pendingConfigIsValid()) {
+        <button mat-icon-button matTooltip="Apply Config" (click)="applyConfig()" [disabled]="!configService.configIsDirty()">
+          <mat-icon>save</mat-icon>
+        </button>
+      } @else {
+        <div
+          class="flex items-center justify-center text-red-500 hover:cursor-pointer"
+          matTooltip="Config Errors"
+        >
+          <mat-icon>error</mat-icon>
+        </div>
+      }
+    </mat-toolbar>
   </div>
+  @if (schemaService.schemasLoaded()) {
+    <div class="flex-grow overflow-hidden flex">
+      <div class="flex-grow overflow-y-auto">
+        <app-module-list [modules]="config()?.modules" (modulesChange)="modulesUpdated($event)"></app-module-list>
+        <app-route-list [routes]="config()?.routes" [moduleIds]="moduleIds()" (routesChange)="routesUpdated($event)"></app-route-list>
+      </div>
+      <div class="w-1/2 overflow-y-hidden">
+        <app-config-preview [config]="config()"></app-config-preview>
+      </div>
+    </div>
+  }
 </div>

src/app/app.routes.ts

@@ -1,13 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const appRoutes: Routes = [
-  {
-    path: '',
-    redirectTo: 'config',
-    pathMatch: 'full',
-  },
-  {
-    path: 'config',
-    loadComponent: () => import('./components/config/config.component').then((m) => m.ConfigComponent),
-  },
-];

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -7,12 +7,15 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterOutlet } from '@angular/router';
 import * as yaml from 'js-yaml';
-import { Config } from './models/config.models';
+import { Config, ModuleConfig, RouteConfig } from './models/config.models';
 import { ConfigService } from './services/config.service';
 import { EventsService } from './services/events.service';
 import { SchemaService } from './services/schema.service';
 import { SettingsService } from './services/settings.service';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { ModuleListComponent } from './components/module-list/module-list.component';
+import { RouteListComponent } from './components/route-list/route-list.component';
+import { ConfigPreviewComponent } from './components/config-preview/config-preview.component';
 
 @Component({
   selector: 'app-root',
@@ -23,12 +26,28 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatMenuModule,
     MatButtonModule,
     MatTooltipModule,
-    RouterOutlet
+    ModuleListComponent,
+    RouteListComponent,
+    ConfigPreviewComponent
 ],
   templateUrl: './app.html',
   styleUrl: './app.css',
 })
 export class App {
+
+  config = computed<Config | undefined>(() => this.configService.currentlyShownConfig());
+
+  modules = computed(() => this.config()?.modules ?? []);
+  routes = computed(() => this.config()?.routes ?? []);
+
+  moduleIds = computed(() => {
+    const config = this.config();
+    if (config !== undefined && config.modules !== undefined) {
+      return config.modules.map((module) => module.id!) ?? [];
+    }
+    return [];
+  });
+  
   public schemaService = inject(SchemaService);
   public configService = inject(ConfigService);
 
@@ -57,46 +76,35 @@ export class App {
     this.configService.updateCurrentlyShownConfig(config);
   }
 
-  downloadConfig() {
-    const config = this.configService.currentlyShownConfig();
-    if (config) {
-      this.downloadYAML(config, 'config.yaml');
-    } else {
-      this.snackBar.open('No config to download.', 'Dismiss', {
-        duration: 3000,
-      });
+  modulesUpdated(modules: ModuleConfig[] | undefined) {
+    if (modules === undefined) {
+      console.error('modules is undefined, not updating');
+      return;
     }
+    this.configService.currentlyShownConfig.update((config) => {
+      if (config) {
+        return {
+          ...config,
+          modules: modules,
+        };
+      }
+      return config;
+    });
   }
 
-  downloadJSON(data: object, filename: string) {
-    const content = JSON.stringify(data, null, 2);
-    const dataUri = URL.createObjectURL(
-      new Blob([content], {
-        type: 'application/json;charset=utf-8',
-      }),
-    );
-    const dummyLink = document.createElement('a');
-    dummyLink.href = dataUri;
-    dummyLink.download = filename;
-
-    document.body.appendChild(dummyLink);
-    dummyLink.click();
-    document.body.removeChild(dummyLink);
-  }
-
-  downloadYAML(data: object, filename: string) {
-    const content = yaml.dump(data);
-    const dataUri = URL.createObjectURL(
-      new Blob([content], {
-        type: 'application/yaml;charset=utf-8',
-      }),
-    );
-    const dummyLink = document.createElement('a');
-    dummyLink.href = dataUri;
-    dummyLink.download = filename;
-
-    document.body.appendChild(dummyLink);
-    dummyLink.click();
-    document.body.removeChild(dummyLink);
+  routesUpdated(routes: RouteConfig[] | undefined) {
+    if (routes === undefined) {
+      console.error('routes is undefined, not updating');
+      return;
+    }
+    this.configService.currentlyShownConfig.update((config) => {
+      if (config) {
+        return {
+          ...config,
+          routes: routes,
+        };
+      }
+      return config;
+    });
   }
 }

src/app/components/config-preview/config-preview.component.html

@@ -0,0 +1,14 @@
+<div class="h-full flex flex-col">
+  <div class="flex items-center">
+    <div class="text-white">Config Preview</div>
+    <div class="flex-grow"></div>
+    <div>
+      <button mat-icon-button matTooltip="Download Config" (click)="downloadConfig()">
+        <mat-icon class="!text-white">download</mat-icon>
+      </button>
+    </div>
+  </div>
+  <div class="flex-1 border border-gray-500 overflow-y-auto">
+    <pre class="p-3 text-xs text-white leading-relaxed whitespace-pre-wrap">{{ yamlString() }}</pre>
+  </div>
+</div>

src/app/components/config-preview/config-preview.component.ts

@@ -0,0 +1,67 @@
+import { JsonPipe } from '@angular/common';
+import { Component, computed, input } from '@angular/core';
+import * as yaml from 'js-yaml';
+import { Config } from '../../models/config.models';
+import { MatIcon, MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-config-preview',
+  imports: [
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule
+],
+  templateUrl: './config-preview.component.html',
+  styleUrl: './config-preview.component.css',
+})
+export class ConfigPreviewComponent {
+  config = input<Config | undefined>();
+
+  yamlString = computed(() => {
+    if (this.config() === undefined) {
+      return '';
+    }
+    return yaml.dump(this.config());
+  });
+
+  downloadConfig() {
+    const config = this.config();
+    if (config) {
+      this.downloadYAML(config, 'config.yaml');
+    }
+  }
+
+  downloadJSON(data: object, filename: string) {
+    const content = JSON.stringify(data, null, 2);
+    const dataUri = URL.createObjectURL(
+      new Blob([content], {
+        type: 'application/json;charset=utf-8',
+      }),
+    );
+    const dummyLink = document.createElement('a');
+    dummyLink.href = dataUri;
+    dummyLink.download = filename;
+
+    document.body.appendChild(dummyLink);
+    dummyLink.click();
+    document.body.removeChild(dummyLink);
+  }
+
+  downloadYAML(data: object, filename: string) {
+    const content = yaml.dump(data);
+    const dataUri = URL.createObjectURL(
+      new Blob([content], {
+        type: 'application/yaml;charset=utf-8',
+      }),
+    );
+    const dummyLink = document.createElement('a');
+    dummyLink.href = dataUri;
+    dummyLink.download = filename;
+
+    document.body.appendChild(dummyLink);
+    dummyLink.click();
+    document.body.removeChild(dummyLink);
+  }
+}

src/app/components/config/config.component.html

@@ -1,4 +0,0 @@
-@if (config() && schemaService.schemasLoaded()) {
-  <app-module-list [modules]="config()?.modules" (modulesChange)="modulesUpdated($event)"></app-module-list>
-  <app-route-list [routes]="config()?.routes" [moduleIds]="moduleIds()" (routesChange)="routesUpdated($event)"></app-route-list>
-}

src/app/components/config/config.component.ts

@@ -1,76 +0,0 @@
-import { Component, computed, inject } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Config, ModuleConfig, RouteConfig } from '../../models/config.models';
-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',
-  imports: [
-    MatMenuModule,
-    MatIconModule,
-    MatButtonModule,
-    MatTooltipModule,
-    ModuleListComponent,
-    RouteListComponent,
-  ],
-  templateUrl: './config.component.html',
-  styleUrl: './config.component.css',
-})
-export class ConfigComponent {
-  config = computed<Config | undefined>(() => this.configService.currentlyShownConfig());
-
-  modules = computed(() => this.config()?.modules ?? []);
-  routes = computed(() => this.config()?.routes ?? []);
-
-  moduleIds = computed(() => {
-    const config = this.config();
-    if (config !== undefined && config.modules !== undefined) {
-      return config.modules.map((module) => module.id!) ?? [];
-    }
-    return [];
-  });
-
-  public configService = inject(ConfigService);
-  public schemaService = inject(SchemaService);
-
-  public eventsService = inject(EventsService);
-
-  modulesUpdated(modules: ModuleConfig[] | undefined) {
-    if (modules === undefined) {
-      console.error('modules is undefined, not updating');
-      return;
-    }
-    this.configService.currentlyShownConfig.update((config) => {
-      if (config) {
-        return {
-          ...config,
-          modules: modules,
-        };
-      }
-      return config;
-    });
-  }
-
-  routesUpdated(routes: RouteConfig[] | undefined) {
-    if (routes === undefined) {
-      console.error('routes is undefined, not updating');
-      return;
-    }
-    this.configService.currentlyShownConfig.update((config) => {
-      if (config) {
-        return {
-          ...config,
-          routes: routes,
-        };
-      }
-      return config;
-    });
-  }
-}

src/app/components/module/module.component.html

@@ -13,7 +13,7 @@
           {{ schema().title || module()?.type }}
         </div>
         <div class="flex-grow"></div>
-        <div class="flex items-center justify-center hover:bg-gray-700" (click)="delete.emit()">
+        <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
           <mat-icon class="!text-red-500">close</mat-icon>
         </div>
       </div>

src/app/components/processor/processor.component.html

@@ -9,7 +9,7 @@
         <div class="flex-grow ml-1 mr-3 text-white">
           {{ schema()?.title || processor()?.type }}
         </div>
-        <div class="flex items-center justify-center hover:bg-gray-700" (click)="delete.emit()">
+        <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
           <mat-icon class="!text-red-500">close</mat-icon>
         </div>
       </div>

src/app/components/route-list/route-list.component.html

@@ -12,7 +12,7 @@
   <div class="flex-grow overflow-x-hidden overflow-y-auto gap-1.5">
     @for (route of routes(); track route; let i = $index) {
       <div class="m-2">
-        <app-route
+        <app-route 
           [path]="`routes/${i}`"
           (routeChange)="routeUpdated(i, $event)"
           [route]="route"

src/app/components/route/route.component.html

@@ -3,14 +3,14 @@
   <div
     class="flex flex-col bg-gray-800 border-2 {{
       isInError() ? 'border-red-500' : 'border-gray-600'
-    }} border-solid w-full h-full"
+    }} border-solid w-full"
   >
     <div class="flex items-center justify-end">
       <div class="flex items-center">
           <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator">chevron_right</mat-icon>
       </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()">
+      <div class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer" (click)="delete.emit()">
         <mat-icon class="!text-red-500">close</mat-icon>
       </div>
     </div>