diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html index fcf91ef4..dd24590d 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html @@ -1,4 +1,4 @@ -
+
Images diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.less b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.less index 7482ea45..42fb5e5a 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.less +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.less @@ -24,10 +24,19 @@ .resize-mobile { max-width:100%; } + + .mobilePlateContainer { + flex-direction: column; + } } + @media only screen and (min-width: 1027px) { .resize-mobile { max-height: 300px; max-width: 500px; } + + .mobilePlateContainer { + flex-direction: row; + } } \ No newline at end of file diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts index bd1e8997..8ed17602 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts @@ -1,5 +1,5 @@ import { DatePipe } from '@angular/common'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { SnackbarService } from 'app/snackbar/snackbar.service'; import { SnackBarType } from 'app/snackbar/snackbartype'; import { Lightbox } from 'ngx-lightbox'; @@ -7,13 +7,14 @@ import { Url } from 'url'; import { PlateService } from '../plate.service'; import { Plate } from './plate'; import { PlateStatisticsData } from './plateStatistics'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-plate', templateUrl: './plate.component.html', styleUrls: ['./plate.component.less'] }) -export class PlateComponent implements OnInit { +export class PlateComponent implements OnInit, OnDestroy { @Input() plate: Plate; public loadingImage: boolean; @@ -27,6 +28,8 @@ export class PlateComponent implements OnInit { public plateStatistics: PlateStatisticsData[] = []; public displayedColumns: string[] = ['key', 'value']; + private statisticsSubscription = new Subscription(); + constructor( private lightbox: Lightbox, private plateService: PlateService, @@ -40,9 +43,13 @@ export class PlateComponent implements OnInit { this.getPlateStatistics(); } + ngOnDestroy(): void { + this.statisticsSubscription.unsubscribe(); + } + private getPlateStatistics() { this.loadingStatistics = true; - this.plateService.getPlateStatistics(this.plate.plateNumber).subscribe(result => { + this.statisticsSubscription = this.plateService.getPlateStatistics(this.plate.plateNumber).subscribe(result => { this.loadingStatistics = false; this.plateStatistics.push({ key: "Confidence", diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.html b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.html index 2fd21e7b..0587b2dd 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.html +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.html @@ -23,7 +23,7 @@ - + @@ -57,7 +57,7 @@
- + Filters @@ -70,7 +70,7 @@ - + Plate Number Invalid regex pattern Invalid search term -
-
    -
  • - Include Ignored Plates -
  • -
  • - Regex Search -
  • -
  • - Lenient Matches -
  • -
  • - Plates Seen Less Than 10 Times -
  • -
-
+
    +
  • + Include Ignored Plates +
  • +
  • + Regex Search +
  • +
  • + Lenient Matches +
  • +
  • + Plates Seen Less Than 10 Times +
  • +
+ [disabled]="!this.filterPlateNumberIsValid">Apply + (click)="clearFilters()">Clear
diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.less b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.less index 057dd8a0..f5c1ac88 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.less +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.less @@ -26,6 +26,11 @@ animation: none; } +ul { + list-style-type: none; + padding-left: 0px; +} + @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.ts b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.ts index 9cccbcf5..78862376 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.ts +++ b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plates.component.ts @@ -96,7 +96,8 @@ export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit { private eventSubscriptions = new Subscription(); private searchSubscription = new Subscription(); - + private filterSubscription = new Subscription(); + @ViewChild(MatPaginator) paginator: MatPaginator; constructor( @@ -125,6 +126,7 @@ export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit { ngOnDestroy(): void { this.eventSubscriptions.unsubscribe(); this.searchSubscription.unsubscribe(); + this.filterSubscription.unsubscribe(); } ngAfterViewInit(): void { @@ -166,7 +168,7 @@ export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit { } public populateFilters() { - this.plateService.getFilters().subscribe(result => { + this.filterSubscription = this.plateService.getFilters().subscribe(result => { this.vehicleFilters = result; }); } diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/snackbar/snackbar.component.html b/OpenAlprWebhookProcessor/angularapp/src/app/snackbar/snackbar.component.html index 3bb93e6d..167d278b 100644 --- a/OpenAlprWebhookProcessor/angularapp/src/app/snackbar/snackbar.component.html +++ b/OpenAlprWebhookProcessor/angularapp/src/app/snackbar/snackbar.component.html @@ -1,8 +1,8 @@ -
-
- {{getIcon}} -
-
- {{data.message}} -
-
\ No newline at end of file +
+
+ {{getIcon}} +
+
+ {{data.message}} +
+
\ No newline at end of file