-
-
- Login
-
-
-
-
-
+
+
+ Login
+
+
+
+
+
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/account/login.component.ts b/openalprwebhookprocessor.client/src/app/account/login.component.ts
index e5940899..499f35d6 100644
--- a/openalprwebhookprocessor.client/src/app/account/login.component.ts
+++ b/openalprwebhookprocessor.client/src/app/account/login.component.ts
@@ -1,74 +1,72 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, RouterLink } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { first } from 'rxjs/operators';
+import { Component, OnInit, inject } from '@angular/core'
+import { Router, ActivatedRoute, RouterLink } from '@angular/router'
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'
+import { first } from 'rxjs/operators'
-import { AccountService, AlertService } from 'app/_services';
-import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
+import { AccountService, AlertService } from 'app/_services'
+
+import { MatCardModule } from '@angular/material/card'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatButtonModule } from '@angular/material/button'
@Component({
- selector: 'app-login',
- templateUrl: 'login.component.html',
- standalone: true,
- imports: [CommonModule, ReactiveFormsModule, RouterLink, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule]
+ selector: 'app-login',
+ templateUrl: 'login.component.html',
+ imports: [ReactiveFormsModule, RouterLink, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule],
})
export class LoginComponent implements OnInit {
- form: FormGroup;
- loading = false;
- submitted = false;
- public canRegister: boolean = false;
- constructor(
- private formBuilder: FormBuilder,
- private route: ActivatedRoute,
- private router: Router,
- private accountService: AccountService,
- private alertService: AlertService
- ) { }
+ private formBuilder = inject(FormBuilder)
+ private route = inject(ActivatedRoute)
+ private router = inject(Router)
+ private accountService = inject(AccountService)
+ private alertService = inject(AlertService)
- ngOnInit() {
- this.accountService.canRegister().subscribe(result => {
- this.canRegister = result;
- });
+ form: FormGroup
+ loading = false
+ submitted = false
+ public canRegister = false
- this.form = this.formBuilder.group({
- username: ['', Validators.required],
- password: ['', Validators.required]
- });
- }
+ ngOnInit() {
+ this.accountService.canRegister().subscribe((result) => {
+ this.canRegister = result
+ })
- // convenience getter for easy access to form fields
- get f() {
- return this.form.controls;
- }
+ this.form = this.formBuilder.group({
+ username: ['', Validators.required],
+ password: ['', Validators.required],
+ })
+ }
- onSubmit() {
- this.submitted = true;
+ // convenience getter for easy access to form fields
+ get f() {
+ return this.form.controls
+ }
- // reset alerts on submit
- this.alertService.clear();
+ onSubmit() {
+ this.submitted = true
- // stop here if form is invalid
- if (this.form.invalid) {
- return;
- }
+ // reset alerts on submit
+ this.alertService.clear()
- this.loading = true;
- this.accountService.login(this.f.username.value, this.f.password.value)
- .pipe(first())
- .subscribe({
- next: () => {
- // get return url from query parameters or default to home page
- const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
- this.router.navigateByUrl(returnUrl);
- },
- error: error => {
- this.alertService.error(error);
- this.loading = false;
- }
- });
+ // stop here if form is invalid
+ if (this.form.invalid) {
+ return
}
+
+ this.loading = true
+ this.accountService.login(this.f.username.value, this.f.password.value)
+ .pipe(first())
+ .subscribe({
+ next: () => {
+ // get return url from query parameters or default to home page
+ const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'
+ this.router.navigateByUrl(returnUrl)
+ },
+ error: (error) => {
+ this.alertService.error(error)
+ this.loading = false
+ },
+ })
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/account/register.component.ts b/openalprwebhookprocessor.client/src/app/account/register.component.ts
index 1307dfbe..23c7cc06 100644
--- a/openalprwebhookprocessor.client/src/app/account/register.component.ts
+++ b/openalprwebhookprocessor.client/src/app/account/register.component.ts
@@ -1,70 +1,66 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, RouterLink } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { first } from 'rxjs/operators';
+import { Component, OnInit, inject } from '@angular/core'
+import { Router, ActivatedRoute, RouterLink } from '@angular/router'
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'
+import { first } from 'rxjs/operators'
-import { AccountService, AlertService } from 'app/_services';
-import { NgClass, NgIf } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
+import { AccountService, AlertService } from 'app/_services'
+import { MatCardModule } from '@angular/material/card'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatButtonModule } from '@angular/material/button'
@Component({
- templateUrl: 'register.component.html',
- standalone: true,
- imports: [ReactiveFormsModule, NgClass, NgIf, RouterLink, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule]
+ templateUrl: 'register.component.html',
+ imports: [ReactiveFormsModule, RouterLink, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule],
})
export class RegisterComponent implements OnInit {
- form: FormGroup;
- loading = false;
- submitted = false;
+ private formBuilder = inject(FormBuilder)
+ private route = inject(ActivatedRoute)
+ private router = inject(Router)
+ private accountService = inject(AccountService)
+ private alertService = inject(AlertService)
- constructor(
- private formBuilder: FormBuilder,
- private route: ActivatedRoute,
- private router: Router,
- private accountService: AccountService,
- private alertService: AlertService
- ) { }
+ form: FormGroup
+ loading = false
+ submitted = false
- ngOnInit() {
- this.form = this.formBuilder.group({
- firstName: ['', Validators.required],
- lastName: ['', Validators.required],
- username: ['', Validators.required],
- password: ['', [Validators.required, Validators.minLength(6)]]
- });
- }
-
- // convenience getter for easy access to form fields
- get f() {
- return this.form.controls;
- }
+ ngOnInit() {
+ this.form = this.formBuilder.group({
+ firstName: ['', Validators.required],
+ lastName: ['', Validators.required],
+ username: ['', Validators.required],
+ password: ['', [Validators.required, Validators.minLength(6)]],
+ })
+ }
- onSubmit() {
- this.submitted = true;
+ // convenience getter for easy access to form fields
+ get f() {
+ return this.form.controls
+ }
- // reset alerts on submit
- this.alertService.clear();
+ onSubmit() {
+ this.submitted = true
- // stop here if form is invalid
- if (this.form.invalid) {
- return;
- }
+ // reset alerts on submit
+ this.alertService.clear()
- this.loading = true;
- this.accountService.register(this.form.value)
- .pipe(first())
- .subscribe({
- next: () => {
- this.alertService.success('Registration successful', true);
- this.router.navigate(['../login'], { relativeTo: this.route });
- },
- error: error => {
- this.alertService.error(error);
- this.loading = false;
- }
- });
+ // stop here if form is invalid
+ if (this.form.invalid) {
+ return
}
-}
\ No newline at end of file
+
+ this.loading = true
+ this.accountService.register(this.form.value)
+ .pipe(first())
+ .subscribe({
+ next: () => {
+ this.alertService.success('Registration successful', true)
+ this.router.navigate(['../login'], { relativeTo: this.route })
+ },
+ error: (error) => {
+ this.alertService.error(error)
+ this.loading = false
+ },
+ })
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/app-routing.module.ts b/openalprwebhookprocessor.client/src/app/app-routing.module.ts
index 4c5cc7fe..ffbf683f 100644
--- a/openalprwebhookprocessor.client/src/app/app-routing.module.ts
+++ b/openalprwebhookprocessor.client/src/app/app-routing.module.ts
@@ -1,59 +1,60 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home';
-import { AuthGuard } from './_helpers';
-import { OpenalprAgentComponent } from './settings/openalpr-agent/openalpr-agent.component';
-import { CamerasComponent } from './settings/cameras/cameras.component';
-import { AlertsComponent } from './settings/alerts/alerts.component';
-import { EnrichersComponent } from './settings/enrichers/enrichers.component';
-import { ForwardsComponent } from './settings/forwards/forwards.component';
-import { IgnoresComponent } from './settings/ignores/ignores.component';
-import { SystemLogsComponent } from './settings/system-logs/system-logs.component';
-import { PlatesComponent } from './plates/plates.component';
-import { AddEditComponent } from './settings/users/add-edit.component';
-import { UsersComponent } from './settings/users/users.component';
-import { LoginComponent } from './account/login.component';
-import { RegisterComponent } from './account/register.component';
+import { NgModule } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router'
+import { HomeComponent } from './home'
+import { AuthGuard } from './_helpers'
+import { OpenalprAgentComponent } from './settings/openalpr-agent/openalpr-agent.component'
+import { CamerasComponent } from './settings/cameras/cameras.component'
+import { AlertsComponent } from './settings/alerts/alerts.component'
+import { EnrichersComponent } from './settings/enrichers/enrichers.component'
+import { ForwardsComponent } from './settings/forwards/forwards.component'
+import { IgnoresComponent } from './settings/ignores/ignores.component'
+import { SystemLogsComponent } from './settings/system-logs/system-logs.component'
+import { PlatesComponent } from './plates/plates.component'
+import { AddEditComponent } from './settings/users/add-edit.component'
+import { UsersComponent } from './settings/users/users.component'
+import { LoginComponent } from './account/login.component'
+import { RegisterComponent } from './account/register.component'
const routes: Routes = [
- { path: '', component: HomeComponent, canActivate: [AuthGuard] },
- {
- path: 'account',
+ { path: '', component: HomeComponent, canActivate: [AuthGuard] },
+ {
+ path: 'account',
+ children: [
+ { path: 'login', component: LoginComponent },
+ { path: 'register', component: RegisterComponent },
+ { path: '', redirectTo: '/', pathMatch: 'full' },
+ ],
+ },
+ { path: 'plate/:id', component: PlatesComponent, canActivate: [AuthGuard] },
+ { path: 'plates', component: PlatesComponent, canActivate: [AuthGuard] },
+ {
+ path: 'settings',
+ children: [
+ { path: 'agent', component: OpenalprAgentComponent },
+ { path: 'alerts', component: AlertsComponent },
+ { path: 'cameras', component: CamerasComponent },
+ { path: 'enrichers', component: EnrichersComponent },
+ { path: 'forwards', component: ForwardsComponent },
+ { path: 'ignores', component: IgnoresComponent },
+ { path: 'logs', component: SystemLogsComponent },
+ {
+ path: 'users',
children: [
- { path: 'login', component: LoginComponent },
- { path: 'register', component: RegisterComponent },
- { path: '', redirectTo: '/', pathMatch: 'full' }
- ]
- },
- { path: 'plate/:id', component: PlatesComponent, canActivate: [AuthGuard] },
- { path: 'plates', component: PlatesComponent, canActivate: [AuthGuard] },
- {
- path: 'settings',
- children: [
- { path: 'agent', component: OpenalprAgentComponent },
- { path: 'alerts', component: AlertsComponent },
- { path: 'cameras', component: CamerasComponent },
- { path: 'enrichers', component: EnrichersComponent },
- { path: 'forwards', component: ForwardsComponent },
- { path: 'ignores', component: IgnoresComponent },
- { path: 'logs', component: SystemLogsComponent },
- {
- path: 'users',
- children: [
- { path: '', component: UsersComponent },
- { path: 'add', component: AddEditComponent },
- { path: 'edit/:id', component: AddEditComponent }
- ]
- },
- { path: '', redirectTo: '/', pathMatch: 'full' }
+ { path: '', component: UsersComponent },
+ { path: 'add', component: AddEditComponent },
+ { path: 'edit/:id', component: AddEditComponent },
],
- canActivate: [AuthGuard]
- },
- { path: '**', redirectTo: '/', pathMatch: 'full' }
-];
+ },
+ { path: '', redirectTo: '/', pathMatch: 'full' },
+ ],
+ canActivate: [AuthGuard],
+ },
+ { path: '**', redirectTo: '/', pathMatch: 'full' },
+]
@NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule],
})
-export class AppRoutingModule { }
\ No newline at end of file
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class AppRoutingModule { }
diff --git a/openalprwebhookprocessor.client/src/app/app.component.html b/openalprwebhookprocessor.client/src/app/app.component.html
index cdba09b3..a1cdd50a 100644
--- a/openalprwebhookprocessor.client/src/app/app.component.html
+++ b/openalprwebhookprocessor.client/src/app/app.component.html
@@ -1,36 +1,39 @@
-
-
- Images
- Plate and Vehicle
-
-
- ![image of the vehicle]()
- help_center
-
-
- ![image of the vehicle's license plate]()
+
+
+ Images
+ Plate and Vehicle
+
+
+ @if (loadingVehicleImage) {
+ ![image of the vehicle]()
+ @if (!this.vehicleImageUrl|| loadingVehicleImageFailed) {
+ help_center
+ }
+ @if (loadingPlateImage) {
+
+
+ }
+ ![image of the vehicle's license plate]()
+ @if (!this.plateImageUrl || loadingPlateImageFailed) {
help_center
+ [inline]="true"
+ matTooltip="Unable to retrieve image from agent">help_center
+ }
-
-
+
+
- Statistics
- {{plate.plateNumber}}
+ Statistics
+ {{plate.plateNumber}}
+ @if (loadingStatistics) {
help_center
-
-
+
+ }
-
-
+
+
- Notes
- {{plate.plateNumber}}
+ Notes
+ {{plate.plateNumber}}
-
-
-
+
+
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.spec.ts b/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.spec.ts
index 2b74ebd6..80e6ac28 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.spec.ts
@@ -1,46 +1,46 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { PlateComponent } from './plate.component';
-import { Lightbox, LightboxConfig, LightboxEvent } from 'ngx-lightbox';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { DatePipe } from '@angular/common';
-import { Plate } from './plate';
-import { PlateService } from '../plate.service';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { PlateComponent } from './plate.component'
+import { Lightbox, LightboxConfig, LightboxEvent } from 'ngx-lightbox'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { DatePipe } from '@angular/common'
+import { Plate } from './plate'
+import { PlateService } from '../plate.service'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe('PlateComponent', () => {
- let component: PlateComponent;
- let fixture: ComponentFixture;
+ let component: PlateComponent
+ let fixture: ComponentFixture
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [
- BrowserAnimationsModule,
- HttpClientTestingModule,
- PlateComponent
- ],
- providers: [
- DatePipe,
- Lightbox,
- LightboxConfig,
- LightboxEvent,
- PlateService
- ]
- })
- .compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BrowserAnimationsModule,
+ PlateComponent],
+ providers: [
+ DatePipe,
+ Lightbox,
+ LightboxConfig,
+ LightboxEvent,
+ PlateService,
+ provideHttpClient(withInterceptorsFromDi()),
+ provideHttpClientTesting(),
+ ],
+ })
+ .compileComponents()
+ })
- beforeEach(() => {
- fixture = TestBed.createComponent(PlateComponent);
- component = fixture.componentInstance;
- component.plate = new Plate({
- cropImageUrl: new URL('http://google.com'),
- imageUrl: new URL('http://google.com')
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PlateComponent)
+ component = fixture.componentInstance
+ component.plate = new Plate({
+ cropImageUrl: new URL('http://google.com'),
+ imageUrl: new URL('http://google.com'),
+ })
- fixture.detectChanges();
- });
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.ts b/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.ts
index 46df8d7a..044a1b75 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plate/plate.component.ts
@@ -1,205 +1,203 @@
-import { CommonModule, DatePipe } from '@angular/common';
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Lightbox } from 'ngx-lightbox';
-import { PlateService } from '../plate.service';
-import { Plate } from './plate';
-import { PlateStatisticsData } from './plateStatistics';
-import { Subscription } from 'rxjs';
-import { MatButtonModule } from '@angular/material/button';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { TextFieldModule } from '@angular/cdk/text-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatTableModule } from '@angular/material/table';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatCardModule } from '@angular/material/card';
+import { DatePipe } from '@angular/common'
+import { Component, Input, OnChanges, OnDestroy, OnInit, inject } from '@angular/core'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Lightbox } from 'ngx-lightbox'
+import { PlateService } from '../plate.service'
+import { Plate } from './plate'
+import { PlateStatisticsData } from './plateStatistics'
+import { Subscription } from 'rxjs'
+import { MatButtonModule } from '@angular/material/button'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { TextFieldModule } from '@angular/cdk/text-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatTableModule } from '@angular/material/table'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatCardModule } from '@angular/material/card'
@Component({
- selector: 'app-plate',
- templateUrl: './plate.component.html',
- styleUrls: ['./plate.component.less'],
- standalone: true,
- imports: [CommonModule, MatCardModule, MatProgressSpinnerModule, MatIconModule, MatTableModule, MatFormFieldModule, MatInputModule, TextFieldModule, ReactiveFormsModule, FormsModule, MatButtonModule]
+ selector: 'app-plate',
+ templateUrl: './plate.component.html',
+ styleUrls: ['./plate.component.less'],
+ imports: [MatCardModule, MatProgressSpinnerModule, MatIconModule, MatTableModule, MatFormFieldModule, MatInputModule, TextFieldModule, ReactiveFormsModule, FormsModule, MatButtonModule],
})
export class PlateComponent implements OnInit, OnChanges, OnDestroy {
- @Input() plate: Plate;
- @Input() isVisible: boolean;
-
- public isInitialized: boolean;
-
- public loadingVehicleImage: boolean;
- public vehicleImageUrl: string;
- public loadingVehicleImageFailed: boolean;
-
- public loadingPlateImage: boolean;
- public loadingPlateImageFailed: boolean;
- public plateImageUrl: string;
-
- public loadingStatistics: boolean;
- public loadingStatisticsFailed: boolean;
- public isSavingNotes: boolean;
-
- public plateStatistics: PlateStatisticsData[] = [];
- public displayedColumns: string[] = ['key', 'value'];
-
- private statisticsSubscription = new Subscription();
-
- constructor(
- private lightbox: Lightbox,
- private plateService: PlateService,
- private datePipe: DatePipe,
- private snackbarService: SnackbarService
- ) { }
-
- ngOnInit(): void {
- this.loadingVehicleImage = true;
- this.loadingPlateImage = true;
- this.getPlateStatistics();
- this.getPlateImages();
- this.isInitialized = true;
- }
-
- ngOnChanges(): void {
- if (this.isInitialized) {
- if (!this.isVisible) {
- this.loadingStatistics = false;
- this.loadingStatisticsFailed = false;
- this.statisticsSubscription.unsubscribe();
-
- if (this.loadingVehicleImage) {
- this.vehicleImageUrl = '';
- }
-
- if (this.loadingPlateImage) {
- this.plateImageUrl = '';
- }
- } else {
- if (this.plateStatistics.length == 0) {
- this.getPlateStatistics();
- }
-
- this.getPlateImages();
- }
+ private lightbox = inject(Lightbox)
+ private plateService = inject(PlateService)
+ private datePipe = inject(DatePipe)
+ private snackbarService = inject(SnackbarService)
+
+ @Input() plate: Plate
+ @Input() isVisible: boolean
+
+ public isInitialized: boolean
+
+ public loadingVehicleImage: boolean
+ public vehicleImageUrl: string
+ public loadingVehicleImageFailed: boolean
+
+ public loadingPlateImage: boolean
+ public loadingPlateImageFailed: boolean
+ public plateImageUrl: string
+
+ public loadingStatistics: boolean
+ public loadingStatisticsFailed: boolean
+ public isSavingNotes: boolean
+
+ public plateStatistics: PlateStatisticsData[] = []
+ public displayedColumns: string[] = ['key', 'value']
+
+ private statisticsSubscription = new Subscription()
+
+ ngOnInit(): void {
+ this.loadingVehicleImage = true
+ this.loadingPlateImage = true
+ this.getPlateStatistics()
+ this.getPlateImages()
+ this.isInitialized = true
+ }
+
+ ngOnChanges(): void {
+ if (this.isInitialized) {
+ if (!this.isVisible) {
+ this.loadingStatistics = false
+ this.loadingStatisticsFailed = false
+ this.statisticsSubscription.unsubscribe()
+
+ if (this.loadingVehicleImage) {
+ this.vehicleImageUrl = ''
}
- }
-
- ngOnDestroy(): void {
- this.statisticsSubscription.unsubscribe();
- this.vehicleImageUrl = '';
- this.plateImageUrl = '';
- }
- private getPlateStatistics() {
- this.loadingStatistics = true;
- this.statisticsSubscription.closed = false;
- this.statisticsSubscription.add(this.plateService.getPlateStatistics(this.plate.plateNumber).subscribe(result => {
- this.loadingStatistics = false;
- this.loadingStatisticsFailed = false;
-
- this.plateStatistics.push({
- key: 'Confidence',
- value: this.plate.processedPlateConfidence + '%'
- });
-
- this.plateStatistics.push({
- key: 'Seen past 90 days',
- value: result.last90Days.toString()
- });
-
- this.plateStatistics.push({
- key: 'Total Seen',
- value: result.totalSeen.toString()
- });
-
- this.plateStatistics.push({
- key: 'First seen',
- value: this.datePipe.transform(result.firstSeen, 'medium') || ''
- });
-
- this.plateStatistics.push({
- key: 'Last seen',
- value: this.datePipe.transform(result.lastSeen, 'medium') || ''
- });
-
- this.plateStatistics.push({
- key: 'Processing time',
- value: this.plate.openAlprProcessingTimeMs.toString() + 'ms'
- });
-
- this.plateStatistics.push({
- key: 'Possible plates',
- value: this.plate.possiblePlateNumbers
- });
-
- this.plateStatistics.push({
- key: 'Region',
- value: this.plate.region
- });
- },
- () => {
- this.loadingStatistics = false;
- this.loadingStatisticsFailed = true;
- }));
- }
-
- private getPlateImages() {
- if (!this.vehicleImageUrl) {
- this.loadingVehicleImage = true;
- this.loadingVehicleImageFailed = false;
- this.vehicleImageUrl = this.plate.imageUrl.toString();
+ if (this.loadingPlateImage) {
+ this.plateImageUrl = ''
}
-
- if (!this.plateImageUrl) {
- this.loadingPlateImage = true;
- this.loadingPlateImageFailed = false;
- this.plateImageUrl = this.plate.cropImageUrl.toString();
+ }
+ else {
+ if (this.plateStatistics.length == 0) {
+ this.getPlateStatistics()
}
- }
-
- public openLightbox(url: URL, plateNumber: string) {
- const albums = [{
- src: url.toString(),
- caption: plateNumber,
- thumb: url.toString()
- }];
- this.lightbox.open(albums, 0);
+ this.getPlateImages()
+ }
}
-
- public vehicleImageLoaded() {
- this.loadingVehicleImage = false;
- }
-
- public vehicleImageFailedToLoad() {
- this.loadingVehicleImage = false;
- this.loadingVehicleImageFailed = true;
- }
-
- public plateImageLoaded() {
- this.loadingPlateImage = false;
- }
-
- public plateImageFailedToLoad() {
- this.loadingPlateImage = false;
- this.loadingPlateImageFailed = true;
- }
-
- public saveNotes() {
- this.isSavingNotes = true;
- this.plateService.upsertPlate(this.plate).subscribe(() => {
- this.isSavingNotes = false;
- this.snackbarService.create(`Notes saved for: ${this.plate.plateNumber}`, SnackBarType.Saved);
- },
- () => {
- this.isSavingNotes = false;
- this.snackbarService.create(`Failed to save notes for: ${this.plate.plateNumber}`, SnackBarType.Error);
- });
+ }
+
+ ngOnDestroy(): void {
+ this.statisticsSubscription.unsubscribe()
+ this.vehicleImageUrl = ''
+ this.plateImageUrl = ''
+ }
+
+ private getPlateStatistics() {
+ this.loadingStatistics = true
+ this.statisticsSubscription.closed = false
+ this.statisticsSubscription.add(this.plateService.getPlateStatistics(this.plate.plateNumber).subscribe((result) => {
+ this.loadingStatistics = false
+ this.loadingStatisticsFailed = false
+
+ this.plateStatistics.push({
+ key: 'Confidence',
+ value: this.plate.processedPlateConfidence + '%',
+ })
+
+ this.plateStatistics.push({
+ key: 'Seen past 90 days',
+ value: result.last90Days.toString(),
+ })
+
+ this.plateStatistics.push({
+ key: 'Total Seen',
+ value: result.totalSeen.toString(),
+ })
+
+ this.plateStatistics.push({
+ key: 'First seen',
+ value: this.datePipe.transform(result.firstSeen, 'medium') || '',
+ })
+
+ this.plateStatistics.push({
+ key: 'Last seen',
+ value: this.datePipe.transform(result.lastSeen, 'medium') || '',
+ })
+
+ this.plateStatistics.push({
+ key: 'Processing time',
+ value: this.plate.openAlprProcessingTimeMs.toString() + 'ms',
+ })
+
+ this.plateStatistics.push({
+ key: 'Possible plates',
+ value: this.plate.possiblePlateNumbers,
+ })
+
+ this.plateStatistics.push({
+ key: 'Region',
+ value: this.plate.region,
+ })
+ },
+ () => {
+ this.loadingStatistics = false
+ this.loadingStatisticsFailed = true
+ }))
+ }
+
+ private getPlateImages() {
+ if (!this.vehicleImageUrl) {
+ this.loadingVehicleImage = true
+ this.loadingVehicleImageFailed = false
+ this.vehicleImageUrl = this.plate.imageUrl.toString()
}
- public clearNotes() {
- this.plate.notes = '';
+ if (!this.plateImageUrl) {
+ this.loadingPlateImage = true
+ this.loadingPlateImageFailed = false
+ this.plateImageUrl = this.plate.cropImageUrl.toString()
}
+ }
+
+ public openLightbox(url: URL, plateNumber: string) {
+ const albums = [{
+ src: url.toString(),
+ caption: plateNumber,
+ thumb: url.toString(),
+ }]
+
+ this.lightbox.open(albums, 0)
+ }
+
+ public vehicleImageLoaded() {
+ this.loadingVehicleImage = false
+ }
+
+ public vehicleImageFailedToLoad() {
+ this.loadingVehicleImage = false
+ this.loadingVehicleImageFailed = true
+ }
+
+ public plateImageLoaded() {
+ this.loadingPlateImage = false
+ }
+
+ public plateImageFailedToLoad() {
+ this.loadingPlateImage = false
+ this.loadingPlateImageFailed = true
+ }
+
+ public saveNotes() {
+ this.isSavingNotes = true
+ this.plateService.upsertPlate(this.plate).subscribe(() => {
+ this.isSavingNotes = false
+ this.snackbarService.create(`Notes saved for: ${this.plate.plateNumber}`, SnackBarType.Saved)
+ },
+ () => {
+ this.isSavingNotes = false
+ this.snackbarService.create(`Failed to save notes for: ${this.plate.plateNumber}`, SnackBarType.Error)
+ })
+ }
+
+ public clearNotes() {
+ this.plate.notes = ''
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/plates/plate/plate.ts b/openalprwebhookprocessor.client/src/app/plates/plate/plate.ts
index f2ef061d..a8fa1c78 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plate/plate.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plate/plate.ts
@@ -1,41 +1,41 @@
export class Plate {
- id: string;
-
- openAlprCameraId: number;
+ id: string
- vehicleDescription: string;
+ openAlprCameraId: number
- plateNumber: string;
+ vehicleDescription: string
- region: string;
-
- possiblePlateNumbers: string;
+ plateNumber: string
- openAlprProcessingTimeMs: number;
+ region: string
- processedPlateConfidence: number;
+ possiblePlateNumbers: string
- isAlert: boolean;
+ openAlprProcessingTimeMs: number
- isIgnore: boolean;
+ processedPlateConfidence: number
- isOpen: boolean;
+ isAlert: boolean
- alertDescription: string;
+ isIgnore: boolean
- receivedOn: Date;
+ isOpen: boolean
- direction: number;
+ alertDescription: string
- imageUrl: URL;
+ receivedOn: Date
- cropImageUrl: URL;
+ direction: number
- notes: string;
+ imageUrl: URL
- canBeEnriched: boolean;
+ cropImageUrl: URL
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ notes: string
+
+ canBeEnriched: boolean
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/plates/plate/plateResponse.ts b/openalprwebhookprocessor.client/src/app/plates/plate/plateResponse.ts
index 93875896..e6e68251 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plate/plateResponse.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plate/plateResponse.ts
@@ -1,6 +1,6 @@
-import { Plate } from './plate';
+import { Plate } from './plate'
export interface PlateResponse {
- plates: Plate[];
- totalCount: number;
-}
\ No newline at end of file
+ plates: Plate[]
+ totalCount: number
+}
diff --git a/openalprwebhookprocessor.client/src/app/plates/plate/plateStatistics.ts b/openalprwebhookprocessor.client/src/app/plates/plate/plateStatistics.ts
index 323c9913..574f7561 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plate/plateStatistics.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plate/plateStatistics.ts
@@ -1,11 +1,11 @@
export interface PlateStatistics {
- firstSeen: Date;
- lastSeen: Date;
- last90Days: number;
- totalSeen: number;
+ firstSeen: Date
+ lastSeen: Date
+ last90Days: number
+ totalSeen: number
}
-export interface PlateStatisticsData {
- key: string;
- value: string;
-}
\ No newline at end of file
+export interface PlateStatisticsData {
+ key: string
+ value: string
+}
diff --git a/openalprwebhookprocessor.client/src/app/plates/plates.component.html b/openalprwebhookprocessor.client/src/app/plates/plates.component.html
index 97c407ee..e07708a0 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plates.component.html
+++ b/openalprwebhookprocessor.client/src/app/plates/plates.component.html
@@ -12,28 +12,30 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @for (plate of plates; track plate) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
- Vehicle Make
-
- {{make}}
-
-
-
- Vehicle Model
-
- {{model}}
-
-
-
- Vehicle Type
-
- {{type}}
-
-
-
- Vehicle Color
-
- {{color}}
-
-
-
- Vehicle Region
-
- {{region}}
-
-
- Invalid regex pattern
- Invalid search term
-
+
-
-
-
+
+
+
-
diff --git a/openalprwebhookprocessor.client/src/app/plates/plates.component.spec.ts b/openalprwebhookprocessor.client/src/app/plates/plates.component.spec.ts
index b7aa31ae..6a9b0230 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plates.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plates.component.spec.ts
@@ -1,22 +1,22 @@
-import { TestBed } from '@angular/core/testing';
-import { PlatesComponent } from './plates.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { TestBed } from '@angular/core/testing'
+import { PlatesComponent } from './plates.component'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe(PlatesComponent.name, () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- HttpClientTestingModule,
- RouterTestingModule,
- BrowserAnimationsModule]
- });
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [RouterTestingModule,
+ BrowserAnimationsModule],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ })
- it('should create the app', () => {
- const fixture = TestBed.createComponent(PlatesComponent);
- const app = fixture.componentInstance;
- expect(app).toBeTruthy();
- });
-});
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(PlatesComponent)
+ const app = fixture.componentInstance
+ expect(app).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/plates/plates.component.ts b/openalprwebhookprocessor.client/src/app/plates/plates.component.ts
index 99f8adc9..bb8f9a1e 100644
--- a/openalprwebhookprocessor.client/src/app/plates/plates.component.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/plates.component.ts
@@ -1,422 +1,425 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, FormGroupDirective, NgForm, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { SignalrService } from 'app/signalr/signalr.service';
-import { Subscription } from 'rxjs';
-import { Plate } from './plate/plate';
-import { PlateRequest, PlateService } from './plate.service';
-import { ErrorStateMatcher, MatNativeDateModule, MatOptionModule } from '@angular/material/core';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Ignore } from 'app/settings/ignores/ignore';
-import { SettingsService } from 'app/settings/settings.service';
-import { Alert } from 'app/settings/alerts/alert';
-import { AlertsService } from 'app/settings/alerts/alerts.service';
-import { VehicleFilters } from './vehicleFilters';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { EditPlateComponent } from './edit-plate/edit-plate.component';
-import { LocalStorageService } from 'app/_services/local-storage.service';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatSelectModule } from '@angular/material/select';
-import { MatInputModule } from '@angular/material/input';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatCardModule } from '@angular/material/card';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatButtonModule } from '@angular/material/button';
-import { PlateComponent } from './plate/plate.component';
-import { MatIconModule } from '@angular/material/icon';
-import { DatePipe, CommonModule } from '@angular/common';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { ActivatedRoute, Router } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations'
+import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'
+import { FormControl, FormGroup, FormGroupDirective, NgForm, ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'
+import { SignalrService } from 'app/signalr/signalr.service'
+import { Subscription } from 'rxjs'
+import { Plate } from './plate/plate'
+import { PlateRequest, PlateService } from './plate.service'
+import { ErrorStateMatcher, MatNativeDateModule, MatOptionModule } from '@angular/material/core'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Ignore } from 'app/settings/ignores/ignore'
+import { SettingsService } from 'app/settings/settings.service'
+import { Alert } from 'app/settings/alerts/alert'
+import { AlertsService } from 'app/settings/alerts/alerts.service'
+import { VehicleFilters } from './vehicleFilters'
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'
+import { EditPlateComponent } from './edit-plate/edit-plate.component'
+import { LocalStorageService } from 'app/_services/local-storage.service'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatSelectModule } from '@angular/material/select'
+import { MatInputModule } from '@angular/material/input'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatCardModule } from '@angular/material/card'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatButtonModule } from '@angular/material/button'
+import { PlateComponent } from './plate/plate.component'
+import { MatIconModule } from '@angular/material/icon'
+import { DatePipe, CommonModule } from '@angular/common'
+import { MatExpansionModule } from '@angular/material/expansion'
+import { ActivatedRoute, Router } from '@angular/router'
@Component({
- selector: 'app-plates',
- templateUrl: './plates.component.html',
- styleUrls: ['./plates.component.less'],
- animations: [
- trigger('detailExpand', [
- state('collapsed', style({ height: '0px', minHeight: '0' })),
- state('expanded', style({ height: '*' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
- ])
- ],
- standalone: true,
- imports: [
- MatExpansionModule,
- CommonModule,
- MatIconModule,
- PlateComponent,
- MatButtonModule,
- MatProgressSpinnerModule,
- MatPaginatorModule,
- MatCardModule,
- MatDialogModule,
- MatNativeDateModule,
- MatFormFieldModule,
- MatDatepickerModule,
- ReactiveFormsModule,
- FormsModule,
- MatInputModule,
- MatSelectModule,
- MatOptionModule,
- MatCheckboxModule,
- DatePipe
- ]
+ selector: 'app-plates',
+ templateUrl: './plates.component.html',
+ styleUrls: ['./plates.component.less'],
+ animations: [
+ trigger('detailExpand', [
+ state('collapsed', style({ height: '0px', minHeight: '0' })),
+ state('expanded', style({ height: '*' })),
+ transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+ ]),
+ ],
+ imports: [
+ MatExpansionModule,
+ CommonModule,
+ MatIconModule,
+ PlateComponent,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ MatPaginatorModule,
+ MatCardModule,
+ MatDialogModule,
+ MatNativeDateModule,
+ MatFormFieldModule,
+ MatDatepickerModule,
+ ReactiveFormsModule,
+ FormsModule,
+ MatInputModule,
+ MatSelectModule,
+ MatOptionModule,
+ MatCheckboxModule,
+ DatePipe,
+ ],
})
export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit {
- @Input() id: string;
-
- public columnsToDisplay = [
- {
- id: 'openAlprCameraId',
- name: 'Camera Id'
- },
- {
- id: 'plateNumber',
- name: 'Plate Number'
- },
- {
- id: 'vehicleDescription',
- name: 'Vehicle Description'
- },
- {
- id: 'processedPlateConfidence',
- name: 'Confidence %'
- }];
-
- public rowsToDisplay = [
- 'openAlprCameraId',
- 'plateNumber',
- 'vehicleDescription',
- 'direction',
- 'processedPlateConfidence',
- 'receivedOn'
- ];
-
- panelOpenState = false;
- public range: FormGroup;
- public plates: Plate[] = [];
- public visiblePlateIds: string[] = [];
- public totalNumberOfPlates: number;
- public todaysDate: Date;
-
- public filterPlateNumber: string;
- public filterPlateNumberIsValid: boolean = true;
- public filterStartOn: Date;
- public filterEndOn: Date;
- public filterStrictMatch: boolean;
- public filterStrictMatchEnabled: boolean = true;
- public filterIgnoredPlates: boolean;
- public filterIgnoredPlatesEnabled: boolean = true;
- public filterPlatesSeenLessThan: boolean;
- public regexSearchEnabled: boolean;
- public filterVehicleMake: string;
- public filterVehicleModel: string;
- public filterVehicleType: string;
- public filterVehicleColor: string;
- public filterVehicleRegion: string;
-
- public vehicleFilters: VehicleFilters = {} as VehicleFilters;
-
- public isDeletingPlate: boolean;
- public isEnrichingPlate: boolean;
-
- public isAddingToIgnoreList: boolean;
- public isAddingToAlertList: boolean;
-
- public isLoading: boolean;
-
-
- public pageSize: number = 10;
- private pageSizeCacheKey: string = 'platePageSize';
- private pageNumber: number = 0;
-
- private eventSubscriptions = new Subscription();
- private searchSubscription = new Subscription();
- private filterSubscription = new Subscription();
-
- @ViewChild(MatPaginator) paginator: MatPaginator;
-
- constructor(
- private plateService: PlateService,
- private signalRHub: SignalrService,
- private snackbarService: SnackbarService,
- private alertsService: AlertsService,
- private settingsService: SettingsService,
- private localStorageService: LocalStorageService,
- private route: ActivatedRoute,
- private router: Router,
- public dialog: MatDialog) {
- this.range = new FormGroup({
- start: new FormControl(),
- end: new FormControl()
- });
- }
-
- ngOnInit(): void {
- const pageSize = this.localStorageService.getData(this.pageSizeCacheKey);
- this.pageSize = pageSize != '' ? parseInt(pageSize) : 25;
- this.setInitialDateFilter();
- this.populateFilters();
- this.eventSubscriptions.add(this.route.params.subscribe(params => {
- const id = params['id'] as string;
-
- if (id !== undefined) {
- this.getPlate(id);
- } else {
- this.searchPlates();
- }
- }));
- }
-
- ngOnDestroy(): void {
- this.eventSubscriptions.unsubscribe();
- this.searchSubscription.unsubscribe();
- this.filterSubscription.unsubscribe();
- }
-
- ngAfterViewInit(): void {
- this.subscribeForUpdates();
- }
-
- public setInitialDateFilter() {
- this.todaysDate = new Date();
- this.filterStartOn = new Date();
- this.filterEndOn = new Date();
-
- this.filterStartOn.setDate(new Date().getDate() - 15);
- this.filterEndOn = this.todaysDate;
- }
-
- public editPlate(plateNumber: string) {
- this.openEditDialog(plateNumber);
- }
-
- public subscribeForUpdates() {
- this.eventSubscriptions.add(this.signalRHub.licensePlateReceived.subscribe(() => {
- if (!this.isLoading) {
- this.searchPlates();
- }
- }));
- }
-
- public plateOpened(plateId: string) {
- this.visiblePlateIds.push(plateId);
- }
-
- public plateClosed(plateIdToRemove: string) {
- this.visiblePlateIds.forEach((plateId, index) => {
- if (plateId === plateIdToRemove) {
- this.visiblePlateIds.splice(index, 1);
- }
- });
- }
-
- public onPaginatorPage($event) {
- this.pageSize = $event.pageSize;
- this.localStorageService.setData(this.pageSizeCacheKey, this.pageSize);
-
- this.pageNumber = $event.pageIndex;
-
- this.searchPlates();
- }
-
- public populateFilters() {
- this.filterSubscription.add(this.plateService.getFilters().subscribe(result => {
- this.vehicleFilters = result;
- }));
+ private plateService = inject(PlateService)
+ private signalRHub = inject(SignalrService)
+ private snackbarService = inject(SnackbarService)
+ private alertsService = inject(AlertsService)
+ private settingsService = inject(SettingsService)
+ private localStorageService = inject(LocalStorageService)
+ private route = inject(ActivatedRoute)
+ private router = inject(Router)
+ dialog = inject(MatDialog)
+
+ @Input() id: string
+
+ public columnsToDisplay = [
+ {
+ id: 'openAlprCameraId',
+ name: 'Camera Id',
+ },
+ {
+ id: 'plateNumber',
+ name: 'Plate Number',
+ },
+ {
+ id: 'vehicleDescription',
+ name: 'Vehicle Description',
+ },
+ {
+ id: 'processedPlateConfidence',
+ name: 'Confidence %',
+ }]
+
+ public rowsToDisplay = [
+ 'openAlprCameraId',
+ 'plateNumber',
+ 'vehicleDescription',
+ 'direction',
+ 'processedPlateConfidence',
+ 'receivedOn',
+ ]
+
+ panelOpenState = false
+ public range: FormGroup
+ public plates: Plate[] = []
+ public visiblePlateIds: string[] = []
+ public totalNumberOfPlates: number
+ public todaysDate: Date
+
+ public filterPlateNumber: string
+ public filterPlateNumberIsValid = true
+ public filterStartOn: Date
+ public filterEndOn: Date
+ public filterStrictMatch: boolean
+ public filterStrictMatchEnabled = true
+ public filterIgnoredPlates: boolean
+ public filterIgnoredPlatesEnabled = true
+ public filterPlatesSeenLessThan: boolean
+ public regexSearchEnabled: boolean
+ public filterVehicleMake: string
+ public filterVehicleModel: string
+ public filterVehicleType: string
+ public filterVehicleColor: string
+ public filterVehicleRegion: string
+
+ public vehicleFilters: VehicleFilters = {} as VehicleFilters
+
+ public isDeletingPlate: boolean
+ public isEnrichingPlate: boolean
+
+ public isAddingToIgnoreList: boolean
+ public isAddingToAlertList: boolean
+
+ public isLoading: boolean
+
+ public pageSize = 10
+ private pageSizeCacheKey = 'platePageSize'
+ private pageNumber = 0
+
+ private eventSubscriptions = new Subscription()
+ private searchSubscription = new Subscription()
+ private filterSubscription = new Subscription()
+
+ @ViewChild(MatPaginator) paginator: MatPaginator
+
+ constructor() {
+ this.range = new FormGroup({
+ start: new FormControl(),
+ end: new FormControl(),
+ })
+ }
+
+ ngOnInit(): void {
+ const pageSize = this.localStorageService.getData(this.pageSizeCacheKey)
+ this.pageSize = pageSize != '' ? parseInt(pageSize) : 25
+ this.setInitialDateFilter()
+ this.populateFilters()
+ this.eventSubscriptions.add(this.route.params.subscribe((params) => {
+ const id = params['id'] as string
+
+ if (id !== undefined) {
+ this.getPlate(id)
+ }
+ else {
+ this.searchPlates()
+ }
+ }))
+ }
+
+ ngOnDestroy(): void {
+ this.eventSubscriptions.unsubscribe()
+ this.searchSubscription.unsubscribe()
+ this.filterSubscription.unsubscribe()
+ }
+
+ ngAfterViewInit(): void {
+ this.subscribeForUpdates()
+ }
+
+ public setInitialDateFilter() {
+ this.todaysDate = new Date()
+ this.filterStartOn = new Date()
+ this.filterEndOn = new Date()
+
+ this.filterStartOn.setDate(new Date().getDate() - 15)
+ this.filterEndOn = this.todaysDate
+ }
+
+ public editPlate(plateNumber: string) {
+ this.openEditDialog(plateNumber)
+ }
+
+ public subscribeForUpdates() {
+ this.eventSubscriptions.add(this.signalRHub.licensePlateReceived.subscribe(() => {
+ if (!this.isLoading) {
+ this.searchPlates()
+ }
+ }))
+ }
+
+ public plateOpened(plateId: string) {
+ this.visiblePlateIds.push(plateId)
+ }
+
+ public plateClosed(plateIdToRemove: string) {
+ this.visiblePlateIds.forEach((plateId, index) => {
+ if (plateId === plateIdToRemove) {
+ this.visiblePlateIds.splice(index, 1)
+ }
+ })
+ }
+
+ public onPaginatorPage($event) {
+ this.pageSize = $event.pageSize
+ this.localStorageService.setData(this.pageSizeCacheKey, this.pageSize)
+
+ this.pageNumber = $event.pageIndex
+
+ this.searchPlates()
+ }
+
+ public populateFilters() {
+ this.filterSubscription.add(this.plateService.getFilters().subscribe((result) => {
+ this.vehicleFilters = result
+ }))
+ }
+
+ public getPlate(plateId: string) {
+ this.isLoading = true
+ this.searchSubscription.add(this.plateService.getPlate(plateId).subscribe((plateResponse) => {
+ this.totalNumberOfPlates = 1
+ this.plates = [
+ plateResponse.plate,
+ ]
+
+ this.plates[0].isOpen = true
+ this.isLoading = false
+ }, () => {
+ this.isLoading = false
+ this.snackbarService.create('Error searching for plate, check the logs', SnackBarType.Error)
+ }))
+ }
+
+ public searchPlates(plateNumber = '') {
+ this.router.navigate(['/plates'])
+
+ if (!this.filterPlateNumberIsValid) {
+ return
}
- public getPlate(plateId: string) {
- this.isLoading = true;
- this.searchSubscription.add(this.plateService.getPlate(plateId).subscribe((plateResponse) => {
- this.totalNumberOfPlates = 1;
- this.plates = [
- plateResponse.plate
- ];
-
- this.plates[0].isOpen = true;
- this.isLoading = false;
- }, () => {
- this.isLoading = false;
- this.snackbarService.create('Error searching for plate, check the logs', SnackBarType.Error);
- }));
+ if (plateNumber !== '') {
+ this.filterPlateNumber = plateNumber
}
- public searchPlates(plateNumber: string = '') {
- this.router.navigate(['/plates']);
-
- if (!this.filterPlateNumberIsValid) {
- return;
- }
-
- if (plateNumber !== '') {
- this.filterPlateNumber = plateNumber;
- }
-
- this.filterStartOn?.setUTCHours(0, 0, 0, 0);
- this.filterEndOn?.setUTCHours(23, 59, 59, 999);
-
- const request = new PlateRequest();
-
- request.pageNumber = this.pageNumber;
- request.pageSize = this.pageSize;
- request.endSearchOn = this.filterEndOn;
- request.startSearchOn = this.filterStartOn;
- request.plateNumber = this.filterPlateNumber;
- request.strictMatch = this.filterStrictMatch;
- request.filterIgnoredPlates = this.filterIgnoredPlates;
- request.filterPlatesSeenLessThan = this.filterPlatesSeenLessThan ? 10 : 0;
- request.regexSearchEnabled = this.regexSearchEnabled;
- request.vehicleColor = this.filterVehicleColor;
- request.vehicleMake = this.filterVehicleMake;
- request.vehicleModel = this.filterVehicleModel;
- request.vehicleType = this.filterVehicleType;
- request.vehicleRegion = this.filterVehicleRegion;
-
- if (this.isLoading) {
- this.searchSubscription.unsubscribe();
- }
-
- this.isLoading = true;
- this.searchSubscription.add(this.plateService.searchPlates(request).subscribe(result => {
- this.totalNumberOfPlates = result.totalCount;
- this.plates = result.plates;
- this.isLoading = false;
- }, () => {
- this.isLoading = false;
- this.snackbarService.create('Error searching for plates, check the logs', SnackBarType.Error);
- }));
+ this.filterStartOn?.setUTCHours(0, 0, 0, 0)
+ this.filterEndOn?.setUTCHours(23, 59, 59, 999)
+
+ const request = new PlateRequest()
+
+ request.pageNumber = this.pageNumber
+ request.pageSize = this.pageSize
+ request.endSearchOn = this.filterEndOn
+ request.startSearchOn = this.filterStartOn
+ request.plateNumber = this.filterPlateNumber
+ request.strictMatch = this.filterStrictMatch
+ request.filterIgnoredPlates = this.filterIgnoredPlates
+ request.filterPlatesSeenLessThan = this.filterPlatesSeenLessThan ? 10 : 0
+ request.regexSearchEnabled = this.regexSearchEnabled
+ request.vehicleColor = this.filterVehicleColor
+ request.vehicleMake = this.filterVehicleMake
+ request.vehicleModel = this.filterVehicleModel
+ request.vehicleType = this.filterVehicleType
+ request.vehicleRegion = this.filterVehicleRegion
+
+ if (this.isLoading) {
+ this.searchSubscription.unsubscribe()
}
- public deletePlate(plateId: string = '', plateNumber: string = '') {
- this.isDeletingPlate = true;
-
- this.plateService.deletePlate(plateId).subscribe(() => {
- this.isDeletingPlate = false;
- this.snackbarService.create(`${plateNumber} deleted`, SnackBarType.Deleted);
- this.searchPlates();
- });
+ this.isLoading = true
+ this.searchSubscription.add(this.plateService.searchPlates(request).subscribe((result) => {
+ this.totalNumberOfPlates = result.totalCount
+ this.plates = result.plates
+ this.isLoading = false
+ }, () => {
+ this.isLoading = false
+ this.snackbarService.create('Error searching for plates, check the logs', SnackBarType.Error)
+ }))
+ }
+
+ public deletePlate(plateId = '', plateNumber = '') {
+ this.isDeletingPlate = true
+
+ this.plateService.deletePlate(plateId).subscribe(() => {
+ this.isDeletingPlate = false
+ this.snackbarService.create(`${plateNumber} deleted`, SnackBarType.Deleted)
+ this.searchPlates()
+ })
+ }
+
+ public addToIgnoreList(plateNumber = '') {
+ this.isAddingToIgnoreList = true
+ const ignore = new Ignore()
+
+ ignore.plateNumber = plateNumber
+ ignore.strictMatch = true
+ ignore.description = 'Added from plate list'
+
+ this.settingsService.addIgnore(ignore).subscribe(() => {
+ this.isAddingToIgnoreList = false
+ this.snackbarService.create(`${plateNumber} added to ignore list`, SnackBarType.Saved)
+ this.searchPlates()
+ })
+ }
+
+ public addToAlertList(plateNumber = '') {
+ this.isAddingToAlertList = true
+ const alert = new Alert()
+
+ alert.plateNumber = plateNumber
+ alert.strictMatch = true
+ alert.description = 'Added from plate list'
+
+ this.alertsService.addAlert(alert).subscribe(() => {
+ this.isAddingToAlertList = false
+ this.snackbarService.create(`${plateNumber} added to alert list`, SnackBarType.Saved)
+ this.searchPlates()
+ })
+ }
+
+ public clearFilters() {
+ this.setInitialDateFilter()
+
+ this.filterPlateNumber = ''
+ this.filterPlateNumberIsValid = true
+ this.filterStrictMatch = false
+ this.filterStrictMatchEnabled = true
+ this.filterIgnoredPlates = false
+ this.filterIgnoredPlatesEnabled = true
+ this.regexSearchEnabled = false
+ this.filterVehicleMake = ''
+ this.filterVehicleModel = ''
+ this.filterVehicleType = ''
+ this.filterVehicleColor = ''
+ this.filterVehicleRegion = ''
+ this.filterPlatesSeenLessThan = false
+
+ this.searchPlates()
+ }
+
+ public validateSearchPlateNumber() {
+ if (this.filterPlateNumber == '') {
+ this.filterPlateNumberIsValid = true
}
- public addToIgnoreList(plateNumber: string = '') {
- this.isAddingToIgnoreList = true;
- const ignore = new Ignore();
-
- ignore.plateNumber = plateNumber;
- ignore.strictMatch = true;
- ignore.description = 'Added from plate list';
-
- this.settingsService.addIgnore(ignore).subscribe(() => {
- this.isAddingToIgnoreList = false;
- this.snackbarService.create(`${plateNumber} added to ignore list`, SnackBarType.Saved);
- this.searchPlates();
- });
+ if (this.regexSearchEnabled) {
+ try {
+ new RegExp(this.filterPlateNumber)
+ this.filterPlateNumberIsValid = true
+ }
+ catch {
+ this.filterPlateNumberIsValid = false
+ }
}
-
- public addToAlertList(plateNumber: string = '') {
- this.isAddingToAlertList = true;
- const alert = new Alert();
-
- alert.plateNumber = plateNumber;
- alert.strictMatch = true;
- alert.description = 'Added from plate list';
-
- this.alertsService.addAlert(alert).subscribe(() => {
- this.isAddingToAlertList = false;
- this.snackbarService.create(`${plateNumber} added to alert list`, SnackBarType.Saved);
- this.searchPlates();
- });
+ else {
+ this.filterPlateNumberIsValid = true
}
-
- public clearFilters() {
- this.setInitialDateFilter();
-
- this.filterPlateNumber = '';
- this.filterPlateNumberIsValid = true;
- this.filterStrictMatch = false;
- this.filterStrictMatchEnabled = true;
- this.filterIgnoredPlates = false;
- this.filterIgnoredPlatesEnabled = true;
- this.regexSearchEnabled = false;
- this.filterVehicleMake = '';
- this.filterVehicleModel = '';
- this.filterVehicleType = '';
- this.filterVehicleColor = '';
- this.filterVehicleRegion = '';
- this.filterPlatesSeenLessThan = false;
-
- this.searchPlates();
+ }
+
+ public regexSearchToggled() {
+ if (this.regexSearchEnabled) {
+ this.filterStrictMatch = false
+ this.filterStrictMatchEnabled = false
+ this.filterIgnoredPlates = false
+ this.filterIgnoredPlatesEnabled = false
}
-
- public validateSearchPlateNumber() {
- if (this.filterPlateNumber == '') {
- this.filterPlateNumberIsValid = true;
- }
-
- if (this.regexSearchEnabled) {
- try {
- new RegExp(this.filterPlateNumber);
- this.filterPlateNumberIsValid = true;
- } catch {
- this.filterPlateNumberIsValid = false;
- }
- } else {
- this.filterPlateNumberIsValid = true;
- }
+ else {
+ this.filterStrictMatchEnabled = true
+ this.filterIgnoredPlatesEnabled = true
}
-
- public regexSearchToggled() {
- if (this.regexSearchEnabled) {
- this.filterStrictMatch = false;
- this.filterStrictMatchEnabled = false;
- this.filterIgnoredPlates = false;
- this.filterIgnoredPlatesEnabled = false;
- } else {
- this.filterStrictMatchEnabled = true;
- this.filterIgnoredPlatesEnabled = true;
+ this.validateSearchPlateNumber()
+ }
+
+ public enrichPlate(plateId: string) {
+ this.isEnrichingPlate = true
+ this.plateService.enrichPlate(plateId).subscribe(() => {
+ this.isEnrichingPlate = false
+ this.snackbarService.create('Plate successfully enriched.', SnackBarType.Saved)
+ },
+ () => {
+ this.isEnrichingPlate = false
+ this.snackbarService.create('Failed to enrich plate, check the logs.', SnackBarType.Error)
+ })
+ }
+
+ public openEditDialog(plateId: string): void {
+ const plateToEdit = this.plates.find(x => x.id == plateId)
+
+ const dialogRef = this.dialog.open(EditPlateComponent, {
+ data: plateToEdit,
+ })
+
+ dialogRef.afterClosed().subscribe((result) => {
+ if (result) {
+ const plateToSave = this.plates.find(x => x.id == plateId)
+
+ if (plateToSave !== undefined) {
+ this.plateService.upsertPlate(plateToSave).subscribe(() => {
+ this.searchPlates()
+ })
}
- this.validateSearchPlateNumber();
- }
-
- public enrichPlate(plateId: string) {
- this.isEnrichingPlate = true;
- this.plateService.enrichPlate(plateId).subscribe(() => {
- this.isEnrichingPlate = false;
- this.snackbarService.create('Plate successfully enriched.', SnackBarType.Saved);
- },
- () => {
- this.isEnrichingPlate = false;
- this.snackbarService.create('Failed to enrich plate, check the logs.', SnackBarType.Error);
- });
- }
-
- public openEditDialog(plateId: string): void {
- const plateToEdit = this.plates.find(x => x.id == plateId);
-
- const dialogRef = this.dialog.open(EditPlateComponent, {
- data: plateToEdit
- });
-
- dialogRef.afterClosed().subscribe(result => {
- if (result) {
- const plateToSave = this.plates.find(x => x.id == plateId);
-
- if (plateToSave !== undefined) {
- this.plateService.upsertPlate(plateToSave).subscribe(() => {
- this.searchPlates();
- });
- }
- }
- });
- }
+ }
+ })
+ }
}
export class MyErrorStateMatcher implements ErrorStateMatcher {
- isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
- const isSubmitted = form && form.submitted;
- return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
- }
+ isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const isSubmitted = form && form.submitted
+ return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted))
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/plates/vehicleFilters.ts b/openalprwebhookprocessor.client/src/app/plates/vehicleFilters.ts
index e44fd98c..a1c3f638 100644
--- a/openalprwebhookprocessor.client/src/app/plates/vehicleFilters.ts
+++ b/openalprwebhookprocessor.client/src/app/plates/vehicleFilters.ts
@@ -1,13 +1,13 @@
export interface VehicleFilters {
- vehicleMakes?: string[];
+ vehicleMakes?: string[]
- vehicleModels?: string[];
+ vehicleModels?: string[]
- vehicleTypes?: string[];
+ vehicleTypes?: string[]
- vehicleYears?: string[];
+ vehicleYears?: string[]
- vehicleColors?: string[];
+ vehicleColors?: string[]
- vehicleRegions?: string[];
+ vehicleRegions?: string[]
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/alert.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/alert.ts
index d25c7cc2..a7513440 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/alert.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/alert.ts
@@ -1,10 +1,10 @@
export class Alert {
- id: string;
- plateNumber: string;
- strictMatch: boolean;
- description: string;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ id: string
+ plateNumber: string
+ strictMatch: boolean
+ description: string
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.spec.ts
index ffe24d59..df3c491a 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.spec.ts
@@ -1,47 +1,47 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AlertsComponent } from './alerts.component';
-import { AlertsService } from './alerts.service';
-import { PushoverService } from './pushover/pushover.service';
-import { WebpushService } from './webpush/webpush.service';
-import { of } from 'rxjs';
-import { Alert } from './alert';
-import { Pushover } from './pushover/pushover';
-import { Webpush } from './webpush/webpush';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { AlertsComponent } from './alerts.component'
+import { AlertsService } from './alerts.service'
+import { PushoverService } from './pushover/pushover.service'
+import { WebpushService } from './webpush/webpush.service'
+import { of } from 'rxjs'
+import { Alert } from './alert'
+import { Pushover } from './pushover/pushover'
+import { Webpush } from './webpush/webpush'
describe(AlertsComponent.name, () => {
- let fixture: ComponentFixture;
- let component: AlertsComponent;
-
- const pushoverServiceSpy = jasmine.createSpyObj(PushoverService.name, ['getPushover']);
- const webpushServiceSpy = jasmine.createSpyObj('WebpushService', ['getWebpush']);
- const alertsServiceSpy = jasmine.createSpyObj('AlertsService', ['getAlerts']);
+ let fixture: ComponentFixture
+ let component: AlertsComponent
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [AlertsComponent],
- providers: [
- { provide: AlertsService, useValue: alertsServiceSpy },
- { provide: PushoverService, useValue: pushoverServiceSpy },
- { provide: WebpushService, useValue: webpushServiceSpy }
- ]
- }).compileComponents();
- });
+ const pushoverServiceSpy = jasmine.createSpyObj(PushoverService.name, ['getPushover'])
+ const webpushServiceSpy = jasmine.createSpyObj('WebpushService', ['getWebpush'])
+ const alertsServiceSpy = jasmine.createSpyObj('AlertsService', ['getAlerts'])
- beforeEach(() => {
- const alertsData: Alert[] = [];
- alertsServiceSpy.getAlerts.and.returnValue(of(alertsData));
- pushoverServiceSpy.getPushover.and.returnValue(of(new Pushover()));
- webpushServiceSpy.getWebpush.and.returnValue(of(new Webpush()));
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AlertsComponent],
+ providers: [
+ { provide: AlertsService, useValue: alertsServiceSpy },
+ { provide: PushoverService, useValue: pushoverServiceSpy },
+ { provide: WebpushService, useValue: webpushServiceSpy },
+ ],
+ }).compileComponents()
+ })
- fixture = TestBed.createComponent(AlertsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ const alertsData: Alert[] = []
+ alertsServiceSpy.getAlerts.and.returnValue(of(alertsData))
+ pushoverServiceSpy.getPushover.and.returnValue(of(new Pushover()))
+ webpushServiceSpy.getWebpush.and.returnValue(of(new Webpush()))
- it('should call getAlerts method with specific return value', () => {
- expect(component).toBeTruthy();
- expect(alertsServiceSpy.getAlerts).toHaveBeenCalled();
- expect(pushoverServiceSpy.getPushover).toHaveBeenCalled();
- expect(webpushServiceSpy.getWebpush).toHaveBeenCalled();
- });
-});
\ No newline at end of file
+ fixture = TestBed.createComponent(AlertsComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
+
+ it('should call getAlerts method with specific return value', () => {
+ expect(component).toBeTruthy()
+ expect(alertsServiceSpy.getAlerts).toHaveBeenCalled()
+ expect(pushoverServiceSpy.getPushover).toHaveBeenCalled()
+ expect(webpushServiceSpy.getWebpush).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.ts
index e608a45d..3a8d54b7 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.component.ts
@@ -1,70 +1,65 @@
-import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { Alert } from './alert';
-import { AlertsService } from './alerts.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
-import { MatSelectModule } from '@angular/material/select';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { WebpushComponent } from './webpush/webpush.component';
-import { PushoverComponent } from './pushover/pushover.component';
+import { Component, OnInit, inject } from '@angular/core'
+import { MatTableDataSource, MatTableModule } from '@angular/material/table'
+import { Alert } from './alert'
+import { AlertsService } from './alerts.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatOptionModule } from '@angular/material/core'
+import { MatSelectModule } from '@angular/material/select'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { WebpushComponent } from './webpush/webpush.component'
+import { PushoverComponent } from './pushover/pushover.component'
@Component({
- selector: 'app-alerts',
- templateUrl: './alerts.component.html',
- styleUrls: ['./alerts.component.less'],
- standalone: true,
- imports: [PushoverComponent, WebpushComponent, MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatOptionModule, MatButtonModule]
+ selector: 'app-alerts',
+ templateUrl: './alerts.component.html',
+ styleUrls: ['./alerts.component.less'],
+ imports: [PushoverComponent, WebpushComponent, MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatOptionModule, MatButtonModule],
})
export class AlertsComponent implements OnInit {
- public alerts: MatTableDataSource;
- public isSaving: boolean = false;
+ private alertsService = inject(AlertsService)
- constructor(private alertsService: AlertsService) { }
+ public alerts: MatTableDataSource
+ public isSaving = false
- public rowsToDisplay = [
- 'plateNumber',
- 'matchType',
- 'description',
- 'delete'
- ];
+ public rowsToDisplay = [
+ 'plateNumber',
+ 'matchType',
+ 'description',
+ 'delete',
+ ]
- ngOnInit(): void {
- this.getAlerts();
- }
+ ngOnInit(): void {
+ this.getAlerts()
+ }
- private getAlerts() {
- this.alertsService.getAlerts().subscribe(result => {
- this.alerts = new MatTableDataSource(result);
- });
- }
+ private getAlerts() {
+ this.alertsService.getAlerts().subscribe((result) => {
+ this.alerts = new MatTableDataSource(result)
+ })
+ }
- public deleteAlert(alert: Alert) {
- this.alerts.data.forEach((item, index) => {
- if (item === alert) {
- this.alerts.data.splice(index, 1);
- }
- });
+ public deleteAlert(alert: Alert) {
+ this.alerts.data.forEach((item, index) => {
+ if (item === alert) {
+ this.alerts.data.splice(index, 1)
+ }
+ })
- this.alerts._updateChangeSubscription();
- }
+ this.alerts._updateChangeSubscription()
+ }
- public addAlert() {
- this.alerts.data.push(new Alert());
- this.alerts._updateChangeSubscription();
- }
+ public addAlert() {
+ this.alerts.data.push(new Alert())
+ this.alerts._updateChangeSubscription()
+ }
- public saveAlerts() {
- this.isSaving = true;
- this.alertsService.upsertAlerts(this.alerts.data).subscribe(() => {
- this.getAlerts();
- this.isSaving = false;
- });
- }
-
- public testAlerts() {
-
- }
+ public saveAlerts() {
+ this.isSaving = true
+ this.alertsService.upsertAlerts(this.alerts.data).subscribe(() => {
+ this.getAlerts()
+ this.isSaving = false
+ })
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.spec.ts
index 75239f7d..7cc6c3fe 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.spec.ts
@@ -1,19 +1,21 @@
-import { TestBed } from '@angular/core/testing';
-import { AlertsService } from './alerts.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing'
+import { AlertsService } from './alerts.service'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe(AlertsService.name, () => {
- let service: AlertsService;
+ let service: AlertsService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule]
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
- service = TestBed.inject(AlertsService);
- });
+ service = TestBed.inject(AlertsService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.ts
index a99ac90d..4c4ac80c 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/alerts.service.ts
@@ -1,31 +1,31 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Alert } from './alert';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Alert } from './alert'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class AlertsService {
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- getAlerts(): Observable {
- return this.http.get('/api/alerts');
- }
+ getAlerts(): Observable {
+ return this.http.get('/api/alerts')
+ }
- deleteAlert(alertId: string) {
- return this.http.delete(`/alerts/${alertId}`);
- }
+ deleteAlert(alertId: string) {
+ return this.http.delete(`/alerts/${alertId}`)
+ }
- upsertAlerts(alerts: Alert[]) {
- return this.http.post('/api/alerts', alerts);
- }
+ upsertAlerts(alerts: Alert[]) {
+ return this.http.post('/api/alerts', alerts)
+ }
- addAlert(alert: Alert) {
- return this.http.post('/api/alerts/add', alert);
- }
+ addAlert(alert: Alert) {
+ return this.http.post('/api/alerts/add', alert)
+ }
- testAlert() {
- return this.http.post('/api/alerts/test', null);
- }
-}
\ No newline at end of file
+ testAlert() {
+ return this.http.post('/api/alerts/test', null)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.html b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.html
index 37045b44..f4384150 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.html
@@ -1,40 +1,50 @@
-
+@if (client) {
+
- Pushover
- https://pushover.net/
- Pushover
+ https://pushover.net/
+
-
+ @if (client.isEnabled) {
+
-
+
+ }
+ @if (client.isEnabled) {
+
-
-
\ No newline at end of file
+
+ }
+
+}
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.spec.ts
index d45df22a..58849e21 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.spec.ts
@@ -1,33 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { PushoverComponent } from './pushover.component';
-import { PushoverService } from './pushover.service';
-import { of } from 'rxjs';
-import { Pushover } from './pushover';
+import { PushoverComponent } from './pushover.component'
+import { PushoverService } from './pushover.service'
+import { of } from 'rxjs'
+import { Pushover } from './pushover'
describe(PushoverComponent.name, () => {
- let component: PushoverComponent;
- let fixture: ComponentFixture;
- const pushoverServiceSpy = jasmine.createSpyObj(PushoverService.name, ['getPushover']);
-
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [PushoverComponent],
- providers: [
- { provide: PushoverService, useValue: pushoverServiceSpy }
- ]
- }).compileComponents();
- });
+ let component: PushoverComponent
+ let fixture: ComponentFixture
+ const pushoverServiceSpy = jasmine.createSpyObj(PushoverService.name, ['getPushover'])
- beforeEach(() => {
- pushoverServiceSpy.getPushover.and.returnValue(of(new Pushover()));
- fixture = TestBed.createComponent(PushoverComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [PushoverComponent],
+ providers: [
+ { provide: PushoverService, useValue: pushoverServiceSpy },
+ ],
+ }).compileComponents()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(pushoverServiceSpy.getPushover).toHaveBeenCalled();
- });
-});
+ beforeEach(() => {
+ pushoverServiceSpy.getPushover.and.returnValue(of(new Pushover()))
+ fixture = TestBed.createComponent(PushoverComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(pushoverServiceSpy.getPushover).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.ts
index 82584625..2fc42433 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.component.ts
@@ -1,81 +1,78 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Pushover } from './pushover';
-import { PushoverService } from './pushover.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
-import { NgIf } from '@angular/common';
+import { animate, style, transition, trigger } from '@angular/animations'
+import { Component, OnInit, inject } from '@angular/core'
+import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Pushover } from './pushover'
+import { PushoverService } from './pushover.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { MatIconModule } from '@angular/material/icon'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatCardModule } from '@angular/material/card'
@Component({
- selector: 'app-pushover',
- templateUrl: './pushover.component.html',
- styleUrls: ['./pushover.component.less'],
- animations: [
- trigger('inOutAnimation', [
- transition(':enter', [
- style({ height: 0, opacity: 0 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 }))
- ]),
- transition(':leave', [
- style({ height: '*', opacity: 1 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 }))
- ])
- ])
- ],
- standalone: true,
- imports: [NgIf, MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatCheckboxModule, MatButtonModule]
+ selector: 'app-pushover',
+ templateUrl: './pushover.component.html',
+ styleUrls: ['./pushover.component.less'],
+ animations: [
+ trigger('inOutAnimation', [
+ transition(':enter', [
+ style({ height: 0, opacity: 0 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 })),
+ ]),
+ transition(':leave', [
+ style({ height: '*', opacity: 1 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 })),
+ ]),
+ ]),
+ ],
+ imports: [MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatCheckboxModule, MatButtonModule],
})
export class PushoverComponent implements OnInit {
- public client: Pushover;
- public isSaving: boolean;
- public isTesting: boolean;
+ private pushoverService = inject(PushoverService)
+ private snackbarService = inject(SnackbarService)
- constructor(
- private pushoverService: PushoverService,
- private snackbarService: SnackbarService) { }
+ public client: Pushover
+ public isSaving: boolean
+ public isTesting: boolean
- ngOnInit(): void {
- this.pushoverService.getPushover().subscribe(result => {
- this.client = result;
- });
- }
+ ngOnInit(): void {
+ this.pushoverService.getPushover().subscribe((result) => {
+ this.client = result
+ })
+ }
- public saveClient() {
- this.isSaving = true;
- this.pushoverService.upsertPushover(this.client).subscribe(() => {
- this.snackbarService.create('Pushover client saved.', SnackBarType.Saved);
- this.isSaving = false;
- });
- }
+ public saveClient() {
+ this.isSaving = true
+ this.pushoverService.upsertPushover(this.client).subscribe(() => {
+ this.snackbarService.create('Pushover client saved.', SnackBarType.Saved)
+ this.isSaving = false
+ })
+ }
- public testClient() {
- this.isTesting = true;
- this.pushoverService.testPushover().subscribe(() => {
- this.snackbarService.create('Pushover client test successful.', SnackBarType.Successful);
- this.isTesting = false;
- },
- () => {
- this.snackbarService.create('Pushover client test failed.', SnackBarType.Error);
- this.isTesting = false;
- });
- }
+ public testClient() {
+ this.isTesting = true
+ this.pushoverService.testPushover().subscribe(() => {
+ this.snackbarService.create('Pushover client test successful.', SnackBarType.Successful)
+ this.isTesting = false
+ },
+ () => {
+ this.snackbarService.create('Pushover client test failed.', SnackBarType.Error)
+ this.isTesting = false
+ })
+ }
- public onPushoverToggle(event: MatSlideToggleChange) {
- if (!event.checked) {
- this.client.isEnabled = event.checked;
- this.isSaving = true;
- this.pushoverService.upsertPushover(this.client).subscribe(() => {
- this.isSaving = false;
- });
- }
+ public onPushoverToggle(event: MatSlideToggleChange) {
+ if (!event.checked) {
+ this.client.isEnabled = event.checked
+ this.isSaving = true
+ this.pushoverService.upsertPushover(this.client).subscribe(() => {
+ this.isSaving = false
+ })
}
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.spec.ts
index dc014f95..31790fce 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.spec.ts
@@ -1,19 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { PushoverService } from './pushover.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PushoverService } from './pushover.service'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe(PushoverService.name, () => {
- let service: PushoverService;
+ let service: PushoverService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule]
- });
- service = TestBed.inject(PushoverService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ service = TestBed.inject(PushoverService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.ts
index 59224cd2..9076f24e 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.service.ts
@@ -1,23 +1,23 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Pushover } from './pushover';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Pushover } from './pushover'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class PushoverService {
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- public upsertPushover(pushover: Pushover): Observable {
- return this.http.post('/api/alerts/pushover', pushover);
- }
+ public upsertPushover(pushover: Pushover): Observable {
+ return this.http.post('/api/alerts/pushover', pushover)
+ }
- public getPushover(): Observable {
- return this.http.get('/api/alerts/pushover');
- }
+ public getPushover(): Observable {
+ return this.http.get('/api/alerts/pushover')
+ }
- public testPushover(): Observable {
- return this.http.post('/api/alerts/pushover/test', null);
- }
-}
\ No newline at end of file
+ public testPushover(): Observable {
+ return this.http.post('/api/alerts/pushover/test', null)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.ts
index 6190d8fe..09f0c079 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/pushover/pushover.ts
@@ -1,11 +1,11 @@
export class Pushover {
- apiToken: string;
- userKey: string;
- isEnabled: boolean;
- sendPlatePreviewEnabled: boolean;
- sendEveryPlateEnabled: boolean;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ apiToken: string
+ userKey: string
+ isEnabled: boolean
+ sendPlatePreviewEnabled: boolean
+ sendEveryPlateEnabled: boolean
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.html b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.html
index 8a716493..dd217ecf 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.html
@@ -1,49 +1,59 @@
-
-
- WebPush
- Native Browser & Mobile notifications
-
-
-
-
-
-
-
-
+@if (client) {
+
+
+ WebPush
+ Native Browser & Mobile notifications
+
+ @if (client.isEnabled) {
+
+
+ }
+ @if (client.isEnabled) {
+
+
+
+
+ }
+
+ }
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.spec.ts
index d082fd6e..20e98b19 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.spec.ts
@@ -1,33 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { WebpushComponent } from './webpush.component';
-import { WebpushService } from './webpush.service';
-import { Webpush } from './webpush';
-import { of } from 'rxjs';
+import { WebpushComponent } from './webpush.component'
+import { WebpushService } from './webpush.service'
+import { Webpush } from './webpush'
+import { of } from 'rxjs'
describe(WebpushComponent.name, () => {
- let component: WebpushComponent;
- let fixture: ComponentFixture;
- const webpushServiceSpy = jasmine.createSpyObj(WebpushService.name, ['getWebpush']);
+ let component: WebpushComponent
+ let fixture: ComponentFixture
+ const webpushServiceSpy = jasmine.createSpyObj(WebpushService.name, ['getWebpush'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [WebpushComponent],
- providers: [
- { provide: WebpushService, useValue: webpushServiceSpy }
- ]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [WebpushComponent],
+ providers: [
+ { provide: WebpushService, useValue: webpushServiceSpy },
+ ],
+ }).compileComponents()
+ })
- beforeEach(() => {
- webpushServiceSpy.getWebpush.and.returnValue(of(new Webpush()));
- fixture = TestBed.createComponent(WebpushComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ webpushServiceSpy.getWebpush.and.returnValue(of(new Webpush()))
+ fixture = TestBed.createComponent(WebpushComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(webpushServiceSpy.getWebpush).toHaveBeenCalled();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(webpushServiceSpy.getWebpush).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.ts
index 00e1cbb8..f0968c6f 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.component.ts
@@ -1,82 +1,80 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Webpush } from './webpush';
-import { WebpushService } from './webpush.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
-import { NgIf } from '@angular/common';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { animate, style, transition, trigger } from '@angular/animations'
+import { Component, OnInit, inject } from '@angular/core'
+import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Webpush } from './webpush'
+import { WebpushService } from './webpush.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { MatIconModule } from '@angular/material/icon'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatCardModule } from '@angular/material/card'
+
+import { MatCheckboxModule } from '@angular/material/checkbox'
@Component({
- selector: 'app-webpush',
- templateUrl: './webpush.component.html',
- styleUrls: ['./webpush.component.css'],
- animations: [
- trigger('inOutAnimation', [
- transition(':enter', [
- style({ height: 0, opacity: 0 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 }))
- ]),
- transition(':leave', [
- style({ height: '*', opacity: 1 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 }))
- ])
- ])
- ],
- standalone: true,
- imports: [NgIf, MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatButtonModule, MatCheckboxModule]
+ selector: 'app-webpush',
+ templateUrl: './webpush.component.html',
+ styleUrls: ['./webpush.component.css'],
+ animations: [
+ trigger('inOutAnimation', [
+ transition(':enter', [
+ style({ height: 0, opacity: 0 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 })),
+ ]),
+ transition(':leave', [
+ style({ height: '*', opacity: 1 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 })),
+ ]),
+ ]),
+ ],
+ imports: [MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatButtonModule, MatCheckboxModule],
})
export class WebpushComponent implements OnInit {
- public client: Webpush;
- public isSaving: boolean;
- public isTesting: boolean;
- public hidePrivateKey: boolean = true;
+ private webpushService = inject(WebpushService)
+ private snackbarService = inject(SnackbarService)
- constructor(
- private webpushService: WebpushService,
- private snackbarService: SnackbarService) { }
+ public client: Webpush
+ public isSaving: boolean
+ public isTesting: boolean
+ public hidePrivateKey = true
- ngOnInit(): void {
- this.webpushService.getWebpush().subscribe(result => {
- this.client = result;
- });
- }
+ ngOnInit(): void {
+ this.webpushService.getWebpush().subscribe((result) => {
+ this.client = result
+ })
+ }
- public saveClient() {
- this.isSaving = true;
- this.webpushService.upsertWebpush(this.client).subscribe(() => {
- this.snackbarService.create('WebPush client saved.', SnackBarType.Saved);
- this.isSaving = false;
- });
- }
+ public saveClient() {
+ this.isSaving = true
+ this.webpushService.upsertWebpush(this.client).subscribe(() => {
+ this.snackbarService.create('WebPush client saved.', SnackBarType.Saved)
+ this.isSaving = false
+ })
+ }
- public testClient() {
- this.isTesting = true;
- this.webpushService.testWebpush().subscribe(() => {
- this.snackbarService.create('WebPush client test successful.', SnackBarType.Successful);
- this.isTesting = false;
- },
- () => {
- this.snackbarService.create('WebPush client test failed.', SnackBarType.Error);
- this.isTesting = false;
- });
- }
+ public testClient() {
+ this.isTesting = true
+ this.webpushService.testWebpush().subscribe(() => {
+ this.snackbarService.create('WebPush client test successful.', SnackBarType.Successful)
+ this.isTesting = false
+ },
+ () => {
+ this.snackbarService.create('WebPush client test failed.', SnackBarType.Error)
+ this.isTesting = false
+ })
+ }
- public onWebPushToggle(event: MatSlideToggleChange) {
- if (!event.checked) {
- this.client.isEnabled = event.checked;
- this.isSaving = true;
- this.webpushService.upsertWebpush(this.client).subscribe(() => {
- this.isSaving = false;
- });
- }
+ public onWebPushToggle(event: MatSlideToggleChange) {
+ if (!event.checked) {
+ this.client.isEnabled = event.checked
+ this.isSaving = true
+ this.webpushService.upsertWebpush(this.client).subscribe(() => {
+ this.isSaving = false
+ })
}
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.spec.ts
index da9f8556..e7b0b70e 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.spec.ts
@@ -1,19 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { WebpushService } from './webpush.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { WebpushService } from './webpush.service'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe('WebpushService', () => {
- let service: WebpushService;
+ let service: WebpushService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule]
- });
- service = TestBed.inject(WebpushService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ service = TestBed.inject(WebpushService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.ts
index 33b0fb09..f2af6f78 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.service.ts
@@ -1,24 +1,23 @@
-import { Injectable } from '@angular/core';
-import { Webpush } from './webpush';
-import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core'
+import { Webpush } from './webpush'
+import { Observable } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class WebpushService {
+ private http = inject(HttpClient)
- constructor(private http: HttpClient) { }
+ public upsertWebpush(pushover: Webpush): Observable {
+ return this.http.post('/api/alerts/webpush', pushover)
+ }
- public upsertWebpush(pushover: Webpush): Observable {
- return this.http.post('/api/alerts/webpush', pushover);
- }
+ public getWebpush(): Observable {
+ return this.http.get('/api/alerts/webpush')
+ }
- public getWebpush(): Observable {
- return this.http.get('/api/alerts/webpush');
- }
-
- public testWebpush(): Observable {
- return this.http.post('/api/alerts/webpush/test', null);
- }
+ public testWebpush(): Observable {
+ return this.http.post('/api/alerts/webpush/test', null)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.ts b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.ts
index 05f67c2b..216793c8 100644
--- a/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/alerts/webpush/webpush.ts
@@ -1,11 +1,11 @@
export class Webpush {
- isEnabled: boolean;
- emailAddress: string;
- publicKey: string;
- privateKey: boolean;
- sendEveryPlateEnabled: boolean;
+ isEnabled: boolean
+ emailAddress: string
+ publicKey: string
+ privateKey: boolean
+ sendEveryPlateEnabled: boolean
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/camera.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/camera.ts
index c97aba4b..ba9f80f1 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/camera.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/camera.ts
@@ -1,36 +1,36 @@
export class Camera {
- id: string;
- latitude: number;
- longitude: number;
- ipAddress: string;
- manufacturer: Manufacturer;
- modelNumber: string;
- openAlprName: string;
- openAlprCameraId: number;
- cameraPassword: string;
- cameraUsername: string;
- updateOverlayEnabled: boolean;
- updateOverlayTextUrl: string;
- nightZoom: string;
- nightFocus: string;
- dayZoom: string;
- dayFocus: string;
- dayNightModeEnabled: boolean;
- dayNightModeUrl: string;
- dayNightNextScheduledCommand: Date;
- openAlprEnabled: boolean;
- sunriseOffset: number;
- sunsetOffset: number;
- platesSeen: number;
- sampleImageUrl: string;
- timezoneOffset: number;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ id: string
+ latitude: number
+ longitude: number
+ ipAddress: string
+ manufacturer: Manufacturer
+ modelNumber: string
+ openAlprName: string
+ openAlprCameraId: number
+ cameraPassword: string
+ cameraUsername: string
+ updateOverlayEnabled: boolean
+ updateOverlayTextUrl: string
+ nightZoom: string
+ nightFocus: string
+ dayZoom: string
+ dayFocus: string
+ dayNightModeEnabled: boolean
+ dayNightModeUrl: string
+ dayNightNextScheduledCommand: Date
+ openAlprEnabled: boolean
+ sunriseOffset: number
+ sunsetOffset: number
+ platesSeen: number
+ sampleImageUrl: string
+ timezoneOffset: number
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
export enum Manufacturer {
- Hikvision = 'Hikvision',
- Dahua = 'Dahua'
+ Hikvision = 'Hikvision',
+ Dahua = 'Dahua',
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.html b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.html
index f87d51d5..9d26254d 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.html
@@ -1,68 +1,81 @@
-
+@if (camera.id) {
+
{{camera.ipAddress}}
{{camera.manufacturer}} {{camera.modelNumber}}
- 
+ }
-
| {{element.key}} | -{{element.value}} | -
| {{element.key}} | +{{element.value}} | +
-
-
-
-
+ + +Vehicle Make ++ ++ @for (make of vehicleFilters.vehicleMakes; track make) { + {{make}} + } ++ +Vehicle Model ++ ++ @for (model of vehicleFilters.vehicleModels; track model) { + {{model}} + } ++ +Vehicle Type ++ ++ @for (type of vehicleFilters.vehicleTypes; track type) { + {{type}} + } ++ +Vehicle Color ++ ++ @for (color of vehicleFilters.vehicleColors; track color) { + {{color}} + } ++ + @if (!filterPlateNumberIsValid && regexSearchEnabled) { +Vehicle Region ++ ++ @for (region of vehicleFilters.vehicleRegions; track region) { + {{region}} + } +Invalid regex pattern + } + @if (!filterPlateNumberIsValid && !regexSearchEnabled) { +Invalid search term + } +-
+
-
+
Include Ignored Plates -
- -
-
+ - +
-Regex Search -- -
+ - +
-Lenient Matches -- -
+ - +
-Plates Seen Less Than 10 Times - - +
- -
+
-
- User Key
-
- help_center
-
-
- API Token
-
- help_center
-
-
+ User Key
+
+ help_center
+
+
+ API Token
+
+ help_center
+
+
-
- Send Plate Preview Image
-
-
- Send Alerts for every plate
-
+
+ Send Plate Preview Image
+
+
+ Send Alerts for every plate
+
-
- Email Address
-
- help_center
-
-
- Public Key
-
- help_center
-
-
- Private Key
-
-
-
-
-
- Send Alerts for every plate
-
-
+
+ Email Address
+
+ help_center
+
+
+ Public Key
+
+ help_center
+
+
+ Private Key
+
+
+
+
+
+ Send Alerts for every plate
+
+
-
-
+ @if (isLoadingImage) {
+ OpenALPR Integration
-
+
+
-
- help_center
+ }
+ @if (!camera.sampleImageUrl || isLoadingFailed) {
+ ;
- const cameraMaskServiceSpy = jasmine.createSpyObj(CameraMaskService.name, ['getMask', 'getPlateCaptures']);
+ let component: CameraMaskComponent
+ let fixture: ComponentFixture
+ const cameraMaskServiceSpy = jasmine.createSpyObj(CameraMaskService.name, ['getMask', 'getPlateCaptures'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [CameraMaskComponent],
- providers: [
- { provide: CameraMaskService, useValue: cameraMaskServiceSpy }
- ]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CameraMaskComponent],
+ providers: [
+ { provide: CameraMaskService, useValue: cameraMaskServiceSpy },
+ ],
+ }).compileComponents()
+ })
- beforeEach(() => {
- cameraMaskServiceSpy.getMask.and.returnValue(of(new CameraMask()));
+ beforeEach(() => {
+ cameraMaskServiceSpy.getMask.and.returnValue(of(new CameraMask()))
- const plateIds: string[] = [];
- cameraMaskServiceSpy.getPlateCaptures.and.returnValue(of(plateIds));
- fixture = TestBed.createComponent(CameraMaskComponent);
- component = fixture.componentInstance;
- component.camera = new Camera();
- fixture.detectChanges();
- });
+ const plateIds: string[] = []
+ cameraMaskServiceSpy.getPlateCaptures.and.returnValue(of(plateIds))
+ fixture = TestBed.createComponent(CameraMaskComponent)
+ component = fixture.componentInstance
+ component.camera = new Camera()
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.ts
index 15aa7c1a..54282fd4 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.ts
@@ -1,467 +1,484 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { CameraMaskService } from './camera-mask.service';
-import { CameraMask } from './camera-mask';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Camera } from '../../camera';
-import { Coordinate } from './coordinate';
-import { PageEvent, MatPaginatorModule } from '@angular/material/paginator';
-import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/button-toggle';
-import { NgIf } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { Component, ElementRef, Input, OnInit, ViewChild, inject } from '@angular/core'
+import { CameraMaskService } from './camera-mask.service'
+import { CameraMask } from './camera-mask'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Camera } from '../../camera'
+import { Coordinate } from './coordinate'
+import { PageEvent, MatPaginatorModule } from '@angular/material/paginator'
+import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/button-toggle'
+
+import { MatButtonModule } from '@angular/material/button'
+import { MatCardModule } from '@angular/material/card'
@Component({
- selector: 'app-camera-mask',
- templateUrl: './camera-mask.component.html',
- styleUrls: ['./camera-mask.component.css'],
- standalone: true,
- imports: [MatCardModule, MatButtonToggleModule, MatButtonModule, NgIf, MatPaginatorModule]
+ selector: 'app-camera-mask',
+ templateUrl: './camera-mask.component.html',
+ styleUrls: ['./camera-mask.component.css'],
+ imports: [MatCardModule, MatButtonToggleModule, MatButtonModule, MatPaginatorModule],
})
export class CameraMaskComponent implements OnInit {
- @Input() camera: Camera;
-
- @ViewChild('canvas', { static: true }) canvas: ElementRef;
- @ViewChild('sampleCanvas', { static: true }) sampleCanvas: ElementRef;
- @ViewChild('savingCanvas', { static: true }) savingCanvas: ElementRef;
- @ViewChild('measureDiv', { static: true }) measureDiv: ElementRef;
-
- public ctx: CanvasRenderingContext2D;
- public sampleCtx: CanvasRenderingContext2D;
- public savingCtx: CanvasRenderingContext2D;
- public coordinates: Coordinate[] = [];
- public isLoadingSnapshot: boolean = false;
- public isClosed = false;
- public isDragging = false;
- public dragStartIndex: number = -1;
- public dragOffset: Coordinate;
- public currentPos: Coordinate;
- public dotRadius: number = 7.5;
- public lineThickness: number = 4;
- public forgiveness: number = 30;
- public image: HTMLImageElement;
- public imageHeight: number;
- public imageWidth: number;
- public scaleFactor: number;
- public targetWidth: number = 960;
- public imageInValidState: boolean = true;
-
- public paginatorIndex: number = 0;
- public samplePlates: string[] = [];
-
- constructor(
- private snackbarService: SnackbarService,
- private cameraMaskService: CameraMaskService) { }
-
- ngOnInit(): void {
- this.getSamplePlates();
- this.prepareCanvases();
- this.addEventHandlers();
+ private snackbarService = inject(SnackbarService)
+ private cameraMaskService = inject(CameraMaskService)
+
+ @Input() camera: Camera
+
+ @ViewChild('canvas', { static: true }) canvas: ElementRef
+ @ViewChild('sampleCanvas', { static: true }) sampleCanvas: ElementRef
+ @ViewChild('savingCanvas', { static: true }) savingCanvas: ElementRef
+ @ViewChild('measureDiv', { static: true }) measureDiv: ElementRef
+
+ public ctx: CanvasRenderingContext2D
+ public sampleCtx: CanvasRenderingContext2D
+ public savingCtx: CanvasRenderingContext2D
+ public coordinates: Coordinate[] = []
+ public isLoadingSnapshot = false
+ public isClosed = false
+ public isDragging = false
+ public dragStartIndex = -1
+ public dragOffset: Coordinate
+ public currentPos: Coordinate
+ public dotRadius = 7.5
+ public lineThickness = 4
+ public forgiveness = 30
+ public image: HTMLImageElement
+ public imageHeight: number
+ public imageWidth: number
+ public scaleFactor: number
+ public targetWidth = 960
+ public imageInValidState = true
+
+ public paginatorIndex = 0
+ public samplePlates: string[] = []
+
+ ngOnInit(): void {
+ this.getSamplePlates()
+ this.prepareCanvases()
+ this.addEventHandlers()
+ }
+
+ public getSamplePlates() {
+ this.cameraMaskService.getPlateCaptures(this.camera.id).subscribe((plates) => {
+ this.samplePlates = plates
+ this.loadImageIntoCanvas(this.camera.sampleImageUrl)
+ })
+ }
+
+ public handlePageEvent(pageEvent: PageEvent) {
+ this.loadImageIntoCanvas(this.samplePlates[pageEvent.pageIndex])
+ }
+
+ public handleToggleChange(toggleEvent: MatButtonToggleChange) {
+ if (toggleEvent.value === 'snapshot') {
+ this.samplePlates = [`/api/images/${this.camera.id}/snapshot`]
+ this.loadImageIntoCanvas(this.samplePlates[0])
}
-
- public getSamplePlates() {
- this.cameraMaskService.getPlateCaptures(this.camera.id).subscribe((plates) => {
- this.samplePlates = plates;
- this.loadImageIntoCanvas(this.camera.sampleImageUrl);
- });
- }
-
- public handlePageEvent(pageEvent: PageEvent) {
- this.loadImageIntoCanvas(this.samplePlates[pageEvent.pageIndex]);
+ else {
+ this.getSamplePlates()
}
+ }
+
+ public prepareCanvases() {
+ this.ctx = this.canvas.nativeElement.getContext('2d') ?? (() => {
+ throw new Error('ctx is null')
+ })()
+ this.sampleCtx = this.sampleCanvas.nativeElement.getContext('2d') ?? (() => {
+ throw new Error('ctx is null')
+ })()
+ this.savingCtx = this.savingCanvas.nativeElement.getContext('2d') ?? (() => {
+ throw new Error('ctx is null')
+ })()
+
+ this.savingCtx.canvas.hidden = true
+ }
+
+ public addEventHandlers() {
+ this.canvas.nativeElement.addEventListener('mousedown', (event) => {
+ if (!this.imageInValidState) {
+ return
+ }
+
+ const mousePos = this.getMousePosition(event)
+
+ if (this.isClosed && this.isPointInPolygon(mousePos.x, mousePos.y, this.coordinates)) {
+ this.dragStartIndex = -1
+ this.dragOffset = { x: mousePos.x, y: mousePos.y }
+ this.isDragging = true
+ this.canvas.nativeElement.style.cursor = 'move'
+ }
+ else {
+ this.dragStartIndex = this.findClosestPoint(mousePos)
+
+ if (this.dragStartIndex !== -1) {
+ this.isDragging = true
+ }
+ else {
+ this.canvas.nativeElement.style.cursor = 'default'
+ }
+ }
+ })
+
+ document.addEventListener('mousemove', (event) => {
+ if (!this.imageInValidState) {
+ return
+ }
+ const mousePos = this.getMousePosition(event)
+
+ if (this.coordinates.length === 0) {
+ this.currentPos = mousePos
+ return
+ }
+
+ if (this.isDragging && this.dragStartIndex !== -1) {
+ this.movePoint(this.dragStartIndex, mousePos.x, mousePos.y)
+ }
+ else if (this.isDragging && this.isClosed && this.dragStartIndex === -1) {
+ this.canvas.nativeElement.style.cursor = 'move'
+ const dx = mousePos.x - this.dragOffset.x
+ const dy = mousePos.y - this.dragOffset.y
+
+ this.coordinates.forEach((point) => {
+ point.x += dx
+ point.y += dy
+ })
+
+ this.dragOffset = { x: mousePos.x, y: mousePos.y }
+ this.draw()
+ }
+ else if (!this.isClosed) {
+ this.currentPos = mousePos
+ this.draw()
+ }
+ else if (this.isClosed) {
+ this.canvas.nativeElement.style.cursor = this.isPointInPolygon(mousePos.x, mousePos.y, this.coordinates) ? 'move' : 'default'
+ this.currentPos = mousePos
+ this.draw()
+ }
+ })
+
+ this.canvas.nativeElement.addEventListener('mouseup', () => {
+ if (!this.imageInValidState) {
+ return
+ }
+ this.isDragging = false
+ this.dragStartIndex = -1
+ this.dragOffset = { x: 0, y: 0 }
+
+ this.canvas.nativeElement.style.cursor = 'default'
+ })
+
+ this.canvas.nativeElement.addEventListener('click', (event) => {
+ if (!this.imageInValidState) {
+ return
+ }
+ if (!this.isClosed && !this.isDragging) {
+ const mousePos = this.getMousePosition(event)
+
+ if (this.isNearPoint(0, mousePos)) {
+ this.closePolygon()
+ }
+ else {
+ this.addPoint(mousePos.x, mousePos.y)
+ }
+ }
+ })
+
+ this.canvas.nativeElement.addEventListener('mouseleave', () => {
+ if (!this.imageInValidState) {
+ return
+ }
+ this.isDragging = false
+ this.dragStartIndex = -1
+ this.dragOffset = { x: 0, y: 0 }
+ this.currentPos = { x: 0, y: 0 }
+ this.canvas.nativeElement.style.cursor = 'default'
+ this.draw()
+ })
+ }
+
+ public loadImageIntoCanvas(url: string) {
+ this.isLoadingSnapshot = true
+ this.cameraMaskService.getPlateCapture(url).subscribe((image: Blob) => {
+ const reader = new FileReader()
+
+ reader.onload = () => {
+ this.image = new Image()
+
+ this.image.onload = () => {
+ this.imageInValidState = true
+ this.scaleFactor = this.image.width / this.targetWidth
+
+ this.measureDiv.nativeElement.appendChild(this.image)
+ const wrh = this.image.width / this.image.height
+ this.imageWidth = this.canvas.nativeElement.width
+ this.imageHeight = this.imageWidth / wrh
+
+ if (this.imageHeight > this.canvas.nativeElement.height) {
+ this.imageHeight = this.canvas.nativeElement.height
+ this.imageWidth = this.imageHeight * wrh
+ }
+
+ if (this.canvas.nativeElement.width > this.imageWidth) {
+ this.canvas.nativeElement.width = this.imageWidth
+ }
+
+ if (this.canvas.nativeElement.height > this.imageHeight) {
+ this.canvas.nativeElement.height = this.imageHeight
+ }
+
+ this.measureDiv.nativeElement.removeChild(this.image)
+ console.log('trying to draw image')
+ this.ctx.drawImage(this.image, 0, 0, this.imageWidth, this.imageHeight)
+
+ this.loadMaskCoordinates()
+ }
- public handleToggleChange(toggleEvent: MatButtonToggleChange) {
- if (toggleEvent.value === 'snapshot') {
- this.samplePlates = [`/api/images/${this.camera.id}/snapshot`];
- this.loadImageIntoCanvas(this.samplePlates[0]);
- } else {
- this.getSamplePlates();
+ this.image.onerror = () => {
+ console.log('failed to get image')
+ this.imageInValidState = false
}
- }
- public prepareCanvases() {
- this.ctx = this.canvas.nativeElement.getContext('2d')!;
- this.sampleCtx = this.sampleCanvas.nativeElement.getContext('2d')!;
- this.savingCtx = this.savingCanvas.nativeElement.getContext('2d')!;
- this.savingCtx.canvas.hidden = true;
- }
+ this.image.src = reader.result as string
+ }
- public addEventHandlers() {
- this.canvas.nativeElement.addEventListener('mousedown', (event) => {
- if (!this.imageInValidState) {
- return;
- }
-
- const mousePos = this.getMousePosition(event);
-
- if (this.isClosed && this.isPointInPolygon(mousePos.x, mousePos.y, this.coordinates)) {
- this.dragStartIndex = -1;
- this.dragOffset = { x: mousePos.x, y: mousePos.y };
- this.isDragging = true;
- this.canvas.nativeElement.style.cursor = 'move';
- } else {
- this.dragStartIndex = this.findClosestPoint(mousePos);
-
- if (this.dragStartIndex !== -1) {
- this.isDragging = true;
- } else {
- this.canvas.nativeElement.style.cursor = 'default';
- }
- }
- });
-
- document.addEventListener('mousemove', (event) => {
- if (!this.imageInValidState) {
- return;
- }
- const mousePos = this.getMousePosition(event);
-
- if (this.coordinates.length === 0) {
- this.currentPos = mousePos;
- return;
- }
-
- if (this.isDragging && this.dragStartIndex !== -1) {
- this.movePoint(this.dragStartIndex, mousePos.x, mousePos.y);
- } else if (this.isDragging && this.isClosed && this.dragStartIndex === -1) {
- this.canvas.nativeElement.style.cursor = 'move';
- const dx = mousePos.x - this.dragOffset.x;
- const dy = mousePos.y - this.dragOffset.y;
-
- this.coordinates.forEach(point => {
- point.x += dx;
- point.y += dy;
- });
-
- this.dragOffset = { x: mousePos.x, y: mousePos.y };
- this.draw();
- } else if (!this.isClosed) {
- this.currentPos = mousePos;
- this.draw();
- } else if (this.isClosed) {
- this.canvas.nativeElement.style.cursor = this.isPointInPolygon(mousePos.x, mousePos.y, this.coordinates) ? 'move' : 'default';
- this.currentPos = mousePos;
- this.draw();
- }
- });
-
- this.canvas.nativeElement.addEventListener('mouseup', () => {
- if (!this.imageInValidState) {
- return;
- }
- this.isDragging = false;
- this.dragStartIndex = -1;
- this.dragOffset = { x: 0, y: 0 };
-
- this.canvas.nativeElement.style.cursor = 'default';
- });
-
- this.canvas.nativeElement.addEventListener('click', (event) => {
- if (!this.imageInValidState) {
- return;
- }
- if (!this.isClosed && !this.isDragging) {
- const mousePos = this.getMousePosition(event);
-
- if (this.isNearPoint(0, mousePos)) {
- this.closePolygon();
- } else {
- this.addPoint(mousePos.x, mousePos.y);
- }
- }
- });
-
- this.canvas.nativeElement.addEventListener('mouseleave', () => {
- if (!this.imageInValidState) {
- return;
- }
- this.isDragging = false;
- this.dragStartIndex = -1;
- this.dragOffset = {x: 0, y: 0};
- this.currentPos = {x: 0, y: 0};
- this.canvas.nativeElement.style.cursor = 'default';
- this.draw();
- });
- }
+ reader.readAsDataURL(image)
+ })
+ }
- public loadImageIntoCanvas(url: string) {
- this.isLoadingSnapshot = true;
- this.cameraMaskService.getPlateCapture(url).subscribe((image: Blob) => {
- const reader = new FileReader()!;
-
- reader.onload = () => {
- this.image = new Image();
-
- this.image.onload = () => {
- this.imageInValidState = true;
- this.scaleFactor = this.image.width / this.targetWidth;
-
- this.measureDiv.nativeElement.appendChild(this.image);
- const wrh = this.image.width / this.image.height;
- this.imageWidth = this.canvas.nativeElement.width;
- this.imageHeight = this.imageWidth / wrh;
-
- if (this.imageHeight > this.canvas.nativeElement.height) {
- this.imageHeight = this.canvas.nativeElement.height;
- this.imageWidth = this.imageHeight * wrh;
- }
-
- if (this.canvas.nativeElement.width > this.imageWidth) {
- this.canvas.nativeElement.width = this.imageWidth;
- }
-
- if (this.canvas.nativeElement.height > this.imageHeight) {
- this.canvas.nativeElement.height = this.imageHeight;
- }
-
- this.measureDiv.nativeElement.removeChild(this.image);
- console.log('trying to draw image');
- this.ctx.drawImage(this.image, 0, 0, this.imageWidth, this.imageHeight);
-
- this.loadMaskCoordinates();
- };
-
- this.image.onerror = () => {
- console.log('failed to get image');
- this.imageInValidState = false;
- };
-
- this.image.src = reader.result as string;
- };
-
- reader.readAsDataURL(image);
- });
- }
+ public loadMaskCoordinates() {
+ this.currentPos = { x: 0, y: 0 }
- public loadMaskCoordinates() {
- this.currentPos = { x: 0, y: 0 };
-
- if (this.coordinates.length === 0) {
- this.cameraMaskService.getCameraMaskCoordinates(this.camera.id).subscribe((coordinates) => {
- coordinates.forEach(coordinate => {
- coordinate.x /= this.scaleFactor;
- coordinate.y /= this.scaleFactor;
- });
-
- this.coordinates = coordinates;
- this.closePolygon();
- this.draw();
- this.isLoadingSnapshot = false;
- });
- } else {
- this.closePolygon();
- this.draw();
- this.isLoadingSnapshot = false;
- }
- }
+ if (this.coordinates.length === 0) {
+ this.cameraMaskService.getCameraMaskCoordinates(this.camera.id).subscribe((coordinates) => {
+ coordinates.forEach((coordinate) => {
+ coordinate.x /= this.scaleFactor
+ coordinate.y /= this.scaleFactor
+ })
- public saveMask() {
- const cameraMask = new CameraMask();
- cameraMask.coordinates = [];
- cameraMask.cameraId = this.camera.id;
- this.savingCtx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
- this.savingCtx.fillStyle = 'white';
- this.savingCtx.fillRect(0, 0, this.image.width, this.image.height);
-
- if (this.coordinates.length > 0) {
- for (let i = 0; i < this.coordinates.length; i++) {
- cameraMask.coordinates.push({ x: this.coordinates[i].x * this.scaleFactor, y: this.coordinates[i].y * this.scaleFactor });
- }
-
- this.savingCtx.beginPath();
- this.savingCtx.moveTo(cameraMask.coordinates[0].x, cameraMask.coordinates[0].y);
-
- for (let i = 1; i < cameraMask.coordinates.length; i++) {
- this.savingCtx.lineTo(cameraMask.coordinates[i].x, cameraMask.coordinates[i].y);
- }
-
- this.savingCtx.closePath();
- this.savingCtx.globalCompositeOperation = 'source-over';
- this.savingCtx.fillStyle = 'black';
- this.savingCtx.fill();
- }
+ this.coordinates = coordinates
+ this.closePolygon()
+ this.draw()
+ this.isLoadingSnapshot = false
+ })
+ }
+ else {
+ this.closePolygon()
+ this.draw()
+ this.isLoadingSnapshot = false
+ }
+ }
+
+ public saveMask() {
+ const cameraMask = new CameraMask()
+ cameraMask.coordinates = []
+ cameraMask.cameraId = this.camera.id
+ this.savingCtx.drawImage(this.image, 0, 0, this.image.width, this.image.height)
+ this.savingCtx.fillStyle = 'white'
+ this.savingCtx.fillRect(0, 0, this.image.width, this.image.height)
+
+ if (this.coordinates.length > 0) {
+ for (const coord of this.coordinates) {
+ cameraMask.coordinates.push({
+ x: coord.x * this.scaleFactor,
+ y: coord.y * this.scaleFactor,
+ })
+ }
+
+ this.savingCtx.beginPath()
+ this.savingCtx.moveTo(cameraMask.coordinates[0].x, cameraMask.coordinates[0].y)
+
+ for (let i = 1; i < cameraMask.coordinates.length; i++) {
+ this.savingCtx.lineTo(cameraMask.coordinates[i].x, cameraMask.coordinates[i].y)
+ }
+
+ this.savingCtx.closePath()
+ this.savingCtx.globalCompositeOperation = 'source-over'
+ this.savingCtx.fillStyle = 'black'
+ this.savingCtx.fill()
+ }
- cameraMask.imageMask = this.savingCanvas.nativeElement.toDataURL('image/png');
+ cameraMask.imageMask = this.savingCanvas.nativeElement.toDataURL('image/png')
- this.cameraMaskService.upsertImageMask(cameraMask).subscribe(() => {
- this.snackbarService.create('Camera mask saved.', SnackBarType.Saved);
- },
- () => {
- this.snackbarService.create('Camera mask failed.', SnackBarType.Error);
- });
- }
+ this.cameraMaskService.upsertImageMask(cameraMask).subscribe(() => {
+ this.snackbarService.create('Camera mask saved.', SnackBarType.Saved)
+ },
+ () => {
+ this.snackbarService.create('Camera mask failed.', SnackBarType.Error)
+ })
+ }
- public cancelMask() {
+ public cancelMask() {
+ // do nothing
+ }
+ public draw() {
+ this.ctx.clearRect(0, 0, this.imageWidth, this.imageHeight)
+ try {
+ this.ctx.drawImage(this.image, 0, 0, this.imageWidth, this.imageHeight)
+ }
+ catch {
+ this.ctx.reset()
}
-
- public draw() {
- this.ctx.clearRect(0, 0, this.imageWidth, this.imageHeight);
- try {
- this.ctx.drawImage(this.image, 0, 0, this.imageWidth, this.imageHeight);
- } catch {
- this.ctx.reset();
+
+ if (this.coordinates.length > 0) {
+ this.ctx.fillStyle = 'rgba(139, 0, 0, 0.2)'
+ this.ctx.strokeStyle = '#ffffff'
+ this.ctx.lineWidth = this.lineThickness
+ this.ctx.beginPath()
+ this.ctx.moveTo(this.coordinates[0].x, this.coordinates[0].y)
+
+ this.coordinates.forEach((point, index) => {
+ this.ctx.lineTo(point.x, point.y)
+ if (index === this.coordinates.length - 1 && !this.isClosed && this.currentPos) {
+ this.ctx.lineTo(this.currentPos.x, this.currentPos.y)
}
+ })
+
+ if (this.isClosed) {
+ this.ctx.closePath()
+ this.ctx.fill()
+ }
- if (this.coordinates.length > 0) {
- this.ctx.fillStyle = 'rgba(139, 0, 0, 0.2)';
- this.ctx.strokeStyle = '#ffffff';
- this.ctx.lineWidth = this.lineThickness;
- this.ctx.beginPath();
- this.ctx.moveTo(this.coordinates[0].x, this.coordinates[0].y);
-
- this.coordinates.forEach((point, index) => {
- this.ctx.lineTo(point.x, point.y);
- if (index === this.coordinates.length - 1 && !this.isClosed && this.currentPos) {
- this.ctx.lineTo(this.currentPos.x, this.currentPos.y);
- }
- });
-
- if (this.isClosed) {
- this.ctx.closePath();
- this.ctx.fill();
- }
-
- this.ctx.stroke();
-
- this.coordinates.forEach((point, index) => {
- let tempDotRadius = this.dotRadius;
- if (!this.isClosed
+ this.ctx.stroke()
+
+ this.coordinates.forEach((point, index) => {
+ let tempDotRadius = this.dotRadius
+ if (!this.isClosed
&& this.coordinates.length > 1
&& index == 0
&& this.isNearPoint(index, this.currentPos)) {
- tempDotRadius *= 2;
- }
+ tempDotRadius *= 2
+ }
- if (this.isClosed
+ if (this.isClosed
&& !this.isDragging
&& this.findClosestPoint(this.currentPos) == index
&& this.isNearPoint(index, this.currentPos)) {
- tempDotRadius *= 2;
- }
-
- this.ctx.fillStyle = '#ff0000';
- this.ctx.beginPath();
- this.ctx.arc(point.x, point.y, tempDotRadius, 0, Math.PI * 2);
- this.ctx.fill();
- });
-
- this.drawSampleMaskImage();
+ tempDotRadius *= 2
}
- }
- public getMousePosition(event: MouseEvent) {
- const rect = this.canvas.nativeElement.getBoundingClientRect();
+ this.ctx.fillStyle = '#ff0000'
+ this.ctx.beginPath()
+ this.ctx.arc(point.x, point.y, tempDotRadius, 0, Math.PI * 2)
+ this.ctx.fill()
+ })
- return {
- x: event.clientX - rect.left,
- y: event.clientY - rect.top
- };
+ this.drawSampleMaskImage()
}
+ }
- public addPoint(x: number, y: number) {
- this.coordinates.push({ x, y });
+ public getMousePosition(event: MouseEvent) {
+ const rect = this.canvas.nativeElement.getBoundingClientRect()
- this.draw();
+ return {
+ x: event.clientX - rect.left,
+ y: event.clientY - rect.top,
}
+ }
- public isNearPoint(point: number = -1, mospos: Coordinate) {
- if (this.coordinates.length === 0) {
- return false;
- }
+ public addPoint(x: number, y: number) {
+ this.coordinates.push({ x, y })
- if (point === -1) {
- for (let i = 0; i < this.coordinates.length; i++) {
- const dx = mospos.x - this.coordinates[i].x;
- const dy = mospos.y - this.coordinates[i].y;
+ this.draw()
+ }
- if (dx * dx + dy * dy < this.forgiveness * this.forgiveness) {
- return true;
- }
- }
-
- return false;
- }
-
- const dx = mospos.x - this.coordinates[point].x;
- const dy = mospos.y - this.coordinates[point].y;
-
- return dx * dx + dy * dy < this.forgiveness * this.forgiveness;
+ public isNearPoint(point = -1, mospos: Coordinate) {
+ if (this.coordinates.length === 0) {
+ return false
}
- public closePolygon() {
- if (this.coordinates.length > 2) {
- this.isClosed = true;
- this.draw();
- this.drawSampleMaskImage();
+ if (point === -1) {
+ for (const coord of this.coordinates) {
+ const dx = mospos.x - coord.x
+ const dy = mospos.y - coord.y
+
+ if (dx * dx + dy * dy < this.forgiveness * this.forgiveness) {
+ return true
}
- }
+ }
- public drawSampleMaskImage() {
- this.sampleCtx.drawImage(this.image, this.imageWidth / 4, this.imageHeight / 4);
- this.sampleCtx.fillStyle = 'white';
- this.sampleCtx.fillRect(0, 0, this.sampleCanvas.nativeElement.width, this.sampleCanvas.nativeElement.height);
+ return false
+ }
- this.sampleCtx.beginPath();
- this.sampleCtx.moveTo(this.coordinates[0].x * this.scaleFactor / 4, this.coordinates[0].y * this.scaleFactor / 4);
+ const dx = mospos.x - this.coordinates[point].x
+ const dy = mospos.y - this.coordinates[point].y
- for (let i = 1; i < this.coordinates.length; i++) {
- this.sampleCtx.lineTo(this.coordinates[i].x * this.scaleFactor / 4, this.coordinates[i].y * this.scaleFactor / 4);
- }
+ return dx * dx + dy * dy < this.forgiveness * this.forgiveness
+ }
- this.sampleCtx.closePath();
- this.sampleCtx.globalCompositeOperation = 'source-over';
- this.sampleCtx.fillStyle = 'black';
- this.sampleCtx.fill();
+ public closePolygon() {
+ if (this.coordinates.length > 2) {
+ this.isClosed = true
+ this.draw()
+ this.drawSampleMaskImage()
}
+ }
- public resetCanvas() {
- this.coordinates.length = 0;
+ public drawSampleMaskImage() {
+ this.sampleCtx.drawImage(this.image, this.imageWidth / 4, this.imageHeight / 4)
+ this.sampleCtx.fillStyle = 'white'
+ this.sampleCtx.fillRect(0, 0, this.sampleCanvas.nativeElement.width, this.sampleCanvas.nativeElement.height)
- this.isClosed = false;
- this.isDragging = false;
+ this.sampleCtx.beginPath()
+ this.sampleCtx.moveTo(this.coordinates[0].x * this.scaleFactor / 4, this.coordinates[0].y * this.scaleFactor / 4)
- this.draw();
- this.sampleCtx.clearRect(0, 0, this.image.width, this.image.height);
+ for (let i = 1; i < this.coordinates.length; i++) {
+ this.sampleCtx.lineTo(this.coordinates[i].x * this.scaleFactor / 4, this.coordinates[i].y * this.scaleFactor / 4)
}
- public undoLastPoint() {
- if (this.coordinates.length === 0 || this.isClosed) {
- return;
- }
+ this.sampleCtx.closePath()
+ this.sampleCtx.globalCompositeOperation = 'source-over'
+ this.sampleCtx.fillStyle = 'black'
+ this.sampleCtx.fill()
+ }
- this.coordinates.pop();
- this.draw();
- }
+ public resetCanvas() {
+ this.coordinates.length = 0
+
+ this.isClosed = false
+ this.isDragging = false
- public movePoint(index: number, x: number, y: number) {
- this.coordinates[index] = { x, y };
- this.draw();
+ this.draw()
+ this.sampleCtx.clearRect(0, 0, this.image.width, this.image.height)
+ }
+
+ public undoLastPoint() {
+ if (this.coordinates.length === 0 || this.isClosed) {
+ return
}
- public isPointInPolygon(x: number, y: number, poly: Coordinate[]) {
- let isInside = false;
-
- if (this.isNearPoint(undefined, { x: x, y: y })) {
- return false;
- }
+ this.coordinates.pop()
+ this.draw()
+ }
- for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
- const xi = poly[i].x, yi = poly[i].y;
- const xj = poly[j].x, yj = poly[j].y;
+ public movePoint(index: number, x: number, y: number) {
+ this.coordinates[index] = { x, y }
+ this.draw()
+ }
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+ public isPointInPolygon(x: number, y: number, poly: Coordinate[]) {
+ let isInside = false
- if (intersect) {
- isInside = !isInside;
- }
- }
- return isInside;
+ if (this.isNearPoint(undefined, { x: x, y: y })) {
+ return false
}
- public findClosestPoint(mousePos: Coordinate) {
- return this.coordinates.findIndex(p =>
- Math.sqrt((p.x - mousePos.x) ** 2 + (p.y - mousePos.y) ** 2) < this.dotRadius * 2
- );
+ for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+ const xi = poly[i].x, yi = poly[i].y
+ const xj = poly[j].x, yj = poly[j].y
+
+ const intersect = (yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi
+
+ if (intersect) {
+ isInside = !isInside
+ }
}
+ return isInside
+ }
+
+ public findClosestPoint(mousePos: Coordinate) {
+ return this.coordinates.findIndex(p =>
+ Math.sqrt((p.x - mousePos.x) ** 2 + (p.y - mousePos.y) ** 2) < this.dotRadius * 2,
+ )
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.service.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.service.ts
index b23806ce..6df1bfb1 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.service.ts
@@ -1,33 +1,32 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { CameraMask } from './camera-mask';
-import { Coordinate } from './coordinate';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { CameraMask } from './camera-mask'
+import { Coordinate } from './coordinate'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class CameraMaskService {
-
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- getCameraSnapshot(cameraId: string): Observable {
- return this.http.get(`/api/images/${cameraId}/snapshot`);
- }
+ getCameraSnapshot(cameraId: string): Observable {
+ return this.http.get(`/api/images/${cameraId}/snapshot`)
+ }
- getPlateCaptures(cameraId: string): Observable {
- return this.http.get(`/api/cameras/${cameraId}/plateCaptures`);
- }
+ getPlateCaptures(cameraId: string): Observable {
+ return this.http.get(`/api/cameras/${cameraId}/plateCaptures`)
+ }
- getPlateCapture(imageUrl: string): Observable {
- return this.http.get(imageUrl, { responseType: 'blob' as 'json' });
- }
+ getPlateCapture(imageUrl: string): Observable {
+ return this.http.get(imageUrl, { responseType: 'blob' as 'json' })
+ }
- getCameraMaskCoordinates(cameraId: string): Observable {
- return this.http.get(`/api/cameras/${cameraId}/mask/coordinates`);
- }
+ getCameraMaskCoordinates(cameraId: string): Observable {
+ return this.http.get(`/api/cameras/${cameraId}/mask/coordinates`)
+ }
- upsertImageMask(imageMask: CameraMask) {
- return this.http.post(`/api/cameras/${imageMask.cameraId}/mask`, imageMask);
- }
+ upsertImageMask(imageMask: CameraMask) {
+ return this.http.post(`/api/cameras/${imageMask.cameraId}/mask`, imageMask)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.ts
index faee1479..54b3cd39 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.ts
@@ -1,11 +1,11 @@
-import { Coordinate } from './coordinate';
+import { Coordinate } from './coordinate'
export class CameraMask {
- coordinates: Coordinate[];
- imageMask: string;
- cameraId: string;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ coordinates: Coordinate[]
+ imageMask: string
+ cameraId: string
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/coordinate.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/coordinate.ts
index 15e8948b..6e63047e 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/coordinate.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/coordinate.ts
@@ -1,8 +1,8 @@
export class Coordinate {
- x: number;
- y: number;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ x: number
+ y: number
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.html b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.html
index a88412a3..e2eba5b9 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.html
@@ -27,97 +27,104 @@
+ help_center
+ }
+
+ Camera Manufacturer: {{camera.manufacturer}}
+
+ @if (camera.updateOverlayEnabled) {
- Camera Manufacturer: {{camera.manufacturer}}
-
-
-
-
- OpenALPR Name: {{camera.openAlprName}}
-
-
- Plates Seen: {{camera.platesSeen}}
-
+
+ OpenALPR Name: {{camera.openAlprName}}
+
+
+ Plates Seen: {{camera.platesSeen}}
+
-
-
-
+
+
-
-
+
+}
+@if (!camera.id) {
+
- Add new camera
+ Add new camera
-
-
\ No newline at end of file
+
+}
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.spec.ts
index c7653d25..19d52362 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.spec.ts
@@ -1,27 +1,27 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { CameraComponent } from './camera.component';
-import { Camera } from '../camera';
+import { CameraComponent } from './camera.component'
+import { Camera } from '../camera'
describe('CameraComponent', () => {
- let component: CameraComponent;
- let fixture: ComponentFixture;
+ let component: CameraComponent
+ let fixture: ComponentFixture
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [CameraComponent]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CameraComponent],
+ }).compileComponents()
+ })
- beforeEach(() => {
- fixture = TestBed.createComponent(CameraComponent);
- component = fixture.componentInstance;
- component.camera = new Camera();
-
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CameraComponent)
+ component = fixture.componentInstance
+ component.camera = new Camera()
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ fixture.detectChanges()
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.ts
index b04c6b79..eac3a5eb 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/camera/camera.component.ts
@@ -1,59 +1,56 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Camera } from '../camera';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatCardModule } from '@angular/material/card';
-import { NgIf, DatePipe } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Camera } from '../camera'
+import { MatButtonModule } from '@angular/material/button'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatCardModule } from '@angular/material/card'
+import { DatePipe } from '@angular/common'
@Component({
- selector: 'app-camera',
- templateUrl: './camera.component.html',
- styleUrls: ['./camera.component.less'],
- standalone: true,
- imports: [NgIf, MatCardModule, MatProgressSpinnerModule, MatIconModule, MatTooltipModule, MatButtonModule, DatePipe]
+ selector: 'app-camera',
+ templateUrl: './camera.component.html',
+ styleUrls: ['./camera.component.less'],
+ imports: [MatCardModule, MatProgressSpinnerModule, MatIconModule, MatTooltipModule, MatButtonModule, DatePipe],
})
export class CameraComponent implements OnInit {
- @Input() camera: Camera;
- @Output() add: EventEmitter = new EventEmitter();
- @Output() edit: EventEmitter = new EventEmitter();
- @Output() delete: EventEmitter = new EventEmitter();
- @Output() test: EventEmitter = new EventEmitter();
-
- public isLoadingImage: boolean = true;
- public isLoadingFailed: boolean = false;
-
- constructor() { }
-
- ngOnInit(): void {
- if (!this.camera.sampleImageUrl) {
- this.isLoadingImage = false;
- }
+ @Input() camera: Camera
+ @Output() add = new EventEmitter()
+ @Output() edit = new EventEmitter()
+ @Output() delete = new EventEmitter()
+ @Output() test = new EventEmitter()
+
+ public isLoadingImage = true
+ public isLoadingFailed = false
+
+ ngOnInit(): void {
+ if (!this.camera.sampleImageUrl) {
+ this.isLoadingImage = false
}
+ }
- public addCamera() {
- this.add.emit(undefined);
- }
+ public addCamera() {
+ this.add.emit(undefined)
+ }
- public editCamera() {
- this.edit.emit(this.camera.id);
- }
+ public editCamera() {
+ this.edit.emit(this.camera.id)
+ }
- public removeCamera() {
- this.delete.emit(this.camera.id);
- }
+ public removeCamera() {
+ this.delete.emit(this.camera.id)
+ }
- public testCamera() {
- this.test.emit(this.camera.id);
- }
+ public testCamera() {
+ this.test.emit(this.camera.id)
+ }
- public imageLoaded() {
- this.isLoadingImage = false;
- }
+ public imageLoaded() {
+ this.isLoadingImage = false
+ }
- public imageFailedToLoad() {
- this.isLoadingImage = false;
- this.isLoadingFailed = true;
- }
+ public imageFailedToLoad() {
+ this.isLoadingImage = false
+ this.isLoadingFailed = true
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.html b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.html
index 0db20da6..74059d5e 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.html
@@ -1,12 +1,13 @@
-
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.spec.ts
index a048aa95..35ed3da6 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.spec.ts
@@ -1,26 +1,27 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { CamerasComponent } from './cameras.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CamerasComponent } from './cameras.component'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe('CamerasComponent', () => {
- let component: CamerasComponent;
- let fixture: ComponentFixture;
+ let component: CamerasComponent
+ let fixture: ComponentFixture
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [CamerasComponent, HttpClientTestingModule],
- providers: []
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CamerasComponent],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ }).compileComponents()
+ })
- beforeEach(() => {
- fixture = TestBed.createComponent(CamerasComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CamerasComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.ts
index 84f8825a..dd6ce8c3 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/cameras.component.ts
@@ -1,74 +1,72 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { Camera } from './camera';
-import { SettingsService } from '../settings.service';
-import { EditCameraComponent } from './edit-camera/edit-camera.component';
-import { CameraComponent } from './camera/camera.component';
-import { NgFor } from '@angular/common';
-import { MatGridListModule } from '@angular/material/grid-list';
+import { Component, OnInit, inject } from '@angular/core'
+import { MatDialog, MatDialogModule } from '@angular/material/dialog'
+import { Camera } from './camera'
+import { SettingsService } from '../settings.service'
+import { EditCameraComponent } from './edit-camera/edit-camera.component'
+import { CameraComponent } from './camera/camera.component'
+
+import { MatGridListModule } from '@angular/material/grid-list'
@Component({
- selector: 'app-cameras',
- templateUrl: './cameras.component.html',
- styleUrls: ['./cameras.component.less'],
- standalone: true,
- imports: [MatGridListModule, NgFor, CameraComponent, MatDialogModule]
+ selector: 'app-cameras',
+ templateUrl: './cameras.component.html',
+ styleUrls: ['./cameras.component.less'],
+ imports: [MatGridListModule, CameraComponent, MatDialogModule],
})
export class CamerasComponent implements OnInit {
- public cameras: Camera[];
-
- constructor(
- private settingsService: SettingsService,
- public dialog: MatDialog) { }
+ private settingsService = inject(SettingsService)
+ dialog = inject(MatDialog)
- ngOnInit(): void {
- this.getCameras();
- }
+ public cameras: Camera[]
- public getCameras() {
- this.settingsService.getCameras().subscribe(result => {
- result.unshift(new Camera());
- this.cameras = result;
- });
- }
+ ngOnInit(): void {
+ this.getCameras()
+ }
- openEditDialog(cameraId: string): void {
- let cameraToEdit = this.cameras.find(x => x.id == cameraId);
+ public getCameras() {
+ this.settingsService.getCameras().subscribe((result) => {
+ result.unshift(new Camera())
+ this.cameras = result
+ })
+ }
- if (!cameraToEdit) {
- cameraToEdit = this.cameras[0];
- }
+ openEditDialog(cameraId: string): void {
+ let cameraToEdit = this.cameras.find(x => x.id == cameraId)
- const dialogRef = this.dialog.open(EditCameraComponent, {
- data: cameraToEdit
- });
+ if (!cameraToEdit) {
+ cameraToEdit = this.cameras[0]
+ }
- dialogRef.afterClosed().subscribe(result => {
- if (result) {
- let cameraToSave = this.cameras.find(x => x.id == cameraId);
+ const dialogRef = this.dialog.open(EditCameraComponent, {
+ data: cameraToEdit,
+ })
- if (!cameraToSave) {
- cameraToSave = this.cameras[0];
- }
+ dialogRef.afterClosed().subscribe((result) => {
+ if (result) {
+ let cameraToSave = this.cameras.find(x => x.id == cameraId)
- this.settingsService.upsertCamera(cameraToSave).subscribe(() => {
- this.getCameras();
- });
- }
- });
- }
+ if (!cameraToSave) {
+ cameraToSave = this.cameras[0]
+ }
- public addCamera() {
- this.openEditDialog('');
- }
+ this.settingsService.upsertCamera(cameraToSave).subscribe(() => {
+ this.getCameras()
+ })
+ }
+ })
+ }
- public deleteCamera($event: string) {
- this.settingsService.deleteCamera($event).subscribe(() => {
- this.getCameras();
- });
- }
+ public addCamera() {
+ this.openEditDialog('')
+ }
- public editCamera($event: string) {
- this.openEditDialog($event);
- }
+ public deleteCamera($event: string) {
+ this.settingsService.deleteCamera($event).subscribe(() => {
+ this.getCameras()
+ })
+ }
+
+ public editCamera($event: string) {
+ this.openEditDialog($event)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.html b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.html
index 253f5b2e..dbcff44d 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.html
@@ -15,17 +15,18 @@
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.spec.ts
index 73bad8eb..d8a11228 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/camera-mask/camera-mask.component.spec.ts
@@ -1,37 +1,37 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { CameraMaskComponent } from './camera-mask.component';
-import { CameraMaskService } from './camera-mask.service';
-import { of } from 'rxjs';
-import { CameraMask } from './camera-mask';
-import { Camera } from '../../camera';
+import { CameraMaskComponent } from './camera-mask.component'
+import { CameraMaskService } from './camera-mask.service'
+import { of } from 'rxjs'
+import { CameraMask } from './camera-mask'
+import { Camera } from '../../camera'
describe(CameraMaskComponent.name, () => {
- let component: CameraMaskComponent;
- let fixture: ComponentFixture
- Coordinates: {{camera.latitude}}°, {{camera.longitude}}°
-
-
- Next Day/Night Toggle: {{camera.dayNightNextScheduledCommand | date:"medium"}}
-
+ }
+ @if (camera.dayNightModeEnabled) {
+
+
+ }
+ Coordinates: {{camera.latitude}}°, {{camera.longitude}}°
+
+
+ Next Day/Night Toggle: {{camera.dayNightNextScheduledCommand | date:"medium"}}
+
- add_box
-
+
+ add_box
+
-
-
-
+
+ @for (camera of cameras; track camera) {
+
+
+ }
+
-
-
+ @if (samplePlates.length > 0) {
+
+
+ }
Edit Camera
OpenALPR Integration
-
-
-
- OpenALPR Name
-
-
-
- OpenALPR Id
-
-
- Overlays
-
-
+ @if (camera.openAlprEnabled) {
+
+ }
+
-
-
+
+ OpenALPR Name
+
+
+
+ OpenALPR Id
+
+
+
+
+ }
-
+
+
+ @if (isEditingMask) {
+ Overlays
-
-
-
- Camera Overlay Text Url
-
-
- Day/Night Toggle
-
-
+ @if (camera.updateOverlayEnabled) {
+
+ }
+
-
+
+ Camera Overlay Text Url
+
+
+
+
+
Day/Night Toggle
-
-
-
- Latitude
-
-
-
- Longitude
-
-
-
- Sunset Offset (minutes +/-)
-
-
-
- Sunrise Offset (minutes +/-)
-
-
-
- Timezone Offset (hours +/-)
-
-
-
- Camera Day/Night Mode Url
-
-
-
- Day Zoom
-
-
-
- Day Focus
-
-
-
- Night Zoom
-
-
-
- Night Focus
-
-
-
- Current Zoom
-
-
-
- Current Focus
-
-
- {
+ return this.http.get('/api/logs')
+ }
- getLogs(): Observable {
- return this.http.get('/api/logs');
- }
+ getPlateGroups(onlyFailedPlateGroups: boolean): Observable {
+ return this.http.get(`/api/settings/debug/plates?onlyFailedPlateGroups=${onlyFailedPlateGroups}`, { responseType: 'blob' as 'json' })
+ }
- getPlateGroups(onlyFailedPlateGroups: boolean): Observable {
- return this.http.get(`/api/settings/debug/plates?onlyFailedPlateGroups=${onlyFailedPlateGroups}`, { responseType: 'blob' as 'json' });
- }
-
- deletePlates() {
- return this.http.delete('/settings/debug/plates');
- }
+ deletePlates() {
+ return this.http.delete('/settings/debug/plates')
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/system-logs/systemLogs.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/system-logs/systemLogs.component.spec.ts
index 0523606a..2901c557 100644
--- a/openalprwebhookprocessor.client/src/app/settings/system-logs/systemLogs.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/system-logs/systemLogs.component.spec.ts
@@ -1,33 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SystemLogsComponent } from './system-logs.component';
-import { SystemLogsService } from './system-logs.service';
-import { of } from 'rxjs';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { SystemLogsComponent } from './system-logs.component'
+import { SystemLogsService } from './system-logs.service'
+import { of } from 'rxjs'
describe(SystemLogsComponent.name, () => {
- let component: SystemLogsComponent;
- let fixture: ComponentFixture;
- const systemLogsServiceSpy = jasmine.createSpyObj(SystemLogsService.name, ['getLogs']);
+ let component: SystemLogsComponent
+ let fixture: ComponentFixture
+ const systemLogsServiceSpy = jasmine.createSpyObj(SystemLogsService.name, ['getLogs'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [SystemLogsComponent],
- providers: [
- { provide: SystemLogsService, useValue: systemLogsServiceSpy }
- ]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SystemLogsComponent],
+ providers: [
+ { provide: SystemLogsService, useValue: systemLogsServiceSpy },
+ ],
+ }).compileComponents()
+ })
- beforeEach(() => {
- const logs: string[] = [];
- systemLogsServiceSpy.getLogs.and.returnValue(of(logs));
+ beforeEach(() => {
+ const logs: string[] = []
+ systemLogsServiceSpy.getLogs.and.returnValue(of(logs))
- fixture = TestBed.createComponent(SystemLogsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(SystemLogsComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(systemLogsServiceSpy.getLogs).toHaveBeenCalled();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(systemLogsServiceSpy.getLogs).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.html b/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.html
index b3067edd..0ba664f8 100644
--- a/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.html
@@ -1,42 +1,46 @@
();
- public licensePlateReceived = new Subject();
- public licensePlateAlerted = new Subject();
- public processInformationLogged = new Subject();
- public openAlprAgentConnectionStatusChanged = new Subject();
- public isConnected: boolean;
- public connectionStatusChanged: Subject = new Subject();
-
- constructor(
- private snackbarService: SnackbarService
- ) { }
-
- public startConnection() {
- this.hubConnection = new signalR.HubConnectionBuilder()
- .withUrl('/api/processorhub')
- .withAutomaticReconnect()
- .build();
-
- this.hubConnection
- .start()
- .then(() => {
- this.snackbarService.create('Connected to server!', SnackBarType.Connected);
- this.connectionEstablished.next(true);
- this.triggerConnectionStatusChange(true);
- })
- .catch(err => {
- console.log('Error while starting connection: ' + err);
- this.snackbarService.create('Connection lost', SnackBarType.Disconnected);
- });
-
- this.hubConnection.on('ProcessInformationLogged', (logMessage) => {
- this.processInformationLogged.next(logMessage);
- });
-
- this.hubConnection.on('OpenAlprAgentConnected', (agentId, ipAddress) => {
- this.openAlprAgentConnectionStatusChanged.next(true);
- this.snackbarService.create(
- `OpenALPR Agent Connected: ${agentId}`,
- SnackBarType.Connected,
- `IP Address: ${ipAddress}`);
- });
-
- this.hubConnection.on('OpenAlprAgentDisconnected', (agentId, ipAddress) => {
- this.openAlprAgentConnectionStatusChanged.next(false);
- this.snackbarService.create(
- `OpenALPR Agent Disconnected: ${agentId}`,
- SnackBarType.Disconnected,
- 'IP Address: ' + ipAddress);
- });
-
- this.hubConnection.on('LicensePlateRecorded', (plateNumber) => {
- this.licensePlateReceived.next(plateNumber);
- });
-
- this.hubConnection.on('LicensePlateAlerted', (plateNumber) => {
- this.snackbarService.create(`Alert! Plate Number: ${plateNumber}`, SnackBarType.Alert);
- });
-
- this.hubConnection.onreconnected(() => {
- console.log('Connection reconnected');
- this.snackbarService.create('Reconnected to server!', SnackBarType.Connected);
- this.triggerConnectionStatusChange(true);
- });
-
- this.hubConnection.onreconnecting(() => {
- console.log('Connection reconnecting');
- this.snackbarService.create('Reconnecting to server...', SnackBarType.Disconnected);
- this.triggerConnectionStatusChange(false);
- });
-
- this.hubConnection.onclose(() => {
- console.log('Connection ended');
- this.snackbarService.create('Connection lost', SnackBarType.Disconnected);
- this.triggerConnectionStatusChange(false);
- });
-
- this.hubConnection.on('ScrapeFinished', () => {
- console.log('Scrape finished');
- this.snackbarService.create('Scrape finished!', SnackBarType.Info);
- });
- }
-
- public stopConnection() {
- this.hubConnection
- .stop()
- .then(() => {
- this.snackbarService.create('Connection closed', SnackBarType.Disconnected);
- this.triggerConnectionStatusChange(false);
- });
- }
-
- public triggerConnectionStatusChange(isConencted: boolean) {
- this.isConnected = isConencted;
- this.connectionStatusChanged.next(this.isConnected);
- }
+ private snackbarService = inject(SnackbarService)
+
+ private hubConnection: signalR.HubConnection
+
+ public connectionEstablished = new Subject()
+ public licensePlateReceived = new Subject()
+ public licensePlateAlerted = new Subject()
+ public processInformationLogged = new Subject()
+ public openAlprAgentConnectionStatusChanged = new Subject()
+ public isConnected: boolean
+ public connectionStatusChanged: Subject = new Subject()
+
+ public startConnection() {
+ this.hubConnection = new signalR.HubConnectionBuilder()
+ .withUrl('/api/processorhub')
+ .withAutomaticReconnect()
+ .build()
+
+ this.hubConnection
+ .start()
+ .then(() => {
+ this.snackbarService.create('Connected to server!', SnackBarType.Connected)
+ this.connectionEstablished.next(true)
+ this.triggerConnectionStatusChange(true)
+ })
+ .catch((err) => {
+ console.log('Error while starting connection: ' + err)
+ this.snackbarService.create('Connection lost', SnackBarType.Disconnected)
+ })
+
+ this.hubConnection.on('ProcessInformationLogged', (logMessage) => {
+ this.processInformationLogged.next(logMessage)
+ })
+
+ this.hubConnection.on('OpenAlprAgentConnected', (agentId, ipAddress) => {
+ this.openAlprAgentConnectionStatusChanged.next(true)
+ this.snackbarService.create(
+ `OpenALPR Agent Connected: ${agentId}`,
+ SnackBarType.Connected,
+ `IP Address: ${ipAddress}`)
+ })
+
+ this.hubConnection.on('OpenAlprAgentDisconnected', (agentId, ipAddress) => {
+ this.openAlprAgentConnectionStatusChanged.next(false)
+ this.snackbarService.create(
+ `OpenALPR Agent Disconnected: ${agentId}`,
+ SnackBarType.Disconnected,
+ 'IP Address: ' + ipAddress)
+ })
+
+ this.hubConnection.on('LicensePlateRecorded', (plateNumber) => {
+ this.licensePlateReceived.next(plateNumber)
+ })
+
+ this.hubConnection.on('LicensePlateAlerted', (plateNumber) => {
+ this.snackbarService.create(`Alert! Plate Number: ${plateNumber}`, SnackBarType.Alert)
+ })
+
+ this.hubConnection.onreconnected(() => {
+ console.log('Connection reconnected')
+ this.snackbarService.create('Reconnected to server!', SnackBarType.Connected)
+ this.triggerConnectionStatusChange(true)
+ })
+
+ this.hubConnection.onreconnecting(() => {
+ console.log('Connection reconnecting')
+ this.snackbarService.create('Reconnecting to server...', SnackBarType.Disconnected)
+ this.triggerConnectionStatusChange(false)
+ })
+
+ this.hubConnection.onclose(() => {
+ console.log('Connection ended')
+ this.snackbarService.create('Connection lost', SnackBarType.Disconnected)
+ this.triggerConnectionStatusChange(false)
+ })
+
+ this.hubConnection.on('ScrapeFinished', () => {
+ console.log('Scrape finished')
+ this.snackbarService.create('Scrape finished!', SnackBarType.Info)
+ })
+ }
+
+ public stopConnection() {
+ this.hubConnection
+ .stop()
+ .then(() => {
+ this.snackbarService.create('Connection closed', SnackBarType.Disconnected)
+ this.triggerConnectionStatusChange(false)
+ })
+ }
+
+ public triggerConnectionStatusChange(isConencted: boolean) {
+ this.isConnected = isConencted
+ this.connectionStatusChanged.next(this.isConnected)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.spec.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.spec.ts
index fdd3c6f2..09e884c2 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.spec.ts
@@ -1,38 +1,38 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SnackbarComponent } from './snackbar.component';
-import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
-import { SnackBar } from './snackbar';
-import { SnackBarType } from './snackbartype';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { SnackbarComponent } from './snackbar.component'
+import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'
+import { SnackBar } from './snackbar'
+import { SnackBarType } from './snackbartype'
describe('SnackbarComponent', () => {
- let component: SnackbarComponent;
- let fixture: ComponentFixture;
+ let component: SnackbarComponent
+ let fixture: ComponentFixture
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [SnackbarComponent],
- providers: [
- {
- provide: MAT_SNACK_BAR_DATA,
- useValue: new SnackBar(
- {
- message: 'test',
- message2: 'test123',
- snackType: SnackBarType.Info
- })
- }
- ]
- })
- .compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SnackbarComponent],
+ providers: [
+ {
+ provide: MAT_SNACK_BAR_DATA,
+ useValue: new SnackBar(
+ {
+ message: 'test',
+ message2: 'test123',
+ snackType: SnackBarType.Info,
+ }),
+ },
+ ],
+ })
+ .compileComponents()
+ })
- beforeEach(() => {
- fixture = TestBed.createComponent(SnackbarComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SnackbarComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.ts
index 1da61d5e..f4434db3 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.component.ts
@@ -1,37 +1,36 @@
-import { Component, Inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
-import { SnackBarType } from './snackbartype';
-import { MatIconModule } from '@angular/material/icon';
-import { SnackBar } from './snackbar';
+import { Component, inject } from '@angular/core'
+import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar'
+import { SnackBarType } from './snackbartype'
+import { MatIconModule } from '@angular/material/icon'
+import { SnackBar } from './snackbar'
@Component({
- selector: 'app-snackbar',
- templateUrl: './snackbar.component.html',
- styleUrls: ['./snackbar.component.less'],
- standalone: true,
- imports: [MatIconModule]
+ selector: 'app-snackbar',
+ templateUrl: './snackbar.component.html',
+ styleUrls: ['./snackbar.component.less'],
+ imports: [MatIconModule],
})
export class SnackbarComponent {
- constructor(@Inject(MAT_SNACK_BAR_DATA) public data: SnackBar) { }
+ data = inject(MAT_SNACK_BAR_DATA)
- get getIcon() {
- switch (this.data.snackType) {
- case SnackBarType.Alert:
- return 'taxi_alert';
- case SnackBarType.Info:
- return 'info';
- case SnackBarType.Connected:
- return 'signal_wifi_4_bar';
- case SnackBarType.Disconnected:
- return 'signal_cellular_off';
- case SnackBarType.Saved:
- return 'saved';
- case SnackBarType.Deleted:
- return 'delete';
- case SnackBarType.Successful:
- return 'check';
- case SnackBarType.Error:
- return 'error';
- }
+ get getIcon() {
+ switch (this.data.snackType) {
+ case SnackBarType.Alert:
+ return 'taxi_alert'
+ case SnackBarType.Info:
+ return 'info'
+ case SnackBarType.Connected:
+ return 'signal_wifi_4_bar'
+ case SnackBarType.Disconnected:
+ return 'signal_cellular_off'
+ case SnackBarType.Saved:
+ return 'saved'
+ case SnackBarType.Deleted:
+ return 'delete'
+ case SnackBarType.Successful:
+ return 'check'
+ case SnackBarType.Error:
+ return 'error'
}
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.spec.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.spec.ts
index d3eb880f..6a31a980 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.spec.ts
@@ -1,16 +1,16 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { SnackbarService } from './snackbar.service';
+import { SnackbarService } from './snackbar.service'
describe('SnackbarService', () => {
- let service: SnackbarService;
+ let service: SnackbarService
- beforeEach(() => {
- TestBed.configureTestingModule({});
- service = TestBed.inject(SnackbarService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({})
+ service = TestBed.inject(SnackbarService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.ts
index d3ee56f9..a435485a 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.service.ts
@@ -1,27 +1,27 @@
-import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { SnackbarComponent } from './snackbar.component';
-import { SnackBarType } from './snackbartype';
-import { SnackBar } from './snackbar';
+import { Injectable, inject } from '@angular/core'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import { SnackbarComponent } from './snackbar.component'
+import { SnackBarType } from './snackbartype'
+import { SnackBar } from './snackbar'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class SnackbarService {
- constructor(private snackBar: MatSnackBar) { }
+ private snackBar = inject(MatSnackBar)
- create(message: string, snackBarType: SnackBarType, message2?: string) {
- this.snackBar.openFromComponent(
- SnackbarComponent,
- {
- horizontalPosition: 'right',
- verticalPosition: 'bottom',
- duration: 3000,
- data: new SnackBar({
- message: message,
- message2: message2,
- snackType: snackBarType
- })
- });
- }
+ create(message: string, snackBarType: SnackBarType, message2?: string) {
+ this.snackBar.openFromComponent(
+ SnackbarComponent,
+ {
+ horizontalPosition: 'right',
+ verticalPosition: 'bottom',
+ duration: 3000,
+ data: new SnackBar({
+ message: message,
+ message2: message2,
+ snackType: snackBarType,
+ }),
+ })
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.ts
index 064ae152..e002adc3 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbar.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbar.ts
@@ -1,11 +1,11 @@
-import { SnackBarType } from './snackbartype';
+import { SnackBarType } from './snackbartype'
export class SnackBar {
- message: string;
- message2: string;
- snackType: SnackBarType;
+ message: string
+ message2: string
+ snackType: SnackBarType
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/snackbar/snackbartype.ts b/openalprwebhookprocessor.client/src/app/snackbar/snackbartype.ts
index a7e9101a..013f268d 100644
--- a/openalprwebhookprocessor.client/src/app/snackbar/snackbartype.ts
+++ b/openalprwebhookprocessor.client/src/app/snackbar/snackbartype.ts
@@ -1,10 +1,10 @@
export enum SnackBarType {
- Info,
- Alert,
- Connected,
- Disconnected,
- Saved,
- Deleted,
- Successful,
- Error
-}
\ No newline at end of file
+ Info,
+ Alert,
+ Connected,
+ Disconnected,
+ Saved,
+ Deleted,
+ Successful,
+ Error,
+}
diff --git a/openalprwebhookprocessor.client/src/app/theme-picker/style-manager/style-manager.component.ts b/openalprwebhookprocessor.client/src/app/theme-picker/style-manager/style-manager.component.ts
index b53e3cc7..02e08914 100644
--- a/openalprwebhookprocessor.client/src/app/theme-picker/style-manager/style-manager.component.ts
+++ b/openalprwebhookprocessor.client/src/app/theme-picker/style-manager/style-manager.component.ts
@@ -1,47 +1,45 @@
-import {Injectable} from '@angular/core';
-
+import { Injectable } from '@angular/core'
/**
* Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
* removed or changed later.
*/
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class StyleManager {
-
- /**
+ /**
* Set the stylesheet with the specified key.
*/
- setStyle(key: string, href: string) {
- getLinkElementForKey(key).setAttribute('href', href);
- }
+ setStyle(key: string, href: string) {
+ getLinkElementForKey(key).setAttribute('href', href)
+ }
- /**
+ /**
* Remove the stylesheet with the specified key.
*/
- removeStyle(key: string) {
- const existingLinkElement = getExistingLinkElementByKey(key);
- if (existingLinkElement) {
- document.head.removeChild(existingLinkElement);
- }
+ removeStyle(key: string) {
+ const existingLinkElement = getExistingLinkElementByKey(key)
+ if (existingLinkElement) {
+ document.head.removeChild(existingLinkElement)
}
+ }
}
function getLinkElementForKey(key: string) {
- return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+ return getExistingLinkElementByKey(key) || createLinkElementWithKey(key)
}
function getExistingLinkElementByKey(key: string) {
- return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+ return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`)
}
function createLinkElementWithKey(key: string) {
- const linkEl = document.createElement('link');
- linkEl.setAttribute('rel', 'stylesheet');
- linkEl.classList.add(getClassNameForKey(key));
- document.head.appendChild(linkEl);
- return linkEl;
+ const linkEl = document.createElement('link')
+ linkEl.setAttribute('rel', 'stylesheet')
+ linkEl.classList.add(getClassNameForKey(key))
+ document.head.appendChild(linkEl)
+ return linkEl
}
function getClassNameForKey(key: string) {
- return `style-manager-${key}`;
-}
\ No newline at end of file
+ return `style-manager-${key}`
+}
diff --git a/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.html b/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.html
index 2f12bd4c..34bb0b72 100644
--- a/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.html
+++ b/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.html
@@ -3,11 +3,13 @@
Theme
-
+ @for (theme of themes; track theme) {
+
+ }
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.ts b/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.ts
index bb1ac192..2e83bd0c 100644
--- a/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.ts
+++ b/openalprwebhookprocessor.client/src/app/theme-picker/theme-picker.component.ts
@@ -1,126 +1,124 @@
-import {
- ChangeDetectionStrategy,
- Component,
- OnDestroy,
- OnInit,
- ViewEncapsulation
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation, inject } from '@angular/core'
-import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {CommonModule, NgFor} from '@angular/common';
-import {ActivatedRoute, ParamMap} from '@angular/router';
-import {Subscription} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {DomSanitizer} from '@angular/platform-browser';
-import {LiveAnnouncer} from '@angular/cdk/a11y';
-import { StyleManager } from './style-manager/style-manager.component';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatListModule } from '@angular/material/list';
+import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage'
+import { MatButtonModule } from '@angular/material/button'
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon'
+import { MatMenuModule } from '@angular/material/menu'
+import { MatTooltipModule } from '@angular/material/tooltip'
+
+import { ActivatedRoute, ParamMap } from '@angular/router'
+import { Subscription } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { DomSanitizer } from '@angular/platform-browser'
+import { LiveAnnouncer } from '@angular/cdk/a11y'
+import { StyleManager } from './style-manager/style-manager.component'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatListModule } from '@angular/material/list'
@Component({
- selector: 'app-theme-picker',
- templateUrl: './theme-picker.component.html',
- styleUrls: ['./theme-picker.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- encapsulation: ViewEncapsulation.None,
- standalone: true,
- imports: [CommonModule, MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule, NgFor, MatRadioModule, MatListModule]
+ selector: 'app-theme-picker',
+ templateUrl: './theme-picker.component.html',
+ styleUrls: ['./theme-picker.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule, MatRadioModule, MatListModule],
})
export class ThemePickerComponent implements OnInit, OnDestroy {
- private _queryParamSubscription = Subscription.EMPTY;
- currentTheme: DocsSiteTheme | undefined;
+ styleManager = inject(StyleManager)
+ private _themeStorage = inject(ThemeStorage)
+ private _activatedRoute = inject(ActivatedRoute)
+ private liveAnnouncer = inject(LiveAnnouncer)
- // The below colors need to align with the themes defined in theme-picker.scss
- themes: DocsSiteTheme[] = [
- {
- primary: '#673AB7',
- accent: '#FFC107',
- displayName: 'Deep Purple & Amber',
- name: 'deeppurple-amber',
- isDark: false
- },
- {
- primary: '#3F51B5',
- accent: '#E91E63',
- displayName: 'Indigo & Pink',
- name: 'indigo-pink',
- isDark: false,
- isDefault: true
- },
- {
- primary: '#E91E63',
- accent: '#607D8B',
- displayName: 'Pink & Blue-grey',
- name: 'pink-bluegrey',
- isDark: true
- },
- {
- primary: '#9C27B0',
- accent: '#4CAF50',
- displayName: 'Purple & Green',
- name: 'purple-green',
- isDark: true
- }
- ];
+ private _queryParamSubscription = Subscription.EMPTY
+ currentTheme: DocsSiteTheme | undefined
- constructor(public styleManager: StyleManager,
- private _themeStorage: ThemeStorage,
- private _activatedRoute: ActivatedRoute,
- private liveAnnouncer: LiveAnnouncer,
- iconRegistry: MatIconRegistry,
- sanitizer: DomSanitizer) {
- iconRegistry.addSvgIcon('theme-example',
- sanitizer.bypassSecurityTrustResourceUrl(
- 'assets/img/theme-demo-icon.svg'));
-
- const themeName = this._themeStorage.getStoredThemeName();
- if (themeName) {
- this.selectTheme(themeName);
- } else {
- this.themes.find(themes => {
- if (themes.isDefault === true) {
- this.selectTheme(themes.name);
- }
- });
+ // The below colors need to align with the themes defined in theme-picker.scss
+ themes: DocsSiteTheme[] = [
+ {
+ primary: '#673AB7',
+ accent: '#FFC107',
+ displayName: 'Deep Purple & Amber',
+ name: 'deeppurple-amber',
+ isDark: false,
+ },
+ {
+ primary: '#3F51B5',
+ accent: '#E91E63',
+ displayName: 'Indigo & Pink',
+ name: 'indigo-pink',
+ isDark: false,
+ isDefault: true,
+ },
+ {
+ primary: '#E91E63',
+ accent: '#607D8B',
+ displayName: 'Pink & Blue-grey',
+ name: 'pink-bluegrey',
+ isDark: true,
+ },
+ {
+ primary: '#9C27B0',
+ accent: '#4CAF50',
+ displayName: 'Purple & Green',
+ name: 'purple-green',
+ isDark: true,
+ },
+ ]
+
+ constructor() {
+ const iconRegistry = inject(MatIconRegistry)
+ const sanitizer = inject(DomSanitizer)
+
+ iconRegistry.addSvgIcon('theme-example',
+ sanitizer.bypassSecurityTrustResourceUrl(
+ 'assets/img/theme-demo-icon.svg'))
+
+ const themeName = this._themeStorage.getStoredThemeName()
+ if (themeName) {
+ this.selectTheme(themeName)
+ }
+ else {
+ this.themes.find((themes) => {
+ if (themes.isDefault === true) {
+ this.selectTheme(themes.name)
}
+ })
}
+ }
- ngOnInit() {
- this._queryParamSubscription = this._activatedRoute.queryParamMap
- .pipe(map((params: ParamMap) => params.get('theme')))
- .subscribe((themeName: string | null) => {
- if (themeName) {
- this.selectTheme(themeName);
- }
- });
- }
+ ngOnInit() {
+ this._queryParamSubscription = this._activatedRoute.queryParamMap
+ .pipe(map((params: ParamMap) => params.get('theme')))
+ .subscribe((themeName: string | null) => {
+ if (themeName) {
+ this.selectTheme(themeName)
+ }
+ })
+ }
- ngOnDestroy() {
- this._queryParamSubscription.unsubscribe();
- }
+ ngOnDestroy() {
+ this._queryParamSubscription.unsubscribe()
+ }
- selectTheme(themeName: string) {
- const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
+ selectTheme(themeName: string) {
+ const theme = this.themes.find(currentTheme => currentTheme.name === themeName)
- if (!theme) {
- return;
- }
+ if (!theme) {
+ return
+ }
- this.currentTheme = theme;
+ this.currentTheme = theme
- if (theme.isDefault) {
- this.styleManager.removeStyle('theme');
- } else {
- this.styleManager.setStyle('theme', `${theme.name}.css`);
- }
+ if (theme.isDefault) {
+ this.styleManager.removeStyle('theme')
+ }
+ else {
+ this.styleManager.setStyle('theme', `${theme.name}.css`)
+ }
- if (this.currentTheme) {
- this.liveAnnouncer.announce(`${theme.displayName} theme selected.`, 'polite', 3000);
- this._themeStorage.storeTheme(this.currentTheme);
- }
+ if (this.currentTheme) {
+ this.liveAnnouncer.announce(`${theme.displayName} theme selected.`, 'polite', 3000)
+ this._themeStorage.storeTheme(this.currentTheme)
}
-}
\ No newline at end of file
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/theme-picker/theme-storage/theme-storage.ts b/openalprwebhookprocessor.client/src/app/theme-picker/theme-storage/theme-storage.ts
index 33a337e9..209a739a 100644
--- a/openalprwebhookprocessor.client/src/app/theme-picker/theme-storage/theme-storage.ts
+++ b/openalprwebhookprocessor.client/src/app/theme-picker/theme-storage/theme-storage.ts
@@ -1,44 +1,46 @@
-import {Injectable, EventEmitter} from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core'
export interface DocsSiteTheme {
- name: string;
- displayName?: string;
- accent: string;
- primary: string;
- isDark?: boolean;
- isDefault?: boolean;
+ name: string
+ displayName?: string
+ accent: string
+ primary: string
+ isDark?: boolean
+ isDefault?: boolean
}
-
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class ThemeStorage {
- static storageKey = 'docs-theme-storage-current-name';
-
- onThemeUpdate: EventEmitter = new EventEmitter();
+ static storageKey = 'docs-theme-storage-current-name'
- storeTheme(theme: DocsSiteTheme) {
- try {
- window.localStorage[ThemeStorage.storageKey] = theme.name;
- } catch {
- undefined;
- }
+ onThemeUpdate: EventEmitter = new EventEmitter()
- this.onThemeUpdate.emit(theme);
+ storeTheme(theme: DocsSiteTheme) {
+ try {
+ window.localStorage[ThemeStorage.storageKey] = theme.name
}
+ catch {
+ // ignore
+ }
+
+ this.onThemeUpdate.emit(theme)
+ }
- getStoredThemeName(): string | null {
- try {
- return window.localStorage[ThemeStorage.storageKey] || null;
- } catch {
- return null;
- }
+ getStoredThemeName(): string | null {
+ try {
+ return window.localStorage[ThemeStorage.storageKey] || null
}
+ catch {
+ return null
+ }
+ }
- clearStorage() {
- try {
- window.localStorage.removeItem(ThemeStorage.storageKey);
- } catch {
- undefined;
- }
+ clearStorage() {
+ try {
+ window.localStorage.removeItem(ThemeStorage.storageKey)
+ }
+ catch {
+ // ignore
}
-}
\ No newline at end of file
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/environments/environment.prod.ts b/openalprwebhookprocessor.client/src/environments/environment.prod.ts
index 5d083316..970e25bd 100644
--- a/openalprwebhookprocessor.client/src/environments/environment.prod.ts
+++ b/openalprwebhookprocessor.client/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
export const environment = {
- production: true
-};
+ production: true,
+}
diff --git a/openalprwebhookprocessor.client/src/environments/environment.ts b/openalprwebhookprocessor.client/src/environments/environment.ts
index 671c5103..a868a1f9 100644
--- a/openalprwebhookprocessor.client/src/environments/environment.ts
+++ b/openalprwebhookprocessor.client/src/environments/environment.ts
@@ -1,3 +1,3 @@
export const environment = {
- production: false
-};
\ No newline at end of file
+ production: false,
+}
diff --git a/openalprwebhookprocessor.client/src/main.ts b/openalprwebhookprocessor.client/src/main.ts
index 418dd739..6b5f2043 100644
--- a/openalprwebhookprocessor.client/src/main.ts
+++ b/openalprwebhookprocessor.client/src/main.ts
@@ -1,82 +1,85 @@
-import { enableProdMode, APP_INITIALIZER, isDevMode, importProvidersFrom } from '@angular/core';
-import { environment } from './environments/environment';
-import { AppComponent } from './app/app.component';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatButtonModule } from '@angular/material/button';
-import { LightboxModule } from 'ngx-lightbox';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AppRoutingModule } from './app/app-routing.module';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
-import { JwtInterceptor, ErrorInterceptor } from './app/_helpers';
-import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
-import { AccountService } from './app/_services';
-import { appInitializer } from './app/_helpers/app.initializer';
-import { DatePipe } from '@angular/common';
+import { enableProdMode, isDevMode, importProvidersFrom, inject, provideAppInitializer } from '@angular/core'
+import { environment } from './environments/environment'
+import { AppComponent } from './app/app.component'
+import { ServiceWorkerModule } from '@angular/service-worker'
+import { NgxChartsModule } from '@swimlane/ngx-charts'
+import { MatExpansionModule } from '@angular/material/expansion'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatSnackBarModule } from '@angular/material/snack-bar'
+import { MatSlideToggleModule } from '@angular/material/slide-toggle'
+import { MatDividerModule } from '@angular/material/divider'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatCardModule } from '@angular/material/card'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTabsModule } from '@angular/material/tabs'
+import { MatButtonModule } from '@angular/material/button'
+import { LightboxModule } from 'ngx-lightbox'
+import { MatAutocompleteModule } from '@angular/material/autocomplete'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { AppRoutingModule } from './app/app-routing.module'
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'
+import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs'
+import { JwtInterceptor, ErrorInterceptor } from './app/_helpers'
+import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'
+import { AccountService } from './app/_services'
+import { appInitializer } from './app/_helpers/app.initializer'
+import { DatePipe } from '@angular/common'
if (environment.production) {
- enableProdMode();
+ enableProdMode()
}
bootstrapApplication(AppComponent, {
- providers: [
- importProvidersFrom(
- BrowserModule,
- AppRoutingModule,
- FormsModule,
- ReactiveFormsModule,
- MatAutocompleteModule,
- LightboxModule,
- MatButtonModule,
- MatTabsModule,
- MatIconModule,
- MatCardModule,
- MatDatepickerModule,
- MatInputModule,
- MatFormFieldModule,
- MatCheckboxModule,
- MatDividerModule,
- MatSlideToggleModule,
- MatSnackBarModule,
- MatProgressSpinnerModule,
- MatExpansionModule,
- NgxChartsModule,
- HighlightModule,
- ServiceWorkerModule.register('ngsw-worker.js', {
- enabled: !isDevMode(),
- registrationStrategy: 'registerWhenStable:30'
- })
- ),
- DatePipe,
- { provide: APP_INITIALIZER, useFactory: appInitializer, multi: true, deps: [AccountService] },
- { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
- {
- provide: HIGHLIGHT_OPTIONS,
- useValue: {
- coreLibraryLoader: () => import('highlight.js/lib/core'),
- languages: {
- plaintext: () => import('highlight.js/lib/languages/plaintext')
- }
- }
+ providers: [
+ importProvidersFrom(
+ BrowserModule,
+ AppRoutingModule,
+ FormsModule,
+ ReactiveFormsModule,
+ MatAutocompleteModule,
+ LightboxModule,
+ MatButtonModule,
+ MatTabsModule,
+ MatIconModule,
+ MatCardModule,
+ MatDatepickerModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatCheckboxModule,
+ MatDividerModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatProgressSpinnerModule,
+ MatExpansionModule,
+ NgxChartsModule,
+ HighlightModule,
+ ServiceWorkerModule.register('ngsw-worker.js', {
+ enabled: !isDevMode(),
+ registrationStrategy: 'registerWhenStable:30',
+ }),
+ ),
+ DatePipe,
+ provideAppInitializer(() => {
+ const initializerFn = appInitializer(inject(AccountService))
+ return initializerFn()
+ }),
+ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+ { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+ {
+ provide: HIGHLIGHT_OPTIONS,
+ useValue: {
+ coreLibraryLoader: () => import('highlight.js/lib/core'),
+ languages: {
+ plaintext: () => import('highlight.js/lib/languages/plaintext'),
},
- provideHttpClient(withInterceptorsFromDi()),
- provideAnimations()
- ]
+ },
+ },
+ provideHttpClient(withInterceptorsFromDi()),
+ provideAnimations(),
+ ],
})
- .catch(err => console.error(err));
\ No newline at end of file
+ .catch(err => console.error(err))
diff --git a/openalprwebhookprocessor.client/src/test.ts b/openalprwebhookprocessor.client/src/test.ts
index a9805253..87721139 100644
--- a/openalprwebhookprocessor.client/src/test.ts
+++ b/openalprwebhookprocessor.client/src/test.ts
@@ -1,25 +1,25 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
+import 'zone.js/dist/zone-testing'
+import { getTestBed } from '@angular/core/testing'
import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'
declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- keys(): string[];
- (id: string): T;
- };
-};
+ context(path: string, deep?: boolean, filter?: RegExp): {
+ keys(): string[]
+ (id: string): T
+ }
+}
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
-);
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting(),
+)
// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
+const context = require.context('./', true, /\.spec\.ts$/)
// And load the modules.
-context.keys().map(context);
+context.keys().map(context)
diff --git a/openalprwebhookprocessor.client/tsconfig.json b/openalprwebhookprocessor.client/tsconfig.json
index 69303361..940f7b2d 100644
--- a/openalprwebhookprocessor.client/tsconfig.json
+++ b/openalprwebhookprocessor.client/tsconfig.json
@@ -5,6 +5,7 @@
"baseUrl": "./src",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
+ "esModuleInterop": true,
"strict": true,
"noImplicitAny": false,
"noImplicitOverride": true,
@@ -12,9 +13,8 @@
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
- "downlevelIteration": true,
"experimentalDecorators": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"importHelpers": true,
"strictPropertyInitialization": false,
"target": "ES2022",
@@ -25,8 +25,12 @@
"dom"
],
"paths": {
- "app/*": ["./app/*"],
- "environments/*": ["./environments/*"]
+ "app/*": [
+ "./app/*"
+ ],
+ "environments/*": [
+ "./environments/*"
+ ]
}
},
"angularCompilerOptions": {
-
-
-
-
-
+ @if (camera.dayNightModeEnabled) {
+
+ }
+
-
+
+ Latitude
+
+
+
+ Longitude
+
+
+
+ Sunset Offset (minutes +/-)
+
+
+
+ Sunrise Offset (minutes +/-)
+
+
+
+ Timezone Offset (hours +/-)
+
+
+
+ Camera Day/Night Mode Url
+
+
+
+ Day Zoom
+
+
+
+ Day Focus
+
+
+
+ Night Zoom
+
+
+
+ Night Focus
+
+
+
+ Current Zoom
+
+
+
+ Current Focus
+
+
+
+
+
+
+
+
+
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.spec.ts
index 0dfa4560..a6040b14 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.spec.ts
@@ -1,35 +1,35 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EditCameraComponent } from './edit-camera.component';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { EditCameraService } from './edit-camera.service';
-import { Camera } from '../camera';
-import { of } from 'rxjs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { EditCameraComponent } from './edit-camera.component'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
+import { EditCameraService } from './edit-camera.service'
+import { Camera } from '../camera'
+import { of } from 'rxjs'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
describe(EditCameraComponent.name, () => {
- let component: EditCameraComponent;
- let fixture: ComponentFixture;
- const editCameraServiceSpy = jasmine.createSpyObj(EditCameraService.name, ['getZoomAndFocus']);
+ let component: EditCameraComponent
+ let fixture: ComponentFixture
+ const editCameraServiceSpy = jasmine.createSpyObj(EditCameraService.name, ['getZoomAndFocus'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [EditCameraComponent, BrowserAnimationsModule],
- providers: [
- { provide: MatDialogRef, useValue: {} },
- { provide: MAT_DIALOG_DATA, useValue: {} },
- { provide: EditCameraService, useValue: editCameraServiceSpy }
- ]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [EditCameraComponent, BrowserAnimationsModule],
+ providers: [
+ { provide: MatDialogRef, useValue: {} },
+ { provide: MAT_DIALOG_DATA, useValue: {} },
+ { provide: EditCameraService, useValue: editCameraServiceSpy },
+ ],
+ }).compileComponents()
+ })
- beforeEach(() => {
- editCameraServiceSpy.getZoomAndFocus.and.returnValue(of(new Camera()));
- fixture = TestBed.createComponent(EditCameraComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ editCameraServiceSpy.getZoomAndFocus.and.returnValue(of(new Camera()))
+ fixture = TestBed.createComponent(EditCameraComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.ts
index 6d6c17ad..4514114c 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.component.ts
@@ -1,99 +1,96 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Camera } from '../camera';
-import { EditCameraService } from './edit-camera.service';
-import { ZoomFocus } from './zoomfocus';
-import { CameraMaskComponent } from './camera-mask/camera-mask.component';
-import { MatButtonModule } from '@angular/material/button';
-import { NgIf } from '@angular/common';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatOptionModule } from '@angular/material/core';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { animate, style, transition, trigger } from '@angular/animations'
+import { Component, OnInit, inject } from '@angular/core'
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Camera } from '../camera'
+import { EditCameraService } from './edit-camera.service'
+import { ZoomFocus } from './zoomfocus'
+import { CameraMaskComponent } from './camera-mask/camera-mask.component'
+import { MatButtonModule } from '@angular/material/button'
+
+import { MatSlideToggleModule } from '@angular/material/slide-toggle'
+import { MatIconModule } from '@angular/material/icon'
+import { MatInputModule } from '@angular/material/input'
+import { MatOptionModule } from '@angular/material/core'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatSelectModule } from '@angular/material/select'
+import { MatFormFieldModule } from '@angular/material/form-field'
@Component({
- selector: 'app-edit-camera',
- templateUrl: './edit-camera.component.html',
- styleUrls: ['./edit-camera.component.less'],
- animations: [
- trigger('inOutAnimation', [
- transition(':enter', [
- style({ height: 0, opacity: 0 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 }))
- ]),
- transition(':leave', [
- style({ height: '*', opacity: 1 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 }))
- ])
- ])
- ],
- standalone: true,
- imports: [MatDialogModule, MatFormFieldModule, MatSelectModule, ReactiveFormsModule, FormsModule, MatOptionModule, MatInputModule, MatIconModule, MatSlideToggleModule, NgIf, MatButtonModule, CameraMaskComponent]
+ selector: 'app-edit-camera',
+ templateUrl: './edit-camera.component.html',
+ styleUrls: ['./edit-camera.component.less'],
+ animations: [
+ trigger('inOutAnimation', [
+ transition(':enter', [
+ style({ height: 0, opacity: 0 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 })),
+ ]),
+ transition(':leave', [
+ style({ height: '*', opacity: 1 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 })),
+ ]),
+ ]),
+ ],
+ imports: [MatDialogModule, MatFormFieldModule, MatSelectModule, ReactiveFormsModule, FormsModule, MatOptionModule, MatInputModule, MatIconModule, MatSlideToggleModule, MatButtonModule, CameraMaskComponent],
})
export class EditCameraComponent implements OnInit {
- public camera: Camera;
- public hidePassword: boolean = true;
- public currentZoomFocus: ZoomFocus = new ZoomFocus();
- public isEditingMask: boolean = false;
-
- constructor(
- public dialogRef: MatDialogRef,
- private snackBarService: SnackbarService,
- private editCameraService: EditCameraService,
+ dialogRef = inject>(MatDialogRef)
+ private snackBarService = inject(SnackbarService)
+ private editCameraService = inject(EditCameraService)
+ data = inject(MAT_DIALOG_DATA)
- @Inject(MAT_DIALOG_DATA) public data: Camera) { }
+ public camera: Camera
+ public hidePassword = true
+ public currentZoomFocus: ZoomFocus = new ZoomFocus()
+ public isEditingMask = false
- ngOnInit(): void {
- this.camera = this.data;
- this.getZoomFocus();
- }
+ ngOnInit(): void {
+ this.camera = this.data
+ this.getZoomFocus()
+ }
- public triggerDayMode() {
- this.editCameraService.triggerDayMode(this.camera.id).subscribe(() => {
- this.snackBarService.create('day mode test sent successfully', SnackBarType.Info);
- });
- }
+ public triggerDayMode() {
+ this.editCameraService.triggerDayMode(this.camera.id).subscribe(() => {
+ this.snackBarService.create('day mode test sent successfully', SnackBarType.Info)
+ })
+ }
- public triggerNightMode() {
- this.editCameraService.triggerNightMode(this.camera.id).subscribe(() => {
- this.snackBarService.create('night mode test sent successfully', SnackBarType.Info);
- });
- }
+ public triggerNightMode() {
+ this.editCameraService.triggerNightMode(this.camera.id).subscribe(() => {
+ this.snackBarService.create('night mode test sent successfully', SnackBarType.Info)
+ })
+ }
- public testOverlay() {
- this.editCameraService.triggerTestOverlay(this.camera.id).subscribe(() => {
- this.snackBarService.create('overlay test sent successfully', SnackBarType.Info);
- });
- }
+ public testOverlay() {
+ this.editCameraService.triggerTestOverlay(this.camera.id).subscribe(() => {
+ this.snackBarService.create('overlay test sent successfully', SnackBarType.Info)
+ })
+ }
- public getZoomFocus() {
- this.editCameraService.getZoomAndFocus(this.camera.id).subscribe(result => {
- this.currentZoomFocus = result;
- });
- }
+ public getZoomFocus() {
+ this.editCameraService.getZoomAndFocus(this.camera.id).subscribe((result) => {
+ this.currentZoomFocus = result
+ })
+ }
- public setZoomFocus() {
- this.editCameraService.setZoomAndFocus(this.camera.id, this.currentZoomFocus).subscribe(() => {
- this.getZoomFocus();
- });
- }
+ public setZoomFocus() {
+ this.editCameraService.setZoomAndFocus(this.camera.id, this.currentZoomFocus).subscribe(() => {
+ this.getZoomFocus()
+ })
+ }
- public triggerAutofocus() {
- this.editCameraService.triggerAutofocus(this.camera.id).subscribe(() => {
- this.getZoomFocus();
- },
- () => {
- this.snackBarService.create('auto focus failed', SnackBarType.Error);
- });
- }
+ public triggerAutofocus() {
+ this.editCameraService.triggerAutofocus(this.camera.id).subscribe(() => {
+ this.getZoomFocus()
+ },
+ () => {
+ this.snackBarService.create('auto focus failed', SnackBarType.Error)
+ })
+ }
- public editMask() {
- this.isEditingMask = !this.isEditingMask;
- }
-}
\ No newline at end of file
+ public editMask() {
+ this.isEditingMask = !this.isEditingMask
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.service.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.service.ts
index 56566e4f..3430c9f0 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/edit-camera.service.ts
@@ -1,36 +1,35 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ZoomFocus } from './zoomfocus';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { ZoomFocus } from './zoomfocus'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class EditCameraService {
-
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- triggerDayMode(cameraId: string) {
- return this.http.post(`/api/cameras/${cameraId}/test/day`, null);
- }
+ triggerDayMode(cameraId: string) {
+ return this.http.post(`/api/cameras/${cameraId}/test/day`, null)
+ }
- triggerNightMode(cameraId: string) {
- return this.http.post(`/api/cameras/${cameraId}/test/night`, null);
- }
+ triggerNightMode(cameraId: string) {
+ return this.http.post(`/api/cameras/${cameraId}/test/night`, null)
+ }
- triggerTestOverlay(cameraId: string) {
- return this.http.post(`/api/cameras/${cameraId}/test/overlay`, null);
- }
+ triggerTestOverlay(cameraId: string) {
+ return this.http.post(`/api/cameras/${cameraId}/test/overlay`, null)
+ }
- getZoomAndFocus(cameraId: string): Observable {
- return this.http.get(`/api/cameras/${cameraId}/zoomAndFocus`);
- }
+ getZoomAndFocus(cameraId: string): Observable {
+ return this.http.get(`/api/cameras/${cameraId}/zoomAndFocus`)
+ }
- setZoomAndFocus(cameraId: string, zoomFocus: ZoomFocus) {
- return this.http.post(`/api/cameras/${cameraId}/zoomAndFocus`, zoomFocus);
- }
-
- triggerAutofocus(cameraId: string) {
- return this.http.post(`/api/cameras/${cameraId}/triggerAutofocus`, null);
- }
+ setZoomAndFocus(cameraId: string, zoomFocus: ZoomFocus) {
+ return this.http.post(`/api/cameras/${cameraId}/zoomAndFocus`, zoomFocus)
+ }
+
+ triggerAutofocus(cameraId: string) {
+ return this.http.post(`/api/cameras/${cameraId}/triggerAutofocus`, null)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/zoomfocus.ts b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/zoomfocus.ts
index 5d8dfecb..d44d1996 100644
--- a/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/zoomfocus.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/cameras/edit-camera/zoomfocus.ts
@@ -1,4 +1,4 @@
export class ZoomFocus {
- zoom: number;
- focus: number;
-}
\ No newline at end of file
+ zoom: number
+ focus: number
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enricher.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enricher.ts
index a3dcddb5..2e1a8571 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enricher.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enricher.ts
@@ -1,12 +1,12 @@
-import { EnrichmentType } from './enrichmentType';
+import { EnrichmentType } from './enrichmentType'
export class Enricher {
- id: string;
- isEnabled: boolean;
- apiKey: string;
- enrichmentType: EnrichmentType;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ id: string
+ isEnabled: boolean
+ apiKey: string
+ enrichmentType: EnrichmentType
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.html b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.html
index 8e17db64..d8a87a15 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.html
@@ -1,36 +1,46 @@
-;
- const enrichersServiceSpy = jasmine.createSpyObj(EnrichersComponent.name, ['getEnricher']);
+ let component: EnrichersComponent
+ let fixture: ComponentFixture
+ const enrichersServiceSpy = jasmine.createSpyObj(EnrichersComponent.name, ['getEnricher'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [EnrichersComponent],
- providers: [
- { provide: EnrichersService, useValue: enrichersServiceSpy }
- ]
- })
- .compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [EnrichersComponent],
+ providers: [
+ { provide: EnrichersService, useValue: enrichersServiceSpy },
+ ],
+ })
+ .compileComponents()
+ })
- beforeEach(() => {
- enrichersServiceSpy.getEnricher.and.returnValue(of(new Enricher()));
- fixture = TestBed.createComponent(EnrichersComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ enrichersServiceSpy.getEnricher.and.returnValue(of(new Enricher()))
+ fixture = TestBed.createComponent(EnrichersComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(enrichersServiceSpy.getEnricher).toHaveBeenCalled();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(enrichersServiceSpy.getEnricher).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.ts
index b7febc2b..dd5afe32 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.ts
@@ -1,97 +1,95 @@
-import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
-import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Enricher } from './enricher';
-import { EnrichersService } from './enrichers.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
-import { NgIf } from '@angular/common';
+import { animate, style, transition, trigger } from '@angular/animations'
+import { Component, OnInit, inject } from '@angular/core'
+import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Enricher } from './enricher'
+import { EnrichersService } from './enrichers.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatRadioModule } from '@angular/material/radio'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { MatIconModule } from '@angular/material/icon'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatCardModule } from '@angular/material/card'
@Component({
- selector: 'app-enrichers',
- templateUrl: './enrichers.component.html',
- styleUrls: ['./enrichers.component.less'],
- animations: [
- trigger('inOutAnimation', [
- transition(':enter', [
- style({ height: 0, opacity: 0 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 }))
- ]),
- transition(':leave', [
- style({ height: '*', opacity: 1 }),
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 }))
- ])
- ])
- ],
- standalone: true,
- imports: [NgIf, MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatRadioModule, MatButtonModule]
+ selector: 'app-enrichers',
+ templateUrl: './enrichers.component.html',
+ styleUrls: ['./enrichers.component.less'],
+ animations: [
+ trigger('inOutAnimation', [
+ transition(':enter', [
+ style({ height: 0, opacity: 0 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: '*', opacity: 1 })),
+ ]),
+ transition(':leave', [
+ style({ height: '*', opacity: 1 }),
+ animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ height: 0, opacity: 0 })),
+ ]),
+ ]),
+ ],
+ imports: [MatCardModule, MatSlideToggleModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatRadioModule, MatButtonModule],
})
export class EnrichersComponent implements OnInit {
- public isTesting: boolean;
- public isSaving: boolean;
+ private enricherService = inject(EnrichersService)
+ private snackbarService = inject(SnackbarService)
- public enricher: Enricher;
-
- constructor(
- private enricherService: EnrichersService,
- private snackbarService: SnackbarService) { }
+ public isTesting: boolean
+ public isSaving: boolean
- ngOnInit(): void {
- this.getEnricher();
- }
+ public enricher: Enricher
- private getEnricher() {
- this.enricherService.getEnricher().subscribe(result => {
- this.enricher = result;
- });
- }
+ ngOnInit(): void {
+ this.getEnricher()
+ }
- public testEnricher() {
- this.isTesting = true;
+ private getEnricher() {
+ this.enricherService.getEnricher().subscribe((result) => {
+ this.enricher = result
+ })
+ }
- this.enricherService.testEnricher(this.enricher.id).subscribe(result => {
- this.isTesting = false;
+ public testEnricher() {
+ this.isTesting = true
- if (result) {
- this.snackbarService.create('Enricher test succeeded.', SnackBarType.Saved);
- } else {
- this.snackbarService.create('Enricher test failed, check the logs.', SnackBarType.Error);
- }
- }, () => {
- this.isSaving = false;
- this.snackbarService.create('Enricher test failed, check the logs.', SnackBarType.Error);
- });
- }
+ this.enricherService.testEnricher(this.enricher.id).subscribe((result) => {
+ this.isTesting = false
- public saveEnricher() {
- this.isSaving = true;
+ if (result) {
+ this.snackbarService.create('Enricher test succeeded.', SnackBarType.Saved)
+ }
+ else {
+ this.snackbarService.create('Enricher test failed, check the logs.', SnackBarType.Error)
+ }
+ }, () => {
+ this.isSaving = false
+ this.snackbarService.create('Enricher test failed, check the logs.', SnackBarType.Error)
+ })
+ }
- this.enricherService.upsertEnricher(this.enricher).subscribe(() => {
- this.isSaving = false;
- this.snackbarService.create('Enricher client saved.', SnackBarType.Successful);
- this.getEnricher();
- },
- () => {
- this.isSaving = false;
- this.snackbarService.create('Enricher client test failed, check the logs.', SnackBarType.Error);
- });
- }
+ public saveEnricher() {
+ this.isSaving = true
+
+ this.enricherService.upsertEnricher(this.enricher).subscribe(() => {
+ this.isSaving = false
+ this.snackbarService.create('Enricher client saved.', SnackBarType.Successful)
+ this.getEnricher()
+ },
+ () => {
+ this.isSaving = false
+ this.snackbarService.create('Enricher client test failed, check the logs.', SnackBarType.Error)
+ })
+ }
- public onEnricherToggle(event: MatSlideToggleChange) {
- if (!event.checked) {
- this.enricher.isEnabled = event.checked;
- this.isSaving = true;
- this.enricherService.upsertEnricher(this.enricher).subscribe(() => {
- this.isSaving = false;
- });
- }
+ public onEnricherToggle(event: MatSlideToggleChange) {
+ if (!event.checked) {
+ this.enricher.isEnabled = event.checked
+ this.isSaving = true
+ this.enricherService.upsertEnricher(this.enricher).subscribe(() => {
+ this.isSaving = false
+ })
}
-}
\ No newline at end of file
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.spec.ts
index e1f2946c..fec2d7a5 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.spec.ts
@@ -1,19 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { EnrichersService } from './enrichers.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { EnrichersService } from './enrichers.service'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe('EnrichersService', () => {
- let service: EnrichersService;
+ let service: EnrichersService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule]
- });
- service = TestBed.inject(EnrichersService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ service = TestBed.inject(EnrichersService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.ts
index faf996a5..917dc6a8 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.service.ts
@@ -1,24 +1,23 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Enricher } from './enricher';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Enricher } from './enricher'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class EnrichersService {
+ private http = inject(HttpClient)
- constructor(private http: HttpClient) { }
+ public getEnricher(): Observable {
+ return this.http.get('/api/settings/enrichers')
+ }
- public getEnricher(): Observable {
- return this.http.get('/api/settings/enrichers');
- }
+ public upsertEnricher(enricher: Enricher): Observable {
+ return this.http.post('/api/settings/enrichers', enricher)
+ }
- public upsertEnricher(enricher: Enricher): Observable {
- return this.http.post('/api/settings/enrichers', enricher);
- }
-
- public testEnricher(enricherId: string): Observable {
- return this.http.post(`/api/settings/enrichers/${enricherId}/test`, null);
- }
+ public testEnricher(enricherId: string): Observable {
+ return this.http.post(`/api/settings/enrichers/${enricherId}/test`, null)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichmentType.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichmentType.ts
index 9fd9b71d..55f5e3b6 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichmentType.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichmentType.ts
@@ -1,6 +1,6 @@
export enum EnrichmentType {
- Unknown = 0,
- Always = 'Always',
- OnlyAtNight = 'OnlyAtNight',
- Manually = 'Manually'
-}
\ No newline at end of file
+ Unknown = 0,
+ Always = 'Always',
+ OnlyAtNight = 'OnlyAtNight',
+ Manually = 'Manually',
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/forwards/forward.ts b/openalprwebhookprocessor.client/src/app/settings/forwards/forward.ts
index fda568d6..78cae143 100644
--- a/openalprwebhookprocessor.client/src/app/settings/forwards/forward.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/forwards/forward.ts
@@ -1,12 +1,12 @@
export class Forward {
- Id: string;
- destination: string;
- ignoreSslErrors: boolean;
- forwardSinglePlates: boolean;
- forwardGroupPreviews: boolean;
- forwardGroups: boolean;
+ Id: string
+ destination: string
+ ignoreSslErrors: boolean
+ forwardSinglePlates: boolean
+ forwardGroupPreviews: boolean
+ forwardGroups: boolean
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.spec.ts
index b0cc48bc..28f92bfd 100644
--- a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.spec.ts
@@ -1,33 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ForwardsComponent } from './forwards.component';
-import { ForwardsService } from './forwards.service';
-import { of } from 'rxjs';
-import { Forward } from './forward';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ForwardsComponent } from './forwards.component'
+import { ForwardsService } from './forwards.service'
+import { of } from 'rxjs'
+import { Forward } from './forward'
describe(ForwardsComponent.name, () => {
- let component: ForwardsComponent;
- let fixture: ComponentFixture;
- const forwardsServiceSpy = jasmine.createSpyObj(ForwardsService.name, ['getForwards']);
+ let component: ForwardsComponent
+ let fixture: ComponentFixture
+ const forwardsServiceSpy = jasmine.createSpyObj(ForwardsService.name, ['getForwards'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [ForwardsComponent],
- providers: [
- { provide: ForwardsService, useValue: forwardsServiceSpy }
- ]
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ForwardsComponent],
+ providers: [
+ { provide: ForwardsService, useValue: forwardsServiceSpy },
+ ],
+ }).compileComponents()
+ })
- beforeEach(() => {
- const forwards: Forward[] = [];
- forwardsServiceSpy.getForwards.and.returnValue(of(forwards));
- fixture = TestBed.createComponent(ForwardsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ const forwards: Forward[] = []
+ forwardsServiceSpy.getForwards.and.returnValue(of(forwards))
+ fixture = TestBed.createComponent(ForwardsComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(forwardsServiceSpy.getForwards).toHaveBeenCalled();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(forwardsServiceSpy.getForwards).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.ts b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.ts
index eb46fab0..8a60a84d 100644
--- a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.component.ts
@@ -1,65 +1,64 @@
-import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { Forward } from './forward';
-import { ForwardsService } from './forwards.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { Component, OnInit, inject } from '@angular/core'
+import { MatTableDataSource, MatTableModule } from '@angular/material/table'
+import { Forward } from './forward'
+import { ForwardsService } from './forwards.service'
+import { MatButtonModule } from '@angular/material/button'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
@Component({
- selector: 'app-forwards',
- templateUrl: './forwards.component.html',
- styleUrls: ['./forwards.component.less'],
- standalone: true,
- imports: [MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatCheckboxModule, MatButtonModule]
+ selector: 'app-forwards',
+ templateUrl: './forwards.component.html',
+ styleUrls: ['./forwards.component.less'],
+ imports: [MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatCheckboxModule, MatButtonModule],
})
export class ForwardsComponent implements OnInit {
- public forwards: MatTableDataSource;
- public isSaving: boolean = false;
+ private forwardsService = inject(ForwardsService)
- public rowsToDisplay = [
- 'destination',
- 'forwardSinglePlates',
- 'forwardGroupPreviews',
- 'forwardGroups',
- 'ignoreSslErrors',
- 'delete'
- ];
+ public forwards: MatTableDataSource
+ public isSaving = false
- constructor(private forwardsService: ForwardsService) { }
+ public rowsToDisplay = [
+ 'destination',
+ 'forwardSinglePlates',
+ 'forwardGroupPreviews',
+ 'forwardGroups',
+ 'ignoreSslErrors',
+ 'delete',
+ ]
- ngOnInit(): void {
- this.getForwards();
- }
+ ngOnInit(): void {
+ this.getForwards()
+ }
- private getForwards() {
- this.forwardsService.getForwards().subscribe(result => {
- this.forwards = new MatTableDataSource(result);
- });
- }
+ private getForwards() {
+ this.forwardsService.getForwards().subscribe((result) => {
+ this.forwards = new MatTableDataSource(result)
+ })
+ }
- public saveForwards() {
- this.isSaving = true;
- this.forwardsService.upsertForwards(this.forwards.data).subscribe(() => {
- this.getForwards();
- this.isSaving = false;
- });
- }
+ public saveForwards() {
+ this.isSaving = true
+ this.forwardsService.upsertForwards(this.forwards.data).subscribe(() => {
+ this.getForwards()
+ this.isSaving = false
+ })
+ }
- public addForward() {
- this.forwards.data.push(new Forward());
- this.forwards._updateChangeSubscription();
- }
+ public addForward() {
+ this.forwards.data.push(new Forward())
+ this.forwards._updateChangeSubscription()
+ }
- public deleteForward(forward: Forward) {
- this.forwards.data.forEach((item, index) => {
- if (item === forward) {
- this.forwards.data.splice(index, 1);
- }
- });
+ public deleteForward(forward: Forward) {
+ this.forwards.data.forEach((item, index) => {
+ if (item === forward) {
+ this.forwards.data.splice(index, 1)
+ }
+ })
- this.forwards._updateChangeSubscription();
- }
+ this.forwards._updateChangeSubscription()
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.spec.ts
index 953ad06f..c28a2d40 100644
--- a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.spec.ts
@@ -1,19 +1,21 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { ForwardsService } from './forwards.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ForwardsService } from './forwards.service'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe('ForwardsService', () => {
- let service: ForwardsService;
+ let service: ForwardsService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule]
- });
- service = TestBed.inject(ForwardsService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ service = TestBed.inject(ForwardsService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.ts b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.ts
index 3768f4d0..48946ccc 100644
--- a/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/forwards/forwards.service.ts
@@ -1,23 +1,23 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Forward } from './forward';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Forward } from './forward'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class ForwardsService {
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- getForwards(): Observable {
- return this.http.get('/api/settings/forwards');
- }
+ getForwards(): Observable {
+ return this.http.get('/api/settings/forwards')
+ }
- deleteForward(forwardsId: string) {
- return this.http.delete(`/api/settings/forwards/${forwardsId}`);
- }
+ deleteForward(forwardsId: string) {
+ return this.http.delete(`/api/settings/forwards/${forwardsId}`)
+ }
- upsertForwards(forwards: Forward[]) {
- return this.http.post('/api/settings/forwards', forwards);
- }
+ upsertForwards(forwards: Forward[]) {
+ return this.http.post('/api/settings/forwards', forwards)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/ignores/ignore.ts b/openalprwebhookprocessor.client/src/app/settings/ignores/ignore.ts
index 33cde20d..fe8be1b8 100644
--- a/openalprwebhookprocessor.client/src/app/settings/ignores/ignore.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/ignores/ignore.ts
@@ -1,10 +1,10 @@
export class Ignore {
- id: string;
- plateNumber: string;
- strictMatch: boolean;
- description: string;
-
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
-}
\ No newline at end of file
+ id: string
+ plateNumber: string
+ strictMatch: boolean
+ description: string
+
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.spec.ts
index 686b0098..f6b1891f 100644
--- a/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.spec.ts
@@ -1,36 +1,36 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { IgnoresComponent } from './ignores.component';
-import { SettingsService } from '../settings.service';
-import { Ignore } from './ignore';
-import { of } from 'rxjs';
+import { IgnoresComponent } from './ignores.component'
+import { SettingsService } from '../settings.service'
+import { Ignore } from './ignore'
+import { of } from 'rxjs'
describe(IgnoresComponent.name, () => {
- let component: IgnoresComponent;
- let fixture: ComponentFixture;
- const settingsServiceSpy = jasmine.createSpyObj(SettingsService.name, ['getIgnores']);
+ let component: IgnoresComponent
+ let fixture: ComponentFixture
+ const settingsServiceSpy = jasmine.createSpyObj(SettingsService.name, ['getIgnores'])
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [IgnoresComponent],
- providers: [
- { provide: SettingsService, useValue: settingsServiceSpy }
- ]
- })
- .compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [IgnoresComponent],
+ providers: [
+ { provide: SettingsService, useValue: settingsServiceSpy },
+ ],
+ })
+ .compileComponents()
+ })
- beforeEach(() => {
- const ignores: Ignore[] = [];
- settingsServiceSpy.getIgnores.and.returnValue(of(ignores));
+ beforeEach(() => {
+ const ignores: Ignore[] = []
+ settingsServiceSpy.getIgnores.and.returnValue(of(ignores))
- fixture = TestBed.createComponent(IgnoresComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(IgnoresComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(settingsServiceSpy.getIgnores).toHaveBeenCalled();
- });
-});
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(settingsServiceSpy.getIgnores).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.ts b/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.ts
index 042901f0..dc9f62fc 100644
--- a/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/ignores/ignores.component.ts
@@ -1,64 +1,63 @@
-import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { SettingsService } from '../settings.service';
-import { Ignore } from './ignore';
-import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
-import { MatSelectModule } from '@angular/material/select';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { Component, OnInit, inject } from '@angular/core'
+import { MatTableDataSource, MatTableModule } from '@angular/material/table'
+import { SettingsService } from '../settings.service'
+import { Ignore } from './ignore'
+import { MatButtonModule } from '@angular/material/button'
+import { MatOptionModule } from '@angular/material/core'
+import { MatSelectModule } from '@angular/material/select'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
@Component({
- selector: 'app-ignores',
- templateUrl: './ignores.component.html',
- styleUrls: ['./ignores.component.less'],
- standalone: true,
- imports: [MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatOptionModule, MatButtonModule]
+ selector: 'app-ignores',
+ templateUrl: './ignores.component.html',
+ styleUrls: ['./ignores.component.less'],
+ imports: [MatTableModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatOptionModule, MatButtonModule],
})
export class IgnoresComponent implements OnInit {
- public ignores: MatTableDataSource;
- public isSaving: boolean = false;
-
- constructor(private settingsService: SettingsService) { }
-
- public rowsToDisplay = [
- 'plateNumber',
- 'matchType',
- 'description',
- 'delete'
- ];
-
- ngOnInit(): void {
- this.getIgnores();
- }
-
- private getIgnores() {
- this.settingsService.getIgnores().subscribe(result => {
- this.ignores = new MatTableDataSource(result);
- });
- }
-
- public deleteIgnore(ignore: Ignore) {
- this.ignores.data.forEach((item, index) => {
- if (item === ignore) {
- this.ignores.data.splice(index, 1);
- }
- });
-
- this.ignores._updateChangeSubscription();
- }
-
- public addIgnore() {
- this.ignores.data.push(new Ignore());
- this.ignores._updateChangeSubscription();
- }
-
- public saveIgnores() {
- this.isSaving = true;
- this.settingsService.upsertIgnores(this.ignores.data).subscribe(() => {
- this.getIgnores();
- this.isSaving = false;
- });
- }
+ private settingsService = inject(SettingsService)
+
+ public ignores: MatTableDataSource
+ public isSaving = false
+
+ public rowsToDisplay = [
+ 'plateNumber',
+ 'matchType',
+ 'description',
+ 'delete',
+ ]
+
+ ngOnInit(): void {
+ this.getIgnores()
+ }
+
+ private getIgnores() {
+ this.settingsService.getIgnores().subscribe((result) => {
+ this.ignores = new MatTableDataSource(result)
+ })
+ }
+
+ public deleteIgnore(ignore: Ignore) {
+ this.ignores.data.forEach((item, index) => {
+ if (item === ignore) {
+ this.ignores.data.splice(index, 1)
+ }
+ })
+
+ this.ignores._updateChangeSubscription()
+ }
+
+ public addIgnore() {
+ this.ignores.data.push(new Ignore())
+ this.ignores._updateChangeSubscription()
+ }
+
+ public saveIgnores() {
+ this.isSaving = true
+ this.settingsService.upsertIgnores(this.ignores.data).subscribe(() => {
+ this.getIgnores()
+ this.isSaving = false
+ })
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agent.ts b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agent.ts
index 93267532..2edf2f15 100644
--- a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agent.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agent.ts
@@ -1,20 +1,20 @@
export class Agent {
- endpointUrl: string;
- id: string;
- isDebugEnabled: boolean;
- isImageCompressionEnabled: boolean;
- lastHeartbeatEpochMs: number;
- latitude: number;
- longitude: number;
- uid: string;
- openAlprWebServerUrl: string;
- nextScrapeInMinutes: Date;
- scheduledScrapingIntervalMinutes: number;
- sunriseOffset: number;
- sunsetOffset: number;
- timezoneOffset: number;
+ endpointUrl: string
+ id: string
+ isDebugEnabled: boolean
+ isImageCompressionEnabled: boolean
+ lastHeartbeatEpochMs: number
+ latitude: number
+ longitude: number
+ uid: string
+ openAlprWebServerUrl: string
+ nextScrapeInMinutes: Date
+ scheduledScrapingIntervalMinutes: number
+ sunriseOffset: number
+ sunsetOffset: number
+ timezoneOffset: number
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agentStatus.ts b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agentStatus.ts
index 41fe5c4f..37e7a827 100644
--- a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agentStatus.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/agentStatus.ts
@@ -1,16 +1,16 @@
export class AgentStatus {
- hostname: string;
- isConnected: boolean;
- version: string;
- cpuCores: number;
- cpuUsagePercent: number;
- daemonUptimeSeconds: number;
- diskFreeBytes: number;
- systemUptimeSeconds: number;
- agentEpochMs: number;
- alprdActive: boolean;
+ hostname: string
+ isConnected: boolean
+ version: string
+ cpuCores: number
+ cpuUsagePercent: number
+ daemonUptimeSeconds: number
+ diskFreeBytes: number
+ systemUptimeSeconds: number
+ agentEpochMs: number
+ alprdActive: boolean
- constructor(init?: Partial) {
- Object.assign(this, init);
- }
+ constructor(init?: Partial) {
+ Object.assign(this, init)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.html b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.html
index 55dc679a..c52413fc 100644
--- a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.html
@@ -1,122 +1,126 @@
-;
- const settingsServiceSpy = jasmine.createSpyObj(SettingsService.name, ['getAgent', 'getAgentStatus']);
-
- beforeEach(async() => {
- await TestBed.configureTestingModule({
- imports: [OpenalprAgentComponent, BrowserAnimationsModule],
- providers: [
- { provide: SettingsService, useValue: settingsServiceSpy }
- ]
- }).compileComponents();
- });
+ let component: OpenalprAgentComponent
+ let fixture: ComponentFixture
+ const settingsServiceSpy = jasmine.createSpyObj(SettingsService.name, ['getAgent', 'getAgentStatus'])
- beforeEach(() => {
- settingsServiceSpy.getAgent.and.returnValue(of(new Agent()));
- settingsServiceSpy.getAgentStatus.and.returnValue(of(new AgentStatus()));
- fixture = TestBed.createComponent(OpenalprAgentComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OpenalprAgentComponent, BrowserAnimationsModule],
+ providers: [
+ { provide: SettingsService, useValue: settingsServiceSpy },
+ ],
+ }).compileComponents()
+ })
- it('should create', () => {
- expect(component).toBeTruthy();
- expect(settingsServiceSpy.getAgent).toHaveBeenCalled();
- expect(settingsServiceSpy.getAgentStatus).toHaveBeenCalled();
- });
-});
+ beforeEach(() => {
+ settingsServiceSpy.getAgent.and.returnValue(of(new Agent()))
+ settingsServiceSpy.getAgentStatus.and.returnValue(of(new AgentStatus()))
+ fixture = TestBed.createComponent(OpenalprAgentComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ expect(settingsServiceSpy.getAgent).toHaveBeenCalled()
+ expect(settingsServiceSpy.getAgentStatus).toHaveBeenCalled()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.ts b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.ts
index a3223d30..8c109fa4 100644
--- a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.ts
@@ -1,174 +1,172 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { SettingsService } from '../settings.service';
-import { Agent } from './agent';
-import { AgentStatus } from './agentStatus';
-import { PlateStatisticsData } from 'app/plates/plate/plateStatistics';
-import { SignalrService } from 'app/signalr/signalr.service';
-import { Subscription } from 'rxjs';
-import { MatTable, MatTableModule } from '@angular/material/table';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { NgIf, NgStyle } from '@angular/common';
+import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { SettingsService } from '../settings.service'
+import { Agent } from './agent'
+import { AgentStatus } from './agentStatus'
+import { PlateStatisticsData } from 'app/plates/plate/plateStatistics'
+import { SignalrService } from 'app/signalr/signalr.service'
+import { Subscription } from 'rxjs'
+import { MatTable, MatTableModule } from '@angular/material/table'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatInputModule } from '@angular/material/input'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatButtonModule } from '@angular/material/button'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatIconModule } from '@angular/material/icon'
+import { MatCardModule } from '@angular/material/card'
+import { NgStyle } from '@angular/common'
@Component({
- selector: 'app-openalpr-agent',
- templateUrl: './openalpr-agent.component.html',
- styleUrls: ['./openalpr-agent.component.less'],
- standalone: true,
- imports: [NgIf, MatCardModule, MatIconModule, NgStyle, MatProgressSpinnerModule, MatTableModule, MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatTooltipModule, MatCheckboxModule]
+ selector: 'app-openalpr-agent',
+ templateUrl: './openalpr-agent.component.html',
+ styleUrls: ['./openalpr-agent.component.less'],
+ imports: [MatCardModule, MatIconModule, NgStyle, MatProgressSpinnerModule, MatTableModule, MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FormsModule, MatTooltipModule, MatCheckboxModule],
})
export class OpenalprAgentComponent implements OnInit, OnDestroy {
- @ViewChild('agentStatusTable') table: MatTable;
-
- public agent: Agent;
- public agentStatus: AgentStatus;
- public agentStatusData: PlateStatisticsData[] = [];
- public displayedColumns: string[] = ['key', 'value'];
-
- public isSaving: boolean = false;
- public isHydrating: boolean = false;
- public isLoadingAgentStatus: boolean = false;
-
- private eventSubscriptions = new Subscription();
-
- constructor(
- private settingsService: SettingsService,
- private snackBarService: SnackbarService,
- private signalRHub: SignalrService) { }
-
- ngOnInit(): void {
- this.getAgent();
- this.getAgentStatus();
-
- this.eventSubscriptions.add(this.signalRHub.openAlprAgentConnectionStatusChanged.subscribe(() => {
- this.getAgentStatus();
- }));
- }
-
- ngOnDestroy(): void {
- this.eventSubscriptions.unsubscribe();
- }
-
- public saveAgent() {
- this.isSaving = true;
-
- this.settingsService.upsertAgent(this.agent).subscribe(() => {
- this.isSaving = false;
- this.getAgent();
- });
- }
-
- public scrapeAgent() {
- this.isHydrating = true;
-
- this.settingsService.startAgentScrape().subscribe(() => {
- this.isHydrating = false;
- this.snackBarService.create('Agent Scraping has begun, check system logs for progress', SnackBarType.Info);
- });
- }
-
- private getAgent() {
- this.settingsService.getAgent().subscribe(result => {
- this.agent = result;
- });
- }
-
- private getAgentStatus() {
- this.isLoadingAgentStatus = true;
- this.settingsService.getAgentStatus().subscribe(result => {
- this.agentStatus = result;
- this.agentStatusData = new Array();
-
- if (this.agentStatus.isConnected) {
- this.agentStatusData.push({
- key: 'Cpu Cores',
- value: this.agentStatus.cpuCores.toString()
- });
-
- this.agentStatusData.push({
- key: 'Cpu Usage',
- value: this.agentStatus.cpuUsagePercent.toString() + '%'
- });
-
- this.agentStatusData.push({
- key: 'ALPR Daemon Active',
- value: this.agentStatus.alprdActive ? 'Yes' : 'No'
- });
-
- this.agentStatusData.push({
- key: 'Daemon Uptime',
- value: this.agentStatus.daemonUptimeSeconds.toString() + ' seconds'
- });
-
- this.agentStatusData.push({
- key: 'Free Disk Space',
- value: this.formatBytes(this.agentStatus.diskFreeBytes)
- });
-
- this.agentStatusData.push({
- key: 'Hostname',
- value: this.agentStatus.hostname
- });
-
- this.agentStatusData.push({
- key: 'Current Time',
- value: new Date(this.agentStatus.agentEpochMs).toString()
- });
-
- this.agentStatusData.push({
- key: 'Version',
- value: this.agentStatus.version
- });
- } else {
- this.agentStatusData.push({
- key: 'Last Heartbeat',
- value: new Date(this.agent.lastHeartbeatEpochMs).toString()
- });
- }
-
- this.isLoadingAgentStatus = false;
- this.table.renderRows();
-
- },
- () => {
- this.isLoadingAgentStatus = false;
- this.agentStatus = new AgentStatus();
- this.agentStatus.isConnected = false;
- this.agentStatusData = new Array();
- this.table.renderRows();
- });
- }
-
- public enableAgent() {
- this.settingsService.enableAgent(this.agent.id).subscribe(() => {
- this.getAgentStatus();
- });
- }
-
- public disableAgent() {
- this.settingsService.disableAgent(this.agent.id).subscribe(() => {
- this.getAgentStatus();
- });
- }
-
- private formatBytes(bytes: number, decimals = 2) {
- if (!+bytes) return '0 Bytes';
-
- const k = 1024;
- const dm = decimals < 0 ? 0 : decimals;
- const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-
- const i = Math.floor(Math.log(bytes) / Math.log(k));
-
- return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
- }
+ private settingsService = inject(SettingsService)
+ private snackBarService = inject(SnackbarService)
+ private signalRHub = inject(SignalrService)
+
+ @ViewChild('agentStatusTable') table: MatTable
+
+ public agent: Agent
+ public agentStatus: AgentStatus
+ public agentStatusData: PlateStatisticsData[] = []
+ public displayedColumns: string[] = ['key', 'value']
+
+ public isSaving = false
+ public isHydrating = false
+ public isLoadingAgentStatus = false
+
+ private eventSubscriptions = new Subscription()
+
+ ngOnInit(): void {
+ this.getAgent()
+ this.getAgentStatus()
+
+ this.eventSubscriptions.add(this.signalRHub.openAlprAgentConnectionStatusChanged.subscribe(() => {
+ this.getAgentStatus()
+ }))
+ }
+
+ ngOnDestroy(): void {
+ this.eventSubscriptions.unsubscribe()
+ }
+
+ public saveAgent() {
+ this.isSaving = true
+
+ this.settingsService.upsertAgent(this.agent).subscribe(() => {
+ this.isSaving = false
+ this.getAgent()
+ })
+ }
+
+ public scrapeAgent() {
+ this.isHydrating = true
+
+ this.settingsService.startAgentScrape().subscribe(() => {
+ this.isHydrating = false
+ this.snackBarService.create('Agent Scraping has begun, check system logs for progress', SnackBarType.Info)
+ })
+ }
+
+ private getAgent() {
+ this.settingsService.getAgent().subscribe((result) => {
+ this.agent = result
+ })
+ }
+
+ private getAgentStatus() {
+ this.isLoadingAgentStatus = true
+ this.settingsService.getAgentStatus().subscribe((result) => {
+ this.agentStatus = result
+ this.agentStatusData = new Array()
+
+ if (this.agentStatus.isConnected) {
+ this.agentStatusData.push({
+ key: 'Cpu Cores',
+ value: this.agentStatus.cpuCores.toString(),
+ })
+
+ this.agentStatusData.push({
+ key: 'Cpu Usage',
+ value: this.agentStatus.cpuUsagePercent.toString() + '%',
+ })
+
+ this.agentStatusData.push({
+ key: 'ALPR Daemon Active',
+ value: this.agentStatus.alprdActive ? 'Yes' : 'No',
+ })
+
+ this.agentStatusData.push({
+ key: 'Daemon Uptime',
+ value: this.agentStatus.daemonUptimeSeconds.toString() + ' seconds',
+ })
+
+ this.agentStatusData.push({
+ key: 'Free Disk Space',
+ value: this.formatBytes(this.agentStatus.diskFreeBytes),
+ })
+
+ this.agentStatusData.push({
+ key: 'Hostname',
+ value: this.agentStatus.hostname,
+ })
+
+ this.agentStatusData.push({
+ key: 'Current Time',
+ value: new Date(this.agentStatus.agentEpochMs).toString(),
+ })
+
+ this.agentStatusData.push({
+ key: 'Version',
+ value: this.agentStatus.version,
+ })
+ }
+ else {
+ this.agentStatusData.push({
+ key: 'Last Heartbeat',
+ value: new Date(this.agent.lastHeartbeatEpochMs).toString(),
+ })
+ }
+
+ this.isLoadingAgentStatus = false
+ this.table.renderRows()
+ },
+ () => {
+ this.isLoadingAgentStatus = false
+ this.agentStatus = new AgentStatus()
+ this.agentStatus.isConnected = false
+ this.agentStatusData = new Array()
+ this.table.renderRows()
+ })
+ }
+
+ public enableAgent() {
+ this.settingsService.enableAgent(this.agent.id).subscribe(() => {
+ this.getAgentStatus()
+ })
+ }
+
+ public disableAgent() {
+ this.settingsService.disableAgent(this.agent.id).subscribe(() => {
+ this.getAgentStatus()
+ })
+ }
+
+ private formatBytes(bytes: number, decimals = 2) {
+ if (!+bytes) return '0 Bytes'
+
+ const k = 1024
+ const dm = decimals < 0 ? 0 : decimals
+ const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/settings.service.ts b/openalprwebhookprocessor.client/src/app/settings/settings.service.ts
index 691d305e..c07c5969 100644
--- a/openalprwebhookprocessor.client/src/app/settings/settings.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/settings.service.ts
@@ -1,72 +1,71 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Alert } from './alerts/alert';
-import { Camera } from './cameras/camera';
-import { Ignore } from './ignores/ignore';
-import { Agent } from './openalpr-agent/agent';
-import { AgentStatus } from './openalpr-agent/agentStatus';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
+import { Alert } from './alerts/alert'
+import { Camera } from './cameras/camera'
+import { Ignore } from './ignores/ignore'
+import { Agent } from './openalpr-agent/agent'
+import { AgentStatus } from './openalpr-agent/agentStatus'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class SettingsService {
-
- constructor(private http: HttpClient) { }
+ private http = inject(HttpClient)
- getCameras(): Observable {
- return this.http.get('/api/cameras');
- }
+ getCameras(): Observable {
+ return this.http.get('/api/cameras')
+ }
- deleteCamera(cameraId: string): Observable {
- return this.http.post(`/api/cameras/${cameraId}/delete`, null);
- }
+ deleteCamera(cameraId: string): Observable {
+ return this.http.post(`/api/cameras/${cameraId}/delete`, null)
+ }
- upsertCamera(camera: Camera) {
- return this.http.post('/api/cameras', camera);
- }
+ upsertCamera(camera: Camera) {
+ return this.http.post('/api/cameras', camera)
+ }
- upsertAgent(agent: Agent) {
- return this.http.post('/api/settings/agent', agent);
- }
+ upsertAgent(agent: Agent) {
+ return this.http.post('/api/settings/agent', agent)
+ }
- getAgent(): Observable {
- return this.http.get('/api/settings/agent');
- }
+ getAgent(): Observable {
+ return this.http.get('/api/settings/agent')
+ }
- getAgentStatus(): Observable {
- return this.http.get('/api/settings/agent/status');
- }
+ getAgentStatus(): Observable {
+ return this.http.get('/api/settings/agent/status')
+ }
- disableAgent(agentId: string): Observable {
- return this.http.post('/api/settings/agent/disable', agentId);
- }
+ disableAgent(agentId: string): Observable {
+ return this.http.post('/api/settings/agent/disable', agentId)
+ }
- enableAgent(agentId: string): Observable {
- return this.http.post('/api/settings/agent/enable', agentId);
- }
+ enableAgent(agentId: string): Observable {
+ return this.http.post('/api/settings/agent/enable', agentId)
+ }
- startAgentScrape(): Observable {
- return this.http.post('/api/settings/agent/scrape', null);
- }
+ startAgentScrape(): Observable {
+ return this.http.post('/api/settings/agent/scrape', null)
+ }
- getIgnores(): Observable {
- return this.http.get('/api/settings/ignores');
- }
+ getIgnores(): Observable {
+ return this.http.get('/api/settings/ignores')
+ }
- deleteIgnore(ignoreId: string) {
- return this.http.delete(`/settings/ignores/${ignoreId}`);
- }
+ deleteIgnore(ignoreId: string) {
+ return this.http.delete(`/settings/ignores/${ignoreId}`)
+ }
- upsertIgnores(ignores: Ignore[]) {
- return this.http.post('/api/settings/ignores', ignores);
- }
+ upsertIgnores(ignores: Ignore[]) {
+ return this.http.post('/api/settings/ignores', ignores)
+ }
- addIgnore(ignore: Ignore) {
- return this.http.post('/api/settings/ignores/add', ignore);
- }
+ addIgnore(ignore: Ignore) {
+ return this.http.post('/api/settings/ignores/add', ignore)
+ }
- addAlert(alert: Alert) {
- return this.http.post('/api/settings/alerts/add', alert);
- }
+ addAlert(alert: Alert) {
+ return this.http.post('/api/settings/alerts/add', alert)
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.html b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.html
index b954f081..66fdd0b5 100644
--- a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.html
@@ -12,6 +12,9 @@
(click)="deletePlates()"
[class.spinner]="isPurging">Delete debug plates
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.ts b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.ts
index 0129dc55..a4816c25 100644
--- a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.component.ts
@@ -1,78 +1,76 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { SignalrService } from 'app/signalr/signalr.service';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import { Subscription } from 'rxjs';
-import { SystemLogsService } from './system-logs.service';
-import { Highlight } from 'ngx-highlightjs';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
+import { AfterViewInit, Component, OnDestroy, inject } from '@angular/core'
+import { SignalrService } from 'app/signalr/signalr.service'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import { Subscription } from 'rxjs'
+import { SystemLogsService } from './system-logs.service'
+import { Highlight } from 'ngx-highlightjs'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatButtonModule } from '@angular/material/button'
@Component({
- selector: 'app-logs',
- templateUrl: './system-logs.component.html',
- styleUrls: ['./system-logs.component.less'],
- standalone: true,
- imports: [MatButtonModule, MatCheckboxModule, ReactiveFormsModule, FormsModule, Highlight]
+ selector: 'app-logs',
+ templateUrl: './system-logs.component.html',
+ styleUrls: ['./system-logs.component.less'],
+ imports: [MatButtonModule, MatCheckboxModule, ReactiveFormsModule, FormsModule, Highlight],
})
export class SystemLogsComponent implements AfterViewInit, OnDestroy {
- public logMessages: string[];
- public logMessagesDisplay: string = '';
- public onlyFailedPlateGroups: boolean = false;
- public isPurging: boolean = false;
+ private signalRHub = inject(SignalrService)
+ private systemLogsService = inject(SystemLogsService)
+ private snackBarService = inject(SnackbarService)
- private subscriptions = new Subscription();
+ public logMessages: string[]
+ public logMessagesDisplay = ''
+ public onlyFailedPlateGroups = false
+ public isPurging = false
- constructor(
- private signalRHub: SignalrService,
- private systemLogsService: SystemLogsService,
- private snackBarService: SnackbarService) { }
+ private subscriptions = new Subscription()
- ngAfterViewInit(): void {
- this.populateLogs();
- }
+ ngAfterViewInit(): void {
+ this.populateLogs()
+ }
- ngOnDestroy(): void {
- this.subscriptions.unsubscribe();
- }
+ ngOnDestroy(): void {
+ this.subscriptions.unsubscribe()
+ }
- public populateLogs() {
- this.systemLogsService.getLogs().subscribe(result => {
- this.logMessages = result;
- this.formatLogs();
- this.subscribeForLogs();
- });
- }
-
- public subscribeForLogs() {
- this.subscriptions.add(this.signalRHub.processInformationLogged.subscribe(logInformation => {
- this.logMessages.unshift(logInformation);
- this.formatLogs();
- }));
- }
+ public populateLogs() {
+ this.systemLogsService.getLogs().subscribe((result) => {
+ this.logMessages = result
+ this.formatLogs()
+ this.subscribeForLogs()
+ })
+ }
- public downloadPlates() {
- this.systemLogsService.getPlateGroups(this.onlyFailedPlateGroups).subscribe(blob => {
- const objectUrl = URL.createObjectURL(blob);
- window.open(objectUrl);
- });
- }
+ public subscribeForLogs() {
+ this.subscriptions.add(this.signalRHub.processInformationLogged.subscribe((logInformation) => {
+ this.logMessages.unshift(logInformation)
+ this.formatLogs()
+ }))
+ }
- public deletePlates() {
- this.isPurging = true;
- this.systemLogsService.deletePlates().subscribe(() => {
- this.snackBarService.create('Deleted debug plates successfully.', SnackBarType.Deleted);
- this.isPurging = false;
- },
- () => {
- this.snackBarService.create('Failed to delete plates, check the logs.', SnackBarType.Error);
- this.isPurging = false;
- });
- }
+ public downloadPlates() {
+ this.systemLogsService.getPlateGroups(this.onlyFailedPlateGroups).subscribe((blob) => {
+ const objectUrl = URL.createObjectURL(blob)
+ window.open(objectUrl)
+ })
+ }
- private formatLogs() {
- this.logMessages = this.logMessages.slice(0, 500);
- this.logMessagesDisplay = this.logMessages.join('\r\n');
- }
+ public deletePlates() {
+ this.isPurging = true
+ this.systemLogsService.deletePlates().subscribe(() => {
+ this.snackBarService.create('Deleted debug plates successfully.', SnackBarType.Deleted)
+ this.isPurging = false
+ },
+ () => {
+ this.snackBarService.create('Failed to delete plates, check the logs.', SnackBarType.Error)
+ this.isPurging = false
+ })
+ }
+
+ private formatLogs() {
+ this.logMessages = this.logMessages.slice(0, 500)
+ this.logMessagesDisplay = this.logMessages.join('\r\n')
+ }
}
diff --git a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.spec.ts b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.spec.ts
index 415303ea..ef135453 100644
--- a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.spec.ts
@@ -1,20 +1,21 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { SystemLogsService } from './system-logs.service';
+import { TestBed } from '@angular/core/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { SystemLogsService } from './system-logs.service'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
describe(SystemLogsService.name, () => {
- let service: SystemLogsService;
+ let service: SystemLogsService
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [HttpClientTestingModule],
- providers: [SystemLogsService]
- });
- service = TestBed.inject(SystemLogsService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [],
+ providers: [SystemLogsService, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+ })
+ service = TestBed.inject(SystemLogsService)
+ })
- it('should be created', () => {
- service = TestBed.get(SystemLogsService);
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ service = TestBed.inject(SystemLogsService)
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.ts b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.ts
index 3fb19fba..4d416901 100644
--- a/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/system-logs/system-logs.service.ts
@@ -1,23 +1,22 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject } from '@angular/core'
+import { Observable } from 'rxjs'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class SystemLogsService {
+ private http = inject(HttpClient)
- constructor(private http: HttpClient) { }
+ getLogs(): Observable
+@if (enricher) {
+
-
- LicensePlateData API
- https://licenseplatedata.com/
-
-
-
+ LicensePlateData API
+ https://licenseplatedata.com/
+
+ @if (enricher.isEnabled) {
+
+
-
-
-
-
+ }
+ @if (enricher.isEnabled) {
+
+
+
+
+ }
-
+
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.spec.ts
index 6d4a243c..a9cf0e42 100644
--- a/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/enrichers/enrichers.component.spec.ts
@@ -1,34 +1,34 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { EnrichersComponent } from './enrichers.component';
-import { EnrichersService } from './enrichers.service';
-import { Enricher } from './enricher';
-import { of } from 'rxjs';
+import { EnrichersComponent } from './enrichers.component'
+import { EnrichersService } from './enrichers.service'
+import { Enricher } from './enricher'
+import { of } from 'rxjs'
describe(EnrichersComponent.name, () => {
- let component: EnrichersComponent;
- let fixture: ComponentFixture
-
- API Key
-
- help_center
-
-
- Enrich every plate
- Enrich plates during night mode
- Only enrich manually
-
-
+
+
+ API Key
+
+ help_center
+
+
+ Enrich every plate
+ Enrich plates during night mode
+ Only enrich manually
+
+
+@if (agent) {
+
-
- OpenAlpr Agent
-
-
-
-
-
-
-
-
-
+
+ OpenAlpr Agent
+
+
+
+
+
+
+
+
+
- Endpoint Url
-
- help_center
+ Endpoint Url
+
+ help_center
- Uid
-
- help_center
- {{uidInput.value.length || 0}}/40
+ Uid
+
+ help_center
+ {{uidInput.value.length || 0}}/40
- OpenAlpr Web Server Url
- help_center
-
+ OpenAlpr Web Server Url
+ help_center
+
- Latitude
- help_center
-
+ Latitude
+ help_center
+
- Longitude
- help_center
-
+ Longitude
+ help_center
+
- Sunset Offset (minutes +/-)
- help_center
-
-
-
- Sunrise Offset (minutes +/-)
- help_center
-
-
-
- Timezone Offset (hours +/-)
- help_center
-
-
-
- Scheduled Agent Scraping {{agent.scheduledScrapingIntervalMinutes ? "(next scrape in " + agent.nextScrapeInMinutes + " minutes)": "(minutes)"}}
- help_center
-
-
-
+ Sunset Offset (minutes +/-)
+ help_center
+
+
+
+ Sunrise Offset (minutes +/-)
+ help_center
+
+
+
+ Timezone Offset (hours +/-)
+ help_center
+
+
+
+ Scheduled Agent Scraping {{agent.scheduledScrapingIntervalMinutes ? "(next scrape in " + agent.nextScrapeInMinutes + " minutes)": "(minutes)"}}
+ help_center
+
+
+
+}
-
-
-
-
- {{isLoadingAgentStatus ? "Checking..." : agentStatus.isConnected ? "Connected" : "Disconnected"}}
-
- | {{element.key}} | -{{element.value}} | -
+ @if (agentStatus && !isLoadingAgentStatus) {
+
+
+ }
+ @if (isLoadingAgentStatus) {
+
+
+ }
+ {{isLoadingAgentStatus ? "Checking..." : agentStatus.isConnected ? "Connected" : "Disconnected"}}
+
+ | {{element.key}} | +{{element.value}} | +
- Debug Mode
- help_center
-
-
- Image Compression
- help_center
-
-
+ Debug Mode
+ help_center
+
+
+ Image Compression
+ help_center
+
+
-
-
+
+
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.spec.ts b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.spec.ts
index 5b28df76..19108a55 100644
--- a/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/openalpr-agent/openalpr-agent.component.spec.ts
@@ -1,37 +1,37 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { OpenalprAgentComponent } from './openalpr-agent.component';
-import { SettingsService } from '../settings.service';
-import { of } from 'rxjs';
-import { Agent } from './agent';
-import { AgentStatus } from './agentStatus';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { OpenalprAgentComponent } from './openalpr-agent.component'
+import { SettingsService } from '../settings.service'
+import { of } from 'rxjs'
+import { Agent } from './agent'
+import { AgentStatus } from './agentStatus'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
describe(OpenalprAgentComponent.name, () => {
- let component: OpenalprAgentComponent;
- let fixture: ComponentFixture-++
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ @if (isAddMode) {
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.ts b/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.ts
index 6dcbafe5..3096d8be 100644
--- a/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/users/add-edit.component.ts
@@ -1,128 +1,127 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { first } from 'rxjs/operators';
-import { AccountService, AlertService } from 'app/_services';
-import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
+import { Component, OnInit, inject } from '@angular/core'
+import { Router, ActivatedRoute, RouterModule } from '@angular/router'
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { first } from 'rxjs/operators'
+import { AccountService, AlertService } from 'app/_services'
+import { CommonModule } from '@angular/common'
+import { MatCardModule } from '@angular/material/card'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatButtonModule } from '@angular/material/button'
@Component({
- templateUrl: 'add-edit.component.html',
- standalone: true,
- imports: [CommonModule, ReactiveFormsModule, MatCardModule, RouterModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule]
+ templateUrl: 'add-edit.component.html',
+ imports: [CommonModule, ReactiveFormsModule, MatCardModule, RouterModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
})
export class AddEditComponent implements OnInit {
- form: FormGroup;
- id: string;
- isAddMode: boolean;
- isAddingFirstUserMode: boolean;
- loading = false;
- submitted = false;
+ private formBuilder = inject(FormBuilder)
+ private route = inject(ActivatedRoute)
+ private router = inject(Router)
+ private accountService = inject(AccountService)
+ private alertService = inject(AlertService)
- constructor(
- private formBuilder: FormBuilder,
- private route: ActivatedRoute,
- private router: Router,
- private accountService: AccountService,
- private alertService: AlertService
- ) {}
+ form: FormGroup
+ id: string
+ isAddMode: boolean
+ isAddingFirstUserMode: boolean
+ loading = false
+ submitted = false
- ngOnInit() {
- this.id = this.route.snapshot.params['id'];
- this.isAddingFirstUserMode = this.route.snapshot.routeConfig?.path !== 'add';
- this.isAddMode = !this.id;
-
- // password not required in edit mode
- const passwordValidators = [Validators.minLength(6)];
- if (this.isAddMode) {
- passwordValidators.push(Validators.required);
- }
+ ngOnInit() {
+ this.id = this.route.snapshot.params['id']
+ this.isAddingFirstUserMode = this.route.snapshot.routeConfig?.path !== 'add'
+ this.isAddMode = !this.id
- this.form = this.formBuilder.group({
- firstName: ['', Validators.required],
- lastName: ['', Validators.required],
- username: ['', Validators.required],
- password: ['', passwordValidators]
- });
-
- if (!this.isAddMode) {
- this.accountService.getById(this.id)
- .pipe(first())
- .subscribe(x => this.form.patchValue(x));
- }
+ // password not required in edit mode
+ const passwordValidators = [Validators.minLength(6)]
+ if (this.isAddMode) {
+ passwordValidators.push(Validators.required)
}
- // convenience getter for easy access to form fields
- get f() {
- return this.form.controls;
+ this.form = this.formBuilder.group({
+ firstName: ['', Validators.required],
+ lastName: ['', Validators.required],
+ username: ['', Validators.required],
+ password: ['', passwordValidators],
+ })
+
+ if (!this.isAddMode) {
+ this.accountService.getById(this.id)
+ .pipe(first())
+ .subscribe(x => this.form.patchValue(x))
}
+ }
- onSubmit() {
- this.submitted = true;
+ // convenience getter for easy access to form fields
+ get f() {
+ return this.form.controls
+ }
- // reset alerts on submit
- this.alertService.clear();
+ onSubmit() {
+ this.submitted = true
- // stop here if form is invalid
- if (this.form.invalid) {
- return;
- }
+ // reset alerts on submit
+ this.alertService.clear()
- this.loading = true;
- if (!this.isAddingFirstUserMode) {
- this.addUser();
- } else if (this.isAddMode) {
- this.createUser();
- } else {
- this.updateUser();
- }
+ // stop here if form is invalid
+ if (this.form.invalid) {
+ return
}
- private addUser() {
- this.accountService.add(this.form.value)
- .pipe(first())
- .subscribe({
- next: () => {
- this.alertService.success('User added successfully', true);
- this.loading = false;
- },
- error: error => {
- this.alertService.error(error);
- this.loading = false;
- }
- });
+ this.loading = true
+ if (!this.isAddingFirstUserMode) {
+ this.addUser()
}
-
- private createUser() {
- this.accountService.register(this.form.value)
- .pipe(first())
- .subscribe({
- next: () => {
- this.alertService.success('User added successfully', true);
- this.router.navigate(['../'], { relativeTo: this.route });
- },
- error: error => {
- this.alertService.error(error);
- this.loading = false;
- }
- });
+ else if (this.isAddMode) {
+ this.createUser()
}
-
- private updateUser() {
- this.accountService.update(this.id, this.form.value)
- .pipe(first())
- .subscribe({
- next: () => {
- this.alertService.success('Update successful', true);
- this.router.navigate(['../../'], { relativeTo: this.route });
- },
- error: error => {
- this.alertService.error(error);
- this.loading = false;
- }
- });
+ else {
+ this.updateUser()
}
-}
\ No newline at end of file
+ }
+
+ private addUser() {
+ this.accountService.add(this.form.value)
+ .pipe(first())
+ .subscribe({
+ next: () => {
+ this.alertService.success('User added successfully', true)
+ this.loading = false
+ },
+ error: (error) => {
+ this.alertService.error(error)
+ this.loading = false
+ },
+ })
+ }
+
+ private createUser() {
+ this.accountService.register(this.form.value)
+ .pipe(first())
+ .subscribe({
+ next: () => {
+ this.alertService.success('User added successfully', true)
+ this.router.navigate(['../'], { relativeTo: this.route })
+ },
+ error: (error) => {
+ this.alertService.error(error)
+ this.loading = false
+ },
+ })
+ }
+
+ private updateUser() {
+ this.accountService.update(this.id, this.form.value)
+ .pipe(first())
+ .subscribe({
+ next: () => {
+ this.alertService.success('Update successful', true)
+ this.router.navigate(['../../'], { relativeTo: this.route })
+ },
+ error: (error) => {
+ this.alertService.error(error)
+ this.loading = false
+ },
+ })
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/settings/users/users.component.html b/openalprwebhookprocessor.client/src/app/settings/users/users.component.html
index 98c079a1..94e0149f 100644
--- a/openalprwebhookprocessor.client/src/app/settings/users/users.component.html
+++ b/openalprwebhookprocessor.client/src/app/settings/users/users.component.html
@@ -1,33 +1,35 @@
Add User
-Edit User
-Add User
+ } + @if (!isAddMode) { +Edit User
+ } +
-
\ No newline at end of file
diff --git a/openalprwebhookprocessor.client/src/app/settings/users/users.component.ts b/openalprwebhookprocessor.client/src/app/settings/users/users.component.ts
index 49c5d1ad..9159b63b 100644
--- a/openalprwebhookprocessor.client/src/app/settings/users/users.component.ts
+++ b/openalprwebhookprocessor.client/src/app/settings/users/users.component.ts
@@ -1,35 +1,35 @@
-import { Component, OnInit } from '@angular/core';
-import { first } from 'rxjs/operators';
-import { AccountService } from 'app/_services';
-import { User } from 'app/_models';
-import { CommonModule, NgFor, NgIf } from '@angular/common';
-import { RouterLink, RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTableModule } from '@angular/material/table';
+import { Component, OnInit, inject } from '@angular/core'
+import { first } from 'rxjs/operators'
+import { AccountService } from 'app/_services'
+import { User } from 'app/_models'
+
+import { RouterLink, RouterModule } from '@angular/router'
+import { MatButtonModule } from '@angular/material/button'
+import { MatTableModule } from '@angular/material/table'
@Component({
- templateUrl: 'users.component.html',
- standalone: true,
- imports: [CommonModule, RouterLink, RouterModule, NgFor, NgIf, MatButtonModule, MatTableModule]
+ templateUrl: 'users.component.html',
+ imports: [RouterLink, RouterModule, MatButtonModule, MatTableModule],
})
export class UsersComponent implements OnInit {
- users: User[] = [];
- public displayedColumns: string[] = ['firstName', 'lastName', 'username', 'actions'];
- constructor(private accountService: AccountService) {}
+ private accountService = inject(AccountService)
- ngOnInit() {
- this.accountService.getAll()
- .pipe(first())
- .subscribe(users => this.users = users);
- }
+ users: User[] = []
+ public displayedColumns: string[] = ['firstName', 'lastName', 'username', 'actions']
+
+ ngOnInit() {
+ this.accountService.getAll()
+ .pipe(first())
+ .subscribe(users => this.users = users)
+ }
- deleteUser(id: string) {
- const user = this.users.find(x => x.id === id);
- if (user !== undefined) {
- user.isDeleting = true;
- this.accountService.delete(id)
- .pipe(first())
- .subscribe(() => this.users = this.users.filter(x => x.id !== id));
- }
+ deleteUser(id: string) {
+ const user = this.users.find(x => x.id === id)
+ if (user !== undefined) {
+ user.isDeleting = true
+ this.accountService.delete(id)
+ .pipe(first())
+ .subscribe(() => this.users = this.users.filter(x => x.id !== id))
}
-}
\ No newline at end of file
+ }
+}
diff --git a/openalprwebhookprocessor.client/src/app/signalr/signalr.service.spec.ts b/openalprwebhookprocessor.client/src/app/signalr/signalr.service.spec.ts
index 5fe838ab..664208f0 100644
--- a/openalprwebhookprocessor.client/src/app/signalr/signalr.service.spec.ts
+++ b/openalprwebhookprocessor.client/src/app/signalr/signalr.service.spec.ts
@@ -1,16 +1,16 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing'
-import { SignalrService } from './signalr.service';
+import { SignalrService } from './signalr.service'
describe('SignalrService', () => {
- let service: SignalrService;
+ let service: SignalrService
- beforeEach(() => {
- TestBed.configureTestingModule({});
- service = TestBed.inject(SignalrService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({})
+ service = TestBed.inject(SignalrService)
+ })
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-});
+ it('should be created', () => {
+ expect(service).toBeTruthy()
+ })
+})
diff --git a/openalprwebhookprocessor.client/src/app/signalr/signalr.service.ts b/openalprwebhookprocessor.client/src/app/signalr/signalr.service.ts
index 67212417..8b5827e0 100644
--- a/openalprwebhookprocessor.client/src/app/signalr/signalr.service.ts
+++ b/openalprwebhookprocessor.client/src/app/signalr/signalr.service.ts
@@ -1,108 +1,106 @@
-import { Injectable } from '@angular/core';
-import { SnackbarService } from 'app/snackbar/snackbar.service';
-import { SnackBarType } from 'app/snackbar/snackbartype';
-import * as signalR from '@microsoft/signalr';
-import { Subject } from 'rxjs';
+import { Injectable, inject } from '@angular/core'
+import { SnackbarService } from 'app/snackbar/snackbar.service'
+import { SnackBarType } from 'app/snackbar/snackbartype'
+import * as signalR from '@microsoft/signalr'
+import { Subject } from 'rxjs'
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class SignalrService {
- private hubConnection: signalR.HubConnection;
-
- public connectionEstablished = new Subject
-
-
-
-
+ | First Name | -{{element.firstName}} | -Last Name | -{{element.lastName}} | -Username | -{{element.username}} | -Actions | -- - - | -
|---|
+
+ @if (users !== undefined && users.length > 0) {
+
+
+ }
+
| First Name | +{{element.firstName}} | +Last Name | +{{element.lastName}} | +Username | +{{element.username}} | +Actions | ++ + + | +
|---|