PR changes plus search function for devices in multicast

Author: AugustHA-Iterator

src/app/applications/iot-devices/downlink.model.ts

@@ -1,6 +1,5 @@
-
 export class Downlink {
-    data: string;
-    port: number = 0;
-    confirmedDownlink? = false;
+  data: string;
+  port = 0;
+  confirmedDownlink? = false;
 }

src/app/applications/multicast/multicast-detail/multicast-detail.component.spec.ts

@@ -10,12 +10,11 @@ import { Location } from '@angular/common';
 import { MulticastService } from '../multicast.service';
 import { SnackService } from '@shared/services/snack.service';
 import { Downlink } from '@applications/iot-devices/downlink.model';
-import { DownlinkService } from '@shared/services/downlink.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ErrorMessageService } from '@shared/error-message.service';
 import { MatDialog } from '@angular/material/dialog';
 import { DownlinkDialogComponent } from '@applications/iot-devices/iot-device-detail/downlink/downlink-dialog/downlink-dialog.component';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { keyPressedHex } from '@shared/constants/regex-constants';
 
 @Component({
   selector: 'app-multicast-detail',
@@ -27,22 +26,19 @@ export class MulticastDetailComponent implements OnInit {
   public backButton: BackButton = { label: '', routerLink: '/multicast-list' };
   private deleteDialogSubscription: Subscription;
   public dropdownButton: DropdownButton;
-
   public formFailedSubmit: boolean = false;
   private applicationId: number;
   public downlink = new Downlink();
   @Input() errorMessages: string[];
 
   constructor(
     private route: ActivatedRoute,
-    private snackBar: MatSnackBar,
-    public dialog: MatDialog,
+    private dialog: MatDialog,
     private deleteDialogService: DeleteDialogService,
     private location: Location,
     private multicastService: MulticastService,
-    public translate: TranslateService,
-    public snackService: SnackService,
-    public downlinkService: DownlinkService,
+    private translate: TranslateService,
+    private snackService: SnackService,
     private errorMessageService: ErrorMessageService
   ) {}
 
@@ -78,6 +74,7 @@ export class MulticastDetailComponent implements OnInit {
     this.backButton.routerLink = ['applications', applicationId.toString()];
   }
 
+  // Class-B:
   //only if classB can be used
   // canShowPeriodicity(): boolean {
   //   if (this.multicast.groupType === MulticastType.ClassB) {
@@ -101,7 +98,6 @@ export class MulticastDetailComponent implements OnInit {
               }
             });
         } else {
-          console.log(response);
         }
       });
   }
@@ -118,15 +114,9 @@ export class MulticastDetailComponent implements OnInit {
   }
   keyPressHexadecimal(event) {
     // make sure only hexadecimal can be typed in input with adresses.
-    var inp = String.fromCharCode(event.keyCode);
-
-    if (/[a-fA-F0-9]/.test(inp)) {
-      return true;
-    } else {
-      event.preventDefault();
-      return false;
-    }
+    keyPressedHex(event);
   }
+
   private handleError(error: HttpErrorResponse) {
     const errors = this.errorMessageService.handleErrorMessageWithFields(error);
     this.errorMessages = errors.errorFields;
@@ -135,20 +125,15 @@ export class MulticastDetailComponent implements OnInit {
 
   clickDownlink() {
     if (this.validateHex(this.downlink.data)) {
-      this.downlinkService.multicastGet(this.multicast.id).subscribe(
-        (response: any) => {
-          console.log(response)
+      this.multicastService
+        .multicastGet(this.multicast.id)
+        .subscribe((response: any) => {
           if (response.totalCount > 0) {
             this.openDownlinkDialog();
           } else {
             this.startDownlink();
           }
-        },
-        (error) => {
-          this.handleError(error);
-          console.log(error);
-        }
-      );
+        });
     }
   }
   openDownlinkDialog() {
@@ -157,17 +142,16 @@ export class MulticastDetailComponent implements OnInit {
     dialog.afterClosed().subscribe((result) => {
       if (result === true) {
         this.startDownlink();
-        console.log(`Dialog result: ${result}`);
       }
     });
   }
 
   private startDownlink() {
     this.errorMessages = [];
-    this.downlinkService
+    this.multicastService
       .multicastPost(this.downlink, this.multicast.id)
       .subscribe(
-        (response) => {
+        () => {
           this.showQueueSnack();
         },
         (error) => {
@@ -178,15 +162,13 @@ export class MulticastDetailComponent implements OnInit {
 
   private validateHex(input: string): boolean {
     const isHexinput = /^[a-fA-F\d]+$/.test(input);
-    let validator = false;
+
     if (isHexinput) {
-      validator = true;
+      return true;
     } else {
-      console.log('test');
       this.addToErrorMessage('MULTICAST.DOWNLINK.NO-PORT-OR-PAYLOAD');
-      validator = false;
+      return false;
     }
-    return validator;
   }
 
   addToErrorMessage(text: string) {
@@ -196,8 +178,6 @@ export class MulticastDetailComponent implements OnInit {
   }
 
   ngOnDestroy(): void {
-    if (this.deleteDialogSubscription) {
-      this.deleteDialogSubscription.unsubscribe();
-    }
+    this.deleteDialogSubscription?.unsubscribe();
   }
 }

src/app/applications/multicast/multicast-detail/multicast-detail.component.ts

@@ -196,7 +196,7 @@
       </div> -->
   </div>
 
-  <div class="form-group mt-3">
+  <div class="form-group mt-3 col-12">
     <label class="form-label" for="groupType">{{
       'QUESTION.GIVE-MULTICAST-IOTDEVICES' | translate
     }}</label>
@@ -211,7 +211,12 @@
           name="devices"
           [compareWith]="compare"
           [(ngModel)]="multicast.iotDevices"
+          panelClass="overflow-x-hidden"
         >
+          <mat-select-search
+            [formControl]="deviceFilterCtrl"
+          ></mat-select-search>
+
           <mat-option disabled="disabled" class="filter-option">
             <button
               mat-raised-button
@@ -227,10 +232,15 @@
             >
               {{ 'QUESTION.MULTICAST.DESELECTALLDEVICES' | translate }}
             </button>
+            <label class="onlyLorawan">{{
+              'QUESTION.MULTICAST.ONLY-LORAWAN' | translate
+            }}</label>
           </mat-option>
-          <mat-option *ngFor="let device of iotDevices" [value]="device">{{
-            device.name
-          }}</mat-option>
+          <mat-option
+            *ngFor="let device of filteredDevicesMulti | async | filterDevices"
+            [value]="device"
+            >{{ device.name }}</mat-option
+          >
         </mat-select>
       </mat-form-field>
     </div>

src/app/applications/multicast/multicast-edit/multicast-edit.component.html

@@ -0,0 +1,5 @@
+.onlyLorawan {
+  font-weight: bold;
+  font-size: 13px;
+  margin-left: 10px;
+}