Merge pull request #12 from CoditEU/current_song

#11
Codit · Jan 18, 2019 · 1d4e7ef · 1d4e7ef
2 parents 666f795 + 0362687
commit 1d4e7ef
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 62 deletions.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
@@ -1,21 +1,47 @@
 <div class="content content-grid">
   <div class="logo">
-    <a href="https://www.codit.eu/connectedcar" target="_blank" class="logo__link">
-      <img src="assets/images/logo.png" class="logo__image" alt="Codit" /> <span class="logo__text">Connected car</span>
+    <a
+      href="https://www.codit.eu/connectedcar"
+      target="_blank"
+      class="logo__link"
+    >
+      <img src="assets/images/logo.png" class="logo__image" alt="Codit" />
+      <span class="logo__text">Connected car</span>
       <span class="logo__info">Click here for more info</span>
     </a>
   </div>
-  <div app-card class="card card-noshadow card-transparent graph card--nopadding" noPadding="true">
-    <app-graphs [todaysDistance]="todaysDistance$ | async | decimal" [totalDistance]="totalDistance$ | async | decimal"></app-graphs>
+  <div
+    app-card
+    class="card card-noshadow card-transparent graph card--nopadding"
+    noPadding="true"
+  >
+    <app-graphs
+      [todaysDistance]="todaysDistance$ | async | decimal"
+      [totalDistance]="totalDistance$ | async | decimal"
+    ></app-graphs>
+  </div>
+  <div app-card class="card map" resizeable="true">
+    <app-tracker></app-tracker>
+  </div>
+  <div class="streetview">
+    <div app-card class="card" resizeable="true">{{ currentsong }}</div>
+    <div app-card class="card" resizeable="true">
+      <app-streetview [position]="position$ | async"></app-streetview>
+    </div>
+  </div>
+  <div app-card class="card historicalgraph">
+    <app-historical-graph></app-historical-graph>
   </div>
-  <div app-card class="card map" resizeable="true"><app-tracker></app-tracker></div>
-  <div app-card class="card streetview" resizeable="true"><app-streetview [position]="position$ | async"></app-streetview></div>
-  <div app-card class="card historicalgraph"><app-historical-graph></app-historical-graph></div>
   <div class="powerbi" #powerbi></div>
   <div class="poweredby">
     <h1 class="poweredby--header">Powered by</h1>
     <a href="https://www.codit.eu/nebulusiot" title="Nebulus" target="_blank">
-      <img src="assets/images/nebulus.png" alt="Nebulus" width="150" target="_blank" />
+      <img
+        src="assets/images/nebulus.png"
+        alt="Nebulus"
+        width="150"
+        target="_blank"
+      />
     </a>
   </div>
 </div>
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
@@ -1,54 +1,78 @@
-import { Observable } from 'rxjs/Observable';
-import { Component, ViewEncapsulation, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Observable } from "rxjs/Observable";
+import {
+  Component,
+  ViewEncapsulation,
+  ViewChild,
+  ElementRef,
+  AfterViewInit
+} from "@angular/core";
+import { Store } from "@ngrx/store";
 
-import { map, filter } from 'rxjs/operators';
+import { map, filter } from "rxjs/operators";
 
