Skip to content

Commit 0c75ecc

Browse files
angelluceangelluce
committed
issue: some enhancements
1 parent 4efb9c7 commit 0c75ecc

23 files changed

+201
-56
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
# NASA
44

55
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.4.
6-
Watch the result in [GitHub Pages](https://angelluce.github.io/NASA/)
6+
Watch the result in [GitHub Pages](https://angelluce.github.io/nasa/)
77

88
Visit the [NASA API](https://api.nasa.gov/) to get your own API key and more information about the API.
99

‎src/app/app-routing.module.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import {HomeComponent} from "./components/home/home.component";
44
import {ApodComponent} from "./components/nasa/apod/apod.component";
5+
import {EpicComponent} from "./components/nasa/epic/epic.component";
56

67
const routes: Routes = [
7-
{ path: 'home', component: HomeComponent },
8+
{ path: '', component: HomeComponent },
89
{ path: 'apod', component: ApodComponent },
9-
{ path: '', redirectTo: 'apod', pathMatch: 'full'},
10-
{ path: '**', redirectTo: 'apod', pathMatch: 'full'}
10+
{ path: 'epic', component: EpicComponent },
11+
{ path: '', redirectTo: '', pathMatch: 'full'},
12+
{ path: '**', redirectTo: '', pathMatch: 'full'}
1113
];
1214

1315
@NgModule({

‎src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="bg-dark">
1+
<div class="bg-dark-app">
22
<router-outlet></router-outlet>
33
<app-info></app-info>
44
</div>

‎src/app/app.component.scss

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
.bg-dark {
1+
$m-01: #071426;
2+
$m-02: #546c8c;
3+
4+
5+
.bg-dark-app {
26
max-width: 100vw;
37
min-height: 100vh;
48
padding: 3rem 2rem;
5-
background-color: black;
9+
background-color: $m-01;
610
background-image: radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 20px),
711
radial-gradient(white, rgba(255, 255, 255, .08) 1px, transparent 25px),
812
radial-gradient(white, rgba(255, 255, 255, .05) 2px, transparent 30px),
913
radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .02) 2px, transparent 35px);
1014
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
1115
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
1216
}
17+
18+
19+
.bg-dark-blue {
20+
background-color: $m-02 !important;
21+
}

‎src/app/app.module.ts

+20-8
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,40 @@ import {HomeComponent} from './components/home/home.component';
1010
import {ButtonModule} from "primeng/button";
1111
import {ToastModule} from "primeng/toast";
1212
import {DialogModule} from "primeng/dialog";
13-
import {InfoComponent} from './components/info/info.component';
13+
import {InfoComponent} from './shared/info/info.component';
1414
import {TooltipModule} from "primeng/tooltip";
1515
import {ImageModule} from "primeng/image";
1616
import {ApodComponent} from './components/nasa/apod/apod.component';
17+
import { LoadingComponent } from './shared/loading/loading.component';
18+
import { SearchComponent } from './shared/search/search.component';
19+
import {ReactiveFormsModule} from "@angular/forms";
20+
import {CalendarModule} from "primeng/calendar";
21+
import { EpicComponent } from './components/nasa/epic/epic.component';
22+
import {SafePipe} from "./shared/safe.pipe";
1723

1824
@NgModule({
19-
declarations: [
20-
AppComponent,
21-
HomeComponent,
22-
InfoComponent,
23-
ApodComponent
24-
],
25+
declarations: [
26+
AppComponent,
27+
HomeComponent,
28+
InfoComponent,
29+
ApodComponent,
30+
LoadingComponent,
31+
SearchComponent,
32+
EpicComponent,
33+
SafePipe
34+
],
2535
imports: [
2636
BrowserModule,
2737
AppRoutingModule,
2838
HttpClientModule,
2939
BrowserAnimationsModule,
40+
ReactiveFormsModule,
3041
ButtonModule,
3142
ToastModule,
3243
DialogModule,
3344
TooltipModule,
34-
ImageModule
45+
ImageModule,
46+
CalendarModule
3547
],
3648
providers: [MessageService],
3749
bootstrap: [AppComponent]

‎src/app/components/home/home.component.html

+13-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
1-
<div class="container"></div>
1+
<div class="container content-center text-center">
2+
<h1 class="display-2">NASA API</h1>
3+
<div class="row row-cols-auto justify-content-center">
4+
<div class="card m-3 p-3 text-center" style="width: 18rem;" [routerLink]="['/apod']">
5+
<h3 class="text-dark">APOD</h3>
6+
<p class="text-muted mb-0">Astronomy Picture of the Day</p>
7+
</div>
8+
<div class="card m-3 p-3 text-center" style="width: 18rem;" [routerLink]="['/epic']">
9+
<h3 class="text-dark">EPIC</h3>
10+
<p class="text-muted mb-0">Earth Polychromatic Imaging Camera</p>
11+
</div>
12+
</div>
13+
</div>

‎src/app/components/nasa/apod/apod.component.html

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<p-toast></p-toast>
22

3+
<app-search [title]="title" [searchType]="false" (response)="searchNasaData($event)"></app-search>
4+
35
<div *ngIf="nasaResponse" class="container">
46
<div class="content text-center">
5-
<h1 class="display-4">{{nasaResponse?.title}}</h1>
6-
<p>{{title}}</p>
77
<div class="d-flex justify-content-center">
8-
<p-image *ngIf="nasaResponse?.media_type === 'image'"
9-
src="{{nasaResponse?.hdurl}}" alt="Image" width="100%" [preview]="true"></p-image>
10-
<video *ngIf="nasaResponse?.media_type === 'video'"
11-
autoplay="true" name="media">
12-
<source src="{{nasaResponse?.url}}" type="video/mp4">
13-
</video>
8+
<p-image *ngIf="nasaResponse?.media_type === 'image'" width="250"
9+
src="{{nasaResponse?.hdurl}}" alt="" [preview]="true"></p-image>
10+
<iframe *ngIf="nasaResponse?.media_type === 'video'"
11+
[src]="nasaResponse?.url | safe" width="400" height="300"></iframe>
1412
</div>
15-
<p class="description mt-3">{{nasaResponse?.explanation}}</p>
16-
<p class="description mt-3" style="font-style: italic;
17-
color: #bebebe">Copyright: {{nasaResponse?.copyright || 'Not found'}}</p>
13+
<h1 class="display-5">{{ nasaResponse?.title }}</h1>
14+
<p class="description mt-3 text-justify">{{ nasaResponse?.explanation }}</p>
15+
<p *ngIf="nasaResponse?.copyright" class="description mt-3" style="font-style: italic;
16+
color: #bebebe">Copyright: {{ nasaResponse?.copyright || 'Not found' }}</p>
1817
</div>
1918
</div>
19+
20+
<app-loading *ngIf="loading"></app-loading>

‎src/app/components/nasa/apod/apod.component.ts

+24-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Component, OnInit} from '@angular/core';
2-
import {NasaResponse} from "../../../models/NasaResponse";
3-
import {NasaService} from "../../../services/nasa.service";
42
import {MessageService} from "primeng/api";
3+
import {NasaService} from "../../../services/nasa.service";
4+
import {ApodResponse} from "../../../models/ApodResponse";
55
import {EnumsNasa} from "../../../shared/enums";
66

77
@Component({
@@ -10,9 +10,9 @@ import {EnumsNasa} from "../../../shared/enums";
1010
styleUrls: ['./apod.component.scss']
1111
})
1212
export class ApodComponent implements OnInit {
13-
nasaResponse: NasaResponse;
13+
nasaResponse: ApodResponse;
1414
title: string;
15-
display = false;
15+
loading = false;
1616

1717
constructor(private _nasaService: NasaService,
1818
private _messageService: MessageService) {
@@ -23,14 +23,26 @@ export class ApodComponent implements OnInit {
2323
this.getNasaData();
2424
}
2525

26-
getNasaData(): void {
27-
this._nasaService.getNasaApod()
28-
.then(data => {
26+
getNasaData(params?: string): void {
27+
this.nasaResponse = new ApodResponse();
28+
this.loading = true;
29+
this._nasaService.getNasaApod(params ? params : '').subscribe({
30+
next: (data) => {
2931
this.nasaResponse = data;
30-
this.display = true;
31-
})
32-
.catch(err => {
33-
this._messageService.add({severity: 'error', summary: 'Error', detail: 'Error retrieving data from NASA'});
34-
});
32+
this.loading = false;
33+
},
34+
error: (err) => {
35+
// console.log(err)
36+
this.nasaResponse = new ApodResponse();
37+
this.loading = false;
38+
this._messageService.add({severity: 'error', summary: 'Error', detail: err.error.msg || 'Error retrieving data from NASA'});
39+
}
40+
});
3541
}
42+
43+
searchNasaData(event: string) {
44+
// console.log(event);
45+
this.getNasaData(event);
46+
}
47+
3648
}

‎src/app/components/nasa/epic/epic.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export class EpicComponent implements OnInit {
4242
image: NASA_EPIC_IMAGE_URL(date, item.image)
4343
}
4444
});
45-
console.log(this.nasaResponse)
4645
this.loading = false;
4746
},
4847
error: (err) => {

‎src/app/models/NasaResponse.ts ‎src/app/models/ApodResponse.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class NasaResponse {
1+
export class ApodResponse {
22
title: string;
33
explanation: string;
44
media_type: string;

‎src/app/models/EpicResponse.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export class EpicResponse {
2+
identifier: string;
3+
caption: string;
4+
image: string;
5+
version: string;
6+
centroid_coordinates: {
7+
lat: number;
8+
lon: number;
9+
};
10+
dscovr_j2000_position: {
11+
x: number;
12+
y: number;
13+
z: number;
14+
};
15+
lunar_j2000_position: {
16+
x: number;
17+
y: number;
18+
z: number;
19+
};
20+
sun_j2000_position: {
21+
x: number;
22+
y: number;
23+
z: number;
24+
};
25+
attitude_quaternions: {
26+
q0: number;
27+
q1: number;
28+
q2: number;
29+
q3: number;
30+
};
31+
date: string;
32+
coords: {
33+
centroid_coordinates: {
34+
lat: number;
35+
lon: number;
36+
};
37+
dscovr_j2000_position: {
38+
x: number;
39+
y: number;
40+
z: number;
41+
};
42+
lunar_j2000_position: {
43+
x: number;
44+
y: number;
45+
z: number;
46+
};
47+
sun_j2000_position: {
48+
x: number;
49+
y: number;
50+
z: number;
51+
};
52+
attitude_quaternions: {
53+
q0: number;
54+
q1: number;
55+
q2: number;
56+
q3: number;
57+
}
58+
}
59+
}

‎src/app/services/nasa.service.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Injectable} from '@angular/core';
22
import {HttpClient, HttpHeaders} from "@angular/common/http";
3-
import {NASA_APOD_URL} from "../shared/paths";
3+
import {NASA_APOD_URL, NASA_EPIC_IMAGE_URL, NASA_EPIC_URL} from "../shared/paths";
4+
import {Observable} from "rxjs";
45

56
@Injectable({
67
providedIn: 'root'
@@ -11,7 +12,15 @@ export class NasaService {
1112
constructor(private _http: HttpClient) {
1213
}
1314

14-
getNasaApod(): Promise<any> {
15-
return this._http.get<any>(NASA_APOD_URL).toPromise();
15+
getNasaApod(params: string): Observable<any> {
16+
return this._http.get<any>(`${NASA_APOD_URL}${params}`);
17+
}
18+
19+
getNasaEpic(params: string): Observable<any> {
20+
return this._http.get<any>(`${NASA_EPIC_URL}${params}`);
21+
}
22+
23+
getNasaEpicImage(date: string, image: string): Observable<any> {
24+
return this._http.get<any>(`${NASA_EPIC_IMAGE_URL(date, image)}`);
1625
}
1726
}

‎src/app/services/social-networks.service.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ export class SocialNetworksService {
1010

1111
getSocialNetworks(): SocialNetworkModel[] {
1212
return [
13+
{
14+
name: 'LinkedIn',
15+
url: 'https://www.linkedin.com/in/angellucero/',
16+
icon: 'pi-linkedin',
17+
},
1318
{
1419
name: 'GitHub',
1520
url: 'https://github.com/angelluce',
@@ -20,11 +25,6 @@ export class SocialNetworksService {
2025
url: 'https://www.instagram.com/angel.lu24/',
2126
icon: 'pi-instagram',
2227
},
23-
{
24-
name: 'LinkedIn',
25-
url: 'https://www.linkedin.com/in/angellucero/',
26-
icon: 'pi-linkedin',
27-
},
2828
];
2929
}
3030

‎src/app/shared/enums.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export enum EnumsNasa {
2-
nasaApod = 'Astronomy Picture of the Day (APOD)'
2+
nasaApod = 'Astronomy Picture of the Day (APOD)',
3+
nasaEpic = 'Earth Polychromatic Imaging Camera (EPIC)',
34
}

‎src/app/components/info/info.component.html ‎src/app/shared/info/info.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<a *ngFor="let socialNetwork of dataSocialNetworks"
55
href="{{socialNetwork.url}}" target="_blank">
66
<i class="pi {{socialNetwork.icon}} me-3 my-1 networks"
7-
style="font-size: 1.2rem"
8-
pTooltip="{{socialNetwork.name}}"></i>
7+
style="font-size: 1.2rem"></i>
98
</a>
109
</div>
1110
<div class="d-flex author">
12-
<p class="text-end m-0">
11+
<a class="text-end m-0 text-white" style="text-decoration: none"
12+
href="https://angelluce.github.io/cv/" target="_blank">
1313
<i class="pi pi-code m-1"></i>
14-
Angel Lucero | 2023</p>
14+
Angel Lucero | {{getCurrentYear()}}</a>
1515
</div>
1616
</div>

‎src/app/shared/info/info.component.scss

Whitespace-only changes.

‎src/app/components/info/info.component.spec.ts ‎src/app/shared/info/info.component.spec.ts

File renamed without changes.

‎src/app/components/info/info.component.ts ‎src/app/shared/info/info.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,8 @@ export class InfoComponent implements OnInit {
1717
this.dataSocialNetworks = this.socialNetworksService.getSocialNetworks();
1818
}
1919

20+
getCurrentYear(): number {
21+
return new Date().getFullYear();
22+
}
23+
2024
}

‎src/app/shared/paths.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import {NASA_KEY} from "./nasa_key";
1+
const NASA_KEY = "YOUR_NASA_API_KEY_HERE";
22

33
export const NASA_APOD_URL = `https://api.nasa.gov/planetary/apod?api_key=${NASA_KEY}`;
44

5+
export const NASA_EPIC_URL = `https://api.nasa.gov/EPIC/api/natural/images?api_key=${NASA_KEY}`;
6+
export const NASA_EPIC_IMAGE_URL = (date: string, image: string) => {
7+
// https://api.nasa.gov/EPIC/archive/natural/${date}/png/epic_1b_20190530011359.png?api_key=DEMO_KEY
8+
return `https://api.nasa.gov/EPIC/archive/natural/${date}/png/${image}.png?api_key=${NASA_KEY}`
9+
};
510

611
/*
712
NASA Asteroids - NeoWs

‎src/app/shared/safe.pipe.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Pipe, PipeTransform} from "@angular/core";
2+
import {DomSanitizer} from "@angular/platform-browser";
3+
4+
@Pipe({
5+
name: 'safe'
6+
})
7+
export class SafePipe implements PipeTransform {
8+
9+
constructor(private sanitizer: DomSanitizer) { }
10+
transform(url: any) {
11+
console.log(url)
12+
console.log(this.sanitizer.bypassSecurityTrustResourceUrl(url))
13+
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
14+
}
15+
16+
}

‎src/assets/images/nasa_logo.png

44.1 KB
Loading

0 commit comments

Comments
 (0)