issue: some enhancements

README.md

@@ -3,7 +3,7 @@
 # NASA
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.4.
-Watch the result in [GitHub Pages](https://angelluce.github.io/NASA/)
+Watch the result in [GitHub Pages](https://angelluce.github.io/nasa/)
 
 Visit the [NASA API](https://api.nasa.gov/) to get your own API key and more information about the API.
 

src/app/app-routing.module.ts

@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {HomeComponent} from "./components/home/home.component";
 import {ApodComponent} from "./components/nasa/apod/apod.component";
+import {EpicComponent} from "./components/nasa/epic/epic.component";
 
 const routes: Routes = [
-  { path: 'home', component: HomeComponent },
+  { path: '', component: HomeComponent },
   { path: 'apod', component: ApodComponent },
-  { path: '', redirectTo: 'apod', pathMatch: 'full'},
-  { path: '**', redirectTo: 'apod', pathMatch: 'full'}
+  { path: 'epic', component: EpicComponent },
+  { path: '', redirectTo: '', pathMatch: 'full'},
+  { path: '**', redirectTo: '', pathMatch: 'full'}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="bg-dark">
+<div class="bg-dark-app">
   <router-outlet></router-outlet>
   <app-info></app-info>
 </div>

src/app/app.component.scss

@@ -1,12 +1,21 @@
-.bg-dark {
+$m-01: #071426;
+$m-02: #546c8c;
+
+
+.bg-dark-app {
   max-width: 100vw;
   min-height: 100vh;
   padding: 3rem 2rem;
-  background-color: black;
+  background-color: $m-01;
   background-image: radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 20px),
   radial-gradient(white, rgba(255, 255, 255, .08) 1px, transparent 25px),
   radial-gradient(white, rgba(255, 255, 255, .05) 2px, transparent 30px),
   radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .02) 2px, transparent 35px);
   background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
   background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
 }
+
+
+.bg-dark-blue {
+  background-color: $m-02 !important;
+}

src/app/app.module.ts

@@ -10,28 +10,40 @@ import {HomeComponent} from './components/home/home.component';
 import {ButtonModule} from "primeng/button";
 import {ToastModule} from "primeng/toast";
 import {DialogModule} from "primeng/dialog";
-import {InfoComponent} from './components/info/info.component';
+import {InfoComponent} from './shared/info/info.component';
 import {TooltipModule} from "primeng/tooltip";
 import {ImageModule} from "primeng/image";
 import {ApodComponent} from './components/nasa/apod/apod.component';
+import { LoadingComponent } from './shared/loading/loading.component';
+import { SearchComponent } from './shared/search/search.component';
+import {ReactiveFormsModule} from "@angular/forms";
+import {CalendarModule} from "primeng/calendar";
+import { EpicComponent } from './components/nasa/epic/epic.component';
+import {SafePipe} from "./shared/safe.pipe";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    InfoComponent,
-    ApodComponent
-  ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        InfoComponent,
+        ApodComponent,
+        LoadingComponent,
+        SearchComponent,
+        EpicComponent,
+        SafePipe
+    ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
+    ReactiveFormsModule,
     ButtonModule,
     ToastModule,
     DialogModule,
     TooltipModule,
-    ImageModule
+    ImageModule,
+    CalendarModule
   ],
   providers: [MessageService],
   bootstrap: [AppComponent]

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

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

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

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

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {NasaResponse} from "../../../models/NasaResponse";
-import {NasaService} from "../../../services/nasa.service";
 import {MessageService} from "primeng/api";
+import {NasaService} from "../../../services/nasa.service";
+import {ApodResponse} from "../../../models/ApodResponse";
 import {EnumsNasa} from "../../../shared/enums";
 
 @Component({
@@ -10,9 +10,9 @@ import {EnumsNasa} from "../../../shared/enums";
   styleUrls: ['./apod.component.scss']
 })
 export class ApodComponent implements OnInit {
-  nasaResponse: NasaResponse;
+  nasaResponse: ApodResponse;
   title: string;
-  display = false;
+  loading = false;
 
   constructor(private _nasaService: NasaService,
               private _messageService: MessageService) {
@@ -23,14 +23,26 @@ export class ApodComponent implements OnInit {
     this.getNasaData();
   }
 
-  getNasaData(): void {
-    this._nasaService.getNasaApod()
-      .then(data => {
+  getNasaData(params?: string): void {
+    this.nasaResponse = new ApodResponse();
+    this.loading = true;
+    this._nasaService.getNasaApod(params ? params : '').subscribe({
+      next: (data) => {
         this.nasaResponse = data;
-        this.display = true;
-      })
-      .catch(err => {
-        this._messageService.add({severity: 'error', summary: 'Error', detail: 'Error retrieving data from NASA'});
-      });
+        this.loading = false;
+      },
+      error: (err) => {
+        // console.log(err)
+        this.nasaResponse = new ApodResponse();
+        this.loading = false;
+        this._messageService.add({severity: 'error', summary: 'Error', detail: err.error.msg || 'Error retrieving data from NASA'});
+      }
+    });
   }
+
+  searchNasaData(event: string) {
+    // console.log(event);
+    this.getNasaData(event);
+  }
+
 }

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

@@ -42,7 +42,6 @@ export class EpicComponent implements OnInit {
             image: NASA_EPIC_IMAGE_URL(date, item.image)
           }
         });
-        console.log(this.nasaResponse)
         this.loading = false;
       },
       error: (err) => {

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

@@ -1,4 +1,4 @@
-export class NasaResponse {
+export class ApodResponse {
   title: string;
   explanation: string;
   media_type: string;

src/app/models/EpicResponse.ts

@@ -0,0 +1,59 @@
+export class EpicResponse {
+  identifier: string;
+  caption: string;
+  image: string;
+  version: string;
+  centroid_coordinates: {
+    lat: number;
+    lon: number;
+  };
+  dscovr_j2000_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  lunar_j2000_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  sun_j2000_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  attitude_quaternions: {
+    q0: number;
+    q1: number;
+    q2: number;
+    q3: number;
+  };
+  date: string;
+  coords: {
+    centroid_coordinates: {
+      lat: number;
+      lon: number;
+    };
+    dscovr_j2000_position: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    lunar_j2000_position: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    sun_j2000_position: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    attitude_quaternions: {
+      q0: number;
+      q1: number;
+      q2: number;
+      q3: number;
+    }
+  }
+}

src/app/services/nasa.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
-import {NASA_APOD_URL} from "../shared/paths";
+import {NASA_APOD_URL, NASA_EPIC_IMAGE_URL, NASA_EPIC_URL} from "../shared/paths";
+import {Observable} from "rxjs";
 
 @Injectable({
   providedIn: 'root'
@@ -11,7 +12,15 @@ export class NasaService {
   constructor(private _http: HttpClient) {
   }
 
-  getNasaApod(): Promise<any> {
-    return this._http.get<any>(NASA_APOD_URL).toPromise();
+  getNasaApod(params: string): Observable<any> {
+    return this._http.get<any>(`${NASA_APOD_URL}${params}`);
+  }
+
+  getNasaEpic(params: string): Observable<any> {
+    return this._http.get<any>(`${NASA_EPIC_URL}${params}`);
+  }
+
+  getNasaEpicImage(date: string, image: string): Observable<any> {
+    return this._http.get<any>(`${NASA_EPIC_IMAGE_URL(date, image)}`);
   }
 }

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

@@ -10,6 +10,11 @@ export class SocialNetworksService {
 
   getSocialNetworks(): SocialNetworkModel[] {
     return [
+      {
+        name: 'LinkedIn',
+        url: 'https://www.linkedin.com/in/angellucero/',
+        icon: 'pi-linkedin',
+      },
       {
         name: 'GitHub',
         url: 'https://github.com/angelluce',
@@ -20,11 +25,6 @@ export class SocialNetworksService {
         url: 'https://www.instagram.com/angel.lu24/',
         icon: 'pi-instagram',
       },
-      {
-        name: 'LinkedIn',
-        url: 'https://www.linkedin.com/in/angellucero/',
-        icon: 'pi-linkedin',
-      },
     ];
   }
 

src/app/shared/enums.ts

@@ -1,3 +1,4 @@
 export enum EnumsNasa {
-  nasaApod = 'Astronomy Picture of the Day (APOD)'
+  nasaApod = 'Astronomy Picture of the Day (APOD)',
+  nasaEpic = 'Earth Polychromatic Imaging Camera (EPIC)',
 }

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

@@ -4,13 +4,13 @@
     <a *ngFor="let socialNetwork of dataSocialNetworks"
        href="{{socialNetwork.url}}" target="_blank">
       <i class="pi {{socialNetwork.icon}} me-3 my-1 networks"
-         style="font-size: 1.2rem"
-         pTooltip="{{socialNetwork.name}}"></i>
+         style="font-size: 1.2rem"></i>
     </a>
   </div>
   <div class="d-flex author">
-    <p class="text-end m-0">
+    <a class="text-end m-0 text-white" style="text-decoration: none"
+    href="https://angelluce.github.io/cv/" target="_blank">
       <i class="pi pi-code m-1"></i>
-      Angel Lucero | 2023</p>
+      Angel Lucero | {{getCurrentYear()}}</a>
   </div>
 </div>

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

@@ -17,4 +17,8 @@ export class InfoComponent implements OnInit {
     this.dataSocialNetworks = this.socialNetworksService.getSocialNetworks();
   }
 
+  getCurrentYear(): number {
+    return new Date().getFullYear();
+  }
+
 }

src/app/shared/paths.ts

@@ -1,7 +1,12 @@
-import {NASA_KEY} from "./nasa_key";
+const NASA_KEY = "YOUR_NASA_API_KEY_HERE";
 
 export const NASA_APOD_URL = `https://api.nasa.gov/planetary/apod?api_key=${NASA_KEY}`;
 
+export const NASA_EPIC_URL = `https://api.nasa.gov/EPIC/api/natural/images?api_key=${NASA_KEY}`;
+export const NASA_EPIC_IMAGE_URL = (date: string, image: string) => {
+  //      https://api.nasa.gov/EPIC/archive/natural/${date}/png/epic_1b_20190530011359.png?api_key=DEMO_KEY
+  return `https://api.nasa.gov/EPIC/archive/natural/${date}/png/${image}.png?api_key=${NASA_KEY}`
+};
 
 /*
 NASA Asteroids - NeoWs

src/app/shared/safe.pipe.ts

@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {DomSanitizer} from "@angular/platform-browser";
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+  transform(url: any) {
+    console.log(url)
+    console.log(this.sanitizer.bypassSecurityTrustResourceUrl(url))
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+}