Merge branch 'main' of https://github.com/gerhardfurrer/agridator

agridator-frontend/package.json

@@ -17,12 +17,16 @@
     "@angular/core": "^15.2.0",
     "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "^15.2.0",
+    "@angular/google-maps": "^15.2.4",
     "@angular/material": "^15.2.3",
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "@googlemaps/types": "^3.44.4",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
+    "@types/google.maps": "^3.52.3",
+    "@types/googlemaps": "^3.43.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

agridator-frontend/src/app/app.component.html

@@ -25,5 +25,6 @@ <h1>Agridator</h1>
 
   <mat-card id="main" >
     <router-outlet ></router-outlet>
+
   </mat-card>
 </div>

agridator-frontend/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { GoogleMapsModule } from '@angular/google-maps';
 
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -27,7 +28,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 import { FeldkalenderComponent } from './components/feldkalender/feldkalender.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { SettingsComponent } from './components/settings/settings.component';
+import { SettingsComponent } from './components/settings/settings.component'; 
+
 
 const routes: Routes = [
   {path: 'pre-tracking-infos', component: PreTrackingInfosComponent},
@@ -69,6 +71,7 @@ const routes: Routes = [
     FlexLayoutModule,
     MatCardModule,
     ReactiveFormsModule,
+    GoogleMapsModule,
     TranslateModule.forRoot({
       loader: {
           provide: TranslateLoader,
@@ -96,7 +99,6 @@ exports: [
 })
 export class AppModule { }
 
-// required for AOT compilation
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/');
 }

agridator-frontend/src/app/components/post-tracking-infos/post-tracking-infos.component.html

@@ -35,10 +35,11 @@ <h1>Aufzeichnung</h1>
     <h2>Config</h2> 
     {{config | json}}
     <h2>Geo-Daten</h2> 
-    {{points | json}}
+    <google-map  width="100%"[center]="center" (mapInitialized)="onMapReady($event)" #map></google-map>
+
 
     <div class="nav-bar">
         <button mat-raised-button color="primary" type="submit" style=" align-self: flex-end;" (click)="moveToCalendar()">Speichern</button>
     </div>
-    
+
 </div>

agridator-frontend/src/app/components/post-tracking-infos/post-tracking-infos.component.ts

@@ -1,42 +1,88 @@
-import { Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {  Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { Inject } from "@angular/core"
 import { FeldkalenderDto } from 'src/app/dto/feldkalender-dto';
 import { LocalStorageService } from 'src/app/service/local-storage.service';
 import { DataService } from './../../service/data.service';
 
+
 @Component({
   selector: 'app-post-tracking-infos',
   templateUrl: './post-tracking-infos.component.html',
   styleUrls: ['./post-tracking-infos.component.scss']
 })
-export class PostTrackingInfosComponent {
+export class PostTrackingInfosComponent  {
   config: any;
   points: any[] =[];
   ownedFields: any[] = [];
   workTypes: any[] = [];
   fertilizers: any[] = [];
   plantProtectionProducts: any[] = [];
-
-  constructor(private dataService: DataService,
-              private router : Router,
-              private localStorageService: LocalStorageService)
+  map : any = null;
+  center : google.maps.LatLng = new google.maps.LatLng({lat:0, lng: 0});
+
+  constructor(private router: Router,  @Inject(DOCUMENT) private document: Document,
+  private renderer2: Renderer2, private dataService: DataService, private localStorageService: LocalStorageService)
   {
+
     let state = this.router.getCurrentNavigation()?.extras.state;
-    if(state !== undefined)
-    {
+    if (state !== undefined) {
       this.config = state['config'];
       this.points = state['points'];
       this.workTypes = this.dataService.getTypeOfWork();
       this.ownedFields = this.dataService.getOwnedFields();
       this.fertilizers = this.dataService.getFertilizier();
       this.plantProtectionProducts = this.dataService.getPlantProtectionProducts();
     }
-    else 
-    {
+    else {
       this.router.navigate(["/pre-tracking-infos"])
     }
   }
 
+
+  ngOnInit() {
+    this.center = this.calculateCenter();
+  }
+
+  public onMapReady(map: google.maps.Map): void {
+
+    console.log("hey", map)
+    this.map = map;
+
+
+    const flightPlanCoordinates = [
+      { lat: 47.5644, lng: 7.5715 },
+      { lat: 47.5654, lng: 7.5710 },
+      { lat: 47.5642, lng: 7.4715 },
+      { lat: 47.5644, lng: 7.5715 },
+    ];
+
+
+    const flightPath = new google.maps.Polyline({
+      path: this.points,
+      geodesic: true, 
+      strokeColor: "#FF0000",
+      strokeOpacity: 1.0,
+      strokeWeight: 2,
+    });
+    flightPath.setMap(map);
+  }
+  calculateCenter()
+  {
+    let sumPos = { lat:0, long:0 }
+    for(let p of this.points )
+    {
+      sumPos.lat += p.lat;
+      sumPos.long += p.lng;
+    }
+
+    sumPos.lat /= this.points.length;
+    sumPos.long /= this.points.length;
+
+    return new google.maps.LatLng({lat: sumPos.lat, lng: sumPos.long}, true);
+  }
+
   moveToCalendar() 
   {
     const feldkalenderArray = this.localStorageService.getFeldkalender();

agridator-frontend/src/app/components/tracking/tracking.component.ts

@@ -50,7 +50,7 @@ export class TrackingComponent {
             this.points.push(
               {
                 lat: position.coords.latitude,
-                long: position.coords.longitude,
+                lng: position.coords.longitude,
               }
             )
           }

agridator-frontend/src/index.d.ts

@@ -0,0 +1 @@
+declare module 'googlemaps';

agridator-frontend/src/index.html

@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2_knAU0-1PlILZL3vIhYMJ5OzPjIKH0w&libraries=drawing"></script>
 </head>
 <body class="mat-typography agridator-body">
   <app-root></app-root>