Notes

approutingmodel.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';



//components
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { TariffComponent } from './tariff/tariff.component';
import { OffersComponent } from './offers/offers.component';
import { BookingPageComponent } from './booking-page/booking-page.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { ProfileComponent } from './profile/profile.component';
import { SummaryPageComponent } from './summary-page/summary-page.component';
import { NavbarComponent } from './navbar/navbar.component';


const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{path:'login',component:LoginComponent},
{path:'navbar',component:NavbarComponent},
{path:'home',component:HomeComponent},
{path:'tariff',component:TariffComponent},
{path:'offers',component:OffersComponent},
{path:'bookingPage',component:BookingPageComponent},
{path:'profile',component:ProfileComponent},
{path:'summary',component:SummaryPageComponent},
{ path: '**', component:PageNotFoundComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes,{ onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
export class AppRoutingModule { }

appcomponent.html

<app-navbar></app-navbar>

<router-outlet></router-outlet>
appmodule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';


//imports


import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import { MatCommonModule } from '@angular/material/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import { MatTabsModule } from '@angular/material/tabs'
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input'
import { MatCheckboxModule } from '@angular/material/checkbox'
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import {MatSelectModule} from '@angular/material/select';


//ngBootstrap

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LocationSelectorComponent } from './location-selector/location-selector.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TariffComponent } from './tariff/tariff.component';
import { FooterComponent } from './footer/footer.component';
import { OffersComponent } from './offers/offers.component';
import { BookingPageComponent } from './booking-page/booking-page.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

//http
import { HttpClientModule } from '@angular/common/http';
import { PaymentFormComponent } from './payment-form/payment-form.component';
import { ProfileComponent } from './profile/profile.component';
import { SummaryPageComponent } from './summary-page/summary-page.component';
import { DatePickerComponent } from './date-picker/date-picker.component';



@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LocationSelectorComponent,
LoginComponent,
HomeComponent,
TariffComponent,
FooterComponent,
OffersComponent,
BookingPageComponent,
PageNotFoundComponent,
PaymentFormComponent,
ProfileComponent,
SummaryPageComponent,
DatePickerComponent
],
entryComponents:[LocationSelectorComponent],
imports: [
BrowserModule,
AppRoutingModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
MatCommonModule,
BrowserAnimationsModule,
MatCardModule,
MatTabsModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
NgbModule,
MatDatepickerModule,
MatNativeDateModule,
MatSelectModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
idata.ts
export interface userDetails{
"createdAt": Date,
"_id": string,
"first_name": string,
"last_name":string,
"email": string,
"password": string,
}

export class userDetailsClass{
"createdAt": Date
"_id": string
"first_name": string
"last_name":string
"email": string
"password": string
}

export class bikeDetailsClass{
"_id": string
"bike_name": string
"bike_image": string
"hourly_rate": number
"kilometer_limit": number
"locationId": string
}

export class rentalDetailsClass{
"bikeId":string
"userId":string
"pickup_date":Date
"pickup_time":string
"drop_date":Date
"drop_time":string
"paid":number
}

export class pastRentalDetailsClass{
"bikeId":any
"userId":string
"pickup_date":Date
"pickup_time":string
"drop_date":Date
"drop_time":string
"paid":number
}

export class locationDetailsClass{
"_id":string
"location_name":string
"location_image":string
}


export class userRegister{
"first_name":string
"last_name":string
"email":string
"password":string
}

export class userLogin{
"email":string
"password":string
}

export class messages{
"message":string
"id":string
}
session.ts
export class Session{
isLoggedIn():boolean{
return localStorage.getItem("userId")== null ? false : true;
}

logout(){
localStorage.clear();
sessionStorage.clear();
}
}

sharedservice.ts
import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { bikeDetailsClass, locationDetailsClass, pastRentalDetailsClass, rentalDetailsClass, userDetails, userDetailsClass, userLogin, userRegister } from './Idata';
import { Observable } from 'rxjs';


@Injectable({
providedIn: 'root'
})
export class SharedService {

constructor(
private http:HttpClient
) { }

//getting one users
public getUsers(id:string):Observable<userDetailsClass>{
return this.http.get<userDetailsClass>('http://localhost:8083/api/users/'+id);
}

//registering a new user
public registerUser(newUser:userRegister):Observable<any>{
const headers = {'content-type':'application/json'}
const body = JSON.stringify(newUser);
return this.http.post('http://localhost:8083/api/users',body,{'headers':headers});

}

public logInUser(log:userLogin){
const headers = {'content-type':'application/json'}
const body = JSON.stringify(log);
return this.http.post('http://localhost:8083/api/loginuser',body,{'headers':headers});
}

//bikes
public getBikes():Observable<bikeDetailsClass[]>{
return this.http.get<bikeDetailsClass[]>('http://localhost:8083/api/bikes')
}
public getOneBike(id:string):Observable<bikeDetailsClass>{
return this.http.get<bikeDetailsClass>('http://localhost:8083/api/bikes/'+id);
}

//location
public getLocations():Observable<locationDetailsClass[]>{
return this.http.get<locationDetailsClass[]>('http://localhost:8083/api/locations')
}


//rental

public postRental(rentalDetails:rentalDetailsClass):Observable<any>{
const headers = {'content-type':'application/json'}
const body = JSON.stringify(rentalDetails);
return this.http.post('http://localhost:8083/api/rentals',body,{'headers':headers});
}

//get user rentals
public getPastRentals(id:string):Observable<pastRentalDetailsClass[]>{
return this.http.get<pastRentalDetailsClass[]>('http://localhost:8083/api/rentals/'+id);
}


}
bookingpage.css
.search-page {
display: flex;
}
.search-page .filter {
min-width: 300px;
box-shadow: 3px 3px 3px #302d2e;
padding: 1rem 10px;
min-height: 500px;
max-height: 500px;
margin: 10px 0;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.cards .card {
margin: 10px 10px;
height: 390px;
box-shadow: 3px 3px 3px #302d2e;
padding: 30px 3px;
}
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
}
.flex-child:first-child {
margin-right: 30x;
}
.dot {
height: 25px;
width: 25px;
background-color: rgb(22, 21, 21);
border-radius: 50%;
display: inline-block;
color: white;
margin-right: 30px;
text-align: center;
}

.dates,
.times {
display: flex;

justify-content: space-between;
margin-top: 3rem;
}
.dates h5,
.times h5 {
font-size: 17px;
font-weight: 470;
}

.dates h6,
.times h6 {
font-size: 14px;
font-weight: 470;
}

.times {
margin-top: 1rem;
}

.resetButton {
margin-top: 2rem;
text-align: center;
}
.resetButton button {
background-color: #707793;
color: aliceblue;
width: 190px;
}

.btn {
background-color: #707793;
color: aliceblue;
}
datepicker.css
mat-form-field {
margin: 1rem;
}

.booking {
text-align: center;
}

.booking button {
text-align: center;
border: none;
width: 80%;
background-color: #707793;
color: aliceblue;
border-radius: 5px;
margin-bottom: 20px;
padding: 5px 0px;
}

footer.css
body {
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1170px;
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 70px 0;
}
.footer-col {
width: 25%;
padding: 0 15px;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background-color: #e6e91e;
height: 2px;
box-sizing: border-box;
width: 80px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.social {
margin: 3px;
}

/*responsive*/
@media (max-width: 767px) {
.footer-col {
width: 50%;
margin-bottom: 30px;
}
}
@media (max-width: 574px) {
.footer-col {
width: 100%;
}
}
homecomponent.css
.homeTop {
position: relative;
text-align: center;
color: #eaebf0;
}
.top-left {
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: x-large;
line-height: normal;
width: fit-content;
}

.carousel-caption {
color: black;
left: 10%;
right: auto;
top: 40%;
bottom: auto;
}

.media-heading {
font-size: 2rem;
text-transform: uppercase;
font-weight: 800 !important;
text-align: center;
width: 100%;
margin-top: 1rem;
margin-bottom: 0.3rem;
padding-bottom: 3px;
}
ngb-carousel {
margin-top: 1rem;
margin-bottom: 3rem;
}
.brands {
margin-top: 2rem;
margin-bottom: 2rem;
}
.imgCont {
text-align: center;
max-width: fit-content;
}
.row {
justify-content: space-evenly;
}

.booking {
width: 100%;
padding: 20px 0px;
background-color: rgb(253, 251, 251);
border-radius: 5px;
text-align: center;
}
.bookingButton {
color: rgb(0, 0, 0);

background-color: #707793;
color: aliceblue;
text-align: center;
border: none;
width: 80%;

border-radius: 5px;

padding: 5px 0px;
}
mat-form-field {
margin: 5px;
width: 45%;
}

h2 {
margin-bottom: 10px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
font-size: 23.992px;
}
.features {
display: flex;
margin-top: 10px;
margin-bottom: 25px;
width: 100%;
height: 50px;
flex-wrap: wrap;
justify-content: space-evenly;
}
.features .features-service-tags {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.fleetFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: rgb(253, 251, 251);
}

.features .features-service-tags p {
margin-left: 10px;
}
.our {
text-align: center;
text-decoration: underline;
text-decoration-color: yellow;
text-decoration-thickness: 5px;
margin: 10px 0px 40px;
}
.fleet {
display: flex;
flex-direction: column;
margin-bottom: 20px;
text-align: center;
width: 250px;
height: auto;
justify-content: center;
}
.fleet img {
width: 250px;
height: auto;
border-radius: 5px;
}
.fleet p {
font-size: large;
}
.fleet button {
width: 250px;
background-color: #707793;
color: aliceblue;
border: none;
border-radius: 5px;
}
.taxes {
margin: 10px 0px;
text-align: center;
font-size: 16px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}

@media (max-width: 768px) {
ngb-carousel p,
b {
display: none;
}
.top-left {
top: 10%;
font-size: large;
}
}
locationselector.css
.card-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

.example-card {
margin: 3rem;

text-align: center;

transition: transform 0.5s;
}
.example-card:hover {
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}