Weather is done
This commit is contained in:
27
src/app/weather/weather.component.html
Normal file
27
src/app/weather/weather.component.html
Normal file
@ -0,0 +1,27 @@
|
||||
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
|
||||
<i [class]="'wi wi-fw wi-' + weatherService.icon" style="font-size: 6rem"></i>
|
||||
<div class="ml-0 ml-md-3">
|
||||
<h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
|
||||
<h3 class="m-0">{{weatherService.weather}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 d-flex mx-auto" style="max-width: 450px">
|
||||
<div class="text-center" style="flex-grow: 1">
|
||||
<i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
|
||||
</div>
|
||||
<div class="text-center" style="flex-grow: 1">
|
||||
<i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
|
||||
</div>
|
||||
<div class="text-center" style="flex-grow: 1">
|
||||
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<div class="my-4 d-flex justify-content-center">
|
||||
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
|
||||
{{w.day}}
|
||||
<i [class]="'my-2 wi wi-fw wi-' + w.icon" style="font-size: 2rem"></i>
|
||||
{{w.temp}} °C
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
15
src/app/weather/weather.component.ts
Normal file
15
src/app/weather/weather.component.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {WeatherService} from './weather.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-weather',
|
||||
templateUrl: './weather.component.html'
|
||||
})
|
||||
export class WeatherComponent implements OnInit {
|
||||
|
||||
constructor(public weatherService: WeatherService) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
56
src/app/weather/weather.service.ts
Normal file
56
src/app/weather/weather.service.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {timer} from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class WeatherService {
|
||||
readonly apiKey = 'e8391af54b6fc09dc82b019fc68b8409';
|
||||
readonly city = 'London';
|
||||
readonly countryCode = 'CA';
|
||||
readonly days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
|
||||
readonly weatherCodes = require('./weatherCodes.json');
|
||||
|
||||
// Weather information
|
||||
cloudCover = 0;
|
||||
forecast = [];
|
||||
humidity = 0;
|
||||
icon: string;
|
||||
pressure = 0;
|
||||
sunrise: Date;
|
||||
sunset: Date;
|
||||
temp = 0;
|
||||
tempMin = 0;
|
||||
tempMax = 0;
|
||||
weather: string = '';
|
||||
wind: [number, number] = [0, 0];
|
||||
|
||||
constructor(httpClient: HttpClient) {
|
||||
timer(0, 5 * 60000).subscribe(async () => {
|
||||
httpClient.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => {
|
||||
this.cloudCover = weather.clouds.all;
|
||||
this.humidity = weather.main.humidity;
|
||||
this.icon = this.weatherCodes[weather.weather[0].id].icon;
|
||||
this.pressure = weather.main.pressure;
|
||||
this.sunrise = new Date(weather.sys.sunrise);
|
||||
this.sunset = new Date(weather.sys.sunset);
|
||||
this.temp = Math.round(weather.main.temp);
|
||||
this.tempMin = Math.round(weather.main.temp_min);
|
||||
this.tempMax = Math.round(weather.main.temp_max);
|
||||
this.weather = weather.weather[0].description;
|
||||
this.wind = [weather.wind.deg, Math.round(weather.wind.speed)];
|
||||
});
|
||||
httpClient.get(`https://api.openweathermap.org/data/2.5/forecast?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => {
|
||||
let temp = weather.list.filter(weather => weather.dt_txt.indexOf('12:00:00') != -1);
|
||||
temp.splice(0, temp.length - 5);
|
||||
this.forecast = temp.map(weather => ({
|
||||
day: this.days[new Date(weather.dt_txt).getDay()],
|
||||
icon: this.weatherCodes[weather.weather[0].id].icon,
|
||||
temp: Math.round(weather.main.temp)
|
||||
}));
|
||||
console.log(this.forecast[3])
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
367
src/app/weather/weatherCodes.json
Normal file
367
src/app/weather/weatherCodes.json
Normal file
@ -0,0 +1,367 @@
|
||||
{
|
||||
"200": {
|
||||
"label": "thunderstorm with light rain",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"201": {
|
||||
"label": "thunderstorm with rain",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"202": {
|
||||
"label": "thunderstorm with heavy rain",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"210": {
|
||||
"label": "light thunderstorm",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"211": {
|
||||
"label": "thunderstorm",
|
||||
"icon": "thunderstorm"
|
||||
},
|
||||
|
||||
"212": {
|
||||
"label": "heavy thunderstorm",
|
||||
"icon": "thunderstorm"
|
||||
},
|
||||
|
||||
"221": {
|
||||
"label": "ragged thunderstorm",
|
||||
"icon": "thunderstorm"
|
||||
},
|
||||
|
||||
"230": {
|
||||
"label": "thunderstorm with light drizzle",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"231": {
|
||||
"label": "thunderstorm with drizzle",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"232": {
|
||||
"label": "thunderstorm with heavy drizzle",
|
||||
"icon": "storm-showers"
|
||||
},
|
||||
|
||||
"300": {
|
||||
"label": "light intensity drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"301": {
|
||||
"label": "drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"302": {
|
||||
"label": "heavy intensity drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"310": {
|
||||
"label": "light intensity drizzle rain",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"311": {
|
||||
"label": "drizzle rain",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"312": {
|
||||
"label": "heavy intensity drizzle rain",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"313": {
|
||||
"label": "shower rain and drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"314": {
|
||||
"label": "heavy shower rain and drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"321": {
|
||||
"label": "shower drizzle",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"500": {
|
||||
"label": "light rain",
|
||||
"icon": "rain"
|
||||
},
|
||||
|
||||
"501": {
|
||||
"label": "moderate rain",
|
||||
"icon": "rain"
|
||||
},
|
||||
|
||||
"502": {
|
||||
"label": "heavy intensity rain",
|
||||
"icon": "rain"
|
||||
},
|
||||
|
||||
"503": {
|
||||
"label": "very heavy rain",
|
||||
"icon": "rain"
|
||||
},
|
||||
|
||||
"504": {
|
||||
"label": "extreme rain",
|
||||
"icon": "rain"
|
||||
},
|
||||
|
||||
"511": {
|
||||
"label": "freezing rain",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"520": {
|
||||
"label": "light intensity shower rain",
|
||||
"icon": "showers"
|
||||
},
|
||||
|
||||
"521": {
|
||||
"label": "shower rain",
|
||||
"icon": "showers"
|
||||
},
|
||||
|
||||
"522": {
|
||||
"label": "heavy intensity shower rain",
|
||||
"icon": "showers"
|
||||
},
|
||||
|
||||
"531": {
|
||||
"label": "ragged shower rain",
|
||||
"icon": "showers"
|
||||
},
|
||||
|
||||
"600": {
|
||||
"label": "light snow",
|
||||
"icon": "snow"
|
||||
},
|
||||
|
||||
"601": {
|
||||
"label": "snow",
|
||||
"icon": "snow"
|
||||
},
|
||||
|
||||
"602": {
|
||||
"label": "heavy snow",
|
||||
"icon": "snow"
|
||||
},
|
||||
|
||||
"611": {
|
||||
"label": "sleet",
|
||||
"icon": "sleet"
|
||||
},
|
||||
|
||||
"612": {
|
||||
"label": "shower sleet",
|
||||
"icon": "sleet"
|
||||
},
|
||||
|
||||
"615": {
|
||||
"label": "light rain and snow",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"616": {
|
||||
"label": "rain and snow",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"620": {
|
||||
"label": "light shower snow",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"621": {
|
||||
"label": "shower snow",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"622": {
|
||||
"label": "heavy shower snow",
|
||||
"icon": "rain-mix"
|
||||
},
|
||||
|
||||
"701": {
|
||||
"label": "mist",
|
||||
"icon": "sprinkle"
|
||||
},
|
||||
|
||||
"711": {
|
||||
"label": "smoke",
|
||||
"icon": "smoke"
|
||||
},
|
||||
|
||||
"721": {
|
||||
"label": "haze",
|
||||
"icon": "day-haze"
|
||||
},
|
||||
|
||||
"731": {
|
||||
"label": "sand, dust whirls",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"741": {
|
||||
"label": "fog",
|
||||
"icon": "fog"
|
||||
},
|
||||
|
||||
"751": {
|
||||
"label": "sand",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"761": {
|
||||
"label": "dust",
|
||||
"icon": "dust"
|
||||
},
|
||||
|
||||
"762": {
|
||||
"label": "volcanic ash",
|
||||
"icon": "smog"
|
||||
},
|
||||
|
||||
"771": {
|
||||
"label": "squalls",
|
||||
"icon": "day-windy"
|
||||
},
|
||||
|
||||
"781": {
|
||||
"label": "tornado",
|
||||
"icon": "tornado"
|
||||
},
|
||||
|
||||
"800": {
|
||||
"label": "clear sky",
|
||||
"icon": "day-sunny"
|
||||
},
|
||||
|
||||
"801": {
|
||||
"label": "few clouds",
|
||||
"icon": "cloudy"
|
||||
},
|
||||
|
||||
"802": {
|
||||
"label": "scattered clouds",
|
||||
"icon": "cloudy"
|
||||
},
|
||||
|
||||
"803": {
|
||||
"label": "broken clouds",
|
||||
"icon": "cloudy"
|
||||
},
|
||||
|
||||
"804": {
|
||||
"label": "overcast clouds",
|
||||
"icon": "cloudy"
|
||||
},
|
||||
|
||||
|
||||
"900": {
|
||||
"label": "tornado",
|
||||
"icon": "tornado"
|
||||
},
|
||||
|
||||
"901": {
|
||||
"label": "tropical storm",
|
||||
"icon": "hurricane"
|
||||
},
|
||||
|
||||
"902": {
|
||||
"label": "hurricane",
|
||||
"icon": "hurricane"
|
||||
},
|
||||
|
||||
"903": {
|
||||
"label": "cold",
|
||||
"icon": "snowflake-cold"
|
||||
},
|
||||
|
||||
"904": {
|
||||
"label": "hot",
|
||||
"icon": "hot"
|
||||
},
|
||||
|
||||
"905": {
|
||||
"label": "windy",
|
||||
"icon": "windy"
|
||||
},
|
||||
|
||||
"906": {
|
||||
"label": "hail",
|
||||
"icon": "hail"
|
||||
},
|
||||
|
||||
"951": {
|
||||
"label": "calm",
|
||||
"icon": "day-sunny"
|
||||
},
|
||||
|
||||
"952": {
|
||||
"label": "light breeze",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"953": {
|
||||
"label": "gentle breeze",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"954": {
|
||||
"label": "moderate breeze",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"955": {
|
||||
"label": "fresh breeze",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"956": {
|
||||
"label": "strong breeze",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"957": {
|
||||
"label": "high wind, near gale",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"958": {
|
||||
"label": "gale",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"959": {
|
||||
"label": "severe gale",
|
||||
"icon": "cloudy-gusts"
|
||||
},
|
||||
|
||||
"960": {
|
||||
"label": "storm",
|
||||
"icon": "thunderstorm"
|
||||
},
|
||||
|
||||
"961": {
|
||||
"label": "violent storm",
|
||||
"icon": "thunderstorm"
|
||||
},
|
||||
|
||||
"962": {
|
||||
"label": "hurricane",
|
||||
"icon": "cloudy-gusts"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user