-import * as selectors from '../app/tracker/store/tracker.selectors';
-import { ITrackerState } from './tracker/store/index';
+import * as selectors from "../app/tracker/store/tracker.selectors";
+import { ITrackerState } from "./tracker/store/index";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
-	selector: 'app-root',
-	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"]
 })
 export class AppComponent implements AfterViewInit {
-	public position$: Observable<{ lat: number, lng: number }>;
-	public todaysDistance$: Observable<number>;
-	public totalDistance$: Observable<number>;
-	@ViewChild('powerbi') public element: ElementRef;
-	constructor(private store: Store<ITrackerState>) {
-		this.todaysDistance$ = this.store.select(selectors.todaysDistanceSelector);
-		this.totalDistance$ = this.store.select(selectors.totalDistanceSelector);
-		this.position$ = this.store
-			.select(selectors.currentPositionSelector)
-			.pipe(
-				filter(position => !!position),
-				map(position => {
-					return {
-						lat: position.latitude,
-						lng: position.longitude
-					};
-				})
-			);
-	}
+  public position$: Observable<{ lat: number; lng: number }>;
+  public todaysDistance$: Observable<number>;
+  public totalDistance$: Observable<number>;
+  public currentsong: string =
+    "Currently we like the sound of our engine more than music ;-)";
+  @ViewChild("powerbi") public element: ElementRef;
+  constructor(private store: Store<ITrackerState>, private http: HttpClient) {
+    this.todaysDistance$ = this.store.select(selectors.todaysDistanceSelector);
+    this.totalDistance$ = this.store.select(selectors.totalDistanceSelector);
+    this.position$ = this.store.select(selectors.currentPositionSelector).pipe(
+      filter(position => !!position),
+      map(position => {
+        return {
+          lat: position.latitude,
+          lng: position.longitude
+        };
+      })
+    );
+  }
 
-	public ngAfterViewInit() {
-		const config: any = {
-			accessToken: 'eyJrIjoiYTg0YzZiZmMtZGI3MS00MWZlLWI1NDEtMjE2NDIxNzgwYzRkIiwidCI6Ijc1MTdiYzQyLWJjZjgtNDkxNi1hNjc3LWI1NzUzMDUxZjg0NiIsImMiOjh9',
-			embedUrl: 'https://app.powerbi.com/view?r=eyJrIjoiYTg0YzZiZmMtZGI3MS00MWZlLWI1NDEtMjE2NDIxNzgwYzRkIiwidCI6Ijc1MTdiYzQyLWJjZjgtNDkxNi1hNjc3LWI1NzUzMDUxZjg0NiIsImMiOjh9',
-			id: 'a0d0077b-c9ee-4473-8e78-0b40b2619632',
-			settings: {
-				filterPaneEnabled: true,
-				navContentPaneEnabled: true,
-				customLayout: {
-					displayOption: (<any>window['powerbi-models']).DisplayOption.FitToWidth
-				}
-			},
-			tokenType: 1,
-			type: "report"
-		};
+  public ngAfterViewInit() {
+    const config: any = {
+      accessToken:
+        "eyJrIjoiYTg0YzZiZmMtZGI3MS00MWZlLWI1NDEtMjE2NDIxNzgwYzRkIiwidCI6Ijc1MTdiYzQyLWJjZjgtNDkxNi1hNjc3LWI1NzUzMDUxZjg0NiIsImMiOjh9",
+      embedUrl:
+        "https://app.powerbi.com/view?r=eyJrIjoiYTg0YzZiZmMtZGI3MS00MWZlLWI1NDEtMjE2NDIxNzgwYzRkIiwidCI6Ijc1MTdiYzQyLWJjZjgtNDkxNi1hNjc3LWI1NzUzMDUxZjg0NiIsImMiOjh9",
+      id: "a0d0077b-c9ee-4473-8e78-0b40b2619632",
+      settings: {
+        filterPaneEnabled: true,
+        navContentPaneEnabled: true,
+        customLayout: {
+          displayOption: (<any>window["powerbi-models"]).DisplayOption
+            .FitToWidth
+        }
+      },
+      tokenType: 1,
+      type: "report"
+    };
 
-		(<any>window).powerbi.embed(this.element.nativeElement, config);
-	}
+    (<any>window).powerbi.embed(this.element.nativeElement, config);
+
+    this.http
+      .get(
+        "https://prod-68.westeurope.logic.azure.com:443/workflows/b1640e9d6ee04178b8fb78d2f4ac9510/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=5Qrx8oaw6GB516rS4AG1RNUylTT8-Tn3eK5uZFYDURE"
+      )
+      .subscribe((result: any) => {
+        if (result.currently_playing) {
+          this.currentsong =
+            "We are currently listing to " +
+            result.song +
+            " by " +
+            result.artist;
+        }
+      });
+  }
 }