angular-weather-any-degree
Version:
this package is used to show a simple weather, which we can change the type of degree
215 lines (207 loc) • 16.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
const API = 'https://api.openweathermap.org/data/2.5/weather?';
class AngularWeatherAnyDegreeService {
constructor(http) {
this.http = http;
}
getWeatherDetails(isGeoLocation, location, APIKEY, Units) {
if (isGeoLocation) {
return this.http.get(`${API}${location}&units=${Units}&appid=${APIKEY}`);
}
else {
return this.http.get(`${API}q=${location}&units=imperial&appid=${APIKEY}`);
}
}
}
AngularWeatherAnyDegreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
AngularWeatherAnyDegreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
class AngularWeatherAnyDegreeComponent {
constructor(ws) {
this.ws = ws;
this.height = 'auto';
this.width = '425px';
this.backgroundColor = 'rgb(10 10 111)';
this.isBoxShadow = true;
this.borderRadius = '5px';
this.locationFontSize = '40px';
this.locationFontColor = '#fff';
this.status = true;
this.statusFontColor = '#fff';
this.statusFontSize = '18px';
this.temperature = true;
this.tempratureFontColor = '#fff';
this.tempratureFontSize = '80px';
this.weatherImages = true;
this.weatherImageWidth = '100px';
this.weatherImageHeight = '100px';
this.geoLocation = false;
this.location = '';
this.isWind = true;
this.isHumidity = true;
this.windFontColor = '#fff';
this.windFontSize = '20px';
this.humidityFontColor = '#fff';
this.humidityFontSize = '20px';
this.isLoading = true;
this.weatherDetails = {
location: '',
weather_descriptions: '',
temperature: '',
icon: '',
wind_speed: '',
humidity: ''
};
}
ngOnInit() {
this.checkLocation();
}
/**
*@description Check whether geolocation or manually added location.
*/
checkLocation() {
if (this.geoLocation) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var lat = position.coords.latitude;
var long = position.coords.longitude;
this.location = `lat=${lat}&lon=${long}`;
this.getWeather(true);
}, (error) => {
console.warn(error.message);
});
}
else {
console.warn(`It seems like Geolocation, which is required for this page, is not enabled in your browser.
Please use a browser which supports it.`);
}
}
else if (!this.geoLocation && this.location.length < 1) {
console.warn('Provide a valid location');
}
else {
this.getWeather(false);
}
}
getWeather(isGeoLocation) {
if (this.APIKEY) {
this.ws.getWeatherDetails(isGeoLocation, this.location, this.APIKEY, this.Units).subscribe(response => {
this.weatherDetails = {
location: response.name,
weather_descriptions: response.weather[0].description,
temperature: response.main.temp,
icon: `http://openweathermap.org/img/wn/${response.weather[0].icon}@2x.png`,
wind_speed: response.wind.speed,
humidity: response.main.humidity
};
this.isLoading = false;
}, err => {
console.warn(err.error.error.message);
});
}
else {
console.warn('Invalid APIKEY');
}
}
}
AngularWeatherAnyDegreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeComponent, deps: [{ token: AngularWeatherAnyDegreeService }], target: i0.ɵɵFactoryTarget.Component });
AngularWeatherAnyDegreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: AngularWeatherAnyDegreeComponent, selector: "mal-angular-weather-any-degree", inputs: { Units: "Units", unitSymbol: "unitSymbol", APIKEY: "APIKEY", height: "height", width: "width", backgroundColor: "backgroundColor", isBoxShadow: "isBoxShadow", borderRadius: "borderRadius", locationFontSize: "locationFontSize", locationFontColor: "locationFontColor", status: "status", statusFontColor: "statusFontColor", statusFontSize: "statusFontSize", temperature: "temperature", tempratureFontColor: "tempratureFontColor", tempratureFontSize: "tempratureFontSize", weatherImages: "weatherImages", weatherImageWidth: "weatherImageWidth", weatherImageHeight: "weatherImageHeight", geoLocation: "geoLocation", location: "location", isWind: "isWind", isHumidity: "isHumidity", windFontColor: "windFontColor", windFontSize: "windFontSize", humidityFontColor: "humidityFontColor", humidityFontSize: "humidityFontSize" }, ngImport: i0, template: "<div class=\"container\"\r\n [ngStyle]=\"{ 'width': width , 'height': height, 'background-color': backgroundColor, 'box-shadow': isBoxShadow ? '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' : 'none', 'border-radius': borderRadius }\">\r\n <div class=\"weather-images\" *ngIf=\"weatherImages\">\r\n <img [ngStyle]=\"{'width': weatherImageWidth, 'height': weatherImageHeight }\" alt=\"weather-icon\"\r\n src=\"{{weatherDetails?.icon}}\" />\r\n </div>\r\n <span *ngIf=\"!isLoading\">\r\n <div class=\"location\">\r\n <p [ngStyle]=\"{'font-size': locationFontSize, 'color': locationFontColor}\">{{weatherDetails?.location}}</p>\r\n </div>\r\n <div class=\"status\" *ngIf=\"status\">\r\n <p [ngStyle]=\"{'color': statusFontColor, 'font-size': statusFontSize}\">{{weatherDetails?.weather_descriptions}}\r\n </p>\r\n </div>\r\n <div class=\"temp\" *ngIf=\"temperature\">\r\n <p [ngStyle]=\"{'color': tempratureFontColor, 'font-size': tempratureFontSize}\">{{weatherDetails?.temperature}}\u00B0{{unitSymbol}}\r\n </p>\r\n\r\n </div>\r\n <div class=\"details\" *ngIf=\"isWind\">\r\n <p [ngStyle]=\"{'color': windFontColor, 'font-size': windFontSize}\">Wind</p>\r\n <p class=\"wind\" [ngStyle]=\"{'color': windFontColor, 'font-size': windFontSize}\">{{weatherDetails?.wind_speed}} MPH\r\n </p>\r\n </div>\r\n <div class=\"details\" *ngIf=\"isHumidity\">\r\n <p [ngStyle]=\"{'color': humidityFontColor, 'font-size': humidityFontSize}\">Humidity</p>\r\n <p class=\"wind\" [ngStyle]=\"{'color': humidityFontColor, 'font-size': humidityFontSize}\">\r\n {{weatherDetails?.humidity}} %</p>\r\n </div>\r\n </span>\r\n <span *ngIf=\"isLoading\">\r\n <div class=\"loading\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" width=\"50px\" height=\"50px\"\r\n viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\r\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"10\" r=\"35\"\r\n stroke-dasharray=\"164.93361431346415 56.97787143782138\">\r\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\" dur=\"1s\"\r\n values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\r\n </circle>\r\n <!-- [ldio] generated by https://loading.io/ -->\r\n </svg>\r\n </div>\r\n </span>\r\n</div>\r\n", styles: ["p{padding:0;margin:0;word-break:break-all}.container{border-color:#000;padding:20px;font-family:roboto;text-align:center;justify-content:center}.container .temp{display:flex;justify-content:space-between;white-space:nowrap;text-align:center;justify-content:center}.container .details{text-align:center;justify-content:center;display:flex;margin-bottom:5px}.container .details .wind{padding-left:10px;text-align:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeComponent, decorators: [{
type: Component,
args: [{ selector: 'mal-angular-weather-any-degree', template: "<div class=\"container\"\r\n [ngStyle]=\"{ 'width': width , 'height': height, 'background-color': backgroundColor, 'box-shadow': isBoxShadow ? '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' : 'none', 'border-radius': borderRadius }\">\r\n <div class=\"weather-images\" *ngIf=\"weatherImages\">\r\n <img [ngStyle]=\"{'width': weatherImageWidth, 'height': weatherImageHeight }\" alt=\"weather-icon\"\r\n src=\"{{weatherDetails?.icon}}\" />\r\n </div>\r\n <span *ngIf=\"!isLoading\">\r\n <div class=\"location\">\r\n <p [ngStyle]=\"{'font-size': locationFontSize, 'color': locationFontColor}\">{{weatherDetails?.location}}</p>\r\n </div>\r\n <div class=\"status\" *ngIf=\"status\">\r\n <p [ngStyle]=\"{'color': statusFontColor, 'font-size': statusFontSize}\">{{weatherDetails?.weather_descriptions}}\r\n </p>\r\n </div>\r\n <div class=\"temp\" *ngIf=\"temperature\">\r\n <p [ngStyle]=\"{'color': tempratureFontColor, 'font-size': tempratureFontSize}\">{{weatherDetails?.temperature}}\u00B0{{unitSymbol}}\r\n </p>\r\n\r\n </div>\r\n <div class=\"details\" *ngIf=\"isWind\">\r\n <p [ngStyle]=\"{'color': windFontColor, 'font-size': windFontSize}\">Wind</p>\r\n <p class=\"wind\" [ngStyle]=\"{'color': windFontColor, 'font-size': windFontSize}\">{{weatherDetails?.wind_speed}} MPH\r\n </p>\r\n </div>\r\n <div class=\"details\" *ngIf=\"isHumidity\">\r\n <p [ngStyle]=\"{'color': humidityFontColor, 'font-size': humidityFontSize}\">Humidity</p>\r\n <p class=\"wind\" [ngStyle]=\"{'color': humidityFontColor, 'font-size': humidityFontSize}\">\r\n {{weatherDetails?.humidity}} %</p>\r\n </div>\r\n </span>\r\n <span *ngIf=\"isLoading\">\r\n <div class=\"loading\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" width=\"50px\" height=\"50px\"\r\n viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\r\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"10\" r=\"35\"\r\n stroke-dasharray=\"164.93361431346415 56.97787143782138\">\r\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\" dur=\"1s\"\r\n values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\r\n </circle>\r\n <!-- [ldio] generated by https://loading.io/ -->\r\n </svg>\r\n </div>\r\n </span>\r\n</div>\r\n", styles: ["p{padding:0;margin:0;word-break:break-all}.container{border-color:#000;padding:20px;font-family:roboto;text-align:center;justify-content:center}.container .temp{display:flex;justify-content:space-between;white-space:nowrap;text-align:center;justify-content:center}.container .details{text-align:center;justify-content:center;display:flex;margin-bottom:5px}.container .details .wind{padding-left:10px;text-align:center;justify-content:center}\n"] }]
}], ctorParameters: function () { return [{ type: AngularWeatherAnyDegreeService }]; }, propDecorators: { Units: [{
type: Input
}], unitSymbol: [{
type: Input
}], APIKEY: [{
type: Input
}], height: [{
type: Input
}], width: [{
type: Input
}], backgroundColor: [{
type: Input
}], isBoxShadow: [{
type: Input
}], borderRadius: [{
type: Input
}], locationFontSize: [{
type: Input
}], locationFontColor: [{
type: Input
}], status: [{
type: Input
}], statusFontColor: [{
type: Input
}], statusFontSize: [{
type: Input
}], temperature: [{
type: Input
}], tempratureFontColor: [{
type: Input
}], tempratureFontSize: [{
type: Input
}], weatherImages: [{
type: Input
}], weatherImageWidth: [{
type: Input
}], weatherImageHeight: [{
type: Input
}], geoLocation: [{
type: Input
}], location: [{
type: Input
}], isWind: [{
type: Input
}], isHumidity: [{
type: Input
}], windFontColor: [{
type: Input
}], windFontSize: [{
type: Input
}], humidityFontColor: [{
type: Input
}], humidityFontSize: [{
type: Input
}] } });
class AngularWeatherAnyDegreeModule {
}
AngularWeatherAnyDegreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AngularWeatherAnyDegreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeModule, declarations: [AngularWeatherAnyDegreeComponent], imports: [CommonModule,
HttpClientModule], exports: [AngularWeatherAnyDegreeComponent] });
AngularWeatherAnyDegreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeModule, providers: [AngularWeatherAnyDegreeService], imports: [CommonModule,
HttpClientModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: AngularWeatherAnyDegreeModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AngularWeatherAnyDegreeComponent
],
imports: [
CommonModule,
HttpClientModule
],
exports: [
AngularWeatherAnyDegreeComponent
],
providers: [AngularWeatherAnyDegreeService]
}]
}] });
/*
* Public API Surface of angular-weather-any-degree
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularWeatherAnyDegreeComponent, AngularWeatherAnyDegreeModule, AngularWeatherAnyDegreeService };
//# sourceMappingURL=angular-weather-any-degree.mjs.map