amigan/stillbox
1
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Daniel 2024-11-10 15:18:01 -05:00
parent e2eabee6c8
commit 03b3ca4f52
6 changed files with 116 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
client/admin/src/app/app.component.html
View file

@ -6,13 +6,13 @@
<nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
<div class="me-5 lg:me-0 lg:hidden">
<!-- Logo -->
<a
class="flex-none rounded-md text-xl inline-block stillboxLogo focus:outline-none focus:opacity-80"
href="#"
aria-label="Stillbox"
>
Stillbox
</a>
<a
class="flex-none rounded-md text-xl inline-block stillboxLogo focus:outline-none focus:opacity-80"
href="#"
aria-label="Stillbox"
>
Stillbox
</a>
<!-- End Logo -->
</div>
<div
@ -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">
<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
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>
@ -161,16 +199,14 @@
<!-- End Breadcrumb -->
</div>
<!-- Sidebar -->
<div id="hs-application-sidebar" 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" role="dialog" tabindex="-1" aria-label="Sidebar">
<!-- Sidebar -->
<div
id="hs-application-sidebar"
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"
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 -->

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

@ -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>

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

@ -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() {
}
}

8
client/admin/src/app/talkgroups/talkgroups.component.html
View file

@ -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>

20
client/admin/src/app/talkgroups/talkgroups.component.ts
View file

@ -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));
}
}

2
client/admin/src/app/talkgroups/talkgroups.service.ts
View file

@ -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}`);
}
}