Skip to content

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

deploy

parent 62ae7da0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 11 deletions
docs/index.html
View file @ ec080999
...@@ -8,6 +8,6 @@ ...@@ -8,6 +8,6 @@
<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> <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> <body>
<app-root></app-root> <app-root></app-root>
<script src="runtime.fa2c139a589fcb01.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.d5d4ff0935ced84d.js" type="module"></script> <script src="runtime.fa2c139a589fcb01.js" type="module"></script><script src="polyfills.a277350f6f1b17a3.js" type="module"></script><script src="main.807a221f2c796e58.js" type="module"></script>
</body></html> </body></html>
\ No newline at end of file
src/app/today/today.component.html
View file @ ec080999
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
</div> </div>
</div> </div>
<div class="date text-center">{{item.date | date:'mediumDate'}}</div> <div class="date text-center">{{item.date | date:'mediumDate'}}</div>
</article> </article>
</a> </a>
</div> </div>
...@@ -45,7 +46,7 @@ ...@@ -45,7 +46,7 @@
<div class="place">{{cities[i + 1].name}}, {{cities[i + 1].sys.country}}</div> <div class="place">{{cities[i + 1].name}}, {{cities[i + 1].sys.country}}</div>
</div> </div>
</div> </div>
<div class="date text-center">{{cities[i + 1].date | date:'mediumDate'}}</div> <div class="date text-center">{{cities[i + 1].date| date:'mediumDate' }}</div>
</article> </article>
</a> </a>
</div> </div>
......
src/app/today/today.component.scss
View file @ ec080999
...@@ -47,10 +47,10 @@ body { ...@@ -47,10 +47,10 @@ body {
color: white; color: white;
.temperature { .temperature {
flex: 0 0 20%; flex: 0 0 15%;
width: 50%; width: 50%;
margin-right: 15px; padding-right: 5px;
font-size: 20px; font-size: 15px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-right: 10px; margin-right: 10px;
...@@ -59,21 +59,22 @@ body { ...@@ -59,21 +59,22 @@ body {
} }
.description { .description {
flex: 0 60%; flex: 0 65%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
padding: 5px 5px 5px 5px;
.weatherCondition { .weatherCondition {
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 15px;
font-weight: 800; font-weight: 800;
} }
.place { .place {
font-size: 15px; font-size: 14px;
} }
} }
} }
......
src/app/today/today.component.ts
View file @ ec080999
...@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { WeatherService } from '../weather.service'; import { WeatherService } from '../weather.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import { Parser } from '@angular/compiler';
@Component({ @Component({
selector: 'app-today', selector: 'app-today',
templateUrl: './today.component.html', templateUrl: './today.component.html',
...@@ -25,7 +26,14 @@ export class TodayComponent implements OnInit { ...@@ -25,7 +26,14 @@ export class TodayComponent implements OnInit {
this.weatherService.getWeatherDataByCoords(this.lat, this.lon).subscribe( this.weatherService.getWeatherDataByCoords(this.lat, this.lon).subscribe(
data => { data => {
this.weather = data; this.weather = data;
this.weather.date = new Date(); const utc_seconds = parseInt(this.weather.dt, 10) + parseInt(this.weather.timezone, 10);
let utc_milliseconds = utc_seconds * 1000;
let date = new Date(utc_milliseconds);
let hour = date.getUTCHours();
if(hour>=12) utc_milliseconds = (utc_seconds-24*60*60) * 1000;
let local_date = new Date(utc_milliseconds).toUTCString();
console.log(local_date);
this.weather.date = local_date;
let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1); let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC); if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC);
else { else {
...@@ -52,7 +60,14 @@ export class TodayComponent implements OnInit { ...@@ -52,7 +60,14 @@ export class TodayComponent implements OnInit {
next: data => { next: data => {
this.weather = data; this.weather = data;
console.log(this.weather); console.log(this.weather);
this.weather.date = new Date(); const utc_seconds = parseInt(this.weather.dt, 10) + parseInt(this.weather.timezone, 10);
let utc_milliseconds = utc_seconds * 1000;
let date = new Date(utc_milliseconds);
let hour = date.getUTCHours();
if(hour>=12) utc_milliseconds = (utc_seconds-24*60*60) * 1000;
let local_date = new Date(utc_milliseconds).toUTCString();
console.log(local_date);
this.weather.date = local_date;
let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1); let tempC = ((parseFloat(this.weather.main.temp) - 32) / 1.8).toFixed(1);
if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC); if (parseFloat(tempC) == parseInt(tempC)) this.weather.main.tempC = parseInt(tempC);
else { else {
......
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