wip

client/admin/src/app/app.component.html

@@ -130,12 +130,33 @@
 @if (auth.loggedIn) {
   <div class="-mt-px">
     <!-- Breadcrumb -->
-    <div class="sticky top-0 inset-x-0 z-20 bg-white border-y px-4 sm:px-6 lg:px-8 lg:hidden dark:bg-neutral-800 dark:border-neutral-700">
+    <div
+      class="sticky top-0 inset-x-0 z-20 bg-white border-y px-4 sm:px-6 lg:px-8 lg:hidden dark:bg-neutral-800 dark:border-neutral-700"
+    >
       <div class="flex items-center py-2">
         <!-- Navigation Toggle -->
-        <button type="button" class="size-8 flex justify-center items-center gap-x-2 border border-gray-200 text-gray-800 hover:text-gray-500 rounded-lg focus:outline-none focus:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-500 dark:focus:text-neutral-500" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-application-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-application-sidebar">
+        <button
+          type="button"
+          class="size-8 flex justify-center items-center gap-x-2 border border-gray-200 text-gray-800 hover:text-gray-500 rounded-lg focus:outline-none focus:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-500 dark:focus:text-neutral-500"
+          aria-haspopup="dialog"
+          aria-expanded="false"
+          aria-controls="hs-application-sidebar"
+          aria-label="Toggle navigation"
+          data-hs-overlay="#hs-application-sidebar"
+        >
           <span class="sr-only">Toggle Navigation</span>
-          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
             <rect width="18" height="18" x="3" y="3" rx="2" />
             <path d="M15 3v18" />
             <path d="m8 9 3 3-3 3" />
@@ -145,13 +166,30 @@
 
         <!-- Breadcrumb -->
         <ol class="ms-3 flex items-center whitespace-nowrap">
-          <li class="flex items-center text-sm text-gray-800 dark:text-neutral-400">
+          <li
+            class="flex items-center text-sm text-gray-800 dark:text-neutral-400"
+          >
             Application Layout
-            <svg class="shrink-0 mx-3 overflow-visible size-2.5 text-gray-400 dark:text-neutral-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
-              <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              class="shrink-0 mx-3 overflow-visible size-2.5 text-gray-400 dark:text-neutral-500"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
             </svg>
           </li>
-          <li class="text-sm font-semibold text-gray-800 truncate dark:text-neutral-400" aria-current="page">
+          <li
+            class="text-sm font-semibold text-gray-800 truncate dark:text-neutral-400"
+            aria-current="page"
+          >
             Dashboard
           </li>
         </ol>
@@ -162,15 +200,13 @@
   </div>
 
   <!-- Sidebar -->
- <div id="hs-application-sidebar" class="hs-overlay  [--auto-close:lg]
+  <div
-    hs-overlay-open:translate-x-0
+    id="hs-application-sidebar"
-    -translate-x-full transition-all duration-300 transform
+    class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
-    w-[260px] h-full
+    role="dialog"
-    hidden
+    tabindex="-1"
-    fixed inset-y-0 start-0 z-[60]
+    aria-label="Sidebar"
-    bg-white border-e border-gray-200
+  >
-    lg:block lg:translate-x-0 lg:end-auto lg:bottom-0
-    dark:bg-neutral-800 dark:border-neutral-700" role="dialog" tabindex="-1" aria-label="Sidebar">
     <div class="relative flex flex-col h-full max-h-full">
       <div class="px-6 pt-4">
         <!-- Logo -->

client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.html

@@ -1 +1,6 @@
-<p>TG comp</p>
+<div class="tgform">
+  <form [formGroup]="form" (ngSubmit)="submit()">
+  <label for="name">Name: </label>
+  <input id="name" type="text" formControlName="name" [(ngModel)]="tg.name" />
+  </form>
+</div>

client/admin/src/app/talkgroups/talkgroup-record/talkgroup-record.component.ts

@@ -1,31 +1,53 @@
 import { Component, inject } from '@angular/core';
 import { Talkgroup } from '../../talkgroup';
 import { TalkgroupService } from '../talkgroups.service';
-
+import { CommonModule } from '@angular/common';
+import {
+  ReactiveFormsModule,
+  FormGroup,
+  FormControl,
+  Validators,
+} from '@angular/forms';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: 'talkgroup-record',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './talkgroup-record.component.html',
   styleUrl: './talkgroup-record.component.css',
 })
 export class TalkgroupRecordComponent {
-  tg$: Observable<Talkgroup>;
+  tg!: Talkgroup;
   tgService: TalkgroupService = inject(TalkgroupService);
-  constructor(private route: ActivatedRoute, private router: Router) {
-    const sysId = this.route.snapshot.paramMap.get('sys');
-    const tgId = this.route.snapshot.paramMap.get('tg');
 
-    this.tg$ = this.tgService.getTalkgroup(Number(sysId), Number(tgId));
+  form!: FormGroup;
-  }
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
 
   ngOnInit() {
     const sysId = this.route.snapshot.paramMap.get('sys');
     const tgId = this.route.snapshot.paramMap.get('tg');
 
-    this.tg$ = this.tgService.getTalkgroup(Number(sysId), Number(tgId));
+    this.tgService
+      .getTalkgroup(Number(sysId), Number(tgId))
+      .subscribe((data: Talkgroup) => {
+        this.tg = data;
+      });
+
+    this.form = new FormGroup({
+      name: new FormControl(''),
+      alpha_tag: new FormControl(''),
+      tg_group: new FormControl(''),
+      alert: new FormControl(true),
+      weight: new FormControl(1.0),
+    });
+  }
+
+  submit() {
   }
 }

