IOT-1380: Removed maxLenght from device AND gateway EUI (#147)

* Fixed routing of gateway list + fixed memory leak by unsubscribing properly from gateway fetches * Fixed routing errors in gateway list * Changed mqtt datatarget topic placeholder + added tooltip * Added additional text changes from Product Owner * Removed maxLenght from device AND gateway EUI, now removes non-hex digits on submit
OS2iot · Dec 5, 2023 · 55164c8 · 55164c8
1 parent deaba3c
commit 55164c8
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 41 deletions.
diff --git a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html
@@ -80,15 +80,15 @@
 
     <div class="form-group mt-3 col-6">
       <label class="form-label" for="longitude">{{'IOTDEVICE.LONGITUDE' | translate}}</label>
-      <input type="number" class="form-control" id="longitude" name="longitude" [placeholder]="00" required
+      <input type="number" class="form-control" id="longitude" name="longitude" [placeholder]="'00'" required
              [(ngModel)]="iotDevice.longitude" step=".000001" min="-180" max="180" maxlength="9"
              (keyup)="onCoordinateKey($event)"
              [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('longitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('longitude')}">
     </div>
 
     <div class="form-group mt-3 col-6">
       <label class="form-label" for="latitude">{{'IOTDEVICE.LATITUDE' | translate}}</label>
-      <input type="number" class="form-control" id="latitude" name="latitude" [placeholder]="00" required
+      <input type="number" class="form-control" id="latitude" name="latitude" [placeholder]="'00'" required
              [(ngModel)]="iotDevice.latitude" step=".000001" min="-90" max="90" maxlength="9"
              (keyup)="onCoordinateKey($event)"
              [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('latitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('latitude')}">
@@ -123,7 +123,7 @@ <h3>{{'IOTDEVICE.LORAWANSETUP' | translate}}</h3>
 
     <div class="form-group mt-5">
       <label class="form-label" for="devEUI">{{'QUESTION.DEVEUI' | translate}}*</label>
-      <input type="text" id="devEUI" name="devEUI" maxLength="16"
+      <input type="text" id="devEUI" name="devEUI"
              [placeholder]="'QUESTION.DEVEUI-PLACEHOLDER' | translate" class="form-control"
              [(ngModel)]="iotDevice.lorawanSettings.devEUI" [disabled]="editmode"
              [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('devEUI'), 'is-valid' : formFailedSubmit && !errorFields.includes('devEUI')}">

diff --git a/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts b/src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts
@@ -320,6 +320,14 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
   }
 
   postIoTDevice() {
+    // Sanitize devEUI for non-hex characters
+    if (this.iotDevice.type === DeviceType.LORAWAN) {
+      this.iotDevice.lorawanSettings.devEUI = this.iotDevice.lorawanSettings.devEUI.replace(
+        /[^0-9A-Fa-f]/g,
+        ''
+      );
+    }
+
     this.iotDeviceService.createIoTDevice(this.iotDevice).subscribe(
       (response: IotDevice) => {
         this.router.navigate([

diff --git a/src/app/gateway/gateway-edit/gateway-edit.component.html b/src/app/gateway/gateway-edit/gateway-edit.component.html
@@ -28,8 +28,8 @@
     <div class="form-group mt-3">
       <label class="form-label" for="id">{{'QUESTION-LORA-GATEWAY.GATEWAYID' | translate}}</label>*
       <input type="text" class="form-control" id="id" name="id"
-        [placeholder]="'QUESTION-LORA-GATEWAY.GATEWAYID-PLACEHOLDER' | translate" maxlength="16" required
-        [(ngModel)]="gateway.id" [readonly]="editMode ? true : false"
+        [placeholder]="'QUESTION-LORA-GATEWAY.GATEWAYID-PLACEHOLDER' | translate" required
+        [(ngModel)]="gateway.id" [readonly]="editMode"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('id'), 'is-valid' : formFailedSubmit && !errorFields.includes('id')}">
     </div>
 
@@ -40,15 +40,15 @@
     <div class="row mb-5">
       <div class="form-group mt-3 col-6">
         <label class="form-label" for="longitude">{{'GATEWAY.LONGITUDE' | translate}}</label>
-        <input type="number" class="form-control" id="longitude" name="longitude" [placeholder]="00" required
+        <input type="number" class="form-control" id="longitude" name="longitude" [placeholder]="'00'" required
           [(ngModel)]="gateway.location.longitude" step=".000001" min="-180" max="180" maxlength="9"
           (keyup)="onCoordinateKey($event)"
           [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('longitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('longitude')}">
       </div>
 
       <div class="form-group mt-3 col-6">
-        <label class="form-label" for="latitude">{{'GATEWAY.LATITUDE' | translate}}</label>
-        <input type="number" class="form-control" id="location.latitude" name="location.latitude" [placeholder]="00"
+        <label class="form-label" for="location.latitude">{{'GATEWAY.LATITUDE' | translate}}</label>
+        <input type="number" class="form-control" id="location.latitude" name="location.latitude" [placeholder]="'00'"
           required [(ngModel)]="gateway.location.latitude" step=".000001" min="-180" max="180" maxlength="9"
           (keyup)="onCoordinateKey($event)"
           [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('latitude'), 'is-valid' : formFailedSubmit && !errorFields.includes('latitude')}">

diff --git a/src/app/gateway/gateway-edit/gateway-edit.component.ts b/src/app/gateway/gateway-edit/gateway-edit.component.ts
@@ -12,10 +12,9 @@ import { Gateway, GatewayResponse } from '../gateway.model';
 @Component({
   selector: 'app-gateway-edit',
   templateUrl: './gateway-edit.component.html',
-  styleUrls: ['./gateway-edit.component.scss']
+  styleUrls: ['./gateway-edit.component.scss'],
 })
 export class GatewayEditComponent implements OnInit, OnDestroy {
-
   public backButton: BackButton = { label: '', routerLink: ['gateways'] };
   public multiPage = false;
   public title = '';
@@ -39,18 +38,19 @@ export class GatewayEditComponent implements OnInit, OnDestroy {
     private loraGatewayService: ChirpstackGatewayService,
     private errorMessageService: ErrorMessageService,
     private scrollToTopService: ScrollToTopService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.translate.use('da');
     this.id = this.route.snapshot.paramMap.get('id');
     if (this.id) {
       this.getGateway(this.id);
       this.editMode = true;
-      this.backButton.routerLink = ['gateways', 'gateway-detail', this.id]
+      this.backButton.routerLink = ['gateways', 'gateway-detail', this.id];
     }
-    this.translate.get(['NAV.LORA-GATEWAYS', 'FORM.EDIT-NEW-GATEWAY', 'GATEWAY.SAVE'])
-      .subscribe(translations => {
+    this.translate
+      .get(['NAV.LORA-GATEWAYS', 'FORM.EDIT-NEW-GATEWAY', 'GATEWAY.SAVE'])
+      .subscribe((translations) => {
         this.backButton.label = translations['NAV.LORA-GATEWAYS'];
         this.title = translations['FORM.EDIT-NEW-GATEWAY'];
         this.submitButton = translations['GATEWAY.SAVE'];
@@ -72,36 +72,35 @@ export class GatewayEditComponent implements OnInit, OnDestroy {
       latitude: this.gateway.location.latitude,
       draggable: true,
       useGeolocation: !this.editMode,
-      editMode: this.editMode
+      editMode: this.editMode,
     };
   }
 
   createGateway(): void {
-    this.loraGatewayService.post(this.gateway)
-      .subscribe(
-        (response) => {
-          this.routeBack();
-        },
-        (error: HttpErrorResponse) => {
-          this.showError(error);
-          this.formFailedSubmit = true;
-        }
-      );
+    this.gateway.id = this.gateway.id.replace(/[^0-9A-Fa-f]/g, '');
+    this.loraGatewayService.post(this.gateway).subscribe(
+      (response) => {
+        this.routeBack();
+      },
+      (error: HttpErrorResponse) => {
+        this.showError(error);
+        this.formFailedSubmit = true;
+      }
+    );
   }
 
   updateGateway(): void {
     // Gateway ID not allowed in update.
     this.gateway.id = undefined;
-    this.loraGatewayService
-      .put(this.gateway, this.id)
-      .subscribe(
-        (response) => {
-          this.routeBack();
-        },
-        (error) => {
-          this.showError(error);
-          this.formFailedSubmit = true;
-        });
+    this.loraGatewayService.put(this.gateway, this.id).subscribe(
+      (response) => {
+        this.routeBack();
+      },
+      (error) => {
+        this.showError(error);
+        this.formFailedSubmit = true;
+      }
+    );
   }
 
   onSubmit(): void {
@@ -134,10 +133,11 @@ export class GatewayEditComponent implements OnInit, OnDestroy {
   }
 
   private showError(error: HttpErrorResponse) {
-    const errorResponse = this.errorMessageService.handleErrorMessageWithFields(error);
+    const errorResponse = this.errorMessageService.handleErrorMessageWithFields(
+      error
+    );
     this.errorFields = errorResponse.errorFields;
     this.errorMessages = errorResponse.errorMessages;
     this.scrollToTopService.scrollToTop();
   }
-
 }
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
@@ -628,7 +628,7 @@
     "NFCNTDOWN": "nfcntdown",
     "NFCNTDOWN-PLACEHOLDER": "Angiv download framerate",
     "DEVEUI": "Enheds EUI (DevEUI)",
-    "DEVEUI-PLACEHOLDER": "Enheds EUI (DevEUI)",
+    "DEVEUI-PLACEHOLDER": "Angiv DevEUI (16 tegn)",
     "SKIPFCNTCHECK": "SkipFCntCheck",
     "SKIPFCNTCHECK-NO": "Nej",
     "SKIPFCNTCHECK-YES": "Ja",
@@ -786,7 +786,7 @@
     "DESCRIPTION": "LoRaWAN gateway beskrivelse",
     "DESCRIPTION-PLACEHOLDER": "Beskrivelse af LoRaWAN gateway",
     "GATEWAYID": "Gateway id (EUI)",
-    "GATEWAYID-PLACEHOLDER": "0000-0000-0000-0000",
+    "GATEWAYID-PLACEHOLDER": "0000000000000000",
     "METADATA": "Gateway tags",
     "METADATA-PLACEHOLDER": "Angiv JSON her",
     "ALTITUDE": "Højde",
@@ -964,9 +964,9 @@
       "REPORTBATTERYSTATUS": "Rapporter enhedens batteriniveau til applikationsserveren",
       "REPORTBATTERYMARGIN": "Rapporter device link margin til applikationsserver",
       "DRRATEMIN": "Min data rate",
-      "DRRATEMINEXPLAINED": "Minimum tilladte data rate. Skal være et tal fra 0-7. \nBrugt til ADR",
+      "DRRATEMINEXPLAINED": "Minimum tilladte data rate. Brugt til ADR",
       "DRRATEMAX": "Max data rate",
-      "DRRATEMAXEXPLAINED": "Maximum tilladte data rate. Skal være et tal fra 0-7. \nBrugt til ADR",
+      "DRRATEMAXEXPLAINED": "Maximum tilladte data rate. Brugt til ADR",
       "SAVE": "Gem",
       "CANCEL": "Annuller",
       "GOBACK": "Gå tilbage",