Add google maps

components/control_center/angular.json

@@ -119,6 +119,10 @@
           }
         }
       }
-    }},
+    }
-  "defaultProject": "app-fe"
+  },
+  "defaultProject": "app-fe",
+  "cli": {
+    "analytics": false
+  }
 }

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",

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",

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,

components/control_center/src/app/component/landing/landing.component.css

@@ -0,0 +1,5 @@
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}

components/control_center/src/app/component/landing/landing.component.html

@@ -1,33 +1,6 @@
-<h1>landing works!</h1>
+<google-map width="auto" height="100vh"
-
+  [zoom]="zoom"
-<mat-slider min="1" max="5" step="0.5" [value]="myValue"></mat-slider>
+  [center]="center"
-
+  [options]="options"
-
-<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>
+</google-map>
-
-<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>

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 restService: RestService
-    private wsService: WebsocketService
   ) {
   }
 
@@ -33,10 +38,10 @@ export class LandingComponent implements OnInit {
     this.promiseCall();
 
     // perform test ws send / receive
-    setTimeout(() => {
+    /*    setTimeout(() => {
             this.wsCall();
           },
-      1000);
+          1000);*/
   }
 
   private observableCall(): void {
@@ -66,7 +71,7 @@ export class LandingComponent implements OnInit {
       });
   }
 
-  private wsCall(): void {
+  /*  private wsCall(): void {
       this.wsMessageCounter = 0;
       this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
         result => {
@@ -80,9 +85,6 @@ export class LandingComponent implements OnInit {
           this.wsSubscription.unsubscribe();
         }
       );
-  }
+    }*/
 
-  alert() {
-    alert(this.exampleInputText);
-  }
 }

components/control_center/src/app/component/testsubcomp/test-sub-comp.component.html

@@ -1 +0,0 @@
-<p>{{message}} <button mat-raised-button (click)="buttonClickedEvent.emit()">Click me</button></p>

components/control_center/src/app/component/testsubcomp/test-sub-comp.component.ts

@@ -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;
-  }
-
-}

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);
   }

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,
 };

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,

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>

components/control_center/tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

components/x_way/requirements.txt

@@ -1 +1,2 @@
 flask
+Flask-Cors

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():