Changeset bdd6491 for trip-planner-front/src/app
- Timestamp:
- 12/28/21 08:56:55 (3 years ago)
- Branches:
- master
- Children:
- b738035
- Parents:
- 84d0fbb
- Location:
- trip-planner-front/src/app
- Files:
-
- 15 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/_models/location.ts
r84d0fbb rbdd6491 8 8 priority: string; 9 9 duration: number; 10 trivia: string; 10 11 photo: any[]; 11 12 … … 17 18 this.priority = 'Location priority'; 18 19 this.duration = 1; 20 this.trivia = ''; 19 21 this.photo = []; 20 22 } -
trip-planner-front/src/app/_services/planner.service.ts
r84d0fbb rbdd6491 11 11 12 12 httpHeaders: HttpHeaders = new HttpHeaders({ 13 'Authorization': '' +sessionStorage.getItem("token"),13 'Authorization': '' + sessionStorage.getItem("token"), 14 14 'Accept': 'application/json', 15 15 'Content-Type': 'application/json' 16 }); 17 16 }); 18 17 19 constructor(private httpClient: HttpClient){ 18 19 constructor(private httpClient: HttpClient) { 20 20 } 21 21 22 23 getAllPlanners(): Observable<Planner[]>{22 23 getAllPlanners(): Observable<Planner[]> { 24 24 let url = "http://localhost:8080/api/planners/user"; 25 25 console.log("SERVID: " + sessionStorage.getItem("token")); 26 console.log(this.httpHeaders.get('Authorization')) 27 return this.httpClient.get<Planner[]>(url, { headers: this.httpHeaders});26 console.log(this.httpHeaders.get('Authorization')); 27 return this.httpClient.get<Planner[]>(url, { headers: this.httpHeaders }); 28 28 } 29 29 30 postInitialPlanner(planner : Planner): Observable<Planner>{30 postInitialPlanner(plannerDto: PlannerDto): Observable<Planner> { 31 31 let url = "http://localhost:8080/api/planner/new"; 32 return this.httpClient.post<Planner>(url, planner );32 return this.httpClient.post<Planner>(url, plannerDto); 33 33 } 34 34 35 updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{36 let url = "http://localhost:8080/api/edit/planner/" + id;37 return this.httpClient.put<Planner>(url, plannerDto, {headers: this.httpHeaders});35 updatePlanner(id: number, plannerDto: PlannerDto): Observable<Planner> { 36 let url = "http://localhost:8080/api/edit/planner/" + id; 37 return this.httpClient.put<Planner>(url, plannerDto, { headers: this.httpHeaders }); 38 38 } 39 39 40 getPlannerById(id: number):Observable<Planner>{40 getPlannerById(id: number): Observable<Planner> { 41 41 let url = "http://localhost:8080/api/planner/" + id; 42 42 return this.httpClient.get<Planner>(url); 43 43 } 44 44 45 45 deletePlannerById(id: number): Observable<Planner> { 46 let url = "http://localhost:8080/api/delete/" + id; 47 return this.httpClient.delete<Planner>(url, { headers: this.httpHeaders }); 48 } 46 49 } -
trip-planner-front/src/app/_services/user.service.ts
r84d0fbb rbdd6491 8 8 9 9 @Injectable({ 10 10 providedIn: 'root' 11 11 }) 12 export class UserService {12 export class UserService { 13 13 14 15 16 14 headers = new HttpHeaders({ 15 'Content-Type': 'application/json', 16 'Access-Control-Allow-Headers': 'Content-Type', 17 17 18 }); 19 20 constructor(private httpClient: HttpClient){ 18 }); 21 19 22 }20 constructor(private httpClient: HttpClient) { 23 21 24 registerUser(user : UserDto) : Observable<User>{25 let url = "http://localhost:8080/api/users/register"; 26 var reqHeader = new HttpHeaders({'No-Auth' : 'True'});27 return this.httpClient.post<User>(url, user, { headers: reqHeader });28 }29 30 authenticateUser(loginResult : LoginRequest) { 31 let url = "http://localhost:8080/api/users/login";32 var reqHeader = new HttpHeaders({'Content-Type': 'application/json'});33 34 35 36 37 let tokenStr =userData.token;38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 22 } 23 24 registerUser(user: UserDto): Observable<User> { 25 let url = "http://localhost:8080/api/users/register"; 26 return this.httpClient.post<User>(url, user, { headers: this.headers }); 27 } 28 29 authenticateUser(loginResult: LoginRequest) { 30 let url = "http://localhost:8080/api/users/login"; 31 return this.httpClient.post<any>(url, loginResult) 32 .pipe( 33 map(userData => { 34 sessionStorage.setItem("username", loginResult.username); 35 let tokenStr = userData.token; 36 sessionStorage.setItem("token", tokenStr); 37 return userData; 38 }) 39 ); 40 } 41 42 isUserLoggedIn() { 43 let user = sessionStorage.getItem("username"); 44 let token = sessionStorage.getItem("token"); 45 console.log(user); 46 console.log(token); 47 console.log(!(user === null)); 48 return !(user === null); 49 } 50 53 51 } -
trip-planner-front/src/app/app.module.ts
r84d0fbb rbdd6491 43 43 import { InputTextModule } from 'primeng/inputtext'; 44 44 import { RippleModule } from 'primeng/ripple'; 45 import { PaginatorModule} from 'primeng/paginator';46 import { CardModule} from 'primeng/card';45 import { PaginatorModule } from 'primeng/paginator'; 46 import { CardModule } from 'primeng/card'; 47 47 import { RegisterComponent } from './homepage/register/register.component'; 48 48 import { LoginComponent } from './homepage/login/login.component'; 49 49 import { AuthGuard } from './auth/auth.guard'; 50 50 import { AuthInterceptor } from './auth/auth.interceptor'; 51 51 52 52 53 @NgModule({ … … 111 112 PlannerService, 112 113 { 113 provide: MatDialogRef, 114 useValue: {}, 115 114 provide: MatDialogRef, 115 useValue: {}, 116 116 117 }, 117 118 { … … 125 126 AuthGuard 126 127 ], 127 128 128 129 entryComponents: [ 129 130 AddLocationToPlannerPanelComponent -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html
r84d0fbb rbdd6491 2 2 <p>Planner name</p> 3 3 <mat-form-field appearance="fill"> 4 <input matInput required type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name"> 4 <input matInput type="text" [(ngModel)]="plannerDto.name" name="plannerName" placeholder="Planner name"> 5 5 6 </mat-form-field> 6 7 <p>Planner description</p> 7 8 <mat-form-field appearance="fill"> 8 <textarea matInput required name="description" [(ngModel)]="planner.description" type="text"9 <textarea matInput name="description" [(ngModel)]="plannerDto.description" type="text" 9 10 placeholder="Planner description"></textarea> 10 11 </mat-form-field> 11 12 </div> 12 13 <div mat-dialog-actions> 13 <button pButton pRipple type=" submit" label="Save"14 class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(planner )"></button>14 <button pButton pRipple type="button" label="Save" 15 class="p-button-outlined p-button-rounded p-button-help" (click)="onFormSubmitPlanner(plannerDto)"></button> 15 16 </div> 17 18 -
trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
r84d0fbb rbdd6491 1 import { PlatformModule } from '@angular/cdk/platform'; 1 2 import { Component, OnInit } from '@angular/core'; 2 3 import { DynamicDialogRef } from 'primeng/dynamicdialog'; … … 11 12 export class CreateInitialPlannerComponent implements OnInit { 12 13 13 planner : Planner;14 plannerDto: PlannerDto; 14 15 15 16 constructor( private ref: DynamicDialogRef) { 16 this.planner = new Planner;17 this.plannerDto = new PlannerDto(); 17 18 } 18 19 19 20 ngOnInit(): void { 20 this.planner = new Planner();21 this.plannerDto = new Planner(); 21 22 } 22 23 23 onFormSubmitPlanner(planner ){24 this.ref.close(planner );24 onFormSubmitPlanner(plannerDto){ 25 this.ref.close(plannerDto); 25 26 window.location.reload(); 26 27 } -
trip-planner-front/src/app/homepage/homepage.component.html
r84d0fbb rbdd6491 13 13 <header> 14 14 <nav class="navbar navbar-expand-sm bg-light"> 15 <img src={{myLogo}} />16 15 <strong class="navbar-brand">Trivia Trip</strong> 17 16 … … 30 29 <img src={{imageURI}} /> 31 30 <h4></h4> 32 <!-- 33 <div class="content-section implementation carousel-demo" style="padding-top: 2em;">31 32 <div class="content-section implementation carousel-demo" style="padding-top: 2em;"> 34 33 <div class="card"> 35 34 <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false" … … 91 90 </div> 92 91 </div> 93 --> 94 92 95 93 </main> 96 <br>94 <br> 97 95 98 96 <footer class="bg-dark text-center text-white"> … … 102 100 <section class="mb-4"> 103 101 <!-- Facebook --> 104 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 105 ><i class="fab fa-facebook-f"></i 106 ></a> 107 102 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a> 103 108 104 <!-- Twitter --> 109 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 110 ><i class="fab fa-twitter"></i 111 ></a> 112 105 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a> 106 113 107 <!-- Google --> 114 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 115 ><i class="fab fa-google"></i 116 ></a> 117 108 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a> 109 118 110 <!-- Instagram --> 119 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 120 ><i class="fab fa-instagram"></i 121 ></a> 122 111 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a> 112 123 113 <!-- Linkedin --> 124 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 125 ><i class="fab fa-linkedin-in"></i 126 ></a> 127 114 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a> 115 128 116 <!-- Github --> 129 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button" 130 ><i class="fab fa-github"></i 131 ></a> 117 <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a> 132 118 </section> 133 119 <!-- Section: Social media --> 134 120 135 121 <!-- Section: Form --> 136 122 <section class=""> … … 145 131 </div> 146 132 <!--Grid column--> 147 133 148 134 <!--Grid column--> 149 135 <div class="col-md-5 col-12"> … … 155 141 </div> 156 142 <!--Grid column--> 157 143 158 144 <!--Grid column--> 159 145 <div class="col-auto"> … … 169 155 </section> 170 156 <!-- Section: Form --> 171 157 172 158 <!-- Section: Text --> 173 159 <section class="mb-4"> … … 179 165 </section> 180 166 <!-- Section: Text --> 181 167 182 168 <!-- Section: Links --> 183 169 <section class=""> … … 187 173 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 188 174 <h5 class="text-uppercase">Links</h5> 189 190 <ul class="list-unstyled mb-0"> 191 <li> 192 <a href="#!" class="text-white">Link 1</a> 193 </li> 194 <li> 195 <a href="#!" class="text-white">Link 2</a> 196 </li> 197 <li> 198 <a href="#!" class="text-white">Link 3</a> 199 </li> 200 <li> 201 <a href="#!" class="text-white">Link 4</a> 202 </li> 203 </ul> 204 </div> 205 <!--Grid column--> 206 207 <!--Grid column--> 208 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 209 <h5 class="text-uppercase">Links</h5> 210 211 <ul class="list-unstyled mb-0"> 212 <li> 213 <a href="#!" class="text-white">Link 1</a> 214 </li> 215 <li> 216 <a href="#!" class="text-white">Link 2</a> 217 </li> 218 <li> 219 <a href="#!" class="text-white">Link 3</a> 220 </li> 221 <li> 222 <a href="#!" class="text-white">Link 4</a> 223 </li> 224 </ul> 225 </div> 226 <!--Grid column--> 227 228 <!--Grid column--> 229 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 230 <h5 class="text-uppercase">Links</h5> 231 232 <ul class="list-unstyled mb-0"> 233 <li> 234 <a href="#!" class="text-white">Link 1</a> 235 </li> 236 <li> 237 <a href="#!" class="text-white">Link 2</a> 238 </li> 239 <li> 240 <a href="#!" class="text-white">Link 3</a> 241 </li> 242 <li> 243 <a href="#!" class="text-white">Link 4</a> 244 </li> 245 </ul> 246 </div> 247 <!--Grid column--> 248 249 <!--Grid column--> 250 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 251 <h5 class="text-uppercase">Links</h5> 252 175 176 <ul class="list-unstyled mb-0"> 177 <li> 178 <a href="#!" class="text-white">Link 1</a> 179 </li> 180 <li> 181 <a href="#!" class="text-white">Link 2</a> 182 </li> 183 <li> 184 <a href="#!" class="text-white">Link 3</a> 185 </li> 186 <li> 187 <a href="#!" class="text-white">Link 4</a> 188 </li> 189 </ul> 190 </div> 191 <!--Grid column--> 192 193 <!--Grid column--> 194 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 195 <h5 class="text-uppercase">Links</h5> 196 197 <ul class="list-unstyled mb-0"> 198 <li> 199 <a href="#!" class="text-white">Link 1</a> 200 </li> 201 <li> 202 <a href="#!" class="text-white">Link 2</a> 203 </li> 204 <li> 205 <a href="#!" class="text-white">Link 3</a> 206 </li> 207 <li> 208 <a href="#!" class="text-white">Link 4</a> 209 </li> 210 </ul> 211 </div> 212 <!--Grid column--> 213 214 <!--Grid column--> 215 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 216 <h5 class="text-uppercase">Links</h5> 217 218 <ul class="list-unstyled mb-0"> 219 <li> 220 <a href="#!" class="text-white">Link 1</a> 221 </li> 222 <li> 223 <a href="#!" class="text-white">Link 2</a> 224 </li> 225 <li> 226 <a href="#!" class="text-white">Link 3</a> 227 </li> 228 <li> 229 <a href="#!" class="text-white">Link 4</a> 230 </li> 231 </ul> 232 </div> 233 <!--Grid column--> 234 235 <!--Grid column--> 236 <div class="col-lg-3 col-md-6 mb-4 mb-md-0"> 237 <h5 class="text-uppercase">Links</h5> 238 253 239 <ul class="list-unstyled mb-0"> 254 240 <li> … … 273 259 </div> 274 260 <!-- Grid container --> 275 261 276 262 <!-- Copyright --> 277 263 <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> -
trip-planner-front/src/app/homepage/homepage.component.ts
r84d0fbb rbdd6491 1 import { HttpErrorResponse } from '@angular/common/http'; 1 2 import { Component, OnInit } from '@angular/core'; 2 3 import { Router } from '@angular/router'; … … 50 51 51 52 ngOnInit(): void { 52 /*53 53 this.locationService.getWeekendGetaways().subscribe( 54 54 data => { … … 61 61 } 62 62 ); 63 */ 63 64 64 } 65 65 … … 73 73 74 74 this.ref.onClose.subscribe((user: UserDto) => { 75 this.userService.registerUser(user).subscribe( 76 data => { 77 console.log(data); 78 79 } 80 ); 81 }); 75 if (user) { 76 this.userService.registerUser(user).subscribe( 77 data => { 78 console.log(data); 79 } 80 ); 81 } 82 }, 83 err => { 84 85 }); 82 86 } 83 87 84 88 85 89 onClickLogIn() { 86 90 this.ref = this.dialogService.open(LoginComponent, { … … 90 94 baseZIndex: 10000 91 95 }); 92 this.ref.onClose.subscribe((loginRequest : LoginRequest) => { 93 this.userService.authenticateUser(loginRequest).subscribe( 94 (data : any) => { 95 console.log(data); 96 if(this.userService.isUserLoggedIn()){ 97 this.router.navigate(['planners']); 96 this.ref.onClose.subscribe((loginRequest: LoginRequest) => { 97 if (loginRequest) { 98 this.userService.authenticateUser(loginRequest).subscribe( 99 (data: any) => { 100 console.log(data); 101 if (this.userService.isUserLoggedIn()) { 102 this.router.navigate(['planners']); 103 } 98 104 } 99 }100 );105 ); 106 } 101 107 }); 102 108 } 109 110 ngOnDestroy() { 111 if (this.ref) { 112 this.ref.close(); 113 } 114 } 103 115 } -
trip-planner-front/src/app/homepage/register/register.component.html
r84d0fbb rbdd6491 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" 2 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 1 3 2 3 4 5 6 7 >8 </div> 4 <div class="p-grid p-fluid"> 5 <div class="p-col-12 p-md-4"> 6 <div class="p-inputgroup"> 7 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span> 8 <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName" 9 class="form-control"> 10 9 11 </div> 10 11 <div class="p-col-12 p-md-4"> 12 <div class="p-inputgroup">13 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>14 <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" name="username"15 >16 </div>12 </div> 13 14 <div class="p-col-12 p-md-4"> 15 <div class="p-inputgroup"> 16 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span> 17 <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" 18 name="username"> 17 19 </div> 18 <div class="p-col-12 p-md-4">19 <div class="p-inputgroup"> 20 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>21 <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"22 >23 < /div>20 </div> 21 22 <div class="p-col-12 p-md-4"> 23 <div class="p-inputgroup"> 24 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span> 25 <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"> 24 26 </div> 25 <div class="p-col-12 p-md-4"> 26 <div class="p-inputgroup"> 27 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span> 28 <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" name="confirmPassword" 29 > 30 </div> 27 </div> 28 29 <div class="p-col-12 p-md-4"> 30 <div class="p-inputgroup"> 31 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span> 32 <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" 33 name="confirmPassword"> 31 34 </div> 32 33 <div class="p-col-12 p-md-4"> 34 <button pButton pRipple label="Submit" class="p-button-secondary" type="submit" (click)="onFormSubmitSignUp(user)"></button> 35 </div> 36 </div> 35 </div> 36 37 <div class="p-col-12 p-md-4"> 38 <button pButton pRipple label="Submit" class="p-button-secondary" type="button" 39 (click)="onFormSubmitSignUp(user)"></button> 40 </div> 41 </div> 42 43 -
trip-planner-front/src/app/homepage/register/register.component.ts
r84d0fbb rbdd6491 1 1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 2 3 import { DynamicDialogRef } from 'primeng/dynamicdialog'; 3 4 import { UserDto } from 'src/app/_models/dto/userDto'; … … 10 11 export class RegisterComponent implements OnInit { 11 12 12 user : UserDto; 13 user: UserDto; 14 myForm: FormGroup; 13 15 14 constructor(private ref: DynamicDialogRef ) {16 constructor(private ref: DynamicDialogRef, private fb: FormBuilder) { 15 17 this.user = new UserDto(); 16 } 18 this.myForm = fb.group({ 19 title: fb.control('initial value', Validators.required) 20 }); 21 } 17 22 18 23 ngOnInit(): void { 24 this.myForm = this.fb.group({ 25 fullName: this.fb.control('', Validators.required), 26 username: this.fb.control('', Validators.required), 27 password: this.fb.control('', Validators.required), 28 confirmPassword: this.fb.control('', Validators.required) 29 }); 19 30 } 20 21 onFormSubmitSignUp(user) {31 32 onFormSubmitSignUp(user) { 22 33 this.ref.close(user); 23 34 //window.location.reload(); 35 24 36 } 37 25 38 } -
trip-planner-front/src/app/location/location.component.ts
r84d0fbb rbdd6491 93 93 94 94 this.ref.onClose.subscribe((planner: Planner) => { 95 if(planner){ 95 96 this.plannerLocationDto.locationId = location.id; 96 97 this.plannerLocationDto.plannerId = planner.id; … … 124 125 } 125 126 ); 127 } 126 128 }); 129 127 130 } 128 131 -
trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
r84d0fbb rbdd6491 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"> 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" 2 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 2 3 3 4 <h3>Here you can edit your planner</h3> 4 5 5 <form [formGroup] ="form" (ngSubmit)="onSubmit()">6 <form [formGroup]="form" (ngSubmit)="onSubmit()"> 6 7 <div class="form-gorup"> 7 8 <p>Planner name</p> 8 9 <mat-form-field appearance="fill"> 9 <input matInput required type="text" formControlName="name"placeholder="Planner name">10 <input matInput required type="text" formControlName="name" placeholder="Planner name"> 10 11 </mat-form-field> 11 12 <p>Planner description</p> 12 13 <mat-form-field appearance="fill"> 13 <textarea matInput required formControlName="description" type="text" placeholder="Planner description"></textarea> 14 <textarea matInput required formControlName="description" type="text" 15 placeholder="Planner description"></textarea> 14 16 </mat-form-field> 15 17 </div> 16 <div class="container mb-4" 18 <div class="container mb-4"> 17 19 <div class="row"> 18 20 <div class="col-12"> … … 20 22 <table class="table table-striped"> 21 23 <thead> 22 <tr>23 <th scope="col">Location name</th>24 </tr>24 <tr> 25 <th scope="col">Location name</th> 26 </tr> 25 27 </thead> 26 28 <tbody> 27 <tr> 28 <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()"> 29 Add locations 30 </button> 31 </td> 32 </tr> 33 <tr *ngFor ="let location of locations"> 34 <td> 35 {{location.name}} 36 </td> 37 </tr> 29 <tr> 30 <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()"> 31 Add locations 32 </button> 33 </td> 34 </tr> 35 <tr *ngFor="let location of locations"> 36 <td> 37 {{location.name}} 38 </td> 39 <td> 40 <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button> 41 </td> 42 </tr> 38 43 </tbody> 39 44 </table> … … 44 49 <button pButton pRipplelabel label="Save" class="p-button-help"></button> 45 50 </form> 46 <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.11em'}"></button> 51 <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" 52 [style]="{'margin-left': '.11em'}"></button> -
trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
r84d0fbb rbdd6491 24 24 25 25 constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService, 26 private locationService 26 private locationService: LocationService) { 27 27 this.planner = new Planner(); 28 28 this.planners = []; … … 50 50 this.locationService.getLocationsForPlanner(this.id).subscribe( 51 51 data => { 52 52 this.locations = data; 53 53 } 54 54 ); 55 56 55 } 56 57 57 onSubmit() { 58 58 this.updatePlanner(); … … 77 77 } 78 78 79 onClickBack() {79 onClickBack() { 80 80 this.router.navigate(['planners']); 81 81 } 82 83 onClickRemoveLocation(id : number){ 84 85 } 82 86 } -
trip-planner-front/src/app/planner/planner.component.html
r84d0fbb rbdd6491 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"> 1 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" 2 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 2 3 3 4 <p-toast></p-toast> 4 <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button> 5 6 7 <nav class="navbar navbar-light bg-light justify-content-between"> 8 <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button> 9 <form class="form-inline"> 10 <span>Hello, {{userDisplayName}}</span> 11 <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onClickLogout()">Log out</button> 12 </form> 13 </nav> 14 15 5 16 <br> 6 17 <br> 7 18 <p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true"> 8 19 9 20 <ng-template pTemplate="body" let-planner> 10 <td > 11 <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow"> 12 <ng-template pTemplate="header"> 13 </ng-template> 14 <p>{{planner.description}}</p> 15 <ng-template pTemplate="footer"> 16 <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button> 17 <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" label="Delete" [style]="{'margin-left': '.5em'}"></button> 18 </ng-template> 19 </p-card> 20 </td> 21 <td> 22 <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" 23 styleClass="p-card-shadow"> 24 <ng-template pTemplate="header"> 25 </ng-template> 26 <p>{{planner.description}}</p> 27 <ng-template pTemplate="footer"> 28 <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" 29 (click)="onClickEditPlannerGet(planner.id)"></button> 30 <button pButton pRipple type="button" icon="pi pi-times" 31 class="p-button-rounded p-button-danger p-button-outlined" label="Delete" 32 [style]="{'margin-left': '.5em'}" (click)="onDeletePlanner(planner.id)"></button> 33 </ng-template> 34 </p-card> 35 </td> 21 36 </ng-template> 22 37 </p-table> 23 24 -
trip-planner-front/src/app/planner/planner.component.ts
r84d0fbb rbdd6491 8 8 import { MessageService, PrimeNGConfig } from 'primeng/api'; 9 9 import { UserDto } from '../_models/dto/userDto'; 10 import { UserService } from '../_services/user.service';11 10 12 11 … … 23 22 ref: DynamicDialogRef; 24 23 user: UserDto; 24 userDisplayName = ''; 25 status = ''; 25 26 26 27 constructor(private plannerService: PlannerService, private router: Router, 27 private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService, 28 private userService : UserService) { 28 private dialogService: DialogService, private primengConfig: PrimeNGConfig, private messageService: MessageService) { 29 29 this.planners = []; 30 30 this.plannerDto = new PlannerDto(); … … 36 36 37 37 this.primengConfig.ripple = true; 38 38 let name1: string = sessionStorage.getItem("username") as string; 39 this.userDisplayName = name1; 39 40 this.plannerService.getAllPlanners().subscribe( 40 41 data => { 41 42 this.planners = data; 42 localStorage.getItem("token");43 43 } 44 ); 44 ); 45 45 } 46 46 … … 61 61 baseZIndex: 10000 62 62 }); 63 this.ref.onClose.subscribe((planner: Planner) => { 64 console.log("NOVOKREIRANIOT NAME NA PLANNER: " + planner.name); 65 this.plannerService.postInitialPlanner(planner).subscribe( 66 data=>{ 67 console.log(data); 68 }, 69 error => console.log('oops', error) 70 ); 71 this.messageService.add({ severity: 'success', summary: 'The planner: ' + planner.name + ' has been created.' }); 63 this.ref.onClose.subscribe((plannerDto: PlannerDto) => { 64 if (plannerDto) { 65 console.log("NOVOKREIRANIOT NAME NA PLANNER: " + plannerDto.name); 66 this.plannerService.postInitialPlanner(plannerDto).subscribe( 67 data => { 68 console.log(data); 69 }, 70 error => console.log('oops', error) 71 ); 72 this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' }); 73 } 74 72 75 }); 73 76 74 77 } 75 78 79 ngOnDestroy() { 80 if (this.ref) { 81 this.ref.close(); 82 } 83 } 84 85 onClickLogout() { 86 sessionStorage.removeItem("token"); 87 console.log("SESSION HAS ENDED, THE USER IS LOGGED OUT" + sessionStorage.getItem("token")); 88 this.router.navigate(['']); 89 } 90 91 onDeletePlanner(id: number) { 92 console.log("DELETE KOCHE: " + id); 93 this.plannerService.deletePlannerById(id).subscribe( 94 (data) => { 95 console.log(data); 96 }, 97 (error) => console.log('error', error) 98 ); 99 window.location.reload(); 100 } 76 101 }
Note:
See TracChangeset
for help on using the changeset viewer.