Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/feedback changes #160

Merged
merged 11 commits into from
May 1, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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%;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down