Navbar v1
parent
021284c4b4
commit
85d1d00f6a
@ -1,2 +1 @@
|
||||
<navigationBar></navigationBar>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
<!--Navbar-->
|
||||
<navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
|
||||
<logo>
|
||||
<a class="logo navbar-brand waves-light" mdbRippleRadius><strong>ParrainApp</strong></a>
|
||||
</logo>
|
||||
<links>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active waves-light" [class.active]="opCommercialLink.classList.contains('active')"> <a class="nav-link waves-light" #opCommercialLink routerLink="/opCommercial" routerLinkActive="active">Opération Commerciale</a></li>
|
||||
<li class="nav-item active waves-light" [class.active]="historiqueCarteLink.classList.contains('active')"> <a class="nav-link waves-light" #historiqueCarteLink routerLink="/historiqueCarte" routerLinkActive="active">Historique des cartes de parrainages</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- <li class="nav-item waves-light" mdbRippleRadius *ngIf="afficheLogout === true" >
|
||||
<a class="nav-link" (click)="logout()">Logout</a>
|
||||
</li>
|
||||
-->
|
||||
<ul class="navbar-nav nav-flex-icons">
|
||||
<li class="nav-item avatar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item waves-light" mdbRippleRadius>
|
||||
<a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="{{avatarCommercant}}" class="circle-avatar img-fluid rounded-circle"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown" dropdown>
|
||||
<a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
|
||||
{{nameCommercant}}<span class="caret"></span></a>
|
||||
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
|
||||
<a class="dropdown-item waves-light" [routerLink]="['/profil']">Mon profil</a>
|
||||
<div class="divider dropdown-divider"></div>
|
||||
<a class="dropdown-item waves-light" mdbRippleRadius (click)="logout()">Se déconnecter</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</links>
|
||||
</navbar>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
logo a, a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
logo a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #82b1ff !important;
|
||||
}
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #82b1ff !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavCommercantComponent } from './nav-commercant.component';
|
||||
|
||||
describe('NavCommercantComponent', () => {
|
||||
let component: NavCommercantComponent;
|
||||
let fixture: ComponentFixture<NavCommercantComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavCommercantComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavCommercantComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,72 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
|
||||
import * as firebase from 'firebase/app';
|
||||
import { AngularFireAuth } from 'angularfire2/auth';
|
||||
import { AuthService } from '../../../services/auth/auth.service';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Commercant } from '../../../../models/Commercant';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-commercant',
|
||||
templateUrl: './nav-commercant.component.html',
|
||||
styleUrls: ['./nav-commercant.component.scss'],
|
||||
providers: [AuthService]
|
||||
})
|
||||
export class NavCommercantComponent implements OnInit {
|
||||
user: Observable<firebase.User>;
|
||||
localUser: any;
|
||||
commercant: Commercant;
|
||||
profileData: FirebaseListObservable<any[]>;
|
||||
imageProfil: string;
|
||||
role: any;
|
||||
nameCommercant: string;
|
||||
avatarCommercant: string;
|
||||
|
||||
constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase,
|
||||
private router: Router, private authService: AuthService) {
|
||||
|
||||
this.nameCommercant = '';
|
||||
this.avatarCommercant = '';
|
||||
this.user = afAuth.authState;
|
||||
this.user.subscribe(
|
||||
(auth) => {
|
||||
if (auth) {
|
||||
console.log(auth.displayName);
|
||||
this.profileData = this.afDb.list('/' + auth.displayName + '/', {
|
||||
query: {
|
||||
orderByChild: 'uid',
|
||||
equalTo: auth.uid.toString()
|
||||
}
|
||||
}
|
||||
);
|
||||
this.profileData.forEach(utilisateur => {
|
||||
utilisateur.forEach(element => {
|
||||
this.commercant = element;
|
||||
console.log(this.commercant.commercialName);
|
||||
if (this.commercant !== undefined) {
|
||||
console.log(this.commercant.image.downloadURL);
|
||||
this.nameCommercant = this.commercant.commercialName;
|
||||
this.avatarCommercant = this.commercant.image.downloadURL;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
logout() {
|
||||
firebase.auth().signOut();
|
||||
this.authService.logout();
|
||||
this.user = null;
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
<!--Navbar-->
|
||||
<navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
|
||||
<logo>
|
||||
<a class="logo navbar-brand waves-light" mdbRippleRadius><strong>ParrainApp</strong></a>
|
||||
</logo>
|
||||
<links>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active waves-light" [class.active]="carteParrainLink.classList.contains('active')"> <a class="nav-link waves-light" #carteParrainLink routerLink="/carteParrainageComponent" routerLinkActive="active">Liste des cartes de parrainage</a></li>
|
||||
<!--<li class="nav-item active waves-light" [class.active]="historiqueCarteLink.classList.contains('active')"> <a class="nav-link waves-light" #historiqueCarteLink routerLink="/historiqueCarte" routerLinkActive="active">Historique des cartes de parrainages</a></li>-->
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- <li class="nav-item waves-light" mdbRippleRadius *ngIf="afficheLogout === true" >
|
||||
<a class="nav-link" (click)="logout()">Logout</a>
|
||||
</li>
|
||||
-->
|
||||
<ul class="navbar-nav nav-flex-icons">
|
||||
<li class="nav-item avatar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item waves-light" mdbRippleRadius>
|
||||
<a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="{{avatarParrain}}" class="img-fluid rounded-circle z-depth-0 hoverZoomLink"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown" dropdown>
|
||||
<a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
|
||||
{{nameParrain}}<span class="caret"></span></a>
|
||||
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
|
||||
<a class="dropdown-item waves-light" [routerLink]="['/profil']">Mon profil</a>
|
||||
<div class="divider dropdown-divider"></div>
|
||||
<a class="dropdown-item waves-light" mdbRippleRadius (click)="logout()">Se déconnecter</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</links>
|
||||
</navbar>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
logo a, a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
logo a:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.top-nav-collapse {
|
||||
background-color: #82b1ff !important;
|
||||
}
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: transparent !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar:not(.top-nav-collapse) {
|
||||
background: #82b1ff !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavParrainComponent } from './nav-parrain.component';
|
||||
|
||||
describe('NavParrainComponent', () => {
|
||||
let component: NavParrainComponent;
|
||||
let fixture: ComponentFixture<NavParrainComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavParrainComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavParrainComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,71 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
|
||||
import * as firebase from 'firebase/app';
|
||||
import { AngularFireAuth } from 'angularfire2/auth';
|
||||
import { AuthService } from '../../../services/auth/auth.service';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Parrain } from '../../../../models/Parrain';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav-parrain',
|
||||
templateUrl: './nav-parrain.component.html',
|
||||
styleUrls: ['./nav-parrain.component.scss'],
|
||||
providers: [AuthService]
|
||||
})
|
||||
export class NavParrainComponent implements OnInit {
|
||||
|
||||
user: Observable<firebase.User>;
|
||||
localUser: any;
|
||||
parrain: Parrain;
|
||||
profileData: FirebaseListObservable<any[]>;
|
||||
imageProfil: string;
|
||||
role: any;
|
||||
nameParrain: string;
|
||||
avatarParrain: string;
|
||||
|
||||
constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase,
|
||||
private router: Router, private authService: AuthService) {
|
||||
|
||||
this.nameParrain = '';
|
||||
this.avatarParrain = '';
|
||||
this.user = afAuth.authState;
|
||||
this.user.subscribe(
|
||||
(auth) => {
|
||||
if (auth) {
|
||||
console.log(auth.displayName);
|
||||
this.profileData = this.afDb.list('/' + auth.displayName + '/', {
|
||||
query: {
|
||||
orderByChild: 'uid',
|
||||
equalTo: auth.uid.toString()
|
||||
}
|
||||
}
|
||||
);
|
||||
this.profileData.forEach(utilisateur => {
|
||||
utilisateur.forEach(element => {
|
||||
this.parrain = element;
|
||||
console.log(this.parrain.firstname);
|
||||
if (this.parrain !== undefined) {
|
||||
console.log(this.parrain.image.downloadURL);
|
||||
this.nameParrain = this.parrain.firstname;
|
||||
this.avatarParrain = this.parrain.image.downloadURL;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
logout() {
|
||||
firebase.auth().signOut();
|
||||
this.authService.logout();
|
||||
this.user = null;
|
||||
this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue