Notes

navbar.html
<mat-toolbar>

<a routerLink="/home" mat-button class="logo navbarLink"><img src="assets/images/logo.png.png"
style="width: auto;height:40px ; padding: 0;" alt="logo"></a>
<a mat-button routerLink="/tariff" class="navbarLink">Tariff</a>
<a mat-button routerLink="/offers" class="navbarLink d-none d-sm-block">Offers</a>
<span class="example-spacer"></span>


<button mat-raised-button (click)="selectLocation()" class="locationButton">
Location
</button>

<a mat-button *ngIf="!session.isLoggedIn()" routerLink="/login" class="navbarLink">Log In</a>
<a mat-button *ngIf="session.isLoggedIn()" routerLink="/profile" class="navbarLink">Profile</a>




</mat-toolbar>


<router-outlet></router-outlet>

navbar.css
.example-spacer {
flex: 1 1 auto;
}
.logo {
padding-left: 0.5rem;
font-size: larger;
}
.navbarLink {
margin-left: 0.5rem;
font-weight: 500;
}

mat-toolbar {
background-color: #cdcde957;
color: rgb(0, 0, 0);
}
@media screen and (min-width: 900px) {
.logo {
padding-left: 0.5rem;
padding-right: 2.5rem;
}
.navbarLink {
margin-left: 1.5rem;
}
}

navbar.ts
import { Component, Input, OnInit } from '@angular/core';
import { Session } from '../session';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatDialog } from '@angular/material/dialog';
import { LocationSelectorComponent } from '../location-selector/location-selector.component';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
@Input()
session!: Session;



constructor(public dialog: MatDialog) { }

ngOnInit(): void {
this.session = new Session();
}
logout(){
this.session.logout();
}
selectLocation(){
let dialogRef = this.dialog.open(LocationSelectorComponent);
dialogRef.afterClosed().subscribe(result =>{
console.log(result);
})
}

}

offers.html
<div class="box1">
<img src="assets/images/offers.jpg" class="responsive-img">
<h1 id="offer-city">BIKE RENTAL OFFERS IN
<span class="upperCase">{{location}}</span>
</h1>
</div>

<div class="container imageCont">
<div class="image">
<img src="assets/images/offers1.png" alt="" style="width: 350px;height: auto;">
</div>
<div class="image">
<img src="assets/images/offers2.png" alt="" style="width: 350px;height: auto;">
</div>
<div class=" image">
<img src="assets/images/offers3.png" alt="" style="width: 350px;height: auto;">
</div>
<div class=" image">
<img src="assets/images/offers4.png" alt="" style="width: 350px;height: auto;">
</div>
</div>

<div class="footerCont">
<h1>Enjoy every minute of your
<span class="upperCase">RIDE</span>
with us!
</h1>
</div>
<app-footer></app-footer>

offers.css
.box1 img {
width: 100%;
}
.box1 h1 {
font-size: 25px;
background-image: linear-gradient(
to top,
rgba(48, 45, 46, 0),
rgba(48, 45, 46, 1)
);
color: rgb(43, 33, 33);
text-align: center;
padding: 5px 0px 5px 0;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
letter-spacing: 1px;
}
.row img {
width: 100%;
}
.row {
display: flex;
}

.image {
margin: 1rem;
padding: 15px;

box-shadow: 5px 5px 5px #302d2e;
}
.imageCont {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.image:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}

.footerCont h1 {
font-size: 25px;
background-image: linear-gradient(
to top,
rgba(48, 45, 46, 1),
rgba(48, 45, 46, 0)
);
color: rgb(43, 33, 33);
text-align: center;
padding: 5px 0px 5px 0;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
margin-top: 3rem;
}

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

@Component({
selector: 'app-offers',
templateUrl: './offers.component.html',
styleUrls: ['./offers.component.css']
})
export class OffersComponent implements OnInit {

location='Alleppey';

constructor() { }

ngOnInit(): void {
var temp:any=sessionStorage.getItem('location');
if(temp==null){
this.location='Alleppey';

}else{
this.location=temp;

}
}

}

pagenotfound.html
<img src="assets/images/notfound.png" alt="NOt found" style="width: 100%;height: auto;">
pagenotfound.ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-page-not-found',
templateUrl: './page-not-found.component.html',
styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}

