Supprimer src/environments/environment.development.ts

Reviewed-on: #1
Co-authored-by: maxime <maxime.jeannin@hotmail.fr>
Co-committed-by: maxime <maxime.jeannin@hotmail.fr>

src/app/app.css

@@ -1,6 +0,0 @@
-main {
-    width: 100%;
-    margin: 2rem;
-    display: flex;  
-    justify-content: center;  
-}

src/app/app.html

@@ -4,8 +4,8 @@
   <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
 
   <!-- Contenu principal de la page (router-outlet) -->
-  <div class="drawer-content flex flex-col">
+  <div class="drawer-content max-w-full overflow-hidden flex flex-col">
-    <main class="flex-grow p-4">
+    <main class="flex-grow m-0 p-4">
       <router-outlet></router-outlet>
     </main>
   </div>
@@ -13,7 +13,7 @@
   <!-- Sidebar -->
   <div class="drawer-side is-drawer-close:overflow-visible">
     <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="flex min-h-full flex-col items-start bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
+    <div class="flex min-h-full flex-col items-start bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64 mt-16 lg:mt-0">
       <app-sidebar [userEmail]="connectedUserEmail()" />
     </div>
   </div>

src/app/app.routes.ts

@@ -8,7 +8,6 @@ export const routes: Routes = [
     {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: 'video/:id', loadComponent: ()=> import("./pages/video/video").then(m =>m.Video)},
     {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin').then(m => m.Admin), data: { role: 'ADMIN' } },
     //version si besoin de multiplier les routes admin

src/app/pages/home/home.html

@@ -0,0 +1 @@
+<app-searchresults/>

src/app/pages/home/home.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { Search } from "../search/search";
+import { Searchresults } from "../search/searchresults/searchresults";
 
 @Component({
   selector: 'app-home',
-  imports: [Search],
+  imports: [Searchresults],
   templateUrl: './home.html',
   styleUrl: './home.css'
 })

src/app/pages/potd/potd.html

@@ -1,16 +1,33 @@
-<div class="hero bg-base-200 min-h-screen">
+@if(isLoading()){
-  <div class="hero-content flex-col lg:flex-col">
+<div class="spinner">
-    <img
+  <span class="loading loading-spinner loading-xl"></span>
-      src={{nasaPOTD()?.url}}
+  <p>Chargement ...</p>
-      class="max-w-mid rounded-lg shadow-2xl"
+</div>
-      alt="{{nasaPOTD()?.explanation}}"
+}
-    />
+@if(!isLoading() && nasaPOTD()){
-    <div>
+  @if(nasaPOTD()?.media_type=="image"){
-      <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
+  <div class="hero bg-base-200 min-h-screen">
-      <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
+    <div class="hero-content flex-col lg:flex-col">
-      <p class="py-6">
+      <img src={{nasaPOTD()?.url}} class="max-w-mid rounded-lg shadow-2xl" alt="{{nasaPOTD()?.explanation}}" />
-        {{nasaPOTD()?.explanation}}
+      <div>
-      </p>
+        <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
+        <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
+        <p class="py-6">
+          {{nasaPOTD()?.explanation}}
+        </p>
+      </div>
     </div>
   </div>
-</div>
+  }
+  @if(nasaPOTD()?.media_type==="video"){
+    <div class="videocontainer flex justify-center w-full mt-20">
+      <video class="rounded-md" controls>
+      <source src="{{nasaPOTD()!.url}}" type="video/mp4">
+      </video>
+  </div>
+  }
+
+}
+@if(!isLoading() && !nasaPOTD()){
+<p>Impossible de charger la vidéo.</p>
+}

src/app/pages/potd/potd.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { NAPOD } from '../../services/napod';
 import { Picture } from '../../interfaces/picture';
 
@@ -8,19 +8,22 @@ import { Picture } from '../../interfaces/picture';
   templateUrl: './potd.html',
   styleUrl: './potd.css'
 })
