-
-
Welcome
-
-
-
-
+
-
-
-
-
-
-
-
-
-
{{ title }} app is running!
-
-
-
-
-
-
-
Resources
-
Here are some links to help you get started:
-
-
-
-
-
Next Steps
-
What do you want to do next with your app?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Run and Watch Tests
-
-
-
-
-
-
Build for Production
-
-
-
-
-
-
ng generate component xyz
-
ng add @angular/material
-
ng add @angular/pwa
-
ng add _____
-
ng test
-
ng build --prod
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..cdbbd38 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,14 +1,21 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { HttpClientModule} from '@angular/common/http';
+
import { AppComponent } from './app.component';
+import { WeatherComponent } from './components/weather/weather.component';
+import { WeatherItemComponent } from './components/weather-item/weather-item.component';
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ WeatherComponent,
+ WeatherItemComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/components/weather-item/weather-item.component.css b/src/app/components/weather-item/weather-item.component.css
new file mode 100644
index 0000000..9386c30
--- /dev/null
+++ b/src/app/components/weather-item/weather-item.component.css
@@ -0,0 +1,81 @@
+.card {
+ position: relative;
+ background-color: #fff;
+ min-height:72px;
+}
+
+.mui--text-display4, .mui--text-display3 {
+ font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial;
+}
+
+.temp0, .temp1, .temp2, .temp3, .temp4, .temp5 {
+ color: rgb(80,181,221)
+}
+
+.temp6 {
+ color: rgb(78,178,206)
+}
+
+.temp7 {
+ color: rgb(76, 176, 190)
+}
+
+.temp8 {
+ color: rgb(73, 173, 175)
+}
+
+.temp9 {
+ color: rgb(72, 171, 159)
+}
+
+.temp10 {
+ color: rgb(70, 168, 142)
+}
+
+.temp11 {
+ color: rgb(68, 166, 125)
+}
+
+.temp12 {
+ color: rgb(66, 164, 108)
+}
+
+.temp13 {
+ color: rgb(102, 173, 94)
+}
+
+.temp14 {
+ color: rgb(135, 190, 64)
+}
+
+.temp15 {
+ color: rgb(179, 204, 26)
+}
+
+.temp16 {
+ color: rgb(214, 213, 28)
+}
+
+.temp17 {
+ color: rgb(249, 202, 3)
+}
+
+.temp18 {
+ color: rgb(246, 181, 3)
+}
+
+.temp19 {
+ color: rgb(244, 150, 26)
+}
+
+.temp20 {
+ color: rgb(236, 110, 5)
+}
+
+.day {
+ font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-transform: uppercase;
+}
+.summary::first-letter {
+ text-transform: capitalize
+}
diff --git a/src/app/components/weather-item/weather-item.component.html b/src/app/components/weather-item/weather-item.component.html
new file mode 100644
index 0000000..63b116d
--- /dev/null
+++ b/src/app/components/weather-item/weather-item.component.html
@@ -0,0 +1,15 @@
+
+
+
{{weatherItem.day }}
+
{{weatherItem.date }}
+
+
+
+
+ {{weatherItem.tempHigh}}° /
+ {{weatherItem.tempLow}}°
+
+
{{ weatherItem.summary }}
+
+
+
diff --git a/src/app/components/weather-item/weather-item.component.spec.ts b/src/app/components/weather-item/weather-item.component.spec.ts
new file mode 100644
index 0000000..73c037c
--- /dev/null
+++ b/src/app/components/weather-item/weather-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherItemComponent } from './weather-item.component';
+
+describe('WeatherItemComponent', () => {
+ let component: WeatherItemComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ WeatherItemComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(WeatherItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/weather-item/weather-item.component.ts b/src/app/components/weather-item/weather-item.component.ts
new file mode 100644
index 0000000..dbe1b50
--- /dev/null
+++ b/src/app/components/weather-item/weather-item.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import {WeatherItem} from '../../model/WeatherItem';
+
+@Component({
+ selector: 'app-weather-item',
+ templateUrl: './weather-item.component.html',
+ styleUrls: ['./weather-item.component.css']
+})
+export class WeatherItemComponent implements OnInit {
+
+ @Input() weatherItem: WeatherItem;
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ tempHighClass() {
+ return `temp${ this.weatherItem.tempHigh }`;
+ }
+
+ tempLowClass() {
+ return `temp${ this.weatherItem.tempLow }`;
+ }
+}
diff --git a/src/app/components/weather/weather.component.css b/src/app/components/weather/weather.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/weather/weather.component.html b/src/app/components/weather/weather.component.html
new file mode 100644
index 0000000..f6d1721
--- /dev/null
+++ b/src/app/components/weather/weather.component.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/src/app/components/weather/weather.component.spec.ts b/src/app/components/weather/weather.component.spec.ts
new file mode 100644
index 0000000..3be2358
--- /dev/null
+++ b/src/app/components/weather/weather.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherComponent } from './weather.component';
+
+describe('WeatherComponent', () => {
+ let component: WeatherComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ WeatherComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(WeatherComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/weather/weather.component.ts b/src/app/components/weather/weather.component.ts
new file mode 100644
index 0000000..a2da96b
--- /dev/null
+++ b/src/app/components/weather/weather.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { format } from 'fecha';
+
+import {WeatherService} from '../../services/weather.service';
+
+import {WeatherItem} from '../../model/WeatherItem';
+
+@Component({
+ selector: 'app-weather',
+ templateUrl: './weather.component.html',
+ styleUrls: ['./weather.component.css']
+})
+export class WeatherComponent implements OnInit {
+ weather: WeatherItem[] = [];
+
+ constructor(private weatherService: WeatherService) { }
+
+ ngOnInit(): void {
+ this.weatherService.getWeather().subscribe((weatherData) => {
+ this.reduceWeather(weatherData);
+ });
+ }
+
+ reduceWeatherItem(item: any): WeatherItem {
+ let newItem: WeatherItem;
+
+ const fts = new Date(item.dt * 1000);
+ const weatherBlock = item.weather[0];
+
+ newItem = {
+ timestamp: item.dt,
+ icon: `wi-owm-${weatherBlock.id}`,
+ summary: weatherBlock.description,
+ tempHigh: parseInt(item.temp.max, 10),
+ tempLow: parseInt(item.temp.min, 10),
+ datelong: format(fts, 'YYYY-MM-DDTHH:mm:ss.SSSZZ'),
+ time: item.dt,
+ date: format(fts, 'D/M'),
+ day: format(fts, 'ddd')
+
+ };
+
+ return newItem;
+ }
+
+ reduceWeather(weatherData: any): void {
+ console.log('weather', weatherData);
+
+ const workWeather: WeatherItem[] = [];
+
+ weatherData.list.forEach((item) => {
+ workWeather.push(this.reduceWeatherItem(item));
+ });
+
+ this.weather = [...workWeather];
+ }
+}
diff --git a/src/app/model/WeatherItem.ts b/src/app/model/WeatherItem.ts
new file mode 100644
index 0000000..17e0d07
--- /dev/null
+++ b/src/app/model/WeatherItem.ts
@@ -0,0 +1,11 @@
+export class WeatherItem {
+ timestamp: number;
+ icon: string;
+ summary: string;
+ tempHigh: number;
+ tempLow: number;
+ datelong: string;
+ time: number;
+ date: string;
+ day: string;
+}
diff --git a/src/app/services/weather.service.spec.ts b/src/app/services/weather.service.spec.ts
new file mode 100644
index 0000000..7cb8941
--- /dev/null
+++ b/src/app/services/weather.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WeatherService } from './weather.service';
+
+describe('WeatherService', () => {
+ let service: WeatherService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(WeatherService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/weather.service.ts b/src/app/services/weather.service.ts
new file mode 100644
index 0000000..7c2d410
--- /dev/null
+++ b/src/app/services/weather.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable} from 'rxjs';
+import { HttpClient, HttpHeaders} from '@angular/common/http';
+
+import {WeatherItem} from '../model/WeatherItem';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class WeatherService {
+ weatherUrl = 'http://localhost:3000/weather';
+
+ constructor(private http: HttpClient) { }
+
+ getWeather(): Observable {
+ return this.http.get(this.weatherUrl);
+ }
+}
diff --git a/src/index.html b/src/index.html
index 6a81d3a..e225a3b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,15 @@
- AngularTestmvc
+ Weather - Angular10
+
+
+
+
+
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..af24d83 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+body {
+ background-color: #eee;
+}