payment.html
<div class="register-form">
<form [formGroup]="paymentForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name on Card</label>
<input type="text" formControlName="nameOnCard" class="form-control" placeholder="Card Holder Name"
[ngClass]="{ 'is-invalid': f['nameOnCard'].errors && (f['nameOnCard'].dirty || f['nameOnCard'].touched) }">
<div *ngIf="paymentForm && f['nameOnCard'].errors" class="invalid-feedback">
<div *ngIf="f['nameOnCard'].errors['required']">Please enter Associate Name</div>
<div *ngIf="f['nameOnCard'].errors['pattern']"> Accepts Alphabets & space </div>
</div>
</div>
<div class="form-group">
<label>Card Number</label>
<input type="number" formControlName="cardNumber" class="form-control" placeholder="1234123412341234"
[ngClass]="{ 'is-invalid': f['cardNumber'].errors && (f['cardNumber'].dirty || f['cardNumber'].touched)}">
<div *ngIf="paymentForm && f['cardNumber'].errors" class="invalid-feedback">
<div *ngIf="f['cardNumber'].errors['required']">Please enter Card Number</div>
<div *ngIf="f['cardNumber'].errors['minlength']"> Mininimun length should be 16 </div>
</div>
</div>
<div class="form-group ">
<label>Date of Expiration</label>
<div class="date">
<input class="form-control month" type="number" formControlName="expirationMonth" placeholder="MM"
[ngClass]="{'is-invalid': !f['expirationMonth'].valid && (f['expirationMonth'].dirty || f['expirationMonth'].touched) }">
<input class="form-control year" type="number" formControlName="expirationYear" placeholder="YYYY"
[ngClass]="{ 'is-invalid': f['expirationYear'].errors && (f['expirationYear'].dirty || f['expirationYear'].touched) }">
</div>
<div *ngIf="paymentForm && f['expirationMonth'].errors" class="invalid-feedback">
<div *ngIf="paymentForm && f['expirationYear'].errors" class="invalid-feedback">
<div *ngIf="f['expirationMonth'].errors['required']">Please enter Expiry Month</div>
<div *ngIf="f['expirationYear'].errors['required']">Please enter Expiry Year</div>
<div *ngIf="f['expirationMonth'].errors['minlength']"> Mininimun length should be 1 </div>
<div *ngIf="f['expirationYear'].errors['minlength']"> Mininimun length should be 4 </div>
<div *ngIf="f['expirationMonth'].errors['maxlength']"> Maximum length should be 12 </div>
<div *ngIf="f['expirationYear'].errors['maxlength']"> Mininimun length should be 4 </div>
</div>
</div>
</div>
<div class="form-group ">
<label>CVV/CVC</label>
<input class="form-control month" type="number" formControlName="cardCVVNumber" placeholder="123"
[ngClass]="{ 'is-invalid': f['cardCVVNumber'].errors && (f['cardCVVNumber'].dirty || f['cardCVVNumber'].touched)}">
<div *ngIf="paymentForm && f['cardCVVNumber'].errors" class="invalid-feedback">
<div *ngIf="f['cardCVVNumber'].errors['required']">Please enter CVV</div>
<div *ngIf="f['cardCVVNumber'].errors['minlength']"> Mininimun length should be 3 </div>
<div *ngIf="f['cardCVVNumber'].errors['maxlength']"> Maximum length should be 3 </div>
</div>
</div>
<div class="form-group">
<button [disabled]="paymentForm.invalid" type="submit" mat-dialog-close (click)="goToHome()"
class="btn btn-primary">Pay</button>
</div>
<h3 class="center-block text-center">{{displayMessage}}</h3>
</form>
</div>
payment.css
.register-form {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.register-form .form-group {
margin: 20px;
}
.form-group button {
width: 100%;
}
.form-group .date {
display: flex;
}
payment.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder , FormGroup , Validators } from '@angular/forms';
import { Router } from '@angular/router';

import { SharedService } from '../shared.service';
import { rentalDetailsClass } from '../Idata';


