Skip to content

W
WeatherAPI
Commit 5688cd12 authored by DangSauQuaKhu's avatar DangSauQuaKhu
Browse files
Options

deploy

parent d389d103
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 87 deletions
docs/3rdpartylicenses.txt
View file @ 5688cd12
......@@ -4,6 +4,31 @@ MIT
@angular/core
MIT
@angular/google-maps
MIT
The MIT License
Copyright (c) 2023 Google LLC.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
@angular/platform-browser
MIT
......
docs/index.html
View file @ 5688cd12
......@@ -4,9 +4,10 @@
<base href="/WeatherAPI/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJX6W5hnaRiflKPFyuT8vFX1gfqG9HruI"></script>
<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}</style><link rel="stylesheet" href="styles.9c36b9530393e161.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9c36b9530393e161.css"></noscript></head>
<body>
<app-root></app-root>
<script src="runtime.0e83b2a9f1351278.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.a1bfaa27595f2043.js" type="module"></script>
<script src="runtime.0e83b2a9f1351278.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.b713d01cfa88d07e.js" type="module"></script>
</body></html>
\ No newline at end of file
docs/main.a1bfaa27595f2043.js deleted 100644 → 0
View file @ d389d103
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/main.b713d01cfa88d07e.js 0 → 100644
View file @ 5688cd12
This source diff could not be displayed because it is too large. You can view the blob instead.
package-lock.json
View file @ 5688cd12
......@@ -13,6 +13,7 @@
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/google-maps": "^15.2.8",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
......@@ -521,6 +522,20 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/google-maps": {
"version": "15.2.8",
"resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-15.2.8.tgz",
"integrity": "sha512-0AqAV7jm5O6l9TSKI50xIgNuBqX7olTuhhsZLx5DaxKETTxq6AIbv/B1qo+yYBLnTVpwn5XwKUnhNsfxwFBUoA==",
"dependencies": {
"@types/google.maps": "^3.45.6",
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/common": "^15.0.0 || ^16.0.0",
"@angular/core": "^15.0.0 || ^16.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/platform-browser": {
"version": "15.2.8",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.8.tgz",
......@@ -3157,6 +3172,11 @@
"@types/range-parser": "*"
}
},
"node_modules/@types/google.maps": {
"version": "3.52.6",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.52.6.tgz",
"integrity": "sha512-CnwN5UcezNiRuJzV0wGIsqXWNwMM6WzIxmy9lOUx+yauRQMee5XH/N7NaVOsiY5T5ygrnBwPO+csND652HYsTQ=="
},
"node_modules/@types/http-proxy": {
"version": "1.17.10",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
......@@ -11876,6 +11896,15 @@
"tslib": "^2.3.0"
}
},
"@angular/google-maps": {
"version": "15.2.8",
"resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-15.2.8.tgz",
"integrity": "sha512-0AqAV7jm5O6l9TSKI50xIgNuBqX7olTuhhsZLx5DaxKETTxq6AIbv/B1qo+yYBLnTVpwn5XwKUnhNsfxwFBUoA==",
"requires": {
"@types/google.maps": "^3.45.6",
"tslib": "^2.3.0"
}
},
"@angular/platform-browser": {
"version": "15.2.8",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.8.tgz",
......@@ -13676,6 +13705,11 @@
"@types/range-parser": "*"
}
},
"@types/google.maps": {
"version": "3.52.6",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.52.6.tgz",
"integrity": "sha512-CnwN5UcezNiRuJzV0wGIsqXWNwMM6WzIxmy9lOUx+yauRQMee5XH/N7NaVOsiY5T5ygrnBwPO+csND652HYsTQ=="
},
"@types/http-proxy": {
"version": "1.17.10",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
......
src/app/anothercity/anothercity.component.html
View file @ 5688cd12
<h2 class="text-center">Weather in {{weather.name}}, {{weather.sys.country}}</h2>
<div class="col-sm-12 text-center">
<span class="temp">{{weather.main.temp|number:'1.0-0'}}&#176;F</span>
<p class="text-uppercase font-italic font-weight-bold" >{{weather.weather[0].description}}</p>
<img src="{{weather.iconImg}}">
<span class="temp">{{weather.main.tempC}}&#176;C</span>
<p class="text-uppercase font-italic font-weight-bold" style="color: red;" >{{weather.weather[0].description}}</p>
</div>
<table class="table table-light table-striped table-bordered table-sm text-center" style="width: 70%; margin-left: 13%;">
<tbody>
......@@ -17,9 +19,22 @@
<tr>
<td>Sunset</td><td>{{weather.sys.sunset*1000|date: 'H:mm'}}</td>
</tr>
<tr>
<td>Geo coords</td><td>[{{weather.coord.lat}},{{weather.coord.lon}}]</td>
</tr>
<tr>
<td><a routerLink="/">Back</a></td>
</tr>
</tbody>
</table>
<br>
<br>
<google-map height="500px"
width="100%"
[zoom]="zoom"
[center]="center"
[options]="options" ></google-map>
<button (click)="zoomIn()">Zoom in</button>
<button (click)="zoomOut()">Zoom out</button>
\ No newline at end of file
src/app/anothercity/anothercity.component.ts
View file @ 5688cd12
......@@ -8,19 +8,51 @@ import { ActivatedRoute } from '@angular/router';
styleUrls: ['./anothercity.component.css']
})
export class AnothercityComponent implements OnInit {
;
zoom = 12;
center: google.maps.LatLngLiteral;
options: google.maps.MapOptions = {
mapTypeId: 'hybrid',
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
maxZoom: 15,
minZoom: 8,
};
weather;
constructor(private weatherService: WeatherService,private _route: ActivatedRoute){}
ngOnInit(): void {
console.log("router:",this._route.url);
let slug = this._route.snapshot.paramMap.get('slug');
console.log("slug:",slug);
this.weatherService.getWeatherDataByCityName(slug).subscribe(
data=>{
this.weather= data;
this.weather = data;
this.weather.date = new Date();
let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC);
else {
this.weather.main.tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
console.log(this.weather.main.tempC);
}
this.weather.iconImg = "https://openweathermap.org/img/wn/"+this.weather.weather[0].icon+"@2x.png";
console.log(this.weather);
}
)
this.center = {
lat: this.weather.coord.lat,
lng: this.weather.coord.lon,
};
console.log(this.center);
}
zoomIn() {
if (this.zoom < this.options.maxZoom) this.zoom++;
}
zoomOut() {
if (this.zoom > this.options.minZoom) this.zoom--;
}
}
src/app/app.component.css
View file @ 5688cd12
body {
height: 1200px;
}
\ No newline at end of file
src/app/app.component.html
View file @ 5688cd12
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
<app-today [cities]="cities"></app-today>
</div>
<body style=" background: linear-gradient(
to right,
rgba(251, 194, 235, 1),
rgba(166, 193, 238, 1)
);">
<div class="container">
<app-today [cities]="cities"></app-today>
</div>
</body>
src/app/app.module.ts
View file @ 5688cd12
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TodayComponent } from './today/today.component';
import { AnothercityComponent } from './anothercity/anothercity.component';
import { GoogleMapsModule } from '@angular/google-maps'
@NgModule({
declarations: [
......@@ -16,7 +16,8 @@ import { AnothercityComponent } from './anothercity/anothercity.component';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
HttpClientModule,
GoogleMapsModule
],
providers: [],
bootstrap: [AppComponent]
......
src/app/today/today.component.html
View file @ 5688cd12
<router-outlet></router-outlet>
<div *ngIf="isHomeRoute()">
<div *ngIf="isHomeRoute()">
<div class="row">
<div class="col-md-6 offset-md-3 ">
<div class="col-sm-12 text-center">
<div class="input-group mt-5">
<div class="input-group mt-5" style="margin-right: 50px;">
<input type="text" class="form-control" #userInput placeholder="city name"
(keyup.enter)="getCity(userInput.value)">
<div class="input-group-append">
......@@ -12,44 +14,74 @@
(click)="getCity(userInput.value)">Search</button>
</div>
</div>
</div>
</div>
<div *ngFor="let city of cities">
<h2 class="text-center">Weather in {{city.name}}, {{city.sys.country}}</h2>
<div class="col-sm-12 text-center">
<span class="temp">{{city.main.temp|number:'1.0-0'}}&#176;F</span>
<p class="text-uppercase font-italic font-weight-bold">{{city.weather[0].description}}</p>
</div>
<table class="table table-light table-striped table-bordered table-sm text-center"
style="width: 70%; margin-left: 13%;">
<tbody>
<tr>
<td>Humidity</td>
<td>{{city.main.humidity}}%</td>
</tr>
<tr>
<td>Pressure</td>
<td>{{city.main.pressure}} hPa</td>
</tr>
<tr>
<td>Sunrise</td>
<td>{{city.sys.sunrise*1000 | date: 'H:mm'}}</td>
</tr>
<tr>
<td>Sunset</td>
<td>{{city.sys.sunset*1000|date: 'H:mm'}}</td>
</tr>
<tr>
<td></td>
<td><a [routerLink]="[city.name]">Detail</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div *ngFor="let item of cities; let i = index">
<div *ngIf="i % 3 == 0" class="row" style="margin-top: 40px;margin-left: 100px;">
<div class="col " >
<a [routerLink]="[item.name]">
<article class="widget">
<div class="weatherIcon"><img src="{{item.iconImg}}"></div>
<div class="weatherInfo">
<div class="temperature"><span>{{item.main.tempC}}&#176;C</span></div>
<div class="description">
<div class="weatherCondition">{{item.weather[0].description}}</div>
<div class="place">{{item.name}}, {{item.sys.country}}</div>
</div>
</div>
<div class="date text-center">{{item.date | date:'mediumDate'}}</div>
</article>
</a>
</div>
<div class="col" >
<div *ngIf="i + 1 < cities.length">
<a [routerLink]="[cities[i + 1].name]">
<article class="widget" >
<div class="weatherIcon"><img src="{{cities[i + 1].iconImg}}"></div>
<div class="weatherInfo">
<div class="temperature"><span>{{cities[i + 1].main.tempC}}&#176;C</span></div>
<div class="description">
<div class="weatherCondition">{{cities[i + 1].weather[0].description}}</div>
<div class="place">{{cities[i + 1].name}}, {{cities[i + 1].sys.country}}</div>
</div>
</div>
<div class="date text-center">{{cities[i + 1].date | date:'mediumDate'}}</div>
</article>
</a>
</div>
</div>
<div class="col" >
<div *ngIf="i + 2 < cities.length">
<a [routerLink]="[cities[i + 2].name]">
<article class="widget">
<div class="weatherIcon"><img src="{{cities[i + 2].iconImg}}"></div>
<div class="weatherInfo">
<div class="temperature"><span>{{cities[i + 2] .main.tempC}}&#176;C</span></div>
<div class="description">
<div class="weatherCondition">{{cities[i + 2] .weather[0].description}}</div>
<div class="place">{{cities[i + 2].name}}, {{cities[i + 2].sys.country}}</div>
</div>
</div>
<div class="date text-center">{{cities[i + 2].date | date:'mediumDate'}}</div>
</article>
</a>
</div>
</div>
</div>
</div>
src/app/today/today.component.scss 0 → 100644
View file @ 5688cd12
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css);
$border-radius: 20px;
body {
background-color: #A64253;
font-family: Poiret One;
}
.widget {
top: 50%;
left: 50%;
display: flex;
height: 200px;
width: 300px;
transform: translate(-10%, 40%);
flex-wrap: wrap;
cursor: pointer;
border-radius: $border-radius;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
.weatherIcon{
flex: 2 40%;
height: 60%;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
background: #FAFAFA;
font-family: weathericons;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 70px;
i{
padding-top: 30px;
}
}
.weatherInfo{
flex: 0 0 65%;
height: 40%;
background: #080705;
border-bottom-left-radius: $border-radius;
display: flex;
align-items: center;
color: white;
.temperature{
flex: 0 0 20%;
width: 50%;
font-size: 20px;
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-left: 20px;
}
.description{
flex: 0 60%;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
.weatherCondition{
text-transform: uppercase;
font-size: 20px;
font-weight: 100;
}
.place{
font-size: 15px;
}
}
}
.date{
flex: 0 0 35%;
height: 40%;
background: #70C1B3;
border-bottom-right-radius: $border-radius;
display: flex;
justify-content: space-around;
align-items: center;
color: white;
font-size: 20px;
font-weight: 500;
}
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: black;
text-decoration: none;
cursor: pointer;
}
src/app/today/today.component.ts
View file @ 5688cd12
......@@ -5,50 +5,72 @@ import { Router } from '@angular/router';
@Component({
selector: 'app-today',
templateUrl: './today.component.html',
styleUrls: ['./today.component.css']
styleUrls: ['./today.component.scss']
})
export class TodayComponent implements OnInit {
@Input() cities: any[];
lat;
lon;
weather;
constructor(private weatherService: WeatherService,private router: Router){}
ngOnInit(): void {
this.getLocation();
}
getLocation(){
if("geolocation" in navigator)
{
navigator.geolocation.watchPosition((success)=>{
this.lat = success.coords.latitude;
this.lon= success.coords.longitude;
this.weatherService.getWeatherDataByCoords(this.lat,this.lon).subscribe(
data=>{
this.weather= data;
if(this.cities.findIndex(element=>element.name === this.weather.name)==-1)
this.cities.push(data);
console.log(this.weather);
}
constructor(private weatherService: WeatherService, private router: Router) { }
ngOnInit(): void {
this.getLocation();
}
getLocation() {
if ("geolocation" in navigator) {
navigator.geolocation.watchPosition((success) => {
this.lat = success.coords.latitude;
this.lon = success.coords.longitude;
this.weatherService.getWeatherDataByCoords(this.lat, this.lon).subscribe(
data => {
this.weather = data;
this.weather.date = new Date();
let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC);
else {
this.weather.main.tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
console.log(this.weather.main.tempC);
}
this.weather.iconImg = "https://openweathermap.org/img/wn/"+this.weather.weather[0].icon+"@2x.png";
console.log(this.weather.iconImg);
if (this.cities.findIndex(element => element.name === this.weather.name) == -1) {
this.cities.push(this.weather);
console.log(this.weather);
}
}
)
}
)
}
}
getCity(city) {
this.weatherService.getWeatherDataByCityName(city).subscribe(
data => {
this.weather = data;
this.weather.date = new Date();
let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC);
else {
this.weather.main.tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
console.log(this.weather.main.tempC);
}
this.weather.iconImg = "https://openweathermap.org/img/wn/"+this.weather.weather[0].icon+"@2x.png";
console.log(this.weather);
if (this.cities.findIndex(element => element.name === this.weather.name) == -1)
this.cities.push(this.weather);
}
)
}
}
getCity(city)
{
this.weatherService.getWeatherDataByCityName(city).subscribe(
data=>{
this.weather= data;
console.log(this.weather);
if(this.cities.findIndex(element=>element.name === this.weather.name)==-1)
this.cities.push(data);
}
)
}
isHomeRoute() {
//console.log(this.router.url);
return this.router.url === '/';
}
isHomeRoute() {
//console.log(this.router.url);
return this.router.url === '/';
}
getIndex(name): number{
return this.cities.findIndex(element => element.name === name);
}
}
src/index.html
View file @ 5688cd12
......@@ -6,6 +6,7 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJX6W5hnaRiflKPFyuT8vFX1gfqG9HruI"></script>
</head>
<body>
<app-root></app-root>
......
src/styles.css
View file @ 5688cd12
/* You can add global styles to this file, and also import other style files */
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment