Mise en place du localStorage dans User Service

ludo^2
Raphael LACOTE 8 months ago
parent 76b98e2328
commit 12ac9ee20d

@ -2,12 +2,15 @@ import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { LoginComponent } from './components/login/login.component';
import { UserService } from './services/user-service'; import { UserService } from './services/user-service';
import { User } from './models/user.model'; import { User } from './models/user.model';
import { UserMenuComponent } from './components/user-menu/user-menu.component'; import { UserMenuComponent } from './components/user-menu/user-menu.component';
import { SudokuService } from "./services/sudoku-service" import { SudokuService } from "./services/sudoku-service"
import { UserAccueilComponent } from './components/user-accueil/user-accueil.component';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -22,9 +25,18 @@ import { SudokuService } from "./services/sudoku-service"
export class AppComponent { export class AppComponent {
title = 'angular-tp2-correct'; title = 'angular-tp2-correct';
constructor( protected userService: UserService, protected sudokuService: SudokuService){ } constructor(protected userService: UserService, protected sudokuService: SudokuService){ }
changeUserName($event: User): void {
this.userService.addToLocalStorage($event);
}
onActivate(componentRef: Event): void { onActivate(componentRef: Event): void {
console.log('onActivate', componentRef); if(componentRef instanceof LoginComponent) {
componentRef.addConnectEvent.subscribe((connectedUser: User) => {
this.changeUserName(connectedUser);
});
}
} }
} }

@ -10,7 +10,6 @@ import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import { User } from '../../models/user.model'; import { User } from '../../models/user.model';
import { NgIf } from '@angular/common'; import { NgIf } from '@angular/common';
import { UserService } from '../../services/user-service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
@ -35,7 +34,6 @@ export class LoginComponent implements OnInit {
@Output() addConnectEvent = new EventEmitter<User>(); @Output() addConnectEvent = new EventEmitter<User>();
public isButtonVisible = false; public isButtonVisible = false;
private UserService : UserService;
user: User = {id:1, login: '', password: '', streak: null, streaks: [], points: null} user: User = {id:1, login: '', password: '', streak: null, streaks: [], points: null}
loginForm: FormGroup = new FormGroup({ loginForm: FormGroup = new FormGroup({
@ -43,8 +41,7 @@ export class LoginComponent implements OnInit {
password: new FormControl(this.user.password, Validators.required), password: new FormControl(this.user.password, Validators.required),
}); });
public constructor(us: UserService,private router: Router) { public constructor(private router: Router) {
this.UserService = us
} }
ngOnInit() { ngOnInit() {
@ -61,13 +58,10 @@ export class LoginComponent implements OnInit {
console.log("ERREUR DIFFERENT"); console.log("ERREUR DIFFERENT");
return; return;
} }
console.log(this.loginForm.value.login)
this.user = this.loginForm.value; this.user = this.loginForm.value;
localStorage.setItem('UserConnecte',String(this.user.login));
this.addConnectEvent.emit(this.loginForm.value)
//this.UserService.addUserToLocal(this.user);
this.addConnectEvent.emit(this.user)
this.loginForm.reset(); this.loginForm.reset();
this.isButtonVisible = false; this.isButtonVisible = false;
this.router.navigate(['/accueil']); this.router.navigate(['/accueil']);

@ -29,7 +29,7 @@ export class UserAccueilComponent {
this.streaks = ["❌","❌","❌","❌","❌","❌","❌"] this.streaks = ["❌","❌","❌","❌","❌","❌","❌"]
this.day = ["L","M","M","J","V","S","D"] this.day = ["L","M","M","J","V","S","D"]
let userConnecte = localStorage.getItem('UserConnecte') let userConnecte = us.getItemUserConnecte()
if(userConnecte == undefined) {return} if(userConnecte == undefined) {return}
let id = us.getIdByUser(userConnecte) let id = us.getIdByUser(userConnecte)
@ -60,7 +60,6 @@ export class UserAccueilComponent {
day: 'numeric' day: 'numeric'
} }
return currentDate.toLocaleDateString(undefined, options) return currentDate.toLocaleDateString(undefined, options)
} }
} }

