feat(weather): Add weather component

funami-dev · Oct 16, 2018 · aecf33c · aecf33c
1 parent 09c9718
commit aecf33c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/angular.json b/angular.json
@@ -18,8 +18,13 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -75,16 +80,26 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.css"],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -109,11 +124,18 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
     }
   },
-  "defaultProject": "Kourou"
-}
+  "defaultProject": "Kourou",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,9 @@
 <div>
-  Temp: {{ weatherData.main.temp }}°
+  <div>Temp:
+    <span *ngIf="weatherData;else loading">
+      {{ weatherData.main.temp }}
+    </span>
+    <ng-template #loading>lädt</ng-template>°
+  </div>
+
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,18 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WeatherService } from './weather.service';
+import { Weatherdata } from '../interfaces/WeatherData';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  constructor(private weatherService: WeatherService) {}
+export class AppComponent implements OnInit {
+  public weatherData: Weatherdata[] = [];
 
-  weatherData = {};
+  constructor(private weatherService: WeatherService) {}
 
   getWeatherData(): void {
-    this.weatherService.getWeatherData().subscribe(data => (this.weatherData = { ...data }));
+    this.weatherService.getWeatherData().subscribe(data => {
+      this.weatherData = data;
+    });
   }
 
   ngOnInit() {

diff --git a/src/app/weather.service.ts b/src/app/weather.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Weatherdata } from '../interfaces/WeatherData';
 import { environment } from '../environments/environment';
 
 @Injectable({
@@ -9,8 +11,9 @@ export class WeatherService {
   constructor(private http: HttpClient) {}
   WEATHER_API_URL = environment.WEATHER_API_URL;
 
-  public getWeatherData() {
+  public getWeatherData(): Observable<any[]> {
     const { prefix, base, cityId, key } = this.WEATHER_API_URL;
-    return this.http.get(`${prefix}${base}?id=${cityId}&appid=${key}`);
+    const _url = `${prefix}${base}?id=${cityId}&appid=${key}`;
+    return this.http.get<Weatherdata[]>(_url);
   }
 }