Merge pull request #125 from OS2iot/feature/Increase-size-of-gateway-map

Made map component fill 100% in height, height now pr use basis

Author: fcv-iteratorIt

src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html

@@ -64,7 +64,9 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
         <div class="jumbotron jumbotron--m-left jumbotron--full-width">
             <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">
                         <p><strong>{{ 'IOTDEVICE.LONGITUDE' | translate }}</strong>{{longitude | number:'2.1-6'}}</p>

src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html

@@ -64,7 +64,7 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('comment'), 'is-valid' : formFailedSubmit && !errorFields.includes('comment')}">
     </div>
 
-    <div class="form-group mt-3 col-12" *ngIf="iotDevice">
+    <div class="form-group mt-3 col-12 thirty-height" *ngIf="iotDevice">
       <app-map [coordinates]="getCoordinates()" (updateCoordinates)="updateCoordinates($event)"></app-map>
     </div>
 

src/app/gateway/gateway-detail/gateway-detail.component.html

@@ -20,7 +20,9 @@ <h3>{{ 'GATEWAY.DETAILS' | translate }}</h3>
         <div class="jumbotron jumbotron--m-left jumbotron--full-width">
           <div *ngIf="gateway.location; else locationElseBlock">
             <h3>{{ 'GATEWAY.LOCATION' | translate }}</h3>
-            <app-map [coordinates]="getCoordinates()"></app-map>
+            <div class="thirty-height">
+              <app-map [coordinates]="getCoordinates()"></app-map>
+            </div>
             <div class="row">
               <div class="col-4">
                 <p><strong>{{ 'GATEWAY.LONGITUDE' | translate }}</strong>

src/app/gateway/gateway-edit/gateway-edit.component.html

@@ -33,7 +33,7 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('id'), 'is-valid' : formFailedSubmit && !errorFields.includes('id')}">
     </div>
 
-    <div class="row" *ngIf="gateway.location">
+    <div class="row thirty-height" *ngIf="gateway.location">
       <app-map [coordinates]="getCoordinates()" (updateCoordinates)="updateCoordinates($event)"></app-map>
     </div>
 
@@ -77,4 +77,4 @@
     <button class="btn btn-primary ml-2" type="submit">{{ submitButton }}</button>
   </div>
 </form>
-<!-- test app-form-iot--gateway -->
+<!-- test app-form-iot--gateway -->

src/app/gateway/gateway-list/gateway-list.component.html

@@ -16,7 +16,7 @@
         </div>
       </mat-tab>
       <mat-tab label="{{'GATEWAY.MAP-TAB' | translate}}">
-        <div class="jumbotron--table" *ngIf="showmap && gateways">
+        <div class="jumbotron--table sixty-height" *ngIf="showmap && gateways">
           <app-map [coordinateList]="coordinateList">
           </app-map>
         </div>

src/app/gateway/gateway-list/gateway-list.component.scss

@@ -3,4 +3,4 @@
   font-size: inherit;
   line-height: 3em;
   height: 3em;
-}
+}

src/app/gateway/gateway-table/gateway-table.component.ts

@@ -43,7 +43,7 @@ export class GatewayTableComponent implements AfterViewInit {
 
   faExclamationTriangle = faExclamationTriangle;
   faCheckCircle = faCheckCircle;
-
+  refetchIntervalId: NodeJS.Timeout;
   batteryStatusColor = 'green';
   batteryStatusPercentage = 50;
   resultsLength = 0;
@@ -67,10 +67,14 @@ export class GatewayTableComponent implements AfterViewInit {
       this.organizationId = x;
       this.refresh();
     });
-
+    this.refetchIntervalId = setInterval(() => this.refresh(), 60 * 1000)
     this.refresh();
   }
 
+  ngOnDestroy() {
+    clearInterval(this.refetchIntervalId)
+  }
+
   private refresh() {
     this.getGateways().subscribe((data) => {
       data.result.forEach((gw) => {

src/app/shared/components/map/map.component.html

@@ -1,5 +1 @@
-<div class="map-container">
-  <div class="map-frame">
-    <div class="map" id="{{mapId}}"></div>
-  </div>
-</div>
+<div class="map" id="{{mapId}}"></div>

src/assets/scss/components/_boxes.scss

@@ -35,11 +35,19 @@
 .box{
   width: 100%;
   @extend .p-3;
-  
+
   &--info{
     background-color: $color-bg-info;
     border: $info-border;
     border-radius: $border-radius-primary;
     @extend .mb-5;
   }
-}
+}
+
+.sixty-height{
+  height: 60vh;
+}
+
+.thirty-height{
+  height: 30vh
+}

src/assets/scss/components/_map.scss

@@ -1,13 +1,3 @@
-
-
-.map-container {
-    height: 30vh;
-  }
-  
-  .map-frame {
-    height: 100%;
-  }
-  
-  .map {
-    height: 100%;
-  }
+.map {
+  height: 100%;
+}