@ -27,7 +27,6 @@ export class UserListComponent {
this.nbPage = 1; this.nbPage = 1;
this.users = this.userService.getAll(); this.users = this.userService.getAll();
this.loadPage(0); this.loadPage(0);
console.log(this.users);
} }
public changeWatchedvar(newVar:string) { public changeWatchedvar(newVar:string) {

@ -21,13 +21,13 @@ nav[mat-tab-nav-bar] {
} }
a[mat-menu-item] { a[mat-menu-item] {
text-align: center; /* Centrer le texte des éléments de menu */ text-align: center;
padding: 10px; /* Espacement interne pour le menu */ padding: 10px;
display: block; /* Faire en sorte que le lien prenne toute la largeur */ display: block;
color: #111; /* Couleur du texte du menu */ color: #111;
} }
a[mat-menu-item]:hover { a[mat-menu-item]:hover {
background-color: #555; /* Couleur au survol pour le menu */ background-color: #555;
} }

@ -6,8 +6,8 @@
</mat-menu> </mat-menu>
<nav mat-tab-nav-bar> <nav mat-tab-nav-bar>
<mat-tab-link label="userconnecte" routerLink="/" mat-flat-button color="primary">{{userconnecte}}</mat-tab-link> <mat-tab-link (click)="removePseudo()" label="userconnecte" [routerLink]="['/']" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</mat-tab-link>
<mat-tab-link label="Accueil" routerLink="/accueil" >Accueil</mat-tab-link> <mat-tab-link (click)="reloadPseudo()" label="Accueil" [routerLink]="['/accueil']" >Accueil</mat-tab-link>
<mat-tab-link label="Classement" routerLink="/users">Classement</mat-tab-link> <mat-tab-link (click)="reloadPseudo()" label="Classement" [routerLink]="['/users']" >Classement</mat-tab-link>
<button mat-button [matMenuTriggerFor]="menu">Menu</button> <button mat-button [matMenuTriggerFor]="menu">Menu</button>
</nav> </nav>

@ -6,7 +6,6 @@ import { UserService } from '../../services/user-service';
import { MatTabsModule } from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { MatTabNav } from '@angular/material/tabs'; import { MatTabNav } from '@angular/material/tabs';
import { SimpleChanges } from '@angular/core';
@Component({ @Component({
selector: 'app-book-menu', selector: 'app-book-menu',
@ -17,17 +16,19 @@ import { SimpleChanges } from '@angular/core';
}) })
export class UserMenuComponent { export class UserMenuComponent {
private service : UserService; private service : UserService;
public userconnecte : String | undefined; public userconnecte : String | undefined;
public route : String | undefined; public route : String | undefined;
public constructor(us: UserService) { public constructor(us: UserService) {
this.service = us this.service = us
this.reloadPseudo() this.reloadPseudo()
} }
public reloadPseudo(){ public reloadPseudo(){
let name = localStorage.getItem('UserConnecte'); let name = this.service.getItemUserConnecte();
if (typeof name === "string" && name !="undefined"){ if (typeof name === "string" && name !="undefined"){
this.userconnecte = name this.userconnecte = name
@ -35,11 +36,16 @@ export class UserMenuComponent {
// let id : number | undefined = this.service.getIdByUser(name) // let id : number | undefined = this.service.getIdByUser(name)
// if(id == undefined) return // if(id == undefined) return
// this.route = "/user/" + id // this.route = "/user/" + id
// console.log(this.route)
} else { } else {
this.userconnecte = "Pseudo"; this.userconnecte = "Connexion";
this.route = "/user/0"; this.route = "/user/0";
} }
} }
public removePseudo(){
localStorage.clear();
this.userconnecte = "Connexion";
}
} }

@ -89,4 +89,13 @@ export class UserService {
} }
return a; return a;
} }
public addToLocalStorage(user : User){
localStorage.setItem('UserConnecte',String(user.login))
}
public getItemUserConnecte() : String | null{
return localStorage.getItem('UserConnecte')
}
} }
Loading…
Cancel
Save