Commit 62ae7da0 authored by DangSauQuaKhu's avatar DangSauQuaKhu

deploy

parent 11d679ce
......@@ -26,7 +26,8 @@
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/sweetalert2/src/sweetalert2.scss"
],
"scripts": []
},
......@@ -89,6 +90,7 @@
],
"styles": [
"src/styles.css"
],
"scripts": []
}
......
......@@ -267,6 +267,32 @@ Apache-2.0
sweetalert2
MIT
The MIT License (MIT)
Copyright (c) 2014 Tristan Edwards & Limon Monte
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.
tslib
0BSD
Copyright (c) Microsoft Corporation.
......
......@@ -5,9 +5,9 @@
<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>
<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.1a8208b7ca9a3fa2.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.1a8208b7ca9a3fa2.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.1a2ae4851d8fb084.js" type="module"></script>
<script src="runtime.fa2c139a589fcb01.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.d5d4ff0935ced84d.js" type="module"></script>
</body></html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
(()=>{"use strict";var e,i={},h={};function n(e){var l=h[e];if(void 0!==l)return l.exports;var r=h[e]={exports:{}};return i[e](r,r.exports,n),r.exports}n.m=i,e=[],n.O=(l,r,u,f)=>{if(!r){var t=1/0;for(a=0;a<e.length;a++){for(var[r,u,f]=e[a],c=!0,o=0;o<r.length;o++)(!1&f||t>=f)&&Object.keys(n.O).every(p=>n.O[p](r[o]))?r.splice(o--,1):(c=!1,f<t&&(t=f));if(c){e.splice(a--,1);var s=u();void 0!==s&&(l=s)}}return l}f=f||0;for(var a=e.length;a>0&&e[a-1][2]>f;a--)e[a]=e[a-1];e[a]=[r,u,f]},n.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l),(()=>{var e={666:0};n.O.j=u=>0===e[u];var l=(u,f)=>{var o,s,[a,t,c]=f,v=0;if(a.some(d=>0!==e[d])){for(o in t)n.o(t,o)&&(n.m[o]=t[o]);if(c)var _=c(n)}for(u&&u(f);v<a.length;v++)n.o(e,s=a[v])&&e[s]&&e[s][0](),e[s]=0;return n.O(_)},r=self.webpackChunkweatherAPI=self.webpackChunkweatherAPI||[];r.forEach(l.bind(null,0)),r.push=l.bind(null,r.push.bind(r))})()})();
\ No newline at end of file
(()=>{"use strict";var e,_={},h={};function n(e){var a=h[e];if(void 0!==a)return a.exports;var r=h[e]={exports:{}};return _[e].call(r.exports,r,r.exports,n),r.exports}n.m=_,e=[],n.O=(a,r,u,f)=>{if(!r){var o=1/0;for(t=0;t<e.length;t++){for(var[r,u,f]=e[t],s=!0,l=0;l<r.length;l++)(!1&f||o>=f)&&Object.keys(n.O).every(d=>n.O[d](r[l]))?r.splice(l--,1):(s=!1,f<o&&(o=f));if(s){e.splice(t--,1);var c=u();void 0!==c&&(a=c)}}return a}f=f||0;for(var t=e.length;t>0&&e[t-1][2]>f;t--)e[t]=e[t-1];e[t]=[r,u,f]},n.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return n.d(a,{a}),a},n.d=(e,a)=>{for(var r in a)n.o(a,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},n.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),(()=>{var e={666:0};n.O.j=u=>0===e[u];var a=(u,f)=>{var l,c,[t,o,s]=f,v=0;if(t.some(b=>0!==e[b])){for(l in o)n.o(o,l)&&(n.m[l]=o[l]);if(s)var p=s(n)}for(u&&u(f);v<t.length;v++)n.o(e,c=t[v])&&e[c]&&e[c][0](),e[c]=0;return n.O(p)},r=self.webpackChunkweatherAPI=self.webpackChunkweatherAPI||[];r.forEach(a.bind(null,0)),r.push=a.bind(null,r.push.bind(r))})()})();
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<h2 class="text-center">Weather in {{weather.name}}, {{weather.sys.country}}</h2>
<div class="col-sm-12 text-center">
<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>
<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>
<tr>
<td>Humidity</td><td>{{weather.main.humidity}}%</td>
</tr>
<tr>
<td>Pressure</td><td>{{weather.main.pressure}} hPa</td>
</tr>
<tr>
<td>Sunrise</td><td>{{weather.sys.sunrise*1000 | date: 'H:mm'}}</td>
</tr>
<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 class="table table-light table-striped table-bordered table-sm text-center"
style="width: 70%; margin-left: 15%;">
<tbody>
<tr>
<td>Humidity</td>
<td>{{weather.main.humidity}}%</td>
</tr>
<tr>
<td>Pressure</td>
<td>{{weather.main.pressure}} hPa</td>
</tr>
<tr>
<td>Sunrise</td>
<td>{{weather.sys.sunrise*1000 | date: 'H:mm'}}</td>
</tr>
<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>
<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
<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">
......@@ -14,16 +12,13 @@
(click)="getCity(userInput.value)">Search</button>
</div>
</div>
</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 " >
<div class="col ">
<a [routerLink]="[item.name]">
<article class="widget">
<div class="weatherIcon"><img src="{{item.iconImg}}"></div>
......@@ -37,51 +32,40 @@
<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 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>
<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 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>
</div>
</div>
\ No newline at end of file
......@@ -19,8 +19,8 @@ body {
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{
.weatherIcon {
flex: 2 40%;
height: 60%;
border-top-left-radius: $border-radius;
......@@ -31,53 +31,55 @@ body {
align-items: center;
justify-content: space-around;
font-size: 70px;
i{
i {
padding-top: 30px;
}
}
.weatherInfo{
flex: 0 0 65%;
.weatherInfo {
flex: 0 0 75%;
height: 40%;
background: #080705;
border-bottom-left-radius: $border-radius;
display: flex;
align-items: center;
color: white;
.temperature{
.temperature {
flex: 0 0 20%;
width: 50%;
margin-right: 15px;
font-size: 20px;
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-left: 20px;
font-weight: 500;
}
.description{
.description {
flex: 0 60%;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
.weatherCondition{
.weatherCondition {
text-transform: uppercase;
font-size: 20px;
font-weight: 100;
font-size: 14px;
font-weight: 800;
}
.place{
.place {
font-size: 15px;
}
}
}
.date{
flex: 0 0 35%;
.date {
flex: 0 0 25%;
height: 40%;
background: #70C1B3;
border-bottom-right-radius: $border-radius;
......@@ -85,11 +87,12 @@ body {
justify-content: space-around;
align-items: center;
color: white;
font-size: 20px;
font-size: 15px;
font-weight: 500;
}
}
a {
text-decoration: none;
color: black;
......@@ -100,5 +103,4 @@ a:hover {
color: black;
text-decoration: none;
cursor: pointer;
}
}
\ No newline at end of file
import { Component, Input, OnInit } from '@angular/core';
import { WeatherService } from '../weather.service';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';
@Component({
selector: 'app-today',
templateUrl: './today.component.html',
......@@ -12,6 +12,7 @@ export class TodayComponent implements OnInit {
lat;
lon;
weather;
errorMessage: any;
constructor(private weatherService: WeatherService, private router: Router) { }
ngOnInit(): void {
this.getLocation();
......@@ -31,10 +32,10 @@ export class TodayComponent implements OnInit {
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";
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);
}
......@@ -47,9 +48,10 @@ export class TodayComponent implements OnInit {
}
getCity(city) {
this.weatherService.getWeatherDataByCityName(city).subscribe(
data => {
this.weatherService.getWeatherDataByCityName(city).subscribe({
next: data => {
this.weather = data;
console.log(this.weather);
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);
......@@ -57,12 +59,29 @@ export class TodayComponent implements OnInit {
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";
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);
else {
Swal.fire({
icon: 'error',
text: "The city already exists"
});
}
},
error: error => {
this.errorMessage = error.message;
Swal.fire({
icon: 'error',
text: "City ​​not found! "
});
}
}
)
}
isHomeRoute() {
......@@ -70,7 +89,7 @@ export class TodayComponent implements OnInit {
return this.router.url === '/';
}
getIndex(name): number{
getIndex(name): number {
return this.cities.findIndex(element => element.name === name);
}
}
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