Makusu
/
Nasa_video_search_engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ajout du composant search a la page home. Retrait de la nav bar pour passer en menu latéral

This commit is contained in:
maxime 2026-04-06 20:55:57 +02:00
parent dee8d9cc6b
commit 1f3ed57c4b
11 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -36,6 +36,7 @@ yarn-error.log
/libpeerconnection.log /libpeerconnection.log
testem.log testem.log
/typings /typings
/environments
# System files # System files
.DS_Store .DS_Store

6
src/app/app.html
View File

@ -1,5 +1,7 @@
<html><app-header [userEmail]="connectedUserEmail()" /> <app-header [userEmail]="connectedUserEmail()" />
<main> <main>
<app-sidebar [userEmail]="connectedUserEmail()">
</app-sidebar>
<router-outlet /> <router-outlet />
</main> </main>
</html>

2
src/app/pages/home/home.html
View File

@ -1 +1 @@
<p>home works!</p> <app-search/>

3
src/app/pages/home/home.ts
View File

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

5
src/app/pages/potd/potd.html
View File

@ -3,15 +3,14 @@
<img <img
src={{nasaPOTD()?.url}} src={{nasaPOTD()?.url}}
class="max-w-mid rounded-lg shadow-2xl" class="max-w-mid rounded-lg shadow-2xl"
alt="{{nasaPOTD()?.explanation}}"
/> />
<div> <div>
<h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1> <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
<p class="text-2x2 font-semibold">Copyright: {{nasaPOTD()?.copyright}}</p> <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
<p class="py-6"> <p class="py-6">
{{nasaPOTD()?.explanation}} {{nasaPOTD()?.explanation}}
</p> </p>
<!-- TODO: button to erase or find a usage -->
<!-- <button class="btn btn-primary">Get Started</button> -->
</div> </div>
</div> </div>
</div> </div>

12
src/app/shared/header/header.html
View File

@ -1,12 +0,0 @@
<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>
}
@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>

13
src/app/shared/sidebar/sidebar.html
View File

@ -1 +1,12 @@
<p>sidebar works!</p> <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>

16
src/app/shared/sidebar/sidebar.ts
View File

@ -1,4 +1,6 @@
import { Component } from '@angular/core'; import { Component, computed, input, signal, Signal } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { Auth } from '../../services/auth';
@Component({ @Component({
selector: 'app-sidebar', selector: 'app-sidebar',
@ -7,5 +9,17 @@ import { Component } from '@angular/core';
styleUrl: './sidebar.css' styleUrl: './sidebar.css'
}) })
export class Sidebar { export class Sidebar {
userEmail=input<string | null>(null);
isLoggedIn = computed(()=>this.userEmail() !== null)
currentUserEmail = computed(()=> this.userEmail());
constructor(private readonly loginservice: Auth, private readonly router: Router){
}
logout(){
this.loginservice.logout();
this.router.navigate(["/login"])
}
} }

2
src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>TpAngularFinal</title> <title>Nasa youtube clone</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">

1
tsconfig.app.json
View File

@ -3,6 +3,7 @@
{ {
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"rootDir": "./src",
"outDir": "./out-tsc/app", "outDir": "./out-tsc/app",
"types": [] "types": []
}, },

1
tsconfig.spec.json
View File

@ -3,6 +3,7 @@
{ {
"extends": "./tsconfig.json", "extends": "./tsconfig.json",
"compilerOptions": { "compilerOptions": {
"rootDir": "./src",
"outDir": "./out-tsc/spec", "outDir": "./out-tsc/spec",
"types": [ "types": [
"jasmine" "jasmine"