Merge pull request #160 from OS2iot/feature/FeedbackChanges

Feature/feedback changes
OS2iot · May 1, 2024 · 9c12672 · 9c12672
2 parents 41b4140 + ba6bb65
commit 9c12672
Show file tree

Hide file tree

Showing 21 changed files with 452 additions and 462 deletions.
diff --git a/src/app/applications/application-detail/application-detail.component.html b/src/app/applications/application-detail/application-detail.component.html
@@ -11,8 +11,8 @@
     </app-top-bar>
     <div class="container-fluid">
         <div class="row">
-            <div class="col-md-8 d-flex align-items-stretch">
-                <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+            <div class="col-md-7 d-flex align-items-stretch">
+                <div class="jumbotron jumbotron--m-left jumbotron--full-width width100percent">
                     <div *ngIf="errorMessage" class="error-messages p-3 my-3">
                         {{ errorMessage | translate }}
                     </div>
@@ -39,10 +39,24 @@ <h3>{{ "APPLICATION.DETAILS" | translate }}</h3>
                     ></app-metadata-details>
                 </div>
             </div>
-            <div class="col-md-4 d-flex align-items-stretch">
-                <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+            <div class="col-md-5 d-flex align-items-stretch">
+                <div class="jumbotron jumbotron--m-left jumbotron--full-width width100percent">
                     <div class="thirty-height" *ngIf="devices && gateways">
-                        <app-map [coordinateList]="coordinateList" [isFromApplication]="true"></app-map>
+                        <app-map [coordinateList]="coordinateList" [isFromApplication]="true" [applicationId]="application.id" ></app-map>
+                    </div>
+                    <div class="col d-flex markerDescriptionDiv">
+                        <div class="col d-flex">
+                            <img alt="IoTDeviceMarker" class="marker" src="{{ greyMarker }}" />
+                            <p>: IoT-Enhed</p>
+                        </div>
+                        <div class="col d-flex">
+                            <img alt="InactiveGatewayMarker" class="marker" src="{{ redMarker }}" />
+                            <p>: Inaktiv gateway</p>
+                        </div>
+                        <div class="col d-flex">
+                            <img alt="ActiveGatewayMarker" class="marker" src="{{ greenMarker }}" />
+                            <p>: Aktiv gateway</p>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/app/applications/application-detail/application-detail.component.scss b/src/app/applications/application-detail/application-detail.component.scss
@@ -1,13 +1,22 @@
-@import 'src/assets/scss/setup/breakpoints';
-@import 'src/assets/scss/setup/variables';
+@import "src/assets/scss/setup/breakpoints";
+@import "src/assets/scss/setup/variables";
 
 .application-component {
-  .bottom-separator {
-    min-height: 60px;
-    border-bottom: $grey-separator solid 1px;
+    .bottom-separator {
+        min-height: 60px;
+        border-bottom: $grey-separator solid 1px;
 
-    @include media-breakpoint-up(md) {
-      min-height: 150px;
+        @include media-breakpoint-up(md) {
+            min-height: 150px;
+        }
     }
-  }
+}
+
+.marker {
+    height: 25px;
+    width: 20px;
+}
+
+.markerDescriptionDiv {
+    margin-top: 10px;
 }
diff --git a/src/app/applications/application-detail/application-detail.component.ts b/src/app/applications/application-detail/application-detail.component.ts
@@ -54,6 +54,9 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
     private deviceSubscription: Subscription;
     private gatewaysSubscription: Subscription;
     public gateways: Gateway[];
+    public redMarker = "/assets/images/red-marker.png";
+    public greenMarker = "/assets/images/green-marker.png";
+    public greyMarker = "/assets/images/grey-marker.png";
 
     constructor(
         private applicationService: ApplicationService,
@@ -149,29 +152,29 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
     }
 
     private mapGatewaysToCoordinateList() {
-      const tempcoordinateList = [];
-      this.gateways.map(gateway =>
-          tempcoordinateList.push({
-              longitude: gateway.location.longitude,
-              latitude: gateway.location.latitude,
-              draggable: false,
-              editEnabled: false,
-              useGeolocation: false,
-              markerInfo: {
-                  name: gateway.name,
-                  active: this.getGatewayStatus(gateway),
-                  id: gateway.gatewayId,
-                  internalOrganizationId: gateway.organizationId,
-                  internalOrganizationName: gateway.organizationName,
-              },
-          })
-      );
-      this.coordinateList.push.apply(this.coordinateList, tempcoordinateList);
-  }
+        const tempcoordinateList = [];
+        this.gateways.map(gateway =>
+            tempcoordinateList.push({
+                longitude: gateway.location.longitude,
+                latitude: gateway.location.latitude,
+                draggable: false,
+                editEnabled: false,
+                useGeolocation: false,
+                markerInfo: {
+                    name: gateway.name,
+                    active: this.getGatewayStatus(gateway),
+                    id: gateway.gatewayId,
+                    internalOrganizationId: gateway.organizationId,
+                    internalOrganizationName: gateway.organizationName,
+                },
+            })
+        );
+        this.coordinateList.push.apply(this.coordinateList, tempcoordinateList);
+    }
 
