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

bla

This commit is contained in:
maxime 2026-01-20 19:49:22 +01:00
parent 630c777022
commit dee8d9cc6b
57 changed files with 1123 additions and 1178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.editorconfig
View File

@ -1,17 +1,17 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
trim_trailing_whitespace = false
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false
[*.md]
max_line_length = off
trim_trailing_whitespace = false

84
.gitignore vendored
View File

@ -1,42 +1,42 @@
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db

8
.postcssrc.json
View File

@ -1,5 +1,5 @@
{
"plugins": {
"@tailwindcss/postcss": {}
}
{
"plugins": {
"@tailwindcss/postcss": {}
}
}

8
.vscode/extensions.json vendored
View File

@ -1,4 +1,4 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}

40
.vscode/launch.json vendored
View File

@ -1,20 +1,20 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}

84
.vscode/tasks.json vendored
View File

@ -1,42 +1,42 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}

118
README.md
View File

@ -1,59 +1,59 @@
# TpAngularFinal
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.3.
## Development server
To start a local development server, run:
```bash
ng serve
```
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
## Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
```bash
ng generate component component-name
```
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
```bash
ng generate --help
```
## Building
To build the project run:
```bash
ng build
```
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
```bash
ng test
```
## Running end-to-end tests
For end-to-end (e2e) testing, run:
```bash
ng e2e
```
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
## Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
# TpAngularFinal
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.3.
## Development server
To start a local development server, run:
```bash
ng serve
```
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
## Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
```bash
ng generate component component-name
```
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
```bash
ng generate --help
```
## Building
To build the project run:
```bash
ng build
```
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
```bash
ng test
```
## Running end-to-end tests
For end-to-end (e2e) testing, run:
```bash
ng e2e
```
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
## Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

188
angular.json
View File

@ -1,94 +1,94 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"tpAngularFinal": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "tpAngularFinal:build:production"
},
"development": {
"buildTarget": "tpAngularFinal:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular/build:extract-i18n"
},
"test": {
"builder": "@angular/build:karma",
"options": {
"tsConfig": "tsconfig.spec.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
]
}
}
}
}
},
"cli": {
"analytics": false
}
}
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"tpAngularFinal": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "tpAngularFinal:build:production"
},
"development": {
"buildTarget": "tpAngularFinal:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular/build:extract-i18n"
},
"test": {
"builder": "@angular/build:karma",
"options": {
"tsConfig": "tsconfig.spec.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
]
}
}
}
}
},
"cli": {
"analytics": false
}
}

98
package.json
View File

@ -1,49 +1,49 @@
{
"name": "tp-angular-final",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"prettier": {
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
},
"private": true,
"dependencies": {
"@angular/common": "^20.1.0",
"@angular/compiler": "^20.1.0",
"@angular/core": "^20.1.0",
"@angular/forms": "^20.1.0",
"@angular/platform-browser": "^20.1.0",
"@angular/router": "^20.1.0",
"@tailwindcss/postcss": "^4.1.13",
"postcss": "^8.5.6",
"rxjs": "~7.8.0",
"tailwindcss": "^4.1.13",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^20.1.3",
"@angular/cli": "^20.1.3",
"@angular/compiler-cli": "^20.1.0",
"@types/jasmine": "~5.1.0",
"daisyui": "^5.1.22",
"jasmine-core": "~5.8.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.2"
}
}
{
"name": "tp-angular-final",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"prettier": {
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
},
"private": true,
"dependencies": {
"@angular/common": "^20.1.0",
"@angular/compiler": "^20.1.0",
"@angular/core": "^20.1.0",
"@angular/forms": "^20.1.0",
"@angular/platform-browser": "^20.1.0",
"@angular/router": "^20.1.0",
"@tailwindcss/postcss": "^4.1.13",
"postcss": "^8.5.6",
"rxjs": "~7.8.0",
"tailwindcss": "^4.1.13",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^20.1.3",
"@angular/cli": "^21.1.0",
"@angular/compiler-cli": "^20.1.0",
"@types/jasmine": "~5.1.0",
"daisyui": "^5.1.22",
"jasmine-core": "~5.8.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.2"
}
}

28
src/app/app.config.ts
View File

@ -1,14 +1,14 @@
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
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),
provideHttpClient()
]
};
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
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),
provideHttpClient()
]
};

