From 92cfc0716681a36d71523ff86c31e8851aac2c29 Mon Sep 17 00:00:00 2001
From: David Eder <e1326201@student.tuwien.ac.at>
Date: Thu, 3 Jun 2021 20:43:06 +0200
Subject: [PATCH] Add google maps

---
 components/control_center/angular.json        | 10 +++-
 components/control_center/package-lock.json   | 21 +++++++
 components/control_center/package.json        |  1 +
 .../control_center/src/app/app.module.ts      |  5 +-
 .../component/landing/landing.component.css   |  5 ++
 .../component/landing/landing.component.html  | 39 ++-----------
 .../component/landing/landing.component.ts    | 58 ++++++++++---------
 .../testsubcomp/test-sub-comp.component.css   |  0
 .../testsubcomp/test-sub-comp.component.html  |  1 -
 .../testsubcomp/test-sub-comp.component.ts    | 24 --------
 .../src/app/services/rest.service.ts          |  2 +-
 .../src/environments/environment.prod.ts      |  2 +-
 .../src/environments/environment.ts           |  2 +-
 components/control_center/src/index.html      |  1 +
 components/control_center/tsconfig.json       |  2 +-
 components/x_way/requirements.txt             |  3 +-
 components/x_way/x_way_server.py              |  3 +-
 17 files changed, 82 insertions(+), 97 deletions(-)
 delete mode 100644 components/control_center/src/app/component/testsubcomp/test-sub-comp.component.css
 delete mode 100644 components/control_center/src/app/component/testsubcomp/test-sub-comp.component.html
 delete mode 100644 components/control_center/src/app/component/testsubcomp/test-sub-comp.component.ts

diff --git a/components/control_center/angular.json b/components/control_center/angular.json
index 7aa386f..4502bd3 100644
--- a/components/control_center/angular.json
+++ b/components/control_center/angular.json
@@ -119,6 +119,10 @@
           }
         }
       }
-    }},
-  "defaultProject": "app-fe"
-}
+    }
+  },
+  "defaultProject": "app-fe",
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/components/control_center/package-lock.json b/components/control_center/package-lock.json
index 679bfa0..b8d3106 100644
--- a/components/control_center/package-lock.json
+++ b/components/control_center/package-lock.json
@@ -1041,6 +1041,22 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",
       "integrity": "sha512-LhjnZlC4WEsEsAJfOZLte+Lks3WBAFVeRv2lzoQNFVr/IMzBNDVfjEaaSqKF1cei3cjY39Df2nYDMJM7HfqbJA=="
     },
+    "@angular/google-maps": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-12.0.2.tgz",
+      "integrity": "sha512-wxE0i7ywHh+2DtVe2uJpRyupC7ciN5EOT3DPatcWjS9O32KjTlqU6kd49neKmnfhpUFFkMI584ZcwzBmc/CvRg==",
+      "requires": {
+        "@types/googlemaps": "^3.43.1",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "@angular/language-service": {
       "version": "9.1.12",
       "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.12.tgz",
@@ -2935,6 +2951,11 @@
         "@types/node": "*"
       }
     },