-  private getGatewayStatus(gateway: Gateway): boolean {
-      return this.chirpstackGatewayService.isGatewayActive(gateway);
-  }
+    private getGatewayStatus(gateway: Gateway): boolean {
+        return this.chirpstackGatewayService.isGatewayActive(gateway);
+    }
 
     onDeleteApplication() {
         this.deleteDialogService.showApplicationDialog(this.application).subscribe(response => {

diff --git a/src/app/applications/datatarget/fiware/fiware-detail/fiware-detail.component.html b/src/app/applications/datatarget/fiware/fiware-detail/fiware-detail.component.html
@@ -4,7 +4,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-md-6 d-flex align-items-stretch">
-          <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+          <div class="jumbotron jumbotron--m-right jumbotron--full-width width100percent">
             <h3>{{ 'DATATARGET.DETAILS' | translate }}</h3>
             <app-general-details [data]="datatarget"></app-general-details>
             <mat-divider></mat-divider>

diff --git a/src/app/applications/datatarget/httppush/httppush-detail/httppush-detail.component.html b/src/app/applications/datatarget/httppush/httppush-detail/httppush-detail.component.html
@@ -4,7 +4,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+        <div class="jumbotron jumbotron--m-right jumbotron--full-width width100percent">
           <h3>{{ 'DATATARGET.DETAILS' | translate }}</h3>
           <app-general-details [data]="datatarget"></app-general-details>
           <mat-divider></mat-divider>

diff --git a/src/app/applications/datatarget/mqtt-detail/mqtt-detail.component.html b/src/app/applications/datatarget/mqtt-detail/mqtt-detail.component.html
@@ -5,7 +5,7 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+        <div class="jumbotron jumbotron--m-right jumbotron--full-width width100percent">
           <h3>{{ 'DATATARGET.DETAILS' | translate }}</h3>
           <app-general-details [data]="datatarget"></app-general-details>
           <mat-divider></mat-divider>

diff --git a/...ices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html b/...ices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html
@@ -1,6 +1,6 @@
 <div class="row">
     <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+        <div class="jumbotron jumbotron--m-right jumbotron--full-width width100percent">
             <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
             <p class="mr-1"><strong>{{ 'IOT-TABLE.APPLICATION' | translate }}</strong>{{device.application.name}}</p>
             <app-general-details [data]="device"></app-general-details>
@@ -62,17 +62,17 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
         </div>
     </div>
     <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-left jumbotron--full-width">
+        <div class="jumbotron jumbotron--m-left jumbotron--full-width width100percent">
             <h3>{{ 'IOTDEVICE.LOCATION' | translate }}</h3>
             <div *ngIf="device.location; else locationElseBlock">
               <div class="thirty-height">
                 <app-map [coordinates]="getCoordinates()"></app-map>
               </div>
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-6 latLonWrapWidth">
                       <p><strong>{{ 'IOTDEVICE.LATITUDE' | translate }}</strong>{{latitude | number:'2.1-9'}}</p>
                     </div>
-                    <div class="col-6">
+                    <div class="col-6 latLonWrapWidth">
                         <p><strong>{{ 'IOTDEVICE.LONGITUDE' | translate }}</strong>{{longitude | number:'2.1-9'}}</p>
                     </div>
                 </div>

diff --git a/...ices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss b/...ices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.scss
@@ -1,11 +1,19 @@
+@import 'src/assets/scss/setup/variables';
+
 .pre {
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  white-space: -o-pre-wrap;
-  font-family: monospace;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    font-family: monospace;
+}
+
+.alarmText {
+    color: #ff0000;
+    font-size: 1em;
 }
 
-.alarmText{
-  color: #ff0000;
-  font-size: 1em;
+.latLonWrapWidth {
+    @media (max-width: 1250px) {
+        width: 100%;
+    }
 }
diff --git a/...ot-devices/iot-device-detail/iot-device-details-tab/iot-device-details-tab.component.html b/...ot-devices/iot-device-detail/iot-device-details-tab/iot-device-details-tab.component.html
@@ -3,7 +3,7 @@
   </app-iot-device-detail-generic>
   <!-- Device model -->
   <div class="col-md-6 d-flex align-items-stretch">
-    <div class="jumbotron jumbotron--m-right jumbotron--full-width">
+    <div class="jumbotron jumbotron--m-right jumbotron--full-width width100percent">
       <app-device-model [device]="device"></app-device-model>
     </div>
   </div>