icons aligned, mobile response

mlapaglia · Oct 30, 2023 · 09af4a9 · 09af4a9
1 parent 300c8f1
commit 09af4a9
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 48 deletions.
diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.html
@@ -1,4 +1,4 @@
-<div style="display: flex; flex-wrap: wrap;">
+<div class="mobilePlateContainer" style="display: flex; flex-wrap: wrap;">
     <mat-card class="example-card">
         <mat-card-header>
             <mat-card-title>Images</mat-card-title>

diff --git 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;
+  }
 }
diff --git a/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts b/OpenAlprWebhookProcessor/angularapp/src/app/plates/plate/plate.component.ts
@@ -1,19 +1,20 @@
 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';
 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
@@ -23,7 +23,7 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-            <app-plate [plate]="plate"></app-plate>
+          <app-plate [plate]="plate"></app-plate>
         </ng-template>
         <mat-action-row style="display: flex; flex-wrap: wrap;">
           <button mat-button color="primary" [disabled]="!plate.canBeEnriched" [class.spinner]="isEnrichingPlate" (click)="enrichPlate(plate.id)">Enrich plate</button>
@@ -57,7 +57,7 @@
       </div>
     </div>
   </div>
-  <mat-card style="flex: 2; margin-right: 15px;">
+  <mat-card style="flex: 1; margin-right: 15px;">
     <mat-card-header>
       <mat-card-title>Filters</mat-card-title>
     </mat-card-header>
@@ -70,7 +70,7 @@
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>
-    </mat-form-field>
+      </mat-form-field>
       <mat-form-field>
         <mat-label>Plate Number</mat-label>
         <input matInput
@@ -116,44 +116,40 @@
       </mat-form-field>
       <mat-error *ngIf="!filterPlateNumberIsValid && regexSearchEnabled">Invalid regex pattern</mat-error>
       <mat-error *ngIf="!filterPlateNumberIsValid && !regexSearchEnabled">Invalid search term</mat-error>
-      <div style="padding-top:10px;">
-        <ul style="list-style-type: none; padding-left:5px;">
-          <li>
-            <mat-checkbox 
-              color="primary"
-              [(ngModel)]="filterIgnoredPlates"
-              [disabled]="!filterIgnoredPlatesEnabled">Include Ignored Plates</mat-checkbox>
-          </li>
-          <li>
-            <mat-checkbox
-              color="primary"
-              (change)="regexSearchToggled()"
-              [(ngModel)]="regexSearchEnabled">Regex Search</mat-checkbox>
-          </li>
-          <li>
-            <mat-checkbox
-              color="primary"
-              [(ngModel)]="filterStrictMatch"
-              [disabled]="!filterStrictMatchEnabled">Lenient Matches</mat-checkbox>
-          </li>
-          <li>
-            <mat-checkbox
-              color="primary"
-              [(ngModel)]="filterPlatesSeenLessThan">Plates Seen Less Than 10 Times</mat-checkbox>
-          </li>
-        </ul>
-      </div>
+      <ul>
+        <li>
+          <mat-checkbox 
+            color="primary"
+            [(ngModel)]="filterIgnoredPlates"
+            [disabled]="!filterIgnoredPlatesEnabled">Include Ignored Plates</mat-checkbox>
+        </li>
+        <li>
+          <mat-checkbox
+            color="primary"
+            (change)="regexSearchToggled()"
+            [(ngModel)]="regexSearchEnabled">Regex Search</mat-checkbox>
+        </li>
+        <li>
+          <mat-checkbox
+            color="primary"
+            [(ngModel)]="filterStrictMatch"
+            [disabled]="!filterStrictMatchEnabled">Lenient Matches</mat-checkbox>
+        </li>
+        <li>
+          <mat-checkbox
+            color="primary"
+            [(ngModel)]="filterPlatesSeenLessThan">Plates Seen Less Than 10 Times</mat-checkbox>
+        </li>
+      </ul>
     </mat-card-content>
     <mat-card-actions>
       <button mat-raised-button
         style="margin: 8px 8px 8px 0;"
         color="primary"
-        [disabled]="!this.filterPlateNumberIsValid"
-        (click)="searchPlates()">Apply</button>
+        [disabled]="!this.filterPlateNumberIsValid">Apply</button>
       <button mat-raised-button
         color="warn"
-        (click)="clearFilters()"
-        style="margin: 8px 8px 8px 0;">Clear</button>
+        (click)="clearFilters()">Clear</button>
     </mat-card-actions>
   </mat-card>
 </div>
diff --git 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
@@ -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
@@ -1,8 +1,8 @@
-<div fxLayout="row" class="snack-container">
-    <div style="margin-right:15px; padding-top:10px;">
-      <mat-icon>{{getIcon}}</mat-icon>
-    </div>
-    <div style="padding-top:10px;">
-      <span >{{data.message}}</span>
-    </div>
-  </div>
+<div style="display: flex;" fxLayout="row" class="snack-container">
+  <div style="margin-right:15px; padding-top:5px;">
+    <mat-icon>{{getIcon}}</mat-icon>
+  </div>
+  <div style="padding-top:10px;">
+    <span >{{data.message}}</span>
+  </div>
+</div>