File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Constructor
constructor(http: HttpClient, router: Router, authService: AuthService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| http |
HttpClient
|
No
|
| router |
Router
|
No
|
| authService |
AuthService
|
No
|
|
Methods
|
getRestaurants
|
getRestaurants()
|
|
|
|
|
|
logout
|
logout()
|
|
|
|
Returns : Observable<any>
|
|
viewMenu
|
viewMenu(restaurantName: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| restaurantName |
string
|
No
|
|
|
Private
_isLoggedIn
|
Type : boolean
|
Default value : false
|
|
|
|
password
|
Type : string | any
|
|
|
|
restaurants
|
Type : Restaurant[]
|
Default value : []
|
|
|
|
username
|
Type : string | any
|
|
|
|
users
|
Type : User[]
|
Default value : []
|
|
|
Accessors
|
isLoggedIn
|
getisLoggedIn()
|
|
|
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { Observable } from 'rxjs';
import { Restaurant } from '../Restaurant';
import { User } from '../User';
@Component({
selector: 'app-restaurants',
templateUrl: './restaurants.component.html',
styleUrls: ['./restaurants.component.css']
})
export class RestaurantsComponent implements OnInit {
username: string | any;
password: string | any;
role: string | any;
restaurants: Restaurant[] = [];
users: User[] = [];
private _isLoggedIn: boolean = false; // private backing field for isLoggedIn
userId!: string; // Change the type to string
constructor(private http: HttpClient, private router: Router, private authService: AuthService) {
if (this.authService.isLoggedIn()) {
this._isLoggedIn = true;
this.authService.getRestaurants().subscribe(
(restaurants) => {
this.restaurants = restaurants;
},
(error) => {
console.log(error);
}
);
this.userId = this.authService.getUserId() || ''; // Fetch the user ID directly from the AuthService and assign an empty string as the default value
console.log('User ID:', this.userId);
}
}
ngOnInit() {
this.role = localStorage.getItem('role');
this.username = localStorage.getItem('username');
this.password = localStorage.getItem('password');
this.getUsers();
this.getRestaurants();
}
getRestaurants() {
this.http.get<Restaurant[]>('http://localhost:3000/restaurants').subscribe(
(data) => {
this.restaurants = data;
},
(error) => {
console.log('Error retrieving restaurants:', error);
}
);
}
getUsers() {
this.http.get<User[]>('http://localhost:3000/users').subscribe(
(data) => {
this.users = data;
},
(error) => {
console.log('Error retrieving users:', error);
}
);
}
viewMenu(restaurantName: string) {
console.log(this.userId); // Use this.userId to access the userId
this.router.navigate(['/menu-items', restaurantName, this.userId]);
}
logout(): Observable<any> {
this.authService.clearToken();
this._isLoggedIn = false;
window.location.replace('/');
return new Observable((observer) => {
observer.complete();
});
}
get isLoggedIn() {
return this._isLoggedIn; // return the private backing field
}
}
<style>
.restaurant-card {
margin-bottom: 20px;
}
</style>
<div class="alert alert-primary" role="alert" *ngIf="!isLoggedIn">
<i class="bi bi-info-circle-fill mr-2"></i> Please login to view available restaurants.
</div>
<div class="col">
<h2 class="mb-4">
<i class="bi bi-house-fill"></i> Discover Amazing Restaurants
</h2>
<hr>
<div *ngIf="role === 'customer' && isLoggedIn">
<div class="row">
<div class="col-md-6" *ngFor="let restaurant of restaurants; let i = index">
<div class="card mb-4 restaurant-card">
<img [src]="'https://source.unsplash.com/random/1920x1080/?Delicious,Tasty,Veg,Chinesevegfood,' + restaurant._id" class="card-img-top" [alt]="'Restaurant ' + restaurant._id">
<div class="card-body">
<h3 class="card-title">{{ restaurant.name }}</h3>
<!-- <p class="card-text">Owner: {{ restaurant.owner }}</p> -->
<button class="btn btn-primary" (click)="viewMenu(restaurant.name)">
<i class="bi bi-eye-fill"></i> View Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-5">
<div class="row">
<div class="col-md-6" *ngIf="role === 'seller' && isLoggedIn">
<div class="card mb-4 restaurant-card">
<div class="card-body">
<h3 class="card-title">Add Restaurant</h3>
<p class="card-text">Click the button below to add a new restaurant.</p>
<button class="btn btn-primary" routerLink="/add-restaurants">
<i class="bi bi-plus-circle-fill"></i> Add Restaurant
</button>
</div>
</div>
</div>
<div class="col-md-6" *ngIf="role === 'seller' && isLoggedIn">
<div class="card mb-4 restaurant-card">
<div class="card-body">
<h3 class="card-title">Add Menu Items</h3>
<p class="card-text">Click the button below to add menu items for your restaurant.</p>
<button class="btn btn-primary" routerLink="/menuitem">
<i class="bi bi-card-list"></i> Add Menu Items
</button>
</div>
</div>
</div>
</div>
</div>
.card {
border: 1px solid #eaeaea;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
}
.card-text {
margin-bottom: 1rem;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.list-group-item {
border: none;
background-color: transparent;
}
.mb-4 {
margin-bottom: 1.5rem;
}
Legend
Html element with directive