Changeset 6c1585f for trip-planner-front/src
- Timestamp:
- 11/04/21 23:10:39 (3 years ago)
- Branches:
- master
- Children:
- ceaed42
- Parents:
- 6a80231
- Location:
- trip-planner-front/src/app
- Files:
-
- 13 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/_services/planner.service.ts
r6a80231 r6c1585f 16 16 } 17 17 18 postInitialPlanner(planner Dto: PlannerDto): Observable<Object>{18 postInitialPlanner(planner: Planner, locationList: Location[]): Observable<Object>{ 19 19 let url = "http://localhost:8080/api/planner/new"; 20 return this.httpClient.post<Planner>(url, planner Dto);20 return this.httpClient.post<Planner>(url, planner); 21 21 } 22 22 23 updatePlanner(id: number ):Observable<Planner>{23 updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{ 24 24 let url = "http://localhost:8080/api/edit/planner/" + id; 25 return this.httpClient.put<Planner>(url, null); 25 return this.httpClient.put<Planner>(url, plannerDto); 26 } 27 28 getPlannerById(id:number):Observable<Planner>{ 29 let url = "http://localhost:8080/api/planner/" + id; 30 return this.httpClient.get<Planner>(url); 26 31 } 27 32 } -
trip-planner-front/src/app/app-routing.module.ts
r6a80231 r6c1585f 1 1 import { NgModule } from '@angular/core'; 2 2 import { RouterModule, Routes } from '@angular/router'; 3 import { LocationComponent } from './location/location.component'; 3 4 import { LocationsFormComponent } from './locations-form/locations-form.component'; 4 5 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component'; … … 8 9 {path: 'planners', component: PlannerComponent}, 9 10 {path: 'form', component: LocationsFormComponent}, 10 {path: 'edit/planner/:id', component: EditPlannerComponent} 11 {path: 'edit/planner/:id', component: EditPlannerComponent}, 12 {path: 'locations', component: LocationComponent} 11 13 ]; 12 14 -
trip-planner-front/src/app/app.component.html
r6a80231 r6c1585f 1 2 1 <router-outlet></router-outlet> 3 2 -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html
r6a80231 r6c1585f 4 4 <p>Planner name</p> 5 5 <mat-form-field appearance="fill"> 6 <input matInput required type="text" [(ngModel)]="planner Dto.name" name="name" placeholder="Planner name">6 <input matInput required type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name"> 7 7 </mat-form-field> 8 8 <p>Planner description</p> 9 9 <mat-form-field appearance="fill"> 10 <textarea matInput required name="description" [(ngModel)]="planner Dto.description" type="text" placeholder="Planner description"></textarea>10 <textarea matInput required name="description" [(ngModel)]="planner.description" type="text" placeholder="Planner description"></textarea> 11 11 </mat-form-field> 12 12 </div> -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
r6a80231 r6c1585f 40 40 onFormSubmitPlanner(form: NgForm){ 41 41 console.log(this.planner); 42 this.plannerService.postInitialPlanner(this.planner Dto).subscribe(42 this.plannerService.postInitialPlanner(this.planner, this.locations).subscribe( 43 43 data=>{ 44 44 console.log(data); -
trip-planner-front/src/app/location/location.component.html
r6a80231 r6c1585f 1 <div *ngFor="let category of categories"> 2 {{category.name}} 3 </div> 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 4 2 5 <hr>3 <h3>Here are all locations</h3> 6 4 7 <div *ngFor="let companion of companions"> 8 {{companion.type}} 9 </div> 5 <div class="container"> 6 <table mat-table class="mat-elevation-z8"> 7 8 <!--- Note that these columns can be defined in any order. 9 The actual rendered columns are set as a property on the row definition" --> 10 11 <!-- Position Column --> 12 <ng-container matColumnDef="position"> 13 <th mat-header-cell *matHeaderCellDef> Location name </th> 14 <td mat-cell *matCellDef="let element"> </td> 15 </ng-container> 16 17 18 <!-- Symbol Column --> 19 <ng-container matColumnDef="symbol"> 20 <th mat-header-cell *matHeaderCellDef> Symbol </th> 21 <td mat-cell *matCellDef="let element"> </td> 22 </ng-container> 23 24 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> 25 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> 26 </table> 27 </div> -
trip-planner-front/src/app/location/location.component.ts
r6a80231 r6c1585f 16 16 export class LocationComponent implements OnInit { 17 17 18 categories: Category[]; 19 companions: Companion[]; 20 constructor(private categoryService: CategoryService, private companionService : CompanionService) { 21 this.categories = []; 22 this.companions = []; 18 constructor() { 19 23 20 } 24 21 25 22 ngOnInit(): void { 26 this.categoryService.getAllCategories().subscribe( 27 data => { 28 this.categories = data; 29 console.log(data); 30 } 31 ); 32 33 this.companionService.getAllCompanions().subscribe( 34 data => { 35 this.companions = data; 36 } 37 ); 23 38 24 } 39 25 } -
trip-planner-front/src/app/locations-form/locations-form.component.html
r6a80231 r6c1585f 13 13 <br> 14 14 <br> 15 <!--16 <mat-form-field class="example-full-width" appearance="fill">17 <mat-label>Please select a place</mat-label>18 <input type="text"19 placeholder="Pick one"20 aria-label="Place"21 matInput22 [formControl]="myControl"23 [matAutocomplete]="auto">24 <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">25 <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">26 {{option.name}}27 </mat-option>28 </mat-autocomplete>29 </mat-form-field>30 -->31 32 15 33 16 <div *ngIf="cityOption"> … … 40 23 </mat-form-field> 41 24 </div> 42 43 25 44 26 <div *ngIf="regionOption"> -
trip-planner-front/src/app/locations-form/locations-form.component.ts
r6a80231 r6c1585f 16 16 import { Region } from '../_models/region'; 17 17 import { RegionService } from '../_services/region.service'; 18 import { Router } from '@angular/router'; 18 19 19 20 @Component({ … … 47 48 constructor(private cityService : CityService, private regionService: RegionService, 48 49 private companionService : CompanionService, private categoryService : CategoryService, 49 private locationService: LocationService ){50 private locationService: LocationService, private router : Router){ 50 51 this.filteredOptions = new Observable<City[]>(); 51 52 this.cities = []; … … 99 100 100 101 filter(val: string): Observable<City[]> { 101 // call the service which makes the http-request102 // call the service which makes the http-request 102 103 return this.cityService.getAllCities() 103 .pipe(104 map(response => response.filter(option => {105 return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0106 }))107 )108 109 }104 .pipe( 105 map(response => response.filter(option => { 106 return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0 107 })) 108 ) 109 110 } 110 111 111 112 toggleSelection(chip: MatChip, category: Category){ 112 113 chip.toggleSelected(); 113 114 114 if(this.chipsSeletion.length > 0){115 if(this.chipsSeletion.indexOf(category.id) <= -1){116 this.chipsSeletion.push(category.id);117 }else{118 const index = this.chipsSeletion.indexOf(category.id);119 this.chipsSeletion.splice(index, 1);120 }121 }else{122 this.chipsSeletion.push(category.id);123 }124 console.log(this.chipsSeletion);115 if (this.chipsSeletion.length > 0) { 116 if (this.chipsSeletion.indexOf(category.id) <= -1) { 117 this.chipsSeletion.push(category.id); 118 } else { 119 const index = this.chipsSeletion.indexOf(category.id); 120 this.chipsSeletion.splice(index, 1); 121 } 122 } else { 123 this.chipsSeletion.push(category.id); 124 } 125 console.log(this.chipsSeletion); 125 126 } 126 127 127 128 128 createMyPlanner(){ 129 this.categoryIds = this.chipsSeletion.join(','); 130 console.log(this.categoryIds); 131 132 if(this.cityOption){ 133 this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe( 134 result => { 135 console.log(result); 136 } 137 ); 138 }else if(this.regionOption){ 139 140 this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe( 141 result => { 142 console.log(result); 143 } 144 ); 145 } 146 } 147 148 chooseCityOption(){ 149 this.cityOption = true; 150 this.regionOption = false; 151 } 129 createMyPlanner() { 130 this.categoryIds = this.chipsSeletion.join(','); 131 console.log(this.categoryIds); 132 133 if (this.cityOption) { 134 this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe( 135 result => { 136 console.log(result); 137 this.router.navigate(['locations']); 138 } 139 ); 140 } else if (this.regionOption) { 141 this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe( 142 result => { 143 console.log(result); 144 this.router.navigate(['locations']); 145 } 146 ); 147 } 148 149 150 151 } 152 153 chooseCityOption() { 154 this.cityOption = true; 155 this.regionOption = false; 156 } 152 157 chooseRegionOption() { 153 158 this.regionOption = true; … … 155 160 } 156 161 157 constraintMaxNumberDays() {158 if(this.value > this.max){159 160 162 constraintMaxNumberDays() { 163 if (this.value > this.max) { 164 this.value = this.max; 165 } 161 166 } 162 167 -
trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
r6a80231 r6c1585f 3 3 <h3>Here you can edit your planner</h3> 4 4 5 <form >5 <form [formGroup] = "form" (ngSubmit)="onSubmit()"> 6 6 <div class="form-gorup"> 7 7 <p>Planner name</p> 8 8 <mat-form-field appearance="fill"> 9 <input matInput required type="text" name="name" placeholder="Planner name">9 <input matInput required type="text" formControlName="name" placeholder="Planner name"> 10 10 </mat-form-field> 11 11 <p>Planner description</p> 12 12 <mat-form-field appearance="fill"> 13 <textarea matInput required name="description" type="text" placeholder="Planner description"></textarea>13 <textarea matInput required formControlName="description" type="text" placeholder="Planner description"></textarea> 14 14 </mat-form-field> 15 15 </div> … … 25 25 </thead> 26 26 <tbody> 27 <tr> 28 27 <tr> 29 28 <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()"> 30 29 Add locations … … 38 37 </div> 39 38 </div> 40 <button mat-raised-button color="primary" (click)="onClickSavePlanner()">39 <button mat-raised-button color="primary" > 41 40 <mat-icon>edit</mat-icon> Save 42 41 </button> -
trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
r6a80231 r6c1585f 1 1 import { Component, OnInit } from '@angular/core'; 2 import { Router } from '@angular/router'; 2 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 3 import { ActivatedRoute, Router } from '@angular/router'; 4 import { PlannerDto } from 'src/app/_models/dto/plannerDto'; 3 5 import { Planner } from 'src/app/_models/planner'; 6 import { PlannerService } from 'src/app/_services/planner.service'; 4 7 5 8 @Component({ … … 11 14 12 15 planner: Planner; 16 planners: Planner[]; 17 form: FormGroup; 18 plannerDto: PlannerDto; 19 id: number; 13 20 14 21 15 constructor(private router: Router ) {22 constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) { 16 23 this.planner = new Planner(); 24 this.planners = []; 25 this.form = fb.group({ 26 title: fb.control('initial value', Validators.required) 27 }); 28 this.plannerDto = new PlannerDto(); 29 this.id = 1; 17 30 } 18 31 19 32 ngOnInit(): void { 33 this.id = this.route.snapshot.params['id']; 34 35 this.form = this.fb.group({ 36 name: [''], 37 description: [''], 38 locationList: [] 39 }); 40 41 this.plannerService.getPlannerById(this.id) 42 .pipe() 43 .subscribe(x => this.form.patchValue(x)); 20 44 } 21 45 22 46 23 onClickSavePlanner(){ 24 this.router.navigate(['planners']); 47 onSubmit(){ 48 this.updatePlanner(); 49 25 50 } 26 51 27 onClickAddLocation(){ 52 onClickAddLocation() 53 { 28 54 this.router.navigate(['form']); 29 55 } 56 57 private updatePlanner() { 58 this.plannerService.updatePlanner(this.id, this.form.value) 59 .pipe() 60 .subscribe({ 61 next: () => { 62 this.router.navigate(['planners']); 63 }, 64 error: error => { 65 console.log("error"); 66 } 67 }); 30 68 } 69 70 } -
trip-planner-front/src/app/planner/planner.component.html
r6a80231 r6c1585f 11 11 </mat-card-content> 12 12 <mat-card-actions class="mt-auto"> 13 <button mat-raised-button color="primary" (click)="onClickEditPlanner (planner.id)">13 <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)"> 14 14 <mat-icon>edit</mat-icon> Edit 15 </button> 16 15 </button> 17 16 <button mat-raised-button color="accent"> 18 17 <mat-icon>remove_red_eye</mat-icon>Details -
trip-planner-front/src/app/planner/planner.component.ts
r6a80231 r6c1585f 5 5 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component'; 6 6 import { Router } from '@angular/router'; 7 import { PlannerDto } from '../_models/dto/plannerDto'; 8 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 7 9 8 10 … … 15 17 16 18 planners: Planner[]; 17 plannerId: number; 19 plannerDto: PlannerDto; 20 editForm: FormGroup; 18 21 19 constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 22 23 24 constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router, 25 private fb : FormBuilder) { 20 26 this.planners = []; 21 this.plannerId = 1; 27 this.plannerDto = new PlannerDto(); 28 this.editForm = fb.group({ 29 title: fb.control('initial value', Validators.required) 30 }); 22 31 }; 23 32 … … 37 46 } 38 47 39 onClickEditPlanner (id: number){48 onClickEditPlannerGet(id: number){ 40 49 console.log(id); 41 42 43 this.router.navigate(['edit/planner/', this.plannerId]) 50 this.plannerService.getPlannerById(id).subscribe( 51 data => { 52 53 this.router.navigate(['edit/planner/', id]) 54 } 55 ); 44 56 45 57 } 58 59 46 60 }
Note:
See TracChangeset
for help on using the changeset viewer.