+    "@types/googlemaps": {
+      "version": "3.43.3",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
+      "integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg=="
+    },
     "@types/jasmine": {
       "version": "3.4.6",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.4.6.tgz",
diff --git a/components/control_center/package.json b/components/control_center/package.json
index 54721d5..96f2d77 100644
--- a/components/control_center/package.json
+++ b/components/control_center/package.json
@@ -19,6 +19,7 @@
     "@angular/compiler": "~9.1.9",
     "@angular/core": "~9.1.9",
     "@angular/forms": "~9.1.9",
+    "@angular/google-maps": "^12.0.2",
     "@angular/localize": "~9.1.9",
     "@angular/material": "9.2.4",
     "@angular/platform-browser": "~9.1.9",
diff --git a/components/control_center/src/app/app.module.ts b/components/control_center/src/app/app.module.ts
index 8937ed1..9122e2c 100644
--- a/components/control_center/src/app/app.module.ts
+++ b/components/control_center/src/app/app.module.ts
@@ -9,7 +9,6 @@ import {InterceptorService} from './services/interceptor.service';
 import {WebsocketService} from './services/websocket.service';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {environment} from '../environments/environment';
-import {TestSubCompComponent} from './component/testsubcomp/test-sub-comp.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -17,10 +16,12 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from "@angular/material/slider";
+import { GoogleMapsModule } from '@angular/google-maps';
 
 @NgModule({
-  declarations: [LandingComponent, TestSubCompComponent],
+  declarations: [LandingComponent],
   imports: [
+    GoogleMapsModule,
     ReactiveFormsModule,
     BrowserModule,
     BrowserAnimationsModule,
diff --git a/components/control_center/src/app/component/landing/landing.component.css b/components/control_center/src/app/component/landing/landing.component.css
index e69de29..ea5170a 100644
--- a/components/control_center/src/app/component/landing/landing.component.css
+++ b/components/control_center/src/app/component/landing/landing.component.css
@@ -0,0 +1,5 @@
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
diff --git a/components/control_center/src/app/component/landing/landing.component.html b/components/control_center/src/app/component/landing/landing.component.html
index fde4987..43949dc 100644
--- a/components/control_center/src/app/component/landing/landing.component.html
+++ b/components/control_center/src/app/component/landing/landing.component.html
@@ -1,33 +1,6 @@
-<h1>landing works!</h1>
-
-<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
-
-
-<h2>Two way data binding, passing data, triggering child event...</h2>
-<mat-form-field *ngIf="true">
-  <input
-         type="text"
-         placeholder="Placeholder"
-         matInput
-         [(ngModel)]="exampleInputText"
-  >
-</mat-form-field>
-
-<app-test-sub-comp [message]="exampleInputText" (buttonClickedEvent)="alert()"
-                   [anotherInput]=""
-></app-test-sub-comp>
-
-
-
-<h2>Hide display with *ngIf</h2>
-<mat-slide-toggle [(ngModel)]="showPar">Show paragraph</mat-slide-toggle>
-<p *ngIf="showPar">Toggle me</p>
-<app-test-sub-comp *ngIf="showPar"
-  [message]="exampleInputText" (buttonClickedEvent)="alert()"
-                   [anotherInput]=""
-></app-test-sub-comp>
-
-
-
-<h2>Display a test list with *ngFor</h2>
-<span *ngFor="let dict of testList">{{dict.value}}; </span>
+<google-map width="auto" height="100vh"
+  [zoom]="zoom"
+  [center]="center"
+  [options]="options"
+>
+</google-map>
diff --git a/components/control_center/src/app/component/landing/landing.component.ts b/components/control_center/src/app/component/landing/landing.component.ts
index 9261559..23da4ae 100644
--- a/components/control_center/src/app/component/landing/landing.component.ts
+++ b/components/control_center/src/app/component/landing/landing.component.ts
@@ -1,9 +1,9 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {RestService} from '../../services/rest.service';
-import {WebsocketService} from '../../services/websocket.service';
 import {NGXLogger} from 'ngx-logger';
 import {Subscription} from 'rxjs';
 
+
 @Component({
   selector: 'app-landing',
   templateUrl: './landing.component.html',
@@ -11,17 +11,22 @@ import {Subscription} from 'rxjs';
 })
 export class LandingComponent implements OnInit {
 
+  zoom = 12;
+  center: { lat: -33, lng: 151 };
+  options: google.maps.MapOptions = {
+    zoomControl: false,
+    scrollwheel: false,
+    maxZoom: 12,
+    minZoom: 12,
+    disableDefaultUI: true
+  };
+
   private wsSubscription: Subscription;
   private wsMessageCounter: number;
-  exampleInputText: string;
-  showPar = false;
-  testList = [{'value': 1}, {'value': 2}, {'value': 3}];
-  myValue: any = 15;
 
   constructor(
     private logger: NGXLogger,
-    private restService: RestService,
-    private wsService: WebsocketService
+    private restService: RestService
   ) {
   }
 
@@ -33,10 +38,10 @@ export class LandingComponent implements OnInit {
     this.promiseCall();
 
     // perform test ws send / receive
-    setTimeout(() => {
-        this.wsCall();
-      },
-      1000);
+    /*    setTimeout(() => {
+            this.wsCall();
+          },
+          1000);*/
   }
 
   private observableCall(): void {
@@ -66,23 +71,20 @@ export class LandingComponent implements OnInit {
       });
   }
 
-  private wsCall(): void {
-    this.wsMessageCounter = 0;
-    this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
-      result => {
-        this.logger.debug('ws call result', result);
-        if (this.wsMessageCounter >= 2) {
+  /*  private wsCall(): void {
+      this.wsMessageCounter = 0;
+      this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
+        result => {
+          this.logger.debug('ws call result', result);
+          if (this.wsMessageCounter >= 2) {
+            this.wsSubscription.unsubscribe();
+          }
+        },
+        error => {
+          this.logger.error('ws call error', error);
           this.wsSubscription.unsubscribe();
         }
-      },
-      error => {
-        this.logger.error('ws call error', error);
-        this.wsSubscription.unsubscribe();
-      }
-    );
-  }
+      );
+    }*/
 
-  alert() {
-    alert(this.exampleInputText);
-  }
 }
diff --git a/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.css b/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.html b/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.html
deleted file mode 100644
index 968e865..0000000
--- a/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>
diff --git a/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.ts b/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.ts
deleted file mode 100644
index 7979cec..0000000
--- a/components/control_center/src/app/component/testsubcomp/test-sub-comp.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-
-@Component({
-  selector: 'app-test-sub-comp',
-  templateUrl: './test-sub-comp.component.html',
-  styleUrls: ['./test-sub-comp.component.css']
-})
-export class TestSubCompComponent implements OnInit {
-  @Input()
-  message: string;
-  @Input()
-  anotherInput: string;
-
-  @Output()
-  buttonClickedEvent: EventEmitter<void> = new EventEmitter<void>();
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-    this.message;
-  }
-
-}
diff --git a/components/control_center/src/app/services/rest.service.ts b/components/control_center/src/app/services/rest.service.ts
index 191381d..a0f659e 100644
--- a/components/control_center/src/app/services/rest.service.ts
+++ b/components/control_center/src/app/services/rest.service.ts
@@ -15,7 +15,7 @@ export class RestService {
   }
 
   testCall(i: number): Observable<string> {
-    const url = this.currentLocation + 'test/';
+    const url = this.currentLocation + 'api1';
     this.logger.debug('Performing ' + i + '. test rest call on', url);
     return this.http.get<string>(url);
   }
diff --git a/components/control_center/src/environments/environment.prod.ts b/components/control_center/src/environments/environment.prod.ts
index df6894b..f88694a 100644
--- a/components/control_center/src/environments/environment.prod.ts
+++ b/components/control_center/src/environments/environment.prod.ts
@@ -3,7 +3,7 @@ import {NgxLoggerLevel} from 'ngx-logger';
 export const environment = {
   production: true,
   location: window.location.hostname,
-  port: 8000,
+  port: 5004,
   ws_url_root: 'ws://' + window.location.hostname + ':' + window.location.port + '/',
   log_level: NgxLoggerLevel.WARN,
 };
diff --git a/components/control_center/src/environments/environment.ts b/components/control_center/src/environments/environment.ts
index 3864e91..da64f42 100644
--- a/components/control_center/src/environments/environment.ts
+++ b/components/control_center/src/environments/environment.ts
@@ -7,7 +7,7 @@ import {NgxLoggerLevel} from 'ngx-logger';
 export const environment = {
   production: false,
   location: 'localhost',
-  port: 8000,
+  port: 5004,
   ws_location: 'ws://127.0.0.1',
   ws_port: 8000,
   log_level: NgxLoggerLevel.DEBUG,
diff --git a/components/control_center/src/index.html b/components/control_center/src/index.html
index efc5b2e..177a22c 100644
--- a/components/control_center/src/index.html
+++ b/components/control_center/src/index.html
@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXF-INAlIkG9uPBofGLUCyHthaLxN-3PY"></script>
 </head>
 <body>
   <app-landing></app-landing>
diff --git a/components/control_center/tsconfig.json b/components/control_center/tsconfig.json
index 66462f2..22734b3 100644
--- a/components/control_center/tsconfig.json
+++ b/components/control_center/tsconfig.json
@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],
diff --git a/components/x_way/requirements.txt b/components/x_way/requirements.txt
index 8ab6294..9a6b8ec 100644
--- a/components/x_way/requirements.txt
+++ b/components/x_way/requirements.txt
@@ -1 +1,2 @@
-flask
\ No newline at end of file
+flask
+Flask-Cors
\ No newline at end of file
diff --git a/components/x_way/x_way_server.py b/components/x_way/x_way_server.py
index 67dacf3..76acd4a 100644
--- a/components/x_way/x_way_server.py
+++ b/components/x_way/x_way_server.py
@@ -1,7 +1,8 @@
 from flask import Flask
+from flask_cors import CORS
 
 app = Flask(__name__)
-
+CORS(app)
 
 @app.route('/')
 def hello_world():