make route input/output a select list of module id's

src/app/config/config.component.html

@@ -44,6 +44,7 @@
               [path]="`routes/${i}`"
               (routeChange)="routeUpdated(i, $event)"
               [route]="route"
+              [moduleIds]="moduleIds()"
               (delete)="deleteRoute(i)"
             ></app-route>
           </div>

src/app/config/config.component.ts

@@ -28,6 +28,14 @@ export class ConfigComponent {
   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);
 
   private snackBar = inject(MatSnackBar);

src/app/route/route.component.html

@@ -15,12 +15,16 @@
           <div class="m-2">
             <div class="flex items-center m-1">
               <label class="mr-2 text-gray-300"> input: </label>
-              <input
+              <select
-                type="text"
                 class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
-                [placeholder]="'module-1'"
+                formControlName="input"
-                [formControlName]="'input'"
+              >
-              />
+                @for (option of moduleIds(); track option) {
+                  <option [value]="option">
+                    {{ option }}
+                  </option>
+                }
+              </select>
               @if (!formGroup.controls['input'].valid) {
                 <!-- TODO(jwetzell): better error displaying -->
                 <div class="ml-2 text-red-500">{{ formGroup.controls['input'].errors | json }}</div>
@@ -28,12 +32,16 @@
             </div>
             <div class="flex items-center m-1">
               <label class="mr-2 text-gray-300"> output: </label>
-              <input
+              <select
-                type="text"
                 class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
-                [placeholder]="'module-1'"
+                formControlName="output"
-                [formControlName]="'output'"
+              >
-              />
+                @for (option of moduleIds(); track option) {
+                  <option [value]="option">
+                    {{ option }}
+                  </option>
+                }
+              </select>
               @if (!formGroup.controls['output'].valid) {
                 <!-- TODO(jwetzell): better error displaying -->
                 <div class="ml-2 text-red-500">

src/app/route/route.component.ts

@@ -16,6 +16,7 @@ import { JsonPipe } from '@angular/common';
 export class RouteComponent {
   path = input<string>('');
   route = model<RouteConfiguration>();
+  moduleIds = input<string[]>([]);
   delete = output<void>();
 
   formGroup: FormGroup = new FormGroup({