client/admin/src/app/talkgroups/talkgroups.component.html

@@ -12,13 +12,17 @@
     </thead>
     <tbody>
       <!-- row 1 -->
-      @for (tg of tgs; track tg.id) {
+      @for (tg of talkgroups$ | async; track tg.id) {
         <tr>
           <td>{{ tg.system.name }}</td>
           <td>{{ tg.system.id }}</td>
           <td>{{ tg.name }}</td>
           <td>{{ tg.tgid }}</td>
-          <td><a routerLink='/talkgroup/{{tg.system.id}}/{{tg.tgid}}'><ng-icon name="ionCreateOutline"></ng-icon></a></td>
+          <td>
+            <a routerLink="/talkgroups/{{ tg.system.id }}/{{ tg.tgid }}"
+              ><ng-icon name="ionCreateOutline"></ng-icon
+            ></a>
+          </td>
         </tr>
       }
     </tbody>

client/admin/src/app/talkgroups/talkgroups.component.ts

@@ -6,11 +6,19 @@ import { ionCreateOutline } from '@ng-icons/ionicons';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { RouterModule, RouterOutlet, RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'talkgroups',
   standalone: true,
-  imports: [NgIconComponent],
+  imports: [
+    NgIconComponent,
+    RouterOutlet,
+    RouterModule,
+    RouterLink,
+    CommonModule,
+  ],
   templateUrl: './talkgroups.component.html',
   styleUrl: './talkgroups.component.css',
   providers: [provideIcons({ ionCreateOutline })],
@@ -18,22 +26,18 @@ import { switchMap } from 'rxjs/operators';
 export class TalkgroupsComponent {
   selectedSys: number = 0;
   selectedId: number = 0;
-  talkgroups$: Observable<Talkgroup[]> = [];
+  talkgroups$!: Observable<Talkgroup[]>;
   tgService: TalkgroupService = inject(TalkgroupService);
 
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
     this.talkgroups$ = this.route.paramMap.pipe(
-      switchMap(params => {
+      switchMap((params) => {
         this.selectedSys = Number(params.get('sys'));
         this.selectedId = Number(params.get('tg'));
         return this.tgService.getTalkgroups();
-      })
+      }),
     );
   }
-
-  getTalkgroups() {
-    this.tgService.getTalkgroups().subscribe((tgs) => (this.tgs = tgs));
-  }
 }

client/admin/src/app/talkgroups/talkgroups.service.ts

@@ -15,6 +15,6 @@ export class TalkgroupService {
   }
 
   getTalkgroup(sys: number, tg: number): Observable<Talkgroup> {
-    return this.http.get<Talkgroup>(`/api/talkgroup/${sys}/${tg}`)
+    return this.http.get<Talkgroup>(`/api/talkgroup/${sys}/${tg}`);
   }
 }