12
src/app/app.css
View File

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

8
src/app/app.html
View File

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

36
src/app/app.routes.ts
View File

@ -1,18 +1,18 @@
import { Routes } from '@angular/router';
import { adminGuard } from './guards/admin-guard';
export const routes: Routes = [
{path: '', redirectTo: "/home", pathMatch:"full"},
{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: '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
// {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin.routes').then(m => m.ADMIN_ROUTES), data: { role: 'ADMIN' } },
{path: '**',loadComponent: ()=> import("./pages/not-found/not-found").then(m =>m.NotFound) }
];
import { Routes } from '@angular/router';
import { adminGuard } from './guards/admin-guard';
export const routes: Routes = [
{path: '', redirectTo: "/home", pathMatch:"full"},
{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: '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
// {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin.routes').then(m => m.ADMIN_ROUTES), data: { role: 'ADMIN' } },
{path: '**',loadComponent: ()=> import("./pages/not-found/not-found").then(m =>m.NotFound) }
];

50
src/app/app.spec.ts
View File

@ -1,25 +1,25 @@
import { provideZonelessChangeDetection } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { App } from './app';
describe('App', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [App],
providers: [provideZonelessChangeDetection()]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(App);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it('should render title', () => {
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, tpAngularFinal');
});
});
import { provideZonelessChangeDetection } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { App } from './app';
describe('App', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [App],
providers: [provideZonelessChangeDetection()]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(App);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it('should render title', () => {
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, tpAngularFinal');
});
});

52
src/app/app.ts
View File

@ -1,26 +1,26 @@
import { Component, computed, Signal, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Auth } from './services/auth';
import { Header } from './shared/header/header';
import { Sidebar } from "./shared/sidebar/sidebar";
@Component({
selector: 'app-root',
imports: [RouterOutlet, Header, Sidebar],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected readonly title = signal('tpAngularFinal');
isLoggedIn: Signal<Boolean> = signal(false);
connectedUserEmail = computed(()=>{
const user=this.userService.connectedUser();
return user ? user.email : null;
})
constructor(private readonly userService: Auth){
console.log(this.isLoggedIn());
}
}
import { Component, computed, Signal, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Auth } from './services/auth';
import { Header } from './shared/header/header';
import { Sidebar } from "./shared/sidebar/sidebar";
@Component({
selector: 'app-root',
imports: [RouterOutlet, Header, Sidebar],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected readonly title = signal('tpAngularFinal');
isLoggedIn: Signal<Boolean> = signal(false);
connectedUserEmail = computed(()=>{
const user=this.userService.connectedUser();
return user ? user.email : null;
})
constructor(private readonly userService: Auth){
console.log(this.isLoggedIn());
}
}

34
src/app/guards/admin-guard.spec.ts
View File

@ -1,17 +1,17 @@
import { TestBed } from '@angular/core/testing';
import { CanActivateFn } from '@angular/router';
import { adminGuard } from './admin-guard';
describe('adminGuard', () => {
const executeGuard: CanActivateFn = (...guardParameters) =>
TestBed.runInInjectionContext(() => adminGuard(...guardParameters));
beforeEach(() => {
TestBed.configureTestingModule({});
});
it('should be created', () => {
expect(executeGuard).toBeTruthy();
});
});
import { TestBed } from '@angular/core/testing';
import { CanActivateFn } from '@angular/router';
import { adminGuard } from './admin-guard';
describe('adminGuard', () => {
const executeGuard: CanActivateFn = (...guardParameters) =>
TestBed.runInInjectionContext(() => adminGuard(...guardParameters));
beforeEach(() => {
TestBed.configureTestingModule({});
});
it('should be created', () => {
expect(executeGuard).toBeTruthy();
});
});

10
src/app/guards/admin-guard.ts
View File

@ -1,5 +1,5 @@
import { CanActivateFn } from '@angular/router';
export const adminGuard: CanActivateFn = (route, state) => {
return true;
};
import { CanActivateFn } from '@angular/router';
export const adminGuard: CanActivateFn = (route, state) => {
return true;
};

33
src/app/interfaces/color.ts
View File

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

102
src/app/interfaces/nasa-api.ts
View File

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

20
src/app/interfaces/picture.ts
View File

@ -1,11 +1,11 @@
export interface Picture {
copyright: string
date: string
explanation: string
hdurl: string
media_type: string
service_version: string
title: string
url: string
}
export interface Picture {
copyright: string
date: string
explanation: string
hdurl: string
media_type: string
service_version: string
title: string
url: string
}

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

@ -1 +1 @@
<p>admin works!</p>
<p>admin works!</p>

46
src/app/pages/admin/admin.spec.ts
View File

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

22
src/app/pages/admin/admin.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-admin',
imports: [],
templateUrl: './admin.html',
styleUrl: './admin.css'
})
export class Admin {
}
import { Component } from '@angular/core';
@Component({
selector: 'app-admin',
imports: [],
templateUrl: './admin.html',
styleUrl: './admin.css'
})
export class Admin {
}

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

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

