17 |
2 |
9 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'ReCapProject-Frontend'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('ReCapProject-Frontend');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement;
33 | expect(compiled.querySelector('.content span').textContent).toContain('ReCapProject-Frontend app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css'],
7 | })
8 | export class AppComponent {
9 | title = 'ReCapProject-Frontend';
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
7 |
8 | import { AppComponent } from './app.component';
9 | import { CarListComponent } from './components/car-list/car-list.component';
10 | import { ColorComponent } from './components/color/color.component';
11 | import { CustomerComponent } from './components/customer/customer.component';
12 | import { BrandComponent } from './components/brand/brand.component';
13 | import { NaviComponent } from './components/navi/navi.component';
14 | import { CarDetailsComponent } from './components/car-details/car-details.component';
15 | import { FilterComponent } from './components/filter/filter.component';
16 | import { FilterPipePipe } from './pipes/filter-pipe.pipe';
17 | import { RentComponent } from './components/rent/rent.component';
18 | import { PaymentComponent } from './components/payment/payment.component';
19 | import { DatePipe } from '@angular/common';
20 | import { CreditCardNumberPipe } from './pipes/credit-card-number.pipe';
21 | import { RentalComponent } from './components/rental/rental.component';
22 | import { ToastrModule } from 'ngx-toastr';
23 | import { CarManagementComponent } from './components/car-management/car-management.component';
24 | import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
25 | import { BrandManagementComponent } from './components/brand-management/brand-management.component';
26 | import { ColorManagementComponent } from './components/color-management/color-management.component';
27 | import { LoginComponent } from './components/login/login.component';
28 | import { AuthInterceptor } from './interceptors/auth.interceptor';
29 | import { RegisterComponent } from './components/register/register.component';
30 | import { HomeComponent } from './components/pages/home/home.component';
31 | import { UsermenuComponent } from './components/usermenu/usermenu.component';
32 | import { UserProfileComponent } from './components/user-profile/user-profile.component';
33 |
34 | @NgModule({
35 | declarations: [
36 | AppComponent,
37 | CarListComponent,
38 | ColorComponent,
39 | CustomerComponent,
40 | RentalComponent,
41 | BrandComponent,
42 | NaviComponent,
43 | CarDetailsComponent,
44 | FilterComponent,
45 | FilterPipePipe,
46 | RentComponent,
47 | PaymentComponent,
48 | CreditCardNumberPipe,
49 | CarManagementComponent,
50 | BrandManagementComponent,
51 | ColorManagementComponent,
52 | LoginComponent,
53 | RegisterComponent,
54 | UsermenuComponent,
55 | HomeComponent,
56 | UserProfileComponent,
57 | ],
58 | imports: [
59 | BrowserModule,
60 | FontAwesomeModule,
61 | AppRoutingModule,
62 | HttpClientModule,
63 | FormsModule,
64 | ReactiveFormsModule,
65 | BrowserAnimationsModule,
66 | ToastrModule.forRoot({
67 | positionClass: 'toast-bottom-right',
68 | }),
69 | ],
70 | providers: [
71 | DatePipe,
72 | { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
73 | ],
74 | bootstrap: [AppComponent],
75 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
76 | })
77 | export class AppModule {}
78 |
--------------------------------------------------------------------------------
/src/app/components/brand-management/brand-management.component.css:
--------------------------------------------------------------------------------
1 | td,
2 | th {
3 | text-align: center;
4 | }
5 | span {
6 | cursor: pointer;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/components/brand-management/brand-management.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
8 |
2 |
24 |
25 |
26 |
27 |
3 |
4 |
5 |
22 |
23 | | Brand Id | 7 |Brand | 8 |9 | |
|---|---|---|
| {{brand.id}} | 14 |{{brand.brandName}} | 15 |
16 | |
19 |
28 |
49 |
50 |
29 |
47 |
48 |
51 |
72 |
73 |
74 |
91 |
92 |
--------------------------------------------------------------------------------
/src/app/components/brand-management/brand-management.component.ts:
--------------------------------------------------------------------------------
1 | declare var $: any;
2 | import { Component, OnInit } from '@angular/core';
3 | import {
4 | FormGroup,
5 | FormControl,
6 | FormBuilder,
7 | Validators,
8 | } from '@angular/forms';
9 | import { Router } from '@angular/router';
10 | import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
11 | import { ToastrService } from 'ngx-toastr';
12 | import { Brand } from 'src/app/models/brand';
13 | import { BrandService } from 'src/app/services/brand.service';
14 | import { ErrorService } from 'src/app/services/error.service';
15 |
16 | @Component({
17 | selector: 'app-brand-management',
18 | templateUrl: './brand-management.component.html',
19 | styleUrls: ['./brand-management.component.css'],
20 | })
21 | export class BrandManagementComponent implements OnInit {
22 | brands: Brand[];
23 | brandEditForm: FormGroup;
24 | icons = {
25 | faTrash: faTrash,
26 | faEdit: faEdit,
27 | };
28 | brandToDelete: Brand;
29 | constructor(
30 | private brandService: BrandService,
31 | private fb: FormBuilder,
32 | private toastrService: ToastrService,
33 | private router: Router,
34 | private errorService: ErrorService
35 | ) {}
36 |
37 | ngOnInit(): void {
38 | this.createBrandForm();
39 | this.getBrands();
40 | }
41 | getBrands() {
42 | this.brandService.getBrands().subscribe((response) => {
43 | this.brands = response.data;
44 | });
45 | }
46 | setBrandToDelete(id: number) {
47 | this.brandToDelete = Object.assign({ id: id });
48 | }
49 | deleteBrand() {
50 | this.brandService.deleteBrand(this.brandToDelete).subscribe(
51 | (response) => {
52 | $('#brandDeleteModal').modal('hide');
53 | this.router
54 | .navigateByUrl('/', { skipLocationChange: true })
55 | .then(() => this.router.navigate(['brandmanage']));
56 | this.toastrService.success(response.message);
57 | },
58 | (responseError) => {
59 | this.errorService.getError(responseError);
60 | }
61 | );
62 | }
63 | getUpdateModal(brand: Brand) {
64 | this.brandEditForm.setValue({
65 | id: brand.id,
66 | brandName: brand.brandName,
67 | });
68 | }
69 | updateBrand() {
70 | if (this.brandEditForm.valid) {
71 | this.brandEditForm.patchValue({
72 | id: Number(this.brandEditForm.controls['id'].value),
73 | });
74 | let brandToUpdate = Object.assign({}, this.brandEditForm.value);
75 | this.brandService.updateBrand(brandToUpdate).subscribe(
76 | (response) => {
77 | this.brandEditForm.reset();
78 | $('#brandUpdateModal').modal('hide');
79 | this.router
80 | .navigateByUrl('/', { skipLocationChange: true })
81 | .then(() => this.router.navigate(['brandmanage']));
82 | this.toastrService.success(response.message);
83 | },
84 | (responseError) => {
85 | this.errorService.getError(responseError);
86 | }
87 | );
88 | } else {
89 | this.toastrService.warning('Please Fill the Form !');
90 | }
91 | }
92 | addBrand() {
93 | if (this.brandEditForm.valid) {
94 | this.brandEditForm.removeControl('id');
95 | let brandToAdd = Object.assign({}, this.brandEditForm.value);
96 | this.brandService.addBrand(brandToAdd).subscribe(
97 | (response) => {
98 | this.brandEditForm.reset();
99 | $('#brandAddModal').modal('hide');
100 | this.router
101 | .navigateByUrl('/', { skipLocationChange: true })
102 | .then(() => this.router.navigate(['brandmanage']));
103 | this.toastrService.success(response.message);
104 | },
105 | (responseError) => {
106 | this.errorService.getError(responseError);
107 | }
108 | );
109 | } else {
110 | this.toastrService.warning('Please Fill the Form !');
111 | }
112 | }
113 |
114 | createBrandForm() {
115 | this.brandEditForm = this.fb.group({
116 | id: new FormControl(''),
117 | brandName: new FormControl('', Validators.required),
118 | });
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/app/components/brand/brand.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/brand/brand.component.css
--------------------------------------------------------------------------------
/src/app/components/brand/brand.component.html:
--------------------------------------------------------------------------------
1 |
13 |
14 |
--------------------------------------------------------------------------------
/src/app/components/brand/brand.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {
3 | FormGroup,
4 | FormBuilder,
5 | FormControl,
6 | Validators,
7 | } from '@angular/forms';
8 | import { ActivatedRoute, Router } from '@angular/router';
9 | import { Brand } from 'src/app/models/brand';
10 | import { Filters } from 'src/app/models/filters';
11 | import { BrandService } from 'src/app/services/brand.service';
12 |
13 | @Component({
14 | selector: 'app-brand',
15 | templateUrl: './brand.component.html',
16 | styleUrls: ['./brand.component.css'],
17 | })
18 | export class BrandComponent implements OnInit {
19 | brands: Brand[] = [];
20 | brandId?: number;
21 | brandForm: FormGroup;
22 | constructor(
23 | private brandService: BrandService,
24 | private fb: FormBuilder,
25 | private activatedRoute: ActivatedRoute
26 | ) {}
27 |
28 | ngOnInit(): void {
29 | this.activatedRoute.params.subscribe((params) => {
30 | if (params['brandId']) {
31 | Filters.brandId = Number(params['brandId']);
32 | } else {
33 | Filters.brandId = 0;
34 | }
35 | this.getBrands();
36 | this.createBrandForm(Filters.brandId);
37 | });
38 | }
39 |
40 | createBrandForm(id: number) {
41 | this.brandForm = this.fb.group({
42 | id: new FormControl(id, Validators.required),
43 | brandName: new FormControl('', Validators.required),
44 | });
45 | }
46 | getBrands() {
47 | this.brandService.getBrands().subscribe((response) => {
48 | this.brands = response.data;
49 | this.brands.unshift({ id: 0, brandName: 'SELECT A CAR' });
50 | });
51 | }
52 | setCurrentBrand() {
53 | Filters.brandId = this.brandForm.controls['id'].value;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/components/car-details/car-details.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/car-details/car-details.component.css
--------------------------------------------------------------------------------
/src/app/components/car-details/car-details.component.html:
--------------------------------------------------------------------------------
1 |
52 |
70 |
71 |
2 |
61 |
--------------------------------------------------------------------------------
/src/app/components/car-details/car-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { CarInfo } from 'src/app/models/carInfo';
4 | import { CarImage } from 'src/app/models/carImages';
5 | import { CarImageService } from 'src/app/services/car-image.service';
6 | import { CarService } from 'src/app/services/car.service';
7 | import { environment } from 'src/environments/environment';
8 | import { StorageService } from 'src/app/services/storage.service';
9 | import { Customer } from 'src/app/models/customer';
10 | import { CustomerDetails } from 'src/app/models/customerDetails';
11 | import { RentalService } from 'src/app/services/rental.service';
12 | import { Rental } from 'src/app/models/rental';
13 |
14 | @Component({
15 | selector: 'app-car-details',
16 | templateUrl: './car-details.component.html',
17 | styleUrls: ['./car-details.component.css'],
18 | })
19 | export class CarDetailsComponent implements OnInit {
20 | carDetails: CarInfo;
21 | carImages: CarImage[];
22 | BaseUrl = environment.apiBaseUrl;
23 | activeUser: CustomerDetails;
24 | isFindexEnough: boolean;
25 | constructor(
26 | private carService: CarService,
27 | private carImageService: CarImageService,
28 | private activatedRoute: ActivatedRoute,
29 | private storageService: StorageService,
30 | private rentalService: RentalService
31 | ) {}
32 |
33 | ngOnInit(): void {
34 | this.storageService.getActiveUser() != undefined
35 | ? (this.activeUser = this.storageService.getActiveUser())
36 | : (this.activeUser = Object.assign({ customerId: 0 }));
37 |
38 | this.activatedRoute.params.subscribe((params) => {
39 | if (params['carId']) {
40 | this.getCarDetails(Number(params['carId']));
41 | this.findexScoreCheck(
42 | this.activeUser.customerId,
43 | Number(params['carId'])
44 | );
45 | }
46 | });
47 | }
48 | getCarDetails(carId: number) {
49 | this.carService.getCarDetailsById(carId).subscribe((response) => {
50 | this.carDetails = response.data[0];
51 | });
52 | this.carImageService.getCarImages(carId).subscribe((response) => {
53 | this.carImages = response.data;
54 | });
55 | }
56 | findexScoreCheck(customerId: number, carId: number) {
57 | if (customerId) {
58 | this.rentalService
59 | .checkFindexScore(customerId, carId)
60 | .subscribe((response) => {
61 | this.isFindexEnough = response.isSuccess;
62 | });
63 | } else {
64 | this.isFindexEnough = true;
65 | }
66 | }
67 | // getButton(carImages: CarImage[]) {
68 | // for (let i = 0; i < carImages.length; i++) {
69 | // document
70 | // .getElementById('btn-carousel')
71 | // ?.insertAdjacentHTML(
72 | // 'beforeend',
73 | // ``
76 | // );
77 | // }
78 | // }
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/components/car-list/car-list.component.css:
--------------------------------------------------------------------------------
1 | img {
2 | cursor: pointer;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/components/car-list/car-list.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | {{ carDetails.carName }}
4 |
6 |
60 |
7 |
27 |
8 |
10 |
26 |
11 |
15 |
20 |
25 |
12 | 
13 |
14 |
28 |
59 |
29 |
58 | -
30 |
-
31 |
Car Details
32 |
33 | - 34 | Model{{ carDetails.carName }} 35 | 36 |
- 37 | Brand{{ carDetails.brandName }} 38 | 39 |
- 40 | Model Year{{ carDetails.modelYear }} 41 | 42 |
- 43 | Color{{ carDetails.colorName }} 44 | 45 |
- 46 | Findex Score{{ carDetails.findexScore }} 47 | 48 |
- 49 | Daily Price{{ carDetails.dailyPrice }} ₺ 50 | 51 |
55 | Your Findex Score is Insufficient !
56 |
57 |
2 |
--------------------------------------------------------------------------------
/src/app/components/car-list/car-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { CarInfo } from 'src/app/models/carInfo';
4 | import { BrandService } from 'src/app/services/brand.service';
5 | import { CarService } from 'src/app/services/car.service';
6 | import { environment } from 'src/environments/environment';
7 |
8 | @Component({
9 | selector: 'app-car-list',
10 | templateUrl: './car-list.component.html',
11 | styleUrls: ['./car-list.component.css'],
12 | })
13 | export class CarListComponent implements OnInit {
14 | cars: CarInfo[] = [];
15 | baseURL = environment.apiBaseUrl;
16 |
17 | cardefaultImgPath = environment.cardefaultImgPath;
18 | filterText: string = '';
19 |
20 | constructor(
21 | private carService: CarService,
22 | private activatedRoute: ActivatedRoute
23 | ) {}
24 |
25 | ngOnInit(): void {
26 | this.activatedRoute.params.subscribe((params) => {
27 | if (params['brandId'] && params['colorId'])
28 | this.getCarByBrandAndColor(params['brandId'], params['colorId']);
29 | else if (params['brandId']) this.getCarsByBrand(params['brandId']);
30 | else if (params['colorId']) this.getCarsByColor(params['colorId']);
31 | else this.getCars();
32 | });
33 | }
34 | getCars() {
35 | this.carService.getCarsDetails().subscribe((response) => {
36 | this.cars = response.data;
37 | });
38 | }
39 | getCarsByBrand(brandId: number) {
40 | this.carService.getCarsDetailsByBrand(brandId).subscribe((response) => {
41 | this.cars = response.data;
42 | });
43 | }
44 | getCarsByColor(colorId: number) {
45 | this.carService.getCarsDetailsByColor(colorId).subscribe((response) => {
46 | this.cars = response.data;
47 | });
48 | }
49 | getCarByBrandAndColor(brandId: number, colorId: number) {
50 | this.carService
51 | .getCarsDetailsByBrandAndColor(brandId, colorId)
52 | .subscribe((response) => {
53 | this.cars = response.data;
54 | });
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/components/car-management/car-management.component.css:
--------------------------------------------------------------------------------
1 | @media (max-width: 768px) {
2 | }
3 | td {
4 | font-size: 14px;
5 | }
6 | span.badge {
7 | cursor: pointer;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/components/car-management/car-management.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
53 |
7 |
15 |
16 |
17 | Searched for "{{ filterText }}"
18 |
19 |
20 |
52 |
21 |
51 |
22 |
23 | 
32 |
50 |
33 |
40 |
49 | {{ car.carName }}
34 | 35 |Brand : {{ car.brandName }}
36 |Model Year : {{ car.modelYear }}
37 |Color : {{ car.colorName }}
38 |Daily Price : {{ car.dailyPrice }} ₺
39 |
2 |
45 |
46 |
47 |
48 |
3 |
4 |
5 |
43 |
44 | | Car Id | 7 |Model | 8 |Brand | 9 |Color | 10 |Model Year | 11 |Daily Price | 12 |Findex Score | 13 |15 | |
|---|---|---|---|---|---|---|---|
| {{car.carId}} | 20 |{{car.carName}} | 21 |{{car.brandName}} | 22 |{{car.colorName}} | 23 |{{car.modelYear}} | 24 |{{car.dailyPrice | currency:'₺'}} | 25 |{{car.findexScore}} | 26 |
27 |
29 | |
40 |
49 |
96 |
97 |
98 |
50 |
94 |
95 |
99 |
146 |
147 |
148 |
--------------------------------------------------------------------------------
/src/app/components/car-management/car-management.component.ts:
--------------------------------------------------------------------------------
1 | declare var $: any;
2 | import { Component, OnInit } from '@angular/core';
3 | import { CarService } from 'src/app/services/car.service';
4 | import { faTrash, faEdit, faImage } from '@fortawesome/free-solid-svg-icons';
5 | import { CarInfo } from 'src/app/models/carInfo';
6 | import {
7 | FormGroup,
8 | FormControl,
9 | FormBuilder,
10 | Validators,
11 | } from '@angular/forms';
12 | import { Brand } from 'src/app/models/brand';
13 | import { Color } from 'src/app/models/color';
14 | import { BrandService } from 'src/app/services/brand.service';
15 | import { ColorService } from 'src/app/services/color.service';
16 | import { Car } from 'src/app/models/car';
17 | import { Router } from '@angular/router';
18 | import { ToastrService } from 'ngx-toastr';
19 | import { ErrorService } from 'src/app/services/error.service';
20 |
21 | @Component({
22 | selector: 'app-car-management',
23 | templateUrl: './car-management.component.html',
24 | styleUrls: ['./car-management.component.css'],
25 | })
26 | export class CarManagementComponent implements OnInit {
27 | constructor(
28 | private carService: CarService,
29 | private formBuilder: FormBuilder,
30 | private brandService: BrandService,
31 | private colorService: ColorService,
32 | private router: Router,
33 | private toastrService: ToastrService,
34 | private errorService: ErrorService
35 | ) {}
36 | carIdToDelete: Car;
37 | faTrash = faTrash;
38 | faEdit = faEdit;
39 | faImage = faImage;
40 | carToEdit: Car;
41 | cars: CarInfo[] = [];
42 | brands: Brand[] = [];
43 | colors: Color[] = [];
44 | carEditForm: FormGroup;
45 |
46 | ngOnInit(): void {
47 | this.createCarEditForm();
48 | this.getCars();
49 | this.getColors();
50 | this.getBrands();
51 | }
52 |
53 | getCars() {
54 | this.carService.getCarsDetails().subscribe((response) => {
55 | this.cars = response.data;
56 | });
57 | }
58 | getBrands() {
59 | this.brandService.getBrands().subscribe((response) => {
60 | this.brands = response.data;
61 | });
62 | }
63 | getColors() {
64 | this.colorService.getColors().subscribe((response) => {
65 | this.colors = response.data;
66 | });
67 | }
68 | setCarToDelete(carId: number) {
69 | this.carIdToDelete = Object.assign({ id: carId });
70 | }
71 | deleteCar() {
72 | this.carService.carDelete(this.carIdToDelete).subscribe(
73 | (response) => {
74 | this.toastrService.success(response.message);
75 | this.router
76 | .navigateByUrl('/', { skipLocationChange: true })
77 | .then(() => this.router.navigate(['carmanage']));
78 | },
79 | (responseError) => {
80 | this.errorService.getError(responseError);
81 | }
82 | );
83 | }
84 | createCarEditForm() {
85 | this.carEditForm = this.formBuilder.group({
86 | id: new FormControl(''),
87 | brandId: new FormControl(Validators.required),
88 | colorId: new FormControl(Validators.required),
89 | modelYear: new FormControl('', Validators.required),
90 | description: new FormControl('', Validators.required),
91 | dailyPrice: new FormControl('', Validators.required),
92 | findexScore: new FormControl('', Validators.required),
93 | });
94 | }
95 | getUpdateModel(car: CarInfo) {
96 | this.carEditForm.setValue({
97 | id: car.carId,
98 | colorId: car.colorId,
99 | brandId: car.brandId,
100 | modelYear: car.modelYear,
101 | description: car.carName,
102 | dailyPrice: car.dailyPrice,
103 | findexScore: car.findexScore,
104 | });
105 | }
106 | updateCar() {
107 | if (this.carEditForm.valid) {
108 | this.carToEdit = Object.assign({}, this.carEditForm.value);
109 | this.convertStrToInt(this.carToEdit);
110 | this.carService.carUpdate(this.carToEdit).subscribe(
111 | (response) => {
112 | this.carEditForm.reset();
113 | $('#carUpdateModal').modal('hide');
114 | this.router
115 | .navigateByUrl('/', { skipLocationChange: true })
116 | .then(() => this.router.navigate(['carmanage']));
117 | this.toastrService.success(response.message);
118 | },
119 | (responseError) => {
120 | this.errorService.getError(responseError);
121 | }
122 | );
123 | } else {
124 | this.toastrService.warning('Please fill the Form !');
125 | }
126 | }
127 | addCar() {
128 | if (this.carEditForm.valid) {
129 | this.carEditForm.removeControl('id');
130 | this.carToEdit = Object.assign({}, this.carEditForm.value);
131 | this.convertStrToInt(this.carToEdit);
132 | this.carService.carAdd(this.carToEdit).subscribe(
133 | (response) => {
134 | this.carEditForm.reset();
135 | $('#carAddModal').modal('hide');
136 | this.router
137 | .navigateByUrl('/', { skipLocationChange: true })
138 | .then(() => this.router.navigate(['carmanage']));
139 | this.toastrService.success(response.message);
140 | },
141 | (responseError) => {
142 | this.errorService.getError(responseError);
143 | }
144 | );
145 | } else {
146 | this.toastrService.warning('Please Fill the Form !');
147 | }
148 | }
149 | convertStrToInt(carToEdit: Car) {
150 | carToEdit.brandId = parseInt(this.carEditForm.controls['brandId'].value);
151 | carToEdit.colorId = parseInt(this.carEditForm.controls['colorId'].value);
152 | return carToEdit;
153 | }
154 | }
155 |
--------------------------------------------------------------------------------
/src/app/components/color-management/color-management.component.css:
--------------------------------------------------------------------------------
1 | td,
2 | th {
3 | text-align: center;
4 | }
5 | span {
6 | cursor: pointer;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/components/color-management/color-management.component.html:
--------------------------------------------------------------------------------
1 |
100 |
144 |
145 |
2 |
24 |
25 |
26 |
27 |
3 |
4 |
5 |
22 |
23 | | Color Id | 7 |Color | 8 |9 | |
|---|---|---|
| {{color.id}} | 14 |{{color.colorName}} | 15 |
16 | |
19 |
28 |
49 |
50 |
29 |
47 |
48 |
51 |
72 |
73 |
74 |
91 |
92 |
--------------------------------------------------------------------------------
/src/app/components/color-management/color-management.component.ts:
--------------------------------------------------------------------------------
1 | declare var $: any;
2 | import { Component, OnInit } from '@angular/core';
3 | import {
4 | FormGroup,
5 | FormControl,
6 | FormBuilder,
7 | Validators,
8 | } from '@angular/forms';
9 | import { Router } from '@angular/router';
10 | import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
11 | import { ToastrService } from 'ngx-toastr';
12 | import { Color } from 'src/app/models/color';
13 | import { ColorService } from 'src/app/services/color.service';
14 | import { ErrorService } from 'src/app/services/error.service';
15 |
16 | @Component({
17 | selector: 'app-color-management',
18 | templateUrl: './color-management.component.html',
19 | styleUrls: ['./color-management.component.css'],
20 | })
21 | export class ColorManagementComponent implements OnInit {
22 | colors: Color[];
23 | colorEditForm: FormGroup;
24 | icons = {
25 | faTrash: faTrash,
26 | faEdit: faEdit,
27 | };
28 | colorToDelete: Color;
29 | constructor(
30 | private colorService: ColorService,
31 | private fb: FormBuilder,
32 | private toastrService: ToastrService,
33 | private router: Router,
34 | private errorService: ErrorService
35 | ) {}
36 |
37 | ngOnInit(): void {
38 | this.createColorForm();
39 | this.getColors();
40 | }
41 |
42 | getColors() {
43 | this.colorService.getColors().subscribe((response) => {
44 | this.colors = response.data;
45 | });
46 | }
47 |
48 | setColorToDelete(id: number) {
49 | this.colorToDelete = Object.assign({ id: id });
50 | }
51 |
52 | deleteColor() {
53 | this.colorService.deleteColor(this.colorToDelete).subscribe(
54 | (response) => {
55 | $('#colorDeleteModal').modal('hide');
56 | this.router
57 | .navigateByUrl('/', { skipLocationChange: true })
58 | .then(() => this.router.navigate(['colormanage']));
59 | this.toastrService.success(response.message);
60 | },
61 | (responseError) => {
62 | this.errorService.getError(responseError);
63 | }
64 | );
65 | }
66 |
67 | getUpdateModal(color: Color) {
68 | this.colorEditForm.setValue({
69 | id: color.id,
70 | colorName: color.colorName,
71 | });
72 | }
73 |
74 | updateColor() {
75 | if (this.colorEditForm.valid) {
76 | this.colorEditForm.patchValue({
77 | id: Number(this.colorEditForm.controls['id'].value),
78 | });
79 | let colorToUpdate = Object.assign({}, this.colorEditForm.value);
80 | this.colorService.updateColor(colorToUpdate).subscribe(
81 | (response) => {
82 | this.colorEditForm.reset();
83 | $('#colorUpdateModal').modal('hide');
84 | this.router
85 | .navigateByUrl('/', { skipLocationChange: true })
86 | .then(() => this.router.navigate(['colormanage']));
87 | this.toastrService.success(response.message);
88 | },
89 | (responseError) => {
90 | this.errorService.getError(responseError);
91 | }
92 | );
93 | } else {
94 | this.toastrService.warning('Please Fill the Form !');
95 | }
96 | }
97 | addColor() {
98 | if (this.colorEditForm.valid) {
99 | this.colorEditForm.removeControl('id');
100 | let colorToAdd = Object.assign({}, this.colorEditForm.value);
101 | this.colorService.addColor(colorToAdd).subscribe(
102 | (response) => {
103 | this.colorEditForm.reset();
104 | $('#colorAddModal').modal('hide');
105 | this.router
106 | .navigateByUrl('/', { skipLocationChange: true })
107 | .then(() => this.router.navigate(['colormanage']));
108 | this.toastrService.success(response.message);
109 | },
110 | (responseError) => {
111 | this.errorService.getError(responseError);
112 | }
113 | );
114 | } else {
115 | this.toastrService.warning('Please Fill the Form !');
116 | }
117 | }
118 |
119 | createColorForm() {
120 | this.colorEditForm = this.fb.group({
121 | id: new FormControl(''),
122 | colorName: new FormControl('', Validators.required),
123 | });
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/app/components/color/color.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/color/color.component.css
--------------------------------------------------------------------------------
/src/app/components/color/color.component.html:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/app/components/color/color.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {
3 | FormGroup,
4 | FormBuilder,
5 | FormControl,
6 | Validators,
7 | } from '@angular/forms';
8 | import { ActivatedRoute, Router } from '@angular/router';
9 | import { Color } from 'src/app/models/color';
10 | import { Filters } from 'src/app/models/filters';
11 | import { ColorService } from 'src/app/services/color.service';
12 |
13 | @Component({
14 | selector: 'app-color',
15 | templateUrl: './color.component.html',
16 | styleUrls: ['./color.component.css'],
17 | })
18 | export class ColorComponent implements OnInit {
19 | colors: Color[] = [];
20 | colorId?: number;
21 | colorForm: FormGroup;
22 | constructor(
23 | private activatedRoute: ActivatedRoute,
24 | private colorService: ColorService,
25 | private fb: FormBuilder
26 | ) {}
27 |
28 | ngOnInit(): void {
29 | this.activatedRoute.params.subscribe((params) => {
30 | if (params['colorId']) {
31 | Filters.colorId = Number(params['colorId']);
32 | } else {
33 | Filters.colorId = 0;
34 | }
35 | this.getColor();
36 | this.createColorForm(Filters.colorId);
37 | });
38 | }
39 | getColor() {
40 | this.colorService.getColors().subscribe((response) => {
41 | this.colors = response.data;
42 | this.colors.unshift({ id: 0, colorName: 'SELECT A COLOR' });
43 | });
44 | }
45 | createColorForm(id: number) {
46 | this.colorForm = this.fb.group({
47 | id: new FormControl(id, Validators.required),
48 | colorName: new FormControl('', Validators.required),
49 | });
50 | }
51 | setCurrentColor() {
52 | Filters.colorId = this.colorForm.controls['id'].value;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/components/customer/customer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/customer/customer.component.css
--------------------------------------------------------------------------------
/src/app/components/customer/customer.component.html:
--------------------------------------------------------------------------------
1 |
52 |
70 |
71 | | Customer Id | 5 |Customer Name | 6 |Company | 8 |Claims | 9 |Findex Value | 10 ||
|---|---|---|---|---|---|
| {{ customer.customerId }} | 15 |{{ customer.firstName + ' '+ customer.lastName }} | 16 |{{ customer.email }} | 17 |{{ customer.companyName }} | 18 |{{ customer.claims }} | 19 |{{ customer.findexScore }} | 20 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/components/filter/filter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { Filters } from 'src/app/models/filters';
4 | @Component({
5 | selector: 'app-filter',
6 | templateUrl: './filter.component.html',
7 | styleUrls: ['./filter.component.css'],
8 | })
9 | export class FilterComponent implements OnInit {
10 | constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
11 |
12 | ngOnInit(): void {}
13 | setRoute() {
14 | if (Filters['brandId'] && Filters['colorId'])
15 | this.router.navigate([
16 | `cars/brand/${Filters.brandId}/color/${Filters.colorId}`,
17 | ]);
18 | else if (Filters['brandId'])
19 | this.router.navigate([`cars/brand/${Filters.brandId}`]);
20 | else if (Filters['colorId'])
21 | this.router.navigate([`cars/color/${Filters.colorId}`]);
22 | else this.router.navigate([`cars/`]);
23 | }
24 | clearRoute() {
25 | this.router.navigate([`cars/`]);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/components/login/login.component.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | display: flex;
8 | align-items: center;
9 | padding-top: 40px;
10 | padding-bottom: 40px;
11 | }
12 |
13 | .form-signin {
14 | width: 100%;
15 | max-width: 330px;
16 | padding: 15px;
17 | margin: auto;
18 | }
19 |
20 | .form-signin .checkbox {
21 | font-weight: 400;
22 | }
23 |
24 | .form-signin .form-floating:focus-within {
25 | z-index: 2;
26 | }
27 |
28 | .form-signin input[type="email"] {
29 | margin-bottom: -1px;
30 | border-bottom-right-radius: 0;
31 | border-bottom-left-radius: 0;
32 | }
33 |
34 | .form-signin input[type="password"] {
35 | margin-bottom: 10px;
36 | border-top-left-radius: 0;
37 | border-top-right-radius: 0;
38 | }
39 | .bd-placeholder-img {
40 | font-size: 1.125rem;
41 | text-anchor: middle;
42 | -webkit-user-select: none;
43 | -moz-user-select: none;
44 | user-select: none;
45 | }
46 |
47 | @media (min-width: 768px) {
48 | .bd-placeholder-img-lg {
49 | font-size: 3.5rem;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/components/login/login.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 | -
4 |
- CATEGORIES 5 |
10 |
11 |
12 |
13 |
2 |
--------------------------------------------------------------------------------
/src/app/components/payment/payment.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { Rental } from 'src/app/models/rental';
4 |
5 | import {
6 | FormGroup,
7 | FormControl,
8 | FormBuilder,
9 | Validators,
10 | } from '@angular/forms';
11 | import { CreditCardNumberPipe } from 'src/app/pipes/credit-card-number.pipe';
12 | import { CarDetails } from 'src/app/models/carDetails';
13 | import { CarService } from 'src/app/services/car.service';
14 | import { CarInfo } from 'src/app/models/carInfo';
15 | import { PaymentService } from 'src/app/services/payment.service';
16 | import { ToastrService } from 'ngx-toastr';
17 | import { RentalService } from 'src/app/services/rental.service';
18 | import { CreditCardService } from 'src/app/services/credit-card.service';
19 | import { CreditCard } from 'src/app/models/creditCard';
20 | import { CustomerDetails } from 'src/app/models/customerDetails';
21 | import { StorageService } from 'src/app/services/storage.service';
22 | @Component({
23 | selector: 'app-payment',
24 | templateUrl: './payment.component.html',
25 | styleUrls: ['./payment.component.css'],
26 | })
27 | export class PaymentComponent implements OnInit {
28 | constructor(
29 | private activatedRoute: ActivatedRoute,
30 | private formBuilder: FormBuilder,
31 | private carService: CarService,
32 | private paymentService: PaymentService,
33 | private toastrService: ToastrService,
34 | private rentalService: RentalService,
35 | private creditCardService: CreditCardService,
36 | private storageService: StorageService,
37 | private router: Router
38 | ) {}
39 |
40 | rental: Rental;
41 | carToRent: CarInfo;
42 | totalDay: number;
43 | totalPrice: number;
44 | customerCreditCards: CreditCard[];
45 | paymentForm: FormGroup;
46 | activeUser: CustomerDetails;
47 |
48 | ngOnInit(): void {
49 | this.activatedRoute.params.subscribe((params) => {
50 | this.rental = JSON.parse(params['rental']);
51 | this.getActiveUser();
52 | this.getCustomerCreditCards(this.activeUser.customerId);
53 | this.createPaymentForm();
54 | this.getCarDetails(this.rental.carId);
55 | });
56 | }
57 | getActiveUser() {
58 | this.activeUser = this.storageService.getActiveUser();
59 | }
60 | createPaymentForm() {
61 | this.paymentForm = this.formBuilder.group({
62 | id: new FormControl(''),
63 | saveCardStatus: new FormControl(''),
64 | customerId: new FormControl(this.activeUser.customerId),
65 | holderName: new FormControl('', Validators.required),
66 | cardNumber: new FormControl('', Validators.required),
67 | mounthOfExp: new FormControl('', Validators.required),
68 | yearOfExp: new FormControl('', Validators.required),
69 | cvv: new FormControl('', Validators.required),
70 | });
71 | }
72 | getCarDetails(carId: number) {
73 | this.carService.getCarDetailsById(carId).subscribe((response) => {
74 | this.carToRent = response.data[0];
75 | this.getTotalPrice();
76 | });
77 | }
78 | getTotalPrice() {
79 | let rentDate = new Date(this.rental.rentDate);
80 | let returnDate = new Date(this.rental.returnDate);
81 | this.totalDay =
82 | (returnDate.getTime() - rentDate.getTime()) / (24 * 3600 * 1000);
83 | this.totalPrice = this.totalDay * this.carToRent.dailyPrice;
84 | }
85 | getCustomerCreditCards(customerId: number) {
86 | this.creditCardService
87 | .getCreditCardByCustomerId(customerId)
88 | .subscribe((response) => {
89 | this.customerCreditCards = response.data;
90 | });
91 | }
92 | selectCreditCard(creditCard: CreditCard) {
93 | this.paymentForm.setValue(
94 | Object.assign({ ...creditCard, saveCardStatus: false })
95 | );
96 | }
97 | Payment() {
98 | if (this.paymentForm.valid) {
99 | let payment = Object.assign(
100 | { amount: this.totalPrice },
101 | this.paymentForm.value
102 | );
103 | this.paymentService.payment(payment).subscribe(
104 | (response) => {
105 | this.toastrService.success(response.message);
106 | this.rentalAdd();
107 | this.saveCustomerCreditCard();
108 | },
109 | (responseError) => {
110 | this.toastrService.error(responseError.error.message);
111 | }
112 | );
113 | } else {
114 | this.toastrService.warning('Please Fill the Required Areas !');
115 | }
116 | }
117 | rentalAdd() {
118 | this.rental.customerId = this.activeUser.customerId;
119 | this.rentalService.addRental(this.rental).subscribe((response) => {
120 | this.router.navigate(['/']);
121 | });
122 | }
123 | saveCustomerCreditCard() {
124 | if (this.paymentForm.value['saveCardStatus']) {
125 | this.paymentForm.removeControl('id');
126 | let creditCard = this.paymentForm.value;
127 | this.creditCardService.addCreditCard(creditCard).subscribe((response) => {
128 | this.toastrService.success(response.message);
129 | });
130 | }
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/app/components/register/register.component.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | display: flex;
8 | align-items: center;
9 | padding-top: 40px;
10 | padding-bottom: 40px;
11 | }
12 |
13 | .form-signin {
14 | width: 100%;
15 | max-width: 330px;
16 | padding: 15px;
17 | margin: auto;
18 | }
19 |
20 | .form-signin .checkbox {
21 | font-weight: 400;
22 | }
23 |
24 | .form-signin .form-floating:focus-within {
25 | z-index: 2;
26 | }
27 |
28 | .form-signin input[type="email"] {
29 | margin-bottom: -1px;
30 | border-bottom-right-radius: 0;
31 | border-bottom-left-radius: 0;
32 | }
33 |
34 | .form-signin input[type="password"] {
35 | margin-bottom: 10px;
36 | border-top-left-radius: 0;
37 | border-top-right-radius: 0;
38 | }
39 | .bd-placeholder-img {
40 | font-size: 1.125rem;
41 | text-anchor: middle;
42 | -webkit-user-select: none;
43 | -moz-user-select: none;
44 | user-select: none;
45 | }
46 |
47 | @media (min-width: 768px) {
48 | .bd-placeholder-img-lg {
49 | font-size: 3.5rem;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/components/register/register.component.html:
--------------------------------------------------------------------------------
1 |
3 |
79 |
4 |
78 |
5 |
7 | 76 |
77 | Credit Card Payment
6 |7 | 76 |
80 |
136 |
81 |
134 |
135 |
82 |
84 | Car Details
83 |
85 |
86 |
87 |
121 |
133 | | Car Name | 89 |{{carToRent.carName}} | 90 |
| Findex Score | 93 |{{carToRent.findexScore}} | 94 |
| Rent Date | 97 |{{rental.rentDate | date : 'dd-LL-YYYY'}} | 98 |
| Return Date | 101 |{{rental.returnDate | date : 'dd-LL-YYYY'}} | 102 |
| Total Day | 105 |{{totalDay}} | 106 |
| Daily Price | 109 |{{carToRent.dailyPrice | currency:'₺'}} | 110 |
113 | TOTAL PRICE114 | |
115 |
116 | {{totalPrice | currency:'₺'}}117 | |
118 |
122 |
132 | Your Credit Cards
123 |
124 |
130 |
131 |
2 |
--------------------------------------------------------------------------------
/src/app/components/register/register.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {
3 | FormBuilder,
4 | FormControl,
5 | FormGroup,
6 | Validators,
7 | } from '@angular/forms';
8 | import { Router } from '@angular/router';
9 | import { ToastrService } from 'ngx-toastr';
10 | import { AuthService } from 'src/app/services/auth.service';
11 | import { ErrorService } from 'src/app/services/error.service';
12 |
13 | @Component({
14 | selector: 'app-register',
15 | templateUrl: './register.component.html',
16 | styleUrls: ['./register.component.css'],
17 | })
18 | export class RegisterComponent implements OnInit {
19 | registerForm: FormGroup;
20 | constructor(
21 | private fb: FormBuilder,
22 | private authService: AuthService,
23 | private toastrService: ToastrService,
24 | private router: Router,
25 | private errorService: ErrorService
26 | ) {}
27 |
28 | ngOnInit(): void {
29 | this.createRegisterForm();
30 | }
31 | createRegisterForm() {
32 | this.registerForm = this.fb.group({
33 | firstname: ['', Validators.required],
34 | lastname: ['', Validators.required],
35 | email: ['', Validators.required],
36 | password: ['', Validators.required],
37 | confirmPassword: ['', Validators.required],
38 | });
39 | }
40 | register() {
41 | if (this.registerForm.valid) {
42 | if (
43 | this.registerForm.value['password'] !=
44 | this.registerForm.value['confirmPassword']
45 | ) {
46 | this.toastrService.error('Passwords do not Match !');
47 | return;
48 | }
49 | let registerForm = Object.assign({}, this.registerForm.value);
50 | this.authService.register(registerForm).subscribe(
51 | (response) => {
52 | this.router.navigate(['login']);
53 | this.toastrService.success('Register Successful !');
54 | },
55 | (responseError) => {
56 | this.errorService.getError(responseError);
57 | }
58 | );
59 | } else {
60 | this.toastrService.info('Please Fill the Form !');
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/components/rent/rent.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/rent/rent.component.css
--------------------------------------------------------------------------------
/src/app/components/rent/rent.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
28 |
29 |
30 |
31 | 
32 |
33 |
34 |
35 |
32 |
33 |
34 |
2 |
36 |
37 |
--------------------------------------------------------------------------------
/src/app/components/rent/rent.component.ts:
--------------------------------------------------------------------------------
1 | declare var $: any;
2 | import { DatePipe } from '@angular/common';
3 | import { Component, OnInit } from '@angular/core';
4 | import { ActivatedRoute, Router } from '@angular/router';
5 | import { CarInfo } from 'src/app/models/carInfo';
6 | import { CarService } from 'src/app/services/car.service';
7 | import {
8 | FormGroup,
9 | FormControl,
10 | FormBuilder,
11 | Validators,
12 | } from '@angular/forms';
13 | import { RentalService } from 'src/app/services/rental.service';
14 | import { ResponseModel } from 'src/app/models/responseModel';
15 | import { ToastrService } from 'ngx-toastr';
16 | import { ErrorService } from 'src/app/services/error.service';
17 | import { CustomerDetails } from 'src/app/models/customerDetails';
18 | import { StorageService } from 'src/app/services/storage.service';
19 |
20 | @Component({
21 | selector: 'app-rent',
22 | templateUrl: './rent.component.html',
23 | styleUrls: ['./rent.component.css'],
24 | })
25 | export class RentComponent implements OnInit {
26 | carID: number;
27 | carDetails: CarInfo;
28 | _rentDate = new FormControl('');
29 | rentAddForm: FormGroup;
30 | IsRentable: ResponseModel = {
31 | isSuccess: true,
32 | message: '',
33 | };
34 | modelStatus: string = '';
35 | minRentDate = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
36 | minReturnDate: string;
37 | activeUser: CustomerDetails;
38 |
39 | constructor(
40 | private activatedRoute: ActivatedRoute,
41 | private carService: CarService,
42 | private formBuilder: FormBuilder,
43 | private rentalService: RentalService,
44 | private router: Router,
45 | private datePipe: DatePipe,
46 | private toastrService: ToastrService,
47 | private errorService: ErrorService,
48 | private storageService: StorageService
49 | ) {}
50 |
51 | ngOnInit(): void {
52 | this.storageService.getToken()
53 | ? (this.activeUser = this.storageService.getActiveUser())
54 | : (this.activeUser = Object.assign({ customerId: 0 }));
55 |
56 | this.activatedRoute.params.subscribe((params) => {
57 | if (params['carId']) {
58 | this.carID = parseInt(params['carId']);
59 | this.getActiveCarDetail(params['carId']);
60 | }
61 | });
62 | this.createRentAddForm();
63 | }
64 | getActiveCarDetail(carId: number) {
65 | this.carService.getCarDetailsById(carId).subscribe((response) => {
66 | this.carDetails = response.data[0];
67 | });
68 | }
69 | createRentAddForm() {
70 | this.rentAddForm = this.formBuilder.group({
71 | carId: [this.carID, Validators.required],
72 | rentDate: ['', Validators.required],
73 | returnDate: ['', Validators.required],
74 | });
75 | }
76 |
77 | goToPayment() {
78 | if (this.isUserLogin()) {
79 | if (this.rentAddForm.valid) {
80 | let rentToAdd = Object.assign({}, this.rentAddForm.value);
81 | this.rentalService.IsRentable(rentToAdd).subscribe(
82 | (response) => {
83 | this.IsRentable = response;
84 | $('#rentModel').modal('hide');
85 | this.router.navigate(['payment', JSON.stringify(rentToAdd)]);
86 | },
87 | (responseError) => {
88 | this.IsRentable = responseError.error;
89 | this.errorService.getError(responseError);
90 | }
91 | );
92 | } else {
93 | this.IsRentable = {
94 | isSuccess: false,
95 | message: 'Please Enter Required Areas !',
96 | };
97 | }
98 | }
99 | }
100 |
101 | isUserLogin() {
102 | return this.storageService.getToken() ? true : false;
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/app/components/rental/rental.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mvolkanaslan/ReCapProject-Frontend/5f37c7981a91462cf95a72be96eec206db9dd950/src/app/components/rental/rental.component.css
--------------------------------------------------------------------------------
/src/app/components/rental/rental.component.html:
--------------------------------------------------------------------------------
1 | | RENTALS | 5 |||||
|---|---|---|---|---|
| Car | 8 |Customer | 9 |Company | 10 |Rent Date | 11 |Return Date | 12 |
| {{ rental.carName }} | 17 |{{ rental.customerName }} | 18 |{{ rental.companyName }} | 19 |{{ rental.rentDate.toString().split("T")[0] }} | 20 |21 | {{ 22 | rental.returnDate == null 23 | ? null 24 | : rental.returnDate.toString().split("T")[0] 25 | }} 26 | | 27 |
2 |
3 |
59 |
60 |
61 |
62 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/src/app/components/user-profile/user-profile.component.ts:
--------------------------------------------------------------------------------
1 | declare var $: any;
2 | import { Component, OnInit } from '@angular/core';
3 | import {
4 | FormGroup,
5 | FormBuilder,
6 | FormControl,
7 | Validators,
8 | } from '@angular/forms';
9 | import { Router } from '@angular/router';
10 | import { ToastrService } from 'ngx-toastr';
11 | import { CustomerDetails } from 'src/app/models/customerDetails';
12 | import { RentalDetails } from 'src/app/models/rentalDetails';
13 | import { AuthService } from 'src/app/services/auth.service';
14 | import { ErrorService } from 'src/app/services/error.service';
15 | import { RentalService } from 'src/app/services/rental.service';
16 | import { StorageService } from 'src/app/services/storage.service';
17 |
18 | @Component({
19 | selector: 'app-user-profile',
20 | templateUrl: './user-profile.component.html',
21 | styleUrls: ['./user-profile.component.css'],
22 | })
23 | export class UserProfileComponent implements OnInit {
24 | activeUser: CustomerDetails;
25 | rentals: RentalDetails[];
26 | userUpdateForm: FormGroup;
27 | passwordUpdateForm: FormGroup;
28 | constructor(
29 | private storageService: StorageService,
30 | private rentalService: RentalService,
31 | private formBuilder: FormBuilder,
32 | private authService: AuthService,
33 | private router: Router,
34 | private toastrService: ToastrService,
35 | private errorService: ErrorService
36 | ) {}
37 | ngOnInit(): void {
38 | this.activeUser = this.storageService.getActiveUser();
39 | this.createUserUpdateForm();
40 | this.createPasswordForm();
41 | this.getRentalsOfCustomer(this.activeUser.customerId);
42 | }
43 | getRentalsOfCustomer(customerId: number) {
44 | this.rentalService
45 | .getRentalsByCustomerId(customerId)
46 | .subscribe((response) => {
47 | this.rentals = response.data;
48 | });
49 | }
50 |
51 | createUserUpdateForm() {
52 | this.userUpdateForm = this.formBuilder.group({
53 | id: [this.activeUser.userId],
54 | customerId: [this.activeUser.customerId],
55 | firstName: [this.activeUser.firstName, Validators.required],
56 | lastName: [this.activeUser.lastName, Validators.required],
57 | email: [this.activeUser.email, Validators.required],
58 | companyName: [this.activeUser.companyName],
59 | findexScore: this.activeUser.findexScore,
60 | });
61 | }
62 | createPasswordForm() {
63 | this.passwordUpdateForm = this.formBuilder.group({
64 | id: [this.activeUser.userId, Validators.required],
65 | Password: ['', Validators.required],
66 | newPassword: ['', Validators.required],
67 | confirmPassword: ['', Validators.required],
68 | });
69 | }
70 |
71 | rentalStatus(rental: RentalDetails) {
72 | let returnDate = new Date(rental.returnDate);
73 | if (returnDate.valueOf() < Date.now().valueOf()) {
74 | return 'Delivered';
75 | } else {
76 | return 'In Use';
77 | }
78 | }
79 |
80 | updateUser() {
81 | if (this.userUpdateForm.valid) {
82 | let userToUpdate = Object.assign({}, this.userUpdateForm.value);
83 |
84 | this.authService.updateUser(userToUpdate).subscribe(
85 | (response) => {
86 | delete userToUpdate['id'];
87 | this.activeUser = Object.assign({ ...this.activeUser }, userToUpdate);
88 | this.storageService.setActiveUser(JSON.stringify(this.activeUser));
89 | $('#userUpdateModal').modal('hide');
90 | this.toastrService.success(response.message);
91 | //window.location.replace('/account');
92 | this.getRentalsOfCustomer(this.activeUser.customerId);
93 | this.router.navigate(['/account']);
94 | },
95 | (responseError) => {
96 | this.errorService.getError(responseError);
97 | }
98 | );
99 | } else {
100 | this.toastrService.warning('Please Fill The Form !');
101 | }
102 | }
103 | changeUserPassword() {
104 | if (this.passwordUpdateForm.valid) {
105 | let passwordToUpdate = Object.assign({}, this.passwordUpdateForm.value);
106 | if (
107 | this.passwordUpdateForm.controls['newPassword'].value !==
108 | this.passwordUpdateForm.controls['confirmPassword'].value
109 | ) {
110 | this.toastrService.warning('Passwords Do Not Match !');
111 | return;
112 | }
113 |
114 | this.authService.updateUserPassword(passwordToUpdate).subscribe(
115 | (responseSuccess) => {
116 | $('#passwordUpdateModal').modal('hide');
117 | this.passwordUpdateForm.reset();
118 | this.toastrService.success(responseSuccess.message);
119 | },
120 | (responseError) => {
121 | typeof responseError.error != 'string'
122 | ? this.errorService.getError(responseError)
123 | : this.toastrService.error(responseError.error);
124 | }
125 | );
126 | } else {
127 | this.toastrService.warning('Please Fill the Form !');
128 | }
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/app/components/usermenu/usermenu.component.css:
--------------------------------------------------------------------------------
1 | a {
2 | cursor: pointer;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/components/usermenu/usermenu.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
29 |
30 |
6 |
28 |
7 |
8 |
9 |
10 |
13 | {{activeUser.firstName + ' ' + activeUser.lastName}}
11 |{{activeUser.companyName}}
12 |-
14 |
- Email{{activeUser.email}} 15 | 16 |
- Findex 17 | Score{{activeUser.findexScore}} 18 |
31 |
32 |
33 |
56 |
57 |
58 | | My Rentals | 35 |||||
|---|---|---|---|---|
| Car Name | 40 |Customer | 41 |Rent Date | 42 |Return Date | 43 |Status | 44 |
| {{rental.carName}} | 49 |{{rental.customerName}} | 50 |{{rental.rentDate | date}} | 51 |{{rental.returnDate | date}} | 52 |{{rentalStatus(rental)}} | 53 |
2 |
6 |
7 |
8 |
9 |
13 |
28 |
--------------------------------------------------------------------------------
/src/app/components/usermenu/usermenu.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
4 | import { CustomerDetails } from 'src/app/models/customerDetails';
5 | import { StorageService } from 'src/app/services/storage.service';
6 | import { environment } from 'src/environments/environment.prod';
7 |
8 | @Component({
9 | selector: 'app-usermenu',
10 | templateUrl: './usermenu.component.html',
11 | styleUrls: ['./usermenu.component.css'],
12 | })
13 | export class UsermenuComponent implements OnInit {
14 | constructor(
15 | private storageServise: StorageService,
16 | private router: Router,
17 | private storageService: StorageService
18 | ) {}
19 | activeUser: CustomerDetails;
20 |
21 | ngOnInit(): void {
22 | this.getActiveUser();
23 | }
24 |
25 | userIsLogined() {
26 | if (this.storageServise.getToken()) return true;
27 | else return false;
28 | }
29 | logout() {
30 | this.storageServise.deleteItem('token');
31 | this.storageServise.deleteActiveUser();
32 | this.router.navigate(['']);
33 | }
34 |
35 | userIsAdmin(): boolean {
36 | return this.getActiveUser().claims.includes('admin');
37 | }
38 | getActiveUser(): CustomerDetails {
39 | this.activeUser = this.storageService.getActiveUser();
40 | return this.activeUser;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/guards/admin.guard.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {
3 | CanActivate,
4 | ActivatedRouteSnapshot,
5 | RouterStateSnapshot,
6 | UrlTree,
7 | Router,
8 | } from '@angular/router';
9 | import { Observable } from 'rxjs';
10 | import { ToastrService } from 'ngx-toastr';
11 | import { StorageService } from '../services/storage.service';
12 |
13 | @Injectable({
14 | providedIn: 'root',
15 | })
16 | export class AdminGuard implements CanActivate {
17 | constructor(
18 | private toastrServie: ToastrService,
19 | private router: Router,
20 | private storageService: StorageService
21 | ) {}
22 | canActivate(
23 | route: ActivatedRouteSnapshot,
24 | state: RouterStateSnapshot
25 | ):
26 | | Observable