File
Constructor
constructor(http: HttpClient, route: ActivatedRoute, router: Router, authService: AuthService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| http |
HttpClient
|
No
|
| route |
ActivatedRoute
|
No
|
| router |
Router
|
No
|
| authService |
AuthService
|
No
|
|
|
Private
_isLoggedIn
|
Type : boolean
|
Default value : false
|
|
|
|
menus
|
Type : MenuItem[]
|
Default value : []
|
|
|
import { Component } from '@angular/core';
import { MenuItem } from '../MenuItem';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent {
role: string | any;
private _isLoggedIn: boolean = false; // private backing field for isLoggedIn
menus: MenuItem[] = []; // array to store fetched menus
userId!:string;
constructor(
private http: HttpClient,
private route: ActivatedRoute,
private router: Router,
private authService: AuthService
) {
const token = localStorage.getItem('token');
if (token) {
this._isLoggedIn = true;
}
}
ngOnInit(): void {
// Check if the user is logged in
if (this.authService.isLoggedIn()) {
const userId = this.authService.getUserId(); // Retrieve the userId from the service
// Navigate to the restaurant component only if it's the initial navigation after login
if (!this.route.snapshot.queryParams['userId']) {
this.router.navigate(['/'], { queryParams: { userId } });
return; // Return early to prevent executing the code below
}
} else {
// If the user is not logged in, fetch menus
this.fetchMenus();
}
}
fetchMenus(): void {
this.http.get<MenuItem[]>('http://localhost:3000/menus').subscribe(
(menus: MenuItem[]) => {
this.menus = menus;
},
(error: any) => {
console.error('Error fetching menus', error);
}
);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HungryHub</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom CSS -->
<style>
/* Add your custom styles here */
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1>Welcome to our HungryHub</h1>
<p>Experience the best culinary delights in town</p>
<a routerLink="/restaurants" class="btn btn-primary">View Restaurants</a>
</div>
<div class="col-lg-6">
<img src="https://source.unsplash.com/random/1920x1080/?restaurants'" alt="Restaurant Image" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="https://source.unsplash.com/random/1920x1080/?about" alt="About Image" class="img-fluid">
</div>
<div class="col-lg-6">
<h2>About Us</h2>
<p>Welcome to HungryHub, where you can experience the best culinary delights in town. Our mission is to provide an exceptional dining experience that satisfies your taste buds and leaves you craving for more.</p>
<p>At HungryHub, we take pride in offering a diverse menu crafted with passion and expertise. From mouthwatering appetizers to delectable main courses and delightful desserts, our talented chefs ensure that each dish is prepared with the finest ingredients and utmost care.</p>
<p>Whether you are a food enthusiast, a connoisseur, or simply looking for a memorable dining experience, HungryHub is the perfect destination. Our cozy ambiance, attentive staff, and commitment to culinary excellence create an atmosphere that will make you feel right at home.</p>
<p>Visit HungryHub today and embark on a culinary journey that will tantalize your taste buds and leave you with unforgettable memories. We look forward to serving you!</p>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="menu">
<div class="container">
<h2>Our Menu</h2>
<div class="row">
<div class="col-lg-4" *ngFor="let m of menus">
<div class="card">
<img [src]="'https://source.unsplash.com/random/1920x1080/?food,' + m._id" class="card-img-top" [alt]="'Menu Item ' + m._id">
<div class="card-body">
<!-- <h5 class="card-title">{{ m.name }}</h5> -->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a routerLink="restaurants" class="btn btn-primary">Order Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2>Contact Us</h2>
<div class="row">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-lg-6">
<h3>Visit Us</h3>
<p>123 Restaurant Street</p>
<p>City, State, ZIP Code</p>
<h3>Contact Information</h3>
<p>Email: info@restaurant.com</p>
<p>Phone: 123-456-7890</p>
</div>
</div>
</div>
</section>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
/* Custom CSS Styles for Restaurant App Landing Page */
/* Hero Section */
.hero {
padding: 100px 0;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 18px;
margin-bottom: 40px;
}
.hero .btn-primary {
font-size: 16px;
padding: 12px 32px;
}
/* About Section */
.about {
padding: 100px 0;
}
.about h2 {
font-size: 36px;
margin-bottom: 40px;
}
/* Menu Section */
.menu {
background-color: #f8f9fa;
padding: 100px 0;
}
.menu h2 {
font-size: 36px;
margin-bottom: 40px;
}
.menu .card {
margin-bottom: 30px;
}
/* Contact Section */
.contact {
padding: 100px 0;
}
.contact h2 {
font-size: 36px;
margin-bottom: 40px;
}
.contact form .form-control {
margin-bottom: 20px;
}
.contact form textarea {
resize: none;
}
.contact form button {
font-size: 16px;
padding: 12px 32px;
}
Legend
Html element with directive