@Component({
selector: 'app-payment-form',
templateUrl: './payment-form.component.html',
styleUrls: ['./payment-form.component.css']
})
export class PaymentFormComponent implements OnInit {

paymentForm!: FormGroup;
displayMessage!: string;
constructor(
public service:SharedService,
private formBuilder:FormBuilder,
private router:Router
) { }

rentalDetails = new rentalDetailsClass;
bikeId:any=sessionStorage.getItem("bikeId");
pickupDate:any=sessionStorage.getItem("pickupDate");
pickupTime:any=sessionStorage.getItem("pickupTime");
dropoffDate:any=sessionStorage.getItem("dropoffDate");
dropoffTime:any=sessionStorage.getItem("dropoffTime");
bookedHours:any=sessionStorage.getItem("bookedHours");
userId:any=localStorage.getItem("userId");
paid:any=Number(sessionStorage.getItem("paid"));
gst=this.paid * (14/100);
total=this.paid +this.gst +this.gst;

ngOnInit(): void {
this.buildForm();
this.rentalDetails.userId=this.userId;
this.rentalDetails.bikeId=this.bikeId;
this.rentalDetails.pickup_date=this.pickupDate;
this.rentalDetails.pickup_time=this.pickupTime;
this.rentalDetails.drop_date=this.dropoffDate;
this.rentalDetails.drop_time=this.dropoffTime;
this.rentalDetails.paid=this.total.toString();
}
buildForm(){
this.paymentForm = this.formBuilder.group({
nameOnCard: ['',
[Validators.required,
Validators.minLength(1),
Validators.pattern('^[A-Za-z][A-Za-z -]*$')
]
],
cardNumber: ['',
[Validators.required,
Validators.minLength(16),
Validators.min(1111111111111111),
Validators.max(9999999999999999)
]
],
expirationMonth: ['',
[
Validators.required,
Validators.minLength(1),
Validators.maxLength(2),
Validators.min(1),
Validators.max(12)
]
],
expirationYear: ['',
[
Validators.required,
Validators.minLength(4),
Validators.maxLength(4),
Validators.min(1111),
Validators.max(9999)
]
],
cardCVVNumber: ['',
[Validators.required,
Validators.minLength(3),
Validators.maxLength(3),
Validators.min(111),
Validators.max(999)
]
]
});

}
get f() { return this.paymentForm.controls; }
onSubmit() {
this.submitForm();
}

submitForm() {
/* Change the display message on button click / submit form */
// stop here if form is invalid
if (this.paymentForm.invalid) {
this.displayMessage = "Payment Failed!";
return;
}
this.displayMessage = "Payment Successful!";
}
goToHome(){
this.service.postRental(this.rentalDetails).subscribe(data=>{
console.log(data);
})
this.router.navigate(['/profile'])
}

}
profile.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="history-page">
<div class="profile">
<div class="image">
<h3>Profile</h3>
<img src="assets/images/profile.png" alt="Profile picture">
<strong>{{userDetails.first_name + userDetails.last_name}}</strong>
<p>{{userDetails.email}}</p>
<p>Joined us on:{{userDetails.createdAt | date}}</p>
<button (click)="clicked()"><i class="fa fa-power-off"></i> Logout</button>
</div>
</div>