-export class POTD {
+export class POTD implements OnInit{
 
   private readonly nasaApi = inject(NAPOD)
   nasaPOTD = signal< Picture | null >(null)
+  isLoading = signal<boolean>(true);
   
-  constructor(){
+  ngOnInit(){
     this.nasaApi.getPicOfToday().subscribe({
       next: (data)=>{
         console.log(data)
         this.nasaPOTD.set(data)
+        this.isLoading.set(false);
       },
       error: error =>{
         console.log(error);
+        this.isLoading.set(false);        
       }
     }      
   )

src/app/pages/search/search.css

@@ -1,14 +0,0 @@
-.searchcontainer {
-    width:80vw;  
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-      
-}
-
-.inputSearch {
-    margin-bottom: 1rem; 
-    display: flex;
-    flex-direction: row; 
-}

src/app/pages/search/search.html

@@ -1,58 +0,0 @@
-<div class="searchcontainer">
-  <form class="inputSearch" (ngSubmit)="onSubmit()">
-  <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" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />
-    <kbd class="kbd kbd-sm">⌘</kbd>
-    <kbd class="kbd kbd-sm">K</kbd>    
-  </label>
-  <button class="btn">Submit</button>
-</form>
-
-@if(searchResults()!==null && searchResults()!.collection.items.length==0){
-  <div class="resultsContainer">
-    <p>No results for this search</p>
-  </div>
-}
-
-@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
-  <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>          
-              @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
-                <li class="list-row">
-                  <!-- 2 for small image -->
-                  <div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
-                  <div>
-                    <div>{{el.data[0].title}}</div>
-                    <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
-                    <p class="list-col-wrap text-xs">
-                    {{el.data[0].description}}
-                  </p>
-                  </div>                  
-                  <button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
-                    <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>
-                </li>                   
-              }                
-
-    </ul>    
-  </div>
-  }  
-</div>

src/app/pages/search/search.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Search } from './search';
-
-describe('Search', () => {
-  let component: Search;
-  let fixture: ComponentFixture<Search>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Search]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Search);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/search/search.ts

@@ -1,40 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { NAPOD } from '../../services/napod';
-import { NasaApi } from '../../interfaces/nasa-api';
-import { FormsModule, NgModel } from '@angular/forms';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-search',
-  imports: [FormsModule],
-  templateUrl: './search.html',
-  styleUrl: './search.css'
-})
-export class Search {
-  private readonly nasaApi = inject(NAPOD);
-  private readonly router = inject(Router)
-  searchResults = signal<NasaApi | null>(null)
-  searchString=signal('');
-
-  onSubmit() {
-    this.nasaApi.searchForVideos(this.searchString()).subscribe({
-      next: (data)=>{this.searchResults.set(data);
-        console.log(data.collection);
-      },
-      error: error =>{console.log(error);
-      }
-    })   
-  }
-
-  onClick(nasaId: string){
-    this.router.navigate(['/video/'+nasaId])
-  }
-
-  updateSearch(event: Event){
-    console.log(this.searchString());
-    const target = event.target as HTMLInputElement;
-    this.searchString.set(target.value)
-  }
-
-
-}

src/app/pages/search/searchform/searchform.html

@@ -1,5 +1,5 @@
 <div class="flex">
-<form class="inputSearch flex" (ngSubmit)="onSubmit()">
+<form class="inputSearch flex" (ngSubmit)="onSubmit($event)">
   <label class="input">
     <svg
       class="h-[1em] opacity-50"
@@ -19,6 +19,6 @@
     </svg>
     <input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />   
   </label>
-  <button class="btn mx-2">Search</button>
+  <button type="submit" class="btn mx-2">Search</button>
 </form>
 </div>

src/app/pages/search/searchform/searchform.ts

@@ -1,23 +1,30 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
-import { NasaApi } from '../../../interfaces/nasa-api';
 import { NAPOD } from '../../../services/napod';