46
src/app/pages/home/home.spec.ts
View File

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

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

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
imports: [],
templateUrl: './home.html',
styleUrl: './home.css'
})
export class Home {
}
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
imports: [],
templateUrl: './home.html',
styleUrl: './home.css'
})
export class Home {
}

24
src/app/pages/login/login.html
View File

@ -1,13 +1,13 @@
<!-- TODO: utiliser des formgroup -->
<div class = "form-container">
<form (ngSubmit)="login()">
<fieldset >
<legend >Login</legend>
<div >
<input class="input" type="text" [value]="email()" (input)="updateEmail($event)" placeholder="Mail" aria-label="email">
</div>
<input class="input" type="text" [value]="password()" (input)="updatePassword($event)" placeholder="Password" aria-label="password">
</fieldset>
<button class="btn" type="submit">Login</button>
</form>
<!-- TODO: utiliser des formgroup -->
<div class = "form-container">
<form (ngSubmit)="login()">
<fieldset >
<legend >Login</legend>
<div >
<input class="input" type="text" [value]="email()" (input)="updateEmail($event)" placeholder="Mail" aria-label="email">
</div>
<input class="input" type="text" [value]="password()" (input)="updatePassword($event)" placeholder="Password" aria-label="password">
</fieldset>
<button class="btn" type="submit">Login</button>
</form>
</div>

46
src/app/pages/login/login.spec.ts
View File

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

2
src/app/pages/not-found/not-found.html
View File

@ -1 +1 @@
<p>not-found works!</p>
<p>not-found works!</p>

46
src/app/pages/not-found/not-found.spec.ts
View File

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

22
src/app/pages/not-found/not-found.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-not-found',
imports: [],
templateUrl: './not-found.html',
styleUrl: './not-found.css'
})
export class NotFound {
}
import { Component } from '@angular/core';
@Component({
selector: 'app-not-found',
imports: [],
templateUrl: './not-found.html',
styleUrl: './not-found.css'
})
export class NotFound {
}

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

@ -1,29 +1,17 @@
<!-- <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> -->
<div class="hero bg-base-200 min-h-screen">
<div class="hero-content flex-col lg:flex-col">
<img
src={{nasaPOTD()?.url}}
class="max-w-mid rounded-lg shadow-2xl"
/>
<div>
<h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
<p class="text-2x2 font-semibold">Copyright: {{nasaPOTD()?.copyright}}</p>
<p class="py-6">
{{nasaPOTD()?.explanation}}
</p>
<!-- TODO: button to erase or find a usage -->
<!-- <button class="btn btn-primary">Get Started</button> -->
</div>
</div>
</div>
<div class="hero bg-base-200 min-h-screen">
<div class="hero-content flex-col lg:flex-col">
<img
src={{nasaPOTD()?.url}}
class="max-w-mid rounded-lg shadow-2xl"
/>
<div>
<h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
<p class="text-2x2 font-semibold">Copyright: {{nasaPOTD()?.copyright}}</p>
<p class="py-6">
{{nasaPOTD()?.explanation}}
</p>
<!-- TODO: button to erase or find a usage -->
<!-- <button class="btn btn-primary">Get Started</button> -->
</div>
</div>
</div>

46
src/app/pages/potd/potd.spec.ts
View File

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

58
src/app/pages/potd/potd.ts
View File

@ -1,29 +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);
}
}
)
}
}
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 readonly 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);
}
}
)
}
}