<div class="container mt-5">
<h3>History</h3>
<div class="card" *ngFor="let details of pastBookings">
<div class="row">
<div class="col-md-4">
<img src={{details.bikeId.bike_image}} style="width: 200px;height: 100px;">
<p style="padding-left: 80px;">{{details.bikeId.bike_name}}</p>
</div>
<div class="col-md-8">
<div class="flex-container">
<div class="flex-child">
<strong>PICK-UP DATE</strong>
<p>{{details.pickup_date | date}}</p>
</div>
<div class="flex-child">
<strong>PICK-UP TIME</strong>
<p>{{details.pickup_time + ":00"}}</p>
</div>
<div class="flex-child">
<strong>DROPOFF DATE</strong>
<p>{{details.drop_date | date}}</p>
</div>
<div class="flex-child">
<strong>DROP TIME</strong>
<p>{{details.drop_time + ":00"}}</p>
</div>
<div class="flex-child">
<strong>PAID</strong>
<p class="rec">{{details.paid | number : '1.2-2'}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<app-footer></app-footer>
profile.css
.history-page {
display: flex;
}
.container h3 {
text-align: center;
}
.card {
box-shadow: 3px 5px #a3a1a1;
margin: 1.5rem 0.2rem;
padding: 10px;
}
.flex-container {
display: flex;
margin-top: 50px;
}
.flex-child {
flex: 1;
}
.rec {
height: 25px;
width: fit-content;
background-color: yellow;
text-align: center;
border-radius: 6px;
}
.profile {
width: 300px;
margin-top: 50px;
}
.profile img {
width: 100%;
}
.profile .image {
text-align: center;
}
.profile button {
border-radius: 5px;
padding: 5px 10px;
background-color: red;
color: #fff;
}

profile.ts
import { Component, OnInit } from '@angular/core';
import { pastRentalDetailsClass, rentalDetailsClass, userDetailsClass } from '../Idata';
import { SharedService } from '../shared.service';
import { Session } from '../session';
import { Router } from '@angular/router';

@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

constructor(
public service:SharedService,
private router:Router
) { }

session: Session = new Session;


userId:any=localStorage.getItem("userId");

pastBookings:pastRentalDetailsClass[]=[];
userDetails = new userDetailsClass;
ngOnInit(): void {
this.service.getPastRentals(this.userId).subscribe(data=>{
this.pastBookings=data;
console.log(this.pastBookings);
})
this.service.getUsers(this.userId).subscribe(data=>{
this.userDetails=data;
})
}
clicked(){
this.session.logout();
this.router.navigate(['/home']);
}

}
summary.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="summaryComponent container">
<div class="card summary col-8 col-md-12">
<h3>SUMMARY</h3>
<div class="container">
<div class="image">
<img src={{bike.bike_image}}>
<h3>{{bike.bike_name}}</h3>
</div>
<div class="content ">
<div class="flex-container">
<div class="flex-child magenta" style="width:40%">
<strong style="color: gray;">{{pickupTime+":00"}}</strong>
<p>{{pickupDate | date}}</p>
</div>
<span class="dot" style="width: 20%;">to</span>
<div class="flex-child green" style="width:40%">
<strong style="color: gray;">{{dropoffTime+":00"}}</strong>
<p>{{dropoffDate | date}}</p>
</div>
</div>
<div class="requirements" style="display: flex;">
<div class="des" style="width: 70%;line-height: 30px;">
<p>Hourly rate:</p>
<p>Total hours:</p>
<p>Km limit (?)</p>
<p>Number of Helmet (?)</p>
<p>
<strong>Total</strong>
</p>

<p>Excess km charges (?)</p>
</div>
<div class="amounts" style="width:30%;line-height: 30px;">
<p><strong><i class="fa fa-rupee"></i></strong> {{bike.hourly_rate}}</p>

<p>{{bookedHours}}</p>
<p>{{bike.kilometer_limit * bookedHours}}</p>
<p>
<select style="padding-right: 20px ;">
<option>1</option>
<option>2</option>
</select>
</p>
<p><strong><i class="fa fa-rupee"></i></strong>{{paid}}</p>
<p><strong><i class="fa fa-rupee"></i></strong>5/hr</p>
</div>
</div>
</div>
</div>
</div>
<div class="card checkout col-md-12">
<h3 style="font-weight:bold;margin-top: 10px;">CHECKOUT</h3>
<div class="details">
<div class="titles" style="width: 70%;">
<p>Booking Fee</p>
<p>CGST(14%)</p>
<p>SGST(14%)</p>
<p>Refundable Deposit</p>
<p><strong>Total Payable Amount</strong></p>
</div>
<div class="info" style="width: 30%;">
<p><strong><i class="fa fa-rupee"></i></strong> {{paid}}</p>
<p><strong><i class="fa fa-rupee"></i></strong>{{gst | number : '1.2-2' }}</p>
<p><strong><i class="fa fa-rupee"></i></strong>{{gst | number : '1.2-2' }}</p>
<p><strong><i class="fa fa-rupee"></i></strong>1000.00</p>
<p><strong><i class="fa fa-rupee"></i></strong>{{total | number : '1.2-2' }}</p>
</div>
</div>
<button (click)="booktheBike()">Make Payment</button>
</div>
</div>

<app-footer></app-footer>

