Faculty of Engineering & Technology Subject

Name: MEA(R)N Stack Web Development

Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester

Practical-5

Aim : 1. Integrating all components to build a full-stack application

2. Testing and debugging the application
3. Deploying the application on a cloud platform

Code:
Home.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-home',
template: `
<div class="flex flex-col min-h-screen">
<header class="border-b">
<div class="container flex h-16 items-center px-4 sm:px-6 lg:px-8">
<h1 class="text-xl font-bold">Car Rental System</h1>
<nav class="ml-auto flex gap-4">
<a routerLink="/login">
<button class="border px-4 py-2 rounded">Login</button>
</a>
</nav>
</div>
</header>

<main class="flex-1">
<section class="w-full py-12 md:py-24 lg:py-32">
<div class="container px-4 md:px-6">
<div class="flex flex-col items-center justify-center space-y-4 text-center">
<div class="space-y-2">
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
pg. 18
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
Rent a Car Today
</h2>
<p class="mx-auto max-w-[700px] text-gray-500 md:text-xl">
Browse our selection of cars and book your rental in minutes.
</p>
</div>
<div class="space-x-4">
<a routerLink="/cars">
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Browse Cars
</button>
</a>
</div>
</div>
</div>
</section>
</main>

<footer class="border-t py-6">

<div class="container flex flex-col items-center justify-center gap-4 px-4 text-center md:px-6">
<p class="text-sm text-gray-500">
© 2024 Car Rental System. All rights reserved.
</p>
</div>
</footer>
</div>
`,
styles: [`
.container { max-width: 1200px; margin: 0 auto; }
button { transition: all 0.3s; }
button:hover { background-color: #2563eb; }
`]
})
pg. 19
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
export class HomeComponent {}

Output

owner-dashboard.component.ts

Code:

import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';
import { format } from 'date-fns';
import { HttpClient } from '@angular/common/http';

interface BookingType {
id: string;
userId: string;
carId: string;
createdAt: string;
startDate: string;

pg. 20
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
endDate: string;
totalPrice: number;
status: 'pending' | 'confirmed' | 'cancelled';
car?: CarType;
}

interface CarType {
make: string;
model: string;
}

@Component({
selector: 'app-owner-dashboard',
templateUrl: './owner-dashboard.component.html',
styleUrls: ['./owner-dashboard.component.css']
})
export class OwnerDashboardComponent implements OnInit {
bookings: BookingType[] = [];
isLoading = true;

constructor(private router: Router, private http: HttpClient) {}

ngOnInit() {
const userStr = localStorage.getItem("user");
if (!userStr) {
this.router.navigate(['/login']);
return;
}

const user = JSON.parse(userStr);

if (user.role !== "owner") {
this.router.navigate(['/']);
return;
pg. 21
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
}

this.fetchBookings();
}

fetchBookings() {
const allBookings: BookingType[] = JSON.parse(localStorage.getItem("bookings") || "[]");

Promise.all(
allBookings.map(async (booking) => {
try {
const car = await this.getCarById(booking.carId);
return { ...booking, car };
} catch {
return booking;
}
})
).then((bookingsWithCars) => {
this.bookings = bookingsWithCars;
this.isLoading = false;
}).catch(() => {
this.isLoading = false;
});
}

getCarById(carId: string): Promise<CarType> {

return this.http.get<CarType>(`/api/cars/${carId}`).toPromise();
}

updateStatus(bookingId: string, newStatus: 'confirmed' | 'cancelled') {

const allBookings: BookingType[] = JSON.parse(localStorage.getItem("bookings") || "[]");

const updatedBookings = allBookings.map((booking) =>

pg. 22
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
booking.id === bookingId ? { ...booking, status:
newStatus } : booking
);

localStorage.setItem("bookings", JSON.stringify(updatedBookings));

this.bookings = this.bookings.map((booking) =>

booking.id === bookingId ? { ...booking, status: newStatus } : booking
);
}

formatDate(dateString: string): string {

return format(new Date(dateString), 'PPP');
}
}
Output:

pg. 23
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester

cars.component.ts

Code:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

interface CarType {
id: string;
make: string;
model: string;
year: number;
pricePerDay: number;
transmission: string;
fuelType: string;
image?: string;
}

@Component({
selector: 'app-cars',
templateUrl: './cars.component.html',
styleUrls: ['./cars.component.css']
})
export class CarsComponent implements OnInit {
cars: CarType[] = [];
isLoading = true;

constructor(private router: Router, private http: HttpClient) {}

ngOnInit() {
const user = localStorage.getItem("user");
if (!user) {
pg. 24
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester
this.router.navigate(['/login']);
return;
}

this.fetchCars();
}

fetchCars() {
this.http.get<CarType[]>('/api/cars').subscribe({
next: (carsData) => {
this.cars = carsData;
this.isLoading = false;
},
error: () => {
alert("Failed to load cars");
this.isLoading = false;
}
});
}

bookCar(carId: string) {
this.router.navigate([`/booking/${carId}`]);
}
}

pg. 25
ERP : 2303031457014
 Faculty of Engineering & Technology Subject
Name: MEA(R)N Stack Web Development
Laboratory Subject code: 303105386 B.Tech
CSE 3rdYear 6th Semester

Output:

pg. 26
ERP : 2303031457014