46
src/app/pages/register/register.spec.ts
View File

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

26
src/app/pages/search/search.css
View File

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

121
src/app/pages/search/search.html
View File

@ -1,63 +1,58 @@
<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>
<!-- TODO why the fuck is nasaData an array?-->
@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>
<!-- <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>
<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>

46
src/app/pages/search/search.spec.ts
View File

@ -1,23 +1,23 @@
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();
});
});
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();
});
});

34
src/app/pages/video/video.html
View File

@ -1,18 +1,18 @@
@if(isLoading()){
<div class="spinner">
<span class="loading loading-spinner loading-xl"></span>
<p>Chargement de la vidéo...</p>
</div>
}
@if(!isLoading() && asset()){
<div class="videocontainer">
<video width="320" height="240" 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>
@if(isLoading()){
<div class="spinner">
<span class="loading loading-spinner loading-xl"></span>
<p>Chargement de la vidéo...</p>
</div>
}
@if(!isLoading() && asset()){
<div class="videocontainer">
<video width="320" height="240" 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>
}

46
src/app/pages/video/video.spec.ts
View File

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

32
src/app/services/auth.spec.ts
View File

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

6
src/app/services/auth.ts
View File

@ -119,9 +119,5 @@ export class Auth {
else{
return
}
}
}
}

32
src/app/services/napod.spec.ts
View File

@ -1,16 +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();
});
});
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();
});
});

57
src/app/services/napod.ts
View File

@ -1,29 +1,28 @@
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){
// TODO: Si vide?
return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}&media_type=video&page_size=5`)
}
getAssetDetail(nasaId: string){
return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/asset/${nasaId}`)
}
}
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}&media_type=video&page_size=5`)
}
getAssetDetail(nasaId: string){
return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/asset/${nasaId}`)
}
}

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

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

46
src/app/shared/header/header.spec.ts
View File

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

58
src/app/shared/header/header.ts
View File

@ -1,29 +1,29 @@
import { Component, computed, input, signal, Signal } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { Auth } from '../../services/auth';
@Component({
selector: 'app-header',
imports: [RouterLink],
templateUrl: './header.html',
styleUrl: './header.css'
})
export class Header {
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"])
}
}
import { Component, computed, input, signal, Signal } from '@angular/core';
import { Router, RouterLink } from '@angular/router';
import { Auth } from '../../services/auth';
@Component({
selector: 'app-header',
imports: [RouterLink],
templateUrl: './header.html',
styleUrl: './header.css'
})
export class Header {
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/app/shared/sidebar/sidebar.html
View File

@ -1 +1 @@
<p>sidebar works!</p>
<p>sidebar works!</p>

46
src/app/shared/sidebar/sidebar.spec.ts
View File

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

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

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
imports: [],
templateUrl: './sidebar.html',
styleUrl: './sidebar.css'
})
export class Sidebar {
}
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
imports: [],
templateUrl: './sidebar.html',
styleUrl: './sidebar.css'
})
export class Sidebar {
}

6
src/environments/environment.ts
View File

@ -1,3 +1,3 @@
export const environment = {
production: true
};
export const environment = {
production: true
};

26
src/index.html
View File

@ -1,13 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TpAngularFinal</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TpAngularFinal</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

12
src/main.ts
View File

@ -1,6 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));

12
src/styles.css
View File

@ -1,7 +1,7 @@
@import "tailwindcss";
@plugin "daisyui";
html {
background: #000000;
/* background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(130, 21, 21, 1) 66%, rgb(223, 47, 38) 100%); */
@import "tailwindcss";
@plugin "daisyui";
html {
background: #000000;
/* background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(130, 21, 21, 1) 66%, rgb(223, 47, 38) 100%); */
}

30
tsconfig.app.json
View File

@ -1,15 +1,15 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/**/*.spec.ts"
]
}
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/**/*.spec.ts"
]
}

68
tsconfig.json
View File

@ -1,34 +1,34 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "preserve"
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"typeCheckHostBindings": true,
"strictTemplates": true
},
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "preserve"
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"typeCheckHostBindings": true,
"strictTemplates": true
},
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

28
tsconfig.spec.json
View File

@ -1,14 +1,14 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.ts"
]
}
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.ts"
]
}