summary.css
.card {
box-shadow: 0px 0px 5px #302d2e;
}
.summaryComponent {
display: flex;

margin-top: 20px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
text-align: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
.summaryComponent .summary .container {
display: flex;
}
.summary {
width: 50%;
min-width: 480px;
max-height: 400px;
margin: 4rem 0;
padding-bottom: 30px;
padding-left: 20px;
}
.summary h3 {
font-weight: bold;
margin-top: 10px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}
.container .image {
width: 40%;
margin-top: 10%;
}
.image img {
width: 70%;
margin-bottom: 5px;
}
.content {
width: 50%;
}
.content p {
color: gray;
}
.content i {
color: black;
}
.content .flex-container {
display: flex;
margin-bottom: 10px;
border-bottom: 1px solid lightgrey;
}
.checkout {
width: 30%;
padding: 20px;
min-width: 290px;
max-height: 320px;
margin: 4rem 0;
}
.checkout h3 {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}
.checkout .details {
display: flex;
}
.checkout p {
color: gray;
}
.checkout i {
color: black;
}
.checkout button {
margin-top: 10px;

text-align: center;
border: none;
background-color: #707793;
color: aliceblue;
border-radius: 5px;
margin-bottom: 20px;
padding: 5px 0px;
}
@media screen and (max-width: 768px) {
.summaryComponent {
display: flex;
flex-direction: column;
}
.summary {
margin-bottom: 20px;
width: 90%;
}
.checkout {
width: 50%;
}
}

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

import { bikeDetailsClass, rentalDetailsClass } from '../Idata';
import { SharedService } from '../shared.service';
import { PaymentFormComponent } from '../payment-form/payment-form.component';
import { MatDialog } from '@angular/material/dialog';
import { MatDialogConfig } from '@angular/material/dialog';



@Component({
selector: 'app-summary-page',
templateUrl: './summary-page.component.html',
styleUrls: ['./summary-page.component.css']
})
export class SummaryPageComponent implements OnInit {

constructor(
public service:SharedService,
private dialog:MatDialog
) { }


rentalDetails = new rentalDetailsClass;
bikeId:any=sessionStorage.getItem("bikeId");
pickupDate:any=sessionStorage.getItem("pickupDate");
pickupTime:any=sessionStorage.getItem("pickupTime");
dropoffDate:any=sessionStorage.getItem("dropoffDate");
dropoffTime:any=sessionStorage.getItem("dropoffTime");
bookedHours:any=sessionStorage.getItem("bookedHours");

paid:any=Number(sessionStorage.getItem("paid"));
userId:any=localStorage.getItem("userId");

gst=this.paid * (14/100);
total=this.paid +this.gst +this.gst+1000;


booktheBike(){
this.rentalDetails.userId=this.userId;
this.rentalDetails.bikeId=this.bikeId;
this.rentalDetails.pickup_date=this.pickupDate;
this.rentalDetails.pickup_time=this.pickupTime;
this.rentalDetails.drop_date=this.dropoffDate;
this.rentalDetails.drop_time=this.dropoffTime;
this.rentalDetails.paid=this.total.toString();

const dialogConfig = new MatDialogConfig();
dialogConfig.width="50%";
this.dialog.open(PaymentFormComponent,dialogConfig);

}

bike = new bikeDetailsClass;
ngOnInit(): void {
this.service.getOneBike(this.bikeId).subscribe(data=>{
this.bike=data;
console.log(this.bike)
})
}

}
tarrif.html
<div class="container">
<div class="tariff-page">
<mat-card class="mat-elevation-z12 col-4 col-md-6" *ngFor="let bike of bike_details">
<mat-card-title style="text-align:center;">{{bike.bike_name}}</mat-card-title>
<img src={{bike.bike_image}}>
<mat-tab-group mat-stretch-tabs class="example-stretched-tabs">
<mat-tab label="HOURLY">
<mat-card-content>
<div style="width: 300px;">
<h6 class="inner_text">Mon-Thu</h6>
<small>(Min10hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (0-24hrs)</span>
</div>
<div class="col-4">
<span class="inner_text">₹
<b>{{bike.hourly_rate+5}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4">
<span class="inner_text">₹<b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div style="width: 300px;">
<h6 class="inner_text">Fri-Sun</h6>
<small>(Min 24hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4">
<span class="inner_text">₹ <b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div style="width: 300px;">
<h6 class="inner_text">Extras</h6>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Km limit</span>
</div>
<div class="col-4">
<span class="inner_text">
<b>{{bike.kilometer_limit}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Excess km charges</span>
</div>
<div class="col-4">
<span class="inner_text">₹
<b>4.0</b>/km</span>
</div>
</div>
</div>
</mat-card-content>
</mat-tab>
<mat-tab label="7 DAYS">
<mat-card-content>
<div>
<h6 class="inner_text">Mon-Thu</h6>
<small>(Min10hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (0-24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹
<b>{{bike.hourly_rate+5}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹<b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Fri-Sun</h6>
<small>(Min 24hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹ <b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Extras</h6>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Km limit</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">
<b>{{bike.kilometer_limit}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Excess km charges</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹
<b>4.0</b>/km</span>
</div>
</div>
</div>
</mat-card-content>
</mat-tab>
<mat-tab label="15 DAYS">
<mat-card-content>
<div>
<h6 class="inner_text">Mon-Thu</h6>
<small>(Min10hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (0-24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹
<b>{{bike.hourly_rate+5}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹<b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Fri-Sun</h6>
<small>(Min 24hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹ <b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Extras</h6>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Km limit</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">
<b>{{bike.kilometer_limit}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Excess km charges</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹
<b>4.0</b>/km</span>
</div>
</div>
</div>
</mat-card-content>
</mat-tab>
<mat-tab label="30 Days">
<mat-card-content>
<div>
<h6 class="inner_text">Mon-Thu</h6>
<small>(Min10hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (0-24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹
<b>{{bike.hourly_rate+5}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹<b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Fri-Sun</h6>
<small>(Min 24hrs booking)</small>
<div class="row" style="width: 300px;">
<div class="col-8">
<span class="inner_text">Booking Time (&gt;24hrs)</span>
</div>
<div class="col-4" style="padding:0rem;">
<span class="inner_text">₹ <b>{{bike.hourly_rate}}</b>/hr</span>
</div>
</div>
</div>
<div>
<h6 class="inner_text">Extras</h6>
<div class="row" style="width: 300px;">
<div class="col s9 l8">
<span class="inner_text">Km limit</span>
</div>
<div class="col s3 l4" style="padding:0rem;">
<span class="inner_text">
<b>{{bike.kilometer_limit}}</b>/hr</span>
</div>
</div>
<div class="row" style="width: 300px;">
<div class="col s9 l8">
<span class="inner_text">Excess km charges</span>
</div>
<div class="col s3 l4" style="padding:0rem;">
<span class="inner_text">₹
<b>4.0</b>/km</span>
</div>
</div>
</div>
</mat-card-content>
</mat-tab>
</mat-tab-group>
<button (click)="openDialog(bike._id,bike.hourly_rate)">BOOK NOW</button>
</mat-card>

</div>
</div>

<app-footer></app-footer>
tariff.css
.tariff-page {
width: fit-content;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
mat-card {
width: 340px;
margin: 10% 0px;
height: max-content;
border-radius: 8px;
}
mat-card-content {
margin-top: 20px;
}
mat-card img {
width: 100%;
margin: 10% auto;
border-radius: 8px;
}
mat-card button {
text-align: center;
border: none;
width: 100%;
background-color: #707793;
color: aliceblue;
border-radius: 5px;
margin-bottom: 20px;
padding: 5px 0px;
}
tariff.ts
import { Component, OnInit } from '@angular/core';
import { bikeDetailsClass } from '../Idata';
import { SharedService } from '../shared.service';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import { DatePickerComponent } from '../date-picker/date-picker.component';
@Component({
selector: 'app-tariff',
templateUrl: './tariff.component.html',
styleUrls: ['./tariff.component.css']
})
export class TariffComponent implements OnInit {

bike_details:bikeDetailsClass[]=[];


constructor(
public service:SharedService,
public dialog:MatDialog
) { }

ngOnInit(): void {
this.service.getBikes().subscribe(data=>{
this.bike_details= data;
console.log(this.bike_details);
})
}
openDialog(bikeId:any,hourly_rate:any){
console.log(bikeId);
sessionStorage.setItem("bikeId",bikeId);
sessionStorage.setItem("hourly_Rate",hourly_rate.toString());

const dialogConfig = new MatDialogConfig();
this.dialog.open(DatePickerComponent,dialogConfig);
}

}