+import { Router, RouterLink } from '@angular/router';
+import { Search } from '../../../services/search';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-searchform',
-  imports: [],
+  imports: [FormsModule, RouterLink],
   templateUrl: './searchform.html',
   styleUrl: './searchform.css',
 })
 export class Searchform {
   private readonly nasaApi = inject(NAPOD);
-  private readonly router = inject(Router)
+  private readonly searchService = inject(Search);
-  searchResults = signal<NasaApi | null>(null)
+  searchString = this.searchService.searchString;
-  searchString=signal('');
 
-  onSubmit() {
+  constructor(private readonly router: Router){
-    this.nasaApi.searchForVideos(this.searchString()).subscribe({
+  
-      next: (data)=>{this.searchResults.set(data);
+    }
+
+  onSubmit(event: Event) {
+    event.preventDefault(); // <-- Empêche le rechargement
+    console.log("onSubmit appelé !"); // <-- Devrait s'afficher
+    this.router.navigate(["/home"])
+    this.nasaApi.searchForVideos(this.searchService.searchString()).subscribe({
+      next: (data)=>{this.searchService.searchResults.set(data);
         console.log(data.collection);
       },
       error: error =>{console.log(error);
@@ -25,14 +32,9 @@ export class Searchform {
     })   
   }
 
-  onClick(nasaId: string){
-    this.router.navigate(['/video/'+nasaId])
-  }
-
   updateSearch(event: Event){
-    console.log(this.searchString());
     const target = event.target as HTMLInputElement;
-    this.searchString.set(target.value)
+    this.searchService.searchString.set(target.value)
   }
   
 }

src/app/pages/search/searchresults/searchresults.html

@@ -5,9 +5,8 @@
 }
 
 @if(searchResults()!==null && searchResults()!.collection.items.length!==0){
-  <div class="resultsContainer">
+  <div class="flex justify-center resultsContainer w-full">
-    <ul class="list bg-base-100 rounded-box shadow-md">
+    <ul class="flex max-w-6xl list bg-base-100 rounded-box shadow-md">  
-  
       <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>          
               @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
                 <li class="list-row">
@@ -25,8 +24,6 @@
                   </button>
                 </li>                   
               }
-
     </ul>    
   </div>
   }
-</div>

src/app/pages/search/searchresults/searchresults.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { Search } from '../../../services/search';
 
 @Component({
   selector: 'app-searchresults',
@@ -7,5 +9,14 @@ import { Component } from '@angular/core';
   styleUrl: './searchresults.css',
 })
 export class Searchresults {
+  private readonly router = inject(Router)
+  private readonly searchService = inject(Search);
+
+  searchResults = this.searchService.searchResults;
+  searchString = this.searchService.searchString;
+
+  onClick(nasaId: string){
+    this.router.navigate(['/video/'+nasaId])
+  }
   
 }

src/app/pages/video/video.html

@@ -5,14 +5,13 @@
 </div>
 }
 @if(!isLoading() && asset()){
-<div class="videocontainer">
+<div class="videocontainer w-full mt-20">
-  <video width="320" height="240" controls>
+  <video class="w-full rounded-md" controls>
     <source src="{{asset()!.items[3].href}}" type="video/mp4">
     Your browser does not support the video tag.
   </video>
 </div>
 }
-
 @if(!isLoading() && !asset()){
   <p>Impossible de charger la vidéo.</p>
 }

src/app/pages/video/video.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Collection } from '../../interfaces/nasa-api';
 import { NAPOD } from '../../services/napod';
@@ -11,7 +11,7 @@ import { NAPOD } from '../../services/napod';
   templateUrl: './video.html',
   styleUrl: './video.css'
 })
-export class Video {
+export class Video implements OnInit {
   private readonly route = inject(ActivatedRoute)
   asset=signal<Collection|null>(null);
   //TODO: nom nul pour le service a changer

src/app/services/search.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Search } from './search';
+
+describe('Search', () => {
+  let service: Search;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Search);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/search.ts

@@ -0,0 +1,10 @@
+import { Injectable, signal } from '@angular/core';
+import { NasaApi } from '../interfaces/nasa-api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Search {
+  searchResults = signal<NasaApi | null>(null);
+  searchString = signal('');
+}

src/app/shared/header/header.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input, signal, Signal } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { Auth } from '../../services/auth';
 import { Searchform } from "../../pages/search/searchform/searchform";

src/app/shared/sidebar/sidebar.html

@@ -1,17 +1,3 @@
-<!-- 
- <div class="menu 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>
-        }                
-        @if(!isLoggedIn()){
-            <div ><a class="btn btn-ghost text-xl" routerLink="/login">Login</a></div> 
-            <div ><a class="btn btn-ghost text-xl" routerLink="/register">Register</a></div>        
-        }
-</div>
--->
 <ul class="menu w-full grow">
   <li>
     <a routerLink="/" class="is-drawer-close:tooltip is-drawer-close:tooltip-right" data-tip="Homepage">

src/environments/environment.development.ts

@@ -1,7 +0,0 @@
-export const environment = {
-    production: false,
-    NASA_API_BASE_URL : "https://api.nasa.gov",
-    NASA_API_KEY: '3azuPabFKF5HNbHpZuQ1rGzIPO6i2DbOLQ6hYuGl',
-    NASA_API_IMAGE_BASE_URL:'https://images-api.nasa.gov',
-    AUTH_API_BASE:'http://makusu.duckdns.org:3000'
-};

src/environments/environment.ts

@@ -1,3 +1,7 @@
 export const environment = {
-    production: true
+    production: false,
+    NASA_API_BASE_URL : "",
+    NASA_API_KEY: '',
+    NASA_API_IMAGE_BASE_URL:'https://images-api.nasa.gov',
+    AUTH_API_BASE:''
 };