Merge branch '15-find-the-street-name-by-geo-location-data' into 'master'

Resolve "Find the street name by geo location data"

Closes #15

See merge request 92khra1mst/hft_awado_app!8

package.json

@@ -21,12 +21,15 @@
     "@angular/router": "~8.1.2",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/geolocation": "^5.17.0",
+    "@ionic-native/native-geocoder": "^5.17.1",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
     "@ionic/storage": "^2.2.0",
     "cordova-android": "8.1.0",
+    "cordova-browser": "^6.0.0",
     "cordova-plugin-geolocation": "^4.0.2",
+    "cordova-plugin-nativegeocoder": "^3.2.2",
     "cordova-sqlite-storage": "^3.4.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
@@ -77,10 +80,12 @@
       },
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-geolocation": {},
-      "cordova-sqlite-storage": {}
+      "cordova-sqlite-storage": {},
+      "cordova-plugin-nativegeocoder": {}
     },
     "platforms": [
-      "android"
+      "android",
+      "browser"
     ]
   }
-}
+}
\ No newline at end of file

resources/android/xml/network_security_config.xml

 <?xml version="1.0" encoding="utf-8"?>
 <network-security-config>
     <domain-config cleartextTrafficPermitted="true">
-        <domain includeSubdomains="true">localhost</domain>
+       <domain includeSubdomains="true">193.196.52.237</domain>
     </domain-config>
-</network-security-config>
+</network-security-config>
\ No newline at end of file

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { IonicStorageModule } from '@ionic/storage';
-
+import { NativeGeocoder, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
 // custom dependencies
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -32,6 +32,7 @@ import { ToastService } from './services/toast.service';
     StatusBar,
     SplashScreen,
     RestService,
+    NativeGeocoder,
     ToastService,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],

src/app/auth/login/login.page.ts

@@ -12,8 +12,10 @@ import { RestService } from '../../rest.service';
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
-  username = "";
-  password = "";
+  username = "Bob@mail.com";
+  password = "BobPassword";
+  //username = "";
+  //password = "";
   correctCredentials = false;
   loginApi: Observable<any>;
 
@@ -36,12 +38,12 @@ export class LoginPage implements OnInit {
     });
     this.loginApi
       .subscribe((data) => {
-        console.log('my data: ', data);
+        //console.log('my data: ', data);
         this.restService.setToken(data.token);
         this.restService.isLoginPage = false;
         this.router.navigateByUrl('/home');
       }, (error) => {
-        console.log(error);
+        console.log(JSON.stringify(error));
         this.correctCredentials = true;
       });
   }

src/app/home/home.page.html

@@ -14,10 +14,13 @@
 </ion-header>
 
 <ion-content>
+
+
   <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
   <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
   <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
-  <ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+
     <ion-fab-button>
       <ion-icon name="locate"></ion-icon>
     </ion-fab-button>
@@ -27,6 +30,7 @@
 <ion-footer>
 
   <div class="bike-list-container" *ngIf="!isDetailsVisible">
+
     <div class="bike-container" *ngFor="let bike of bikes">
       <div class="inner" (click)="showBikeDetails(bike)">
         <div class="bike-name">
@@ -39,8 +43,9 @@
           <div>{{bike.batteryPercentage + " %"}}</div>
         </div>
         <div class="address-info">
-          <div class="disance">{{bike.distance + "m"}}</div>
-          <div class="address">{{bike.address}}</div>
+          <div class="disance">{{bike.distance + " km"}}</div>
+          <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
+
         </div>
       </div>
     </div>
@@ -92,7 +97,7 @@
               Bike Distance
             </ion-col>
             <ion-col>
-              {{selectedBike.distance + "m"}}
+              {{selectedBike.distance + " km"}}
             </ion-col>
           </ion-row>
           <ion-row>
@@ -105,6 +110,7 @@
           </ion-row>
          
         </ion-grid>
+
       </div>
     </div>
 

src/app/home/home.page.ts

