change for NasaApi
This commit is contained in:
parent
14ddb11c46
commit
d124ed2f06
|
|
@ -44,7 +44,13 @@
|
|||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
"sourceMap": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.development.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessC
|
|||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZonelessChangeDetection(),
|
||||
provideRouter(routes)
|
||||
provideRouter(routes),
|
||||
provideHttpClient()
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
margin: 2rem;
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,5 @@
|
|||
<html><app-header [userEmail]="connectedUserEmail()" />
|
||||
<main>
|
||||
<!-- ESSAI DRAWER -->
|
||||
<div class="drawer">
|
||||
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-content">
|
||||
<router-outlet />
|
||||
<label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
|
||||
</div>
|
||||
<div class="drawer-side">
|
||||
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
|
||||
<!-- Sidebar content here -->
|
||||
<li><a>Sidebar Item 1</a></li>
|
||||
<li><a>Sidebar Item 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <app-sidebar></app-sidebar> -->
|
||||
<!-- <router-outlet /> -->
|
||||
<router-outlet />
|
||||
</main>
|
||||
</html>
|
||||
|
|
@ -6,6 +6,9 @@ export const routes: Routes = [
|
|||
{path: 'home', loadComponent: ()=> import("./pages/home/home").then(m =>m.Home)},
|
||||
{path: 'login', loadComponent: ()=> import("./pages/login/login").then(m =>m.Login)},
|
||||
{path: 'register', loadComponent: ()=> import("./pages/register/register").then(m =>m.Register)},
|
||||
{path: 'login', loadComponent: ()=> import("./pages/login/login").then(m =>m.Login)},
|
||||
{path: 'potd', loadComponent: ()=> import("./pages/potd/potd").then(m =>m.POTD)},
|
||||
{path: 'search', loadComponent: ()=> import("./pages/search/search").then(m =>m.Search)},
|
||||
{path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin').then(m => m.Admin), data: { role: 'ADMIN' } },
|
||||
//version si besoin de multiplier les routes admin
|
||||
// {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin.routes').then(m => m.ADMIN_ROUTES), data: { role: 'ADMIN' } },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
export type ColorApi = Color[]
|
||||
|
||||
export interface Color {
|
||||
id: number
|
||||
title: string
|
||||
userName: string
|
||||
numViews: number
|
||||
numVotes: number
|
||||
numComments: number
|
||||
numHearts: number
|
||||
rank: number
|
||||
dateCreated: string
|
||||
hex: string
|
||||
rgb: Rgb
|
||||
hsv: Hsv
|
||||
description: string
|
||||
url: string
|
||||
imageUrl: string
|
||||
badgeUrl: string
|
||||
apiUrl: string
|
||||
}
|
||||
|
||||
export interface Rgb {
|
||||
red: number
|
||||
green: number
|
||||
blue: number
|
||||
}
|
||||
|
||||
export interface Hsv {
|
||||
hue: number
|
||||
saturation: number
|
||||
value: number
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
export interface NasaApi {
|
||||
collection: Collection
|
||||
}
|
||||
|
||||
export interface Collection {
|
||||
version: string
|
||||
href: string
|
||||
items: Item[]
|
||||
metadata: Metadata
|
||||
links: Link2[]
|
||||
}
|
||||
|
||||
export interface Item {
|
||||
href: string
|
||||
data: Daum[]
|
||||
links: Link[]
|
||||
}
|
||||
|
||||
export interface Daum {
|
||||
center: string
|
||||
date_created: string
|
||||
description?: string
|
||||
keywords?: string[]
|
||||
media_type: string
|
||||
nasa_id: string
|
||||
title: string
|
||||
description_508?: string
|
||||
album?: string[]
|
||||
location?: string
|
||||
secondary_creator?: string
|
||||
photographer?: string
|
||||
}
|
||||
|
||||
export interface Link {
|
||||
href: string
|
||||
rel: string
|
||||
render?: string
|
||||
width?: number
|
||||
size?: number
|
||||
height?: number
|
||||
}
|
||||
|
||||
export interface Metadata {
|
||||
total_hits: number
|
||||
}
|
||||
|
||||
export interface Link2 {
|
||||
rel: string
|
||||
prompt: string
|
||||
href: string
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export interface Picture {
|
||||
copyright: string
|
||||
date: string
|
||||
explanation: string
|
||||
hdurl: string
|
||||
media_type: string
|
||||
service_version: string
|
||||
title: string
|
||||
url: string
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="card bg-base-100 w-96 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{nasaPOTD()?.title}}</h2>
|
||||
<p>{{nasaPOTD()?.explanation}}</p>
|
||||
</div>
|
||||
<figure>
|
||||
<img
|
||||
src={{nasaPOTD()?.url}}
|
||||
alt="Nasa picture of the day" />
|
||||
</figure>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Video } from './video';
|
||||
import { POTD } from './potd';
|
||||
|
||||
describe('Video', () => {
|
||||
let component: Video;
|
||||
let fixture: ComponentFixture<Video>;
|
||||
describe('POTD', () => {
|
||||
let component: POTD;
|
||||
let fixture: ComponentFixture<POTD>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Video]
|
||||
imports: [POTD]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Video);
|
||||
fixture = TestBed.createComponent(POTD);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component, inject, signal } from '@angular/core';
|
||||
import { NAPOD } from '../../services/napod';
|
||||
import { Picture } from '../../interfaces/picture';
|
||||
|
||||
@Component({
|
||||
selector: 'app-potd',
|
||||
imports: [],
|
||||
templateUrl: './potd.html',
|
||||
styleUrl: './potd.css'
|
||||
})
|
||||
export class POTD {
|
||||
|
||||
private nasaApi = inject(NAPOD)
|
||||
nasaPOTD = signal< Picture | null >(null)
|
||||
|
||||
constructor(){
|
||||
this.nasaApi.getPicOfToday().subscribe({
|
||||
next: (data)=>{
|
||||
console.log(data)
|
||||
this.nasaPOTD.set(data)
|
||||
},
|
||||
error: error =>{
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.searchcontainer {
|
||||
width:100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1 +1,48 @@
|
|||
<p>search works!</p>
|
||||
<div class="searchcontainer">
|
||||
<div class="inputSearch">
|
||||
<label class="input">
|
||||
<svg
|
||||
class="h-[1em] opacity-50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.3-4.3"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<input type="search" class="grow" placeholder="Search" />
|
||||
<kbd class="kbd kbd-sm">⌘</kbd>
|
||||
<kbd class="kbd kbd-sm">K</kbd>
|
||||
</label>
|
||||
</div>
|
||||
<div class="resultsContainer">
|
||||
<ul class="list bg-base-100 rounded-box shadow-md">
|
||||
|
||||
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>
|
||||
<!-- TODO: boucle for -->
|
||||
<li class="list-row">
|
||||
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
|
||||
<div>
|
||||
<div>Dio Lupa</div>
|
||||
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
|
||||
</div>
|
||||
<p class="list-col-wrap text-xs">
|
||||
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
|
||||
</p>
|
||||
<button class="btn btn-square btn-ghost">
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
|
||||
</button>
|
||||
<button class="btn btn-square btn-ghost">
|
||||
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, inject, signal } from '@angular/core';
|
||||
import { NAPOD } from '../../services/napod';
|
||||
import { NasaApi } from '../../interfaces/nasa-api';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search',
|
||||
|
|
@ -7,5 +9,6 @@ import { Component } from '@angular/core';
|
|||
styleUrl: './search.css'
|
||||
})
|
||||
export class Search {
|
||||
|
||||
private nasaApi = inject(NAPOD)
|
||||
searchResults = signal<NasaApi | null>(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<p>video works!</p>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-video',
|
||||
imports: [],
|
||||
templateUrl: './video.html',
|
||||
styleUrl: './video.css'
|
||||
})
|
||||
export class Video {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NAPOD } from './napod';
|
||||
|
||||
describe('NAPOD', () => {
|
||||
let service: NAPOD;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(NAPOD);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { inject, Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Picture } from '../interfaces/picture';
|
||||
import { environment } from '../../environments/environment.development';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { NasaApi } from '../interfaces/nasa-api';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NAPOD {
|
||||
|
||||
private readonly http = inject(HttpClient);
|
||||
|
||||
getPicOfToday(): Observable<Picture> {
|
||||
return this.http.get<Picture>(`${environment.NASA_API_BASE_URL}/planetary/apod?api_key=${environment.NASA_API_KEY}`)
|
||||
}
|
||||
|
||||
searchForVideos(query: string){
|
||||
return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}`)
|
||||
}
|
||||
|
||||
getAssetDetail(nasaId: string){
|
||||
return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}`)
|
||||
// https://images-api.nasa.gov/asset/GSFC_20120420_SDO_m10966_Year2
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<div class="navbar bg-base-100 shadow-sm" >
|
||||
<div><a class="btn btn-ghost text-xl" routerLink="/home">Home</a></div>
|
||||
<div><a class="btn btn-ghost text-xl" routerLink="/potd">Picture of the day</a></div>
|
||||
<div><a class="btn btn-ghost text-xl" routerLink="/search">Search</a></div>
|
||||
@if(isLoggedIn()){
|
||||
<div><a class="btn btn-ghost text-xl" (click)="logout()">Logout</a></div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export const environment = {
|
||||
production: false,
|
||||
BASE_COLOR_API_URL: 'https://www.colourlovers.com/api/',
|
||||
NASA_API_BASE_URL : "https://api.nasa.gov",
|
||||
NASA_API_KEY: '3azuPabFKF5HNbHpZuQ1rGzIPO6i2DbOLQ6hYuGl',
|
||||
NASA_API_IMAGE_BASE_URL:'https://images-api.nasa.gov'
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
|
|
@ -3,5 +3,5 @@
|
|||
|
||||
html {
|
||||
background: #000000;
|
||||
background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(130, 21, 21, 1) 66%, rgb(223, 47, 38) 100%);
|
||||
/* background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(130, 21, 21, 1) 66%, rgb(223, 47, 38) 100%); */
|
||||
}
|
||||
Loading…
Reference in New Issue