@@ -19,8 +19,10 @@ export class HomePage {
   private platform: any;
   private map: any;
   bikes = [];
+  streets = [];
   bikeApi: Observable<any>;
 
+
   private currentLocation = { lat: 0, lng: 0 };
 
   public is3DChecked = false;
@@ -41,8 +43,7 @@ export class HomePage {
   public mapElement3d: ElementRef;
 
 
-  //@ViewChild("mapElement", { static: false })
-  //public mapElement: ElementRef;
+ 
 
   constructor(private geolocation: Geolocation,
     public restService: RestService,
@@ -62,14 +63,14 @@ export class HomePage {
   ngAfterViewInit() {
     setTimeout(() => {
       this.loadmap("2D");
-    }, 1000);
+    }, 700);
 
     window.addEventListener('resize', () => this.map.getViewPort().resize());
   }
 
   getBikesList() {
     this.geolocation.getCurrentPosition({
-      maximumAge: 1000, timeout: 5000,
+      maximumAge: 1000, timeout: 4000,
       enableHighAccuracy: true
     }).then((resp) => {
       this.currentLocation.lat = resp.coords.latitude;
@@ -82,6 +83,14 @@ export class HomePage {
         this.bikeApi.subscribe((resp) => {
           console.log('my data: ', resp);
           this.bikes = resp;
+          for (let i = 0; i < this.bikes.length; i++) {
+            var beforeDotStr = ''+this.bikes[i].distance;
+            var beforeDot = beforeDotStr.split('.')[0];
+            var afterDotArr = beforeDotStr.split('.')[1].split('');
+            var afterDot = afterDotArr[0] + afterDotArr[1];
+            this.bikes[i].distance = beforeDot + '.' + afterDot; 
+            this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
+          }
         }, (error) => console.log(error));
       });
     }, er => {
@@ -137,38 +146,40 @@ export class HomePage {
     var zoom = ui.getControl('zoom');
 
     mapSettings.setAlignment('top-right');
-    zoom.setAlignment('left-top');
+    zoom.setAlignment('right-top');
     if (style === "3D") {
       this.map.getViewModel().setLookAtData({ tilt: 60 });
     }
     this.getLocation(this.map);
-    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png','../../../assets/images/25_percent.png','../../../assets/images/0_percent.png'];
+
+
+    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png', '../../../assets/images/25_percent.png', '../../../assets/images/0_percent.png'];
     for (let i = 0; i < this.bikes.length; i++) {
-      if(this.bikes[i].batteryPercentage<100 &&this.bikes[i].batteryPercentage>=75){
+      if (this.bikes[i].batteryPercentage < 100 && this.bikes[i].batteryPercentage >= 75) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
       }
-      else if(this.bikes[i].batteryPercentage<75 &&this.bikes[i].batteryPercentage>=50){
+      else if (this.bikes[i].batteryPercentage < 75 && this.bikes[i].batteryPercentage >= 50) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[1]);
       }
-      else if(this.bikes[i].batteryPercentage<50 &&this.bikes[i].batteryPercentage>=25){
+      else if (this.bikes[i].batteryPercentage < 50 && this.bikes[i].batteryPercentage >= 25) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[2]);
-      }else if(this.bikes[i].batteryPercentage<25 &&this.bikes[i].batteryPercentage>=0){
+      } else if (this.bikes[i].batteryPercentage < 25 && this.bikes[i].batteryPercentage >= 0) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[3]);
       }
-      //console.log("rroni", this.bikes[i].lat);
-     // this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
-      // this.addMarker(Number(48.78077362), 9.17782398, img[i % 3]);
-      //alert(this.bikes[i].lat);
+    
     }
   }
   getCurrentPosition() {
-    this.getLocation(this.map);
+    this.getLocation(this.map.setZoom(17));
+    
   }
+  
   getLocation(map) {
     this.geolocation.getCurrentPosition(
       {
-        maximumAge: 1000, timeout: 5000,
+        maximumAge: 1000, timeout: 2000,
         enableHighAccuracy: true
+        
       }
     ).then((resp) => {
       let lat = resp.coords.latitude
@@ -194,11 +205,7 @@ export class HomePage {
     map.setCenter({ lat: lat, lng: lng });
   }
 
-  expandBikeList() {
-    for (let i = 0; i < 20; i++) {
-      this.tempArr.push(i + 3);
-    }
-  }
+
 
   addMarker(lat, lng, img) {
     var icon = new H.map.Icon(img);
@@ -225,6 +232,33 @@ export class HomePage {
     }, 100);
   }
 
+
+  reverseGeocode(platform, lat, lng, index) {
+    var prox = lat + ',' + lng + ',56';
+    var geocoder = platform.getGeocodingService(),
+      parameters = {
+        prox: prox,
+        mode: 'retrieveAddresses',
+        maxresults: '1',
+        gen: '9'
+      };
+
+    geocoder.reverseGeocode(parameters, result => {
+      console.log(result);
+      var streets = result.Response.View[0].Result[0].Location.Address.Street;
+      var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
+      var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
+     
+      this.bikes[index].address = streets;
+      this.bikes[index].HouseNumber = houseNumber;
+      this.bikes[index].PostalCode = zipcode;
+
+    }, (error) => {
+      alert(error);
+    });
+  }
+
+
   showBikeDetails(bike) {
 
     this.selectedBike=bike;
@@ -251,4 +285,5 @@ export class HomePage {
   }
  
   
+
 }