Changeset e29cc2e for trip-planner-front/src/app/location

Timestamp:

11/25/21 22:08:24 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

8d391a1

Parents:

59329aa

Message:

primeNG components

Location:

trip-planner-front/src/app/location

Files:

• add-location-to-planner-panel/add-location-to-planner-panel.component.html (modified) (1 diff)
• add-location-to-planner-panel/add-location-to-planner-panel.component.ts (modified) (2 diffs)
• location-details/location-details.component.html (modified) (1 diff)
• location-details/location-details.component.ts (modified) (3 diffs)
• location.component.html (modified) (2 diffs)
• location.component.ts (modified) (4 diffs)

trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html

@@ -1 @@
-<form  >
-    <h1 mat-dialog-title>Please select a planner where u want your location to be saved</h1>
-   
-<table class="table" >
-  <tbody>
-    <tr *ngFor="let planner of planners">
-      <td>{{planner.name}}</td>
-      <td><button mat-raised-button color="primary" (click)="onFormSavePlanner(planner.id)">Save</button></td>
-    </tr>
-   
-  </tbody>
-</table>
-  </form>
-  
-  <button type="button"  mat-button (click)="onCancelClick()">Cancel</button>
+<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
+    <ng-template pTemplate="header">
+        <tr>
+            <th pSortableColumn="name">Name <p-sortIcon field="vin"></p-sortIcon>
+            </th>
+            <th style="width:4em"></th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-planner>
+        <tr>
+            <td>{{planner.name}}</td>
+
+            <td>
+                <button pButton pRipple type="button" icon="pi pi-heart"
+                    class="p-button-rounded p-button-help p-button-text" (click)="selectPlanner(planner)"></button>
+            </td>
+        </tr>
+    </ng-template>
+</p-table>
+

trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
-import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
-import { Location } from 'src/app/_models/location';
 import { Planner } from 'src/app/_models/planner';
-import { LocationService } from 'src/app/_services/location.service';
 import { PlannerService } from 'src/app/_services/planner.service';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+
+
 
 @Component({
@@ -16 +16 @@
 
   planners: Planner[];
-  location: Location;
-  plannerId: number;
-  locationId: number;
-  plannerLocationDto: PlannerLocationDto;
-  locationsInPlanner: Location[];
 
 
-  constructor(private dialogRef: MatDialogRef<AddLocationToPlannerPanelComponent>, private plannerService: PlannerService,
-    private locationService: LocationService, private route: ActivatedRoute) {
+
+  constructor(private plannerService: PlannerService,
+    private route: ActivatedRoute, private ref: DynamicDialogRef) {
     this.planners = [];
-    this.location = new Location;
-    this.plannerId = 1;
-    this.locationId = 1;
-    this.plannerLocationDto = new PlannerLocationDto();
-    this.locationsInPlanner = [];
   }
 
   ngOnInit(): void {
+
     this.plannerService.getAllPlanners().subscribe(
-      data => {
-        this.planners = data;
+      planner => {
+        this.planners = planner;
       }
     );
+  }
+
+  selectPlanner(planner: Planner) {
+    this.ref.close(planner);
+  }
 
 
-    this.route.queryParams
-      .subscribe(params => {
-        this.locationId = params.locationId;
-      }
-      );
-  }
-
-  onCancelClick(): void {
-    this.dialogRef.close();
-
-  }
-
-  onFormSavePlanner(plannerId: number) {
-    console.log("PLANNER ID: " + plannerId);
-    console.log("LOC ID "+ this.locationId);
-    this.plannerLocationDto.locationId = this.locationId;
-    this.plannerLocationDto.plannerId = plannerId;
-    /*
-    this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
-      data => {
-        console.log(data);
-      }
-    );
-    */
-
-   // window.location.reload();
-    }
 
 }

trip-planner-front/src/app/location/location-details/location-details.component.html

@@ -7 +7 @@
     <div class="card">
         <h5>More photos</h5>
-        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}" [numVisible]="5"
-            [circular]="true" [showItemNavigators]="true">
+        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}"
+            [numVisible]="5" [circular]="true" [showItemNavigators]="true">
             <ng-template pTemplate="item" let-image>
-                <img src="data:image/png;base64,{{image.content}}" style="width: 100%; height: 350px; display: block;" />
+                <img src="data:image/png;base64,{{image.content}}"
+                    style="width: 100%; height: 350px; display: block;" />
             </ng-template>
             <ng-template pTemplate="thumbnail" let-image>
                 <div class="p-grid p-nogutter p-justify-center">
-                    <img src="data:image/png;base64,{{image.content}}" style="width: 50px; height:50px; display: block;" />
+                    <img src="data:image/png;base64,{{image.content}}"
+                        style=" height:50px; display: block;" />
                 </div>
             </ng-template>
         </p-galleria>
     </div>
+

trip-planner-front/src/app/location/location-details/location-details.component.ts

@@ -1 @@
-import { Component, OnInit , ViewEncapsulation} from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Images } from 'src/app/_models/images';
@@ -16 +16 @@
   locationDetails: Location;
   images: Images[];
-  responsiveOptions;
 
-  constructor(private route: ActivatedRoute, private router: Router, private locationService : LocationService,
-              private imagesService : ImagesService) {
+  constructor(private route: ActivatedRoute, private router: Router, private locationService: LocationService,
+    private imagesService: ImagesService) {
     this.locationId = 1;
     this.locationDetails = new Location();
     this.images = [];
+  }
 
-    this.responsiveOptions = [
-      {
+  responsiveOptions:any[] = [
+    {
         breakpoint: '1024px',
         numVisible: 5
@@ -37 +37 @@
         numVisible: 1
     }
-  ];
-   }
-
-
+];
   ngOnInit(): void {
     this.route.queryParams
-    .subscribe(params => {     
-      this.locationId = params.id; 
-    });
+      .subscribe(params => {
+        this.locationId = params.id;
+      });
 
     this.locationService.getLocation(this.locationId).subscribe(
       data => {
-          this.locationDetails = data;
+        this.locationDetails = data;
       }
     );
-    
+
     this.imagesService.getAllImagesForLocation(this.locationId).subscribe(
       image => {
-         this.images = image;
+        this.images = image;
       }
-   );
+    );
   }
 
-  
+
 }

trip-planner-front/src/app/location/location.component.html

@@ -1 +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">
-
+  <p-toast></p-toast>
 <h3>Here are all locations</h3>
-
-<table class="table" >
+<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning" label="Back to my Planners" (click)="onClickBackToMyPlanners()"></button>
+<table class="table">
   <thead>
     <tr>
@@ -17 +17 @@
       <td>{{location.id}}</td>
       <td>{{location.name}}</td>
-      <td><button mat-raised-button color="primary" (click)="openDialogSave(location.id)">Add to my planner</button></td>
-      <td><button mat-raised-button color="primary" (click)="onClickSeeDetails(location.id)">See details</button></td>
-    </tr>  
+      <td><button type="button" (click)="show(location)" pButton icon="pi pi-info-circle"
+          label="Add to my planner"></button></td>
+      <td><button type="button" color="primary" pButton icon="pi pi-info-circle"
+          (click)="onClickSeeDetails(location.id)" label="See details"></button></td>
+    </tr>
   </tbody>
 </table>
+

trip-planner-front/src/app/location/location.component.ts

@@ -1 @@
-import { Component, Input, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { MessageService, PrimeNGConfig } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Planner } from '../_models/planner';
 import { LocationService } from '../_services/location.service';
 import { AddLocationToPlannerPanelComponent } from './add-location-to-planner-panel/add-location-to-planner-panel.component';
+import { Location } from '../_models/location';
+import { PlannerLocationDto } from '../_models/dto/plannerLocationDto';
+
 
 @Component({
   selector: 'app-location',
   templateUrl: './location.component.html',
-  styleUrls: ['./location.component.css']
+  styleUrls: ['./location.component.css'],
+  providers: [DialogService, MessageService]
 })
 export class LocationComponent implements OnInit {
 
-  form: FormGroup;
   categoryIds: string;
   cityId: number;
@@ -23 +28 @@
   regionId: number;
   locationId: number;
+  plannerLocationDto: PlannerLocationDto;
+  ref: DynamicDialogRef;
 
-  constructor(private fb: FormBuilder, private route: ActivatedRoute, private locationService: LocationService,
-    private router: Router, private dialog: MatDialog) {
-    this.form = fb.group({
-      title: fb.control('initial value', Validators.required)
-    });
+
+
+  constructor(private route: ActivatedRoute, private locationService: LocationService,
+    private router: Router, private dialogService: DialogService, private messageService: MessageService) {
     this.cityId = 1;
     this.companionId = 1;
@@ -36 +42 @@
     this.regionId = 1;
     this.locationId = 1;
+    this.ref = new DynamicDialogRef;
+    this.plannerLocationDto = new PlannerLocationDto();
+
   }
 
@@ -71 +80 @@
   }
 
-  openDialogSave(locationId){
-   // console.log(locationId);
-      const dialogRef = this.dialog.open(AddLocationToPlannerPanelComponent, {
-        width: '250px',
-        data: {}
-      });
-      this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds, locationId: locationId}});
-      
+  onClickSeeDetails(id: number) {
+    this.router.navigate(['location'], { queryParams: { id: id } });
   }
 
-  onClickSeeDetails(id: number){
-    this.router.navigate(['location'], {queryParams: {id: id}});
+  show(location: Location) {
+    this.ref = this.dialogService.open(AddLocationToPlannerPanelComponent, {
+      header: 'Choose a Planner',
+      width: '70%',
+      contentStyle: { "max-height": "500px", "overflow": "auto" },
+      baseZIndex: 10000
+    });
+
+    this.ref.onClose.subscribe((planner: Planner) => {
+
+      this.plannerLocationDto.locationId = location.id;
+      this.plannerLocationDto.plannerId = planner.id;
+      console.log("LOC ID: " + this.plannerLocationDto.locationId);
+      console.log("PLANNER ID: " + this.plannerLocationDto.plannerId);
+      this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
+        data => {
+          console.log(data);
+        }
+      );
+      if (planner) {
+        this.messageService.add({ severity: 'success', summary: 'Location ' + location.name +  ' has been added to planner: ' , detail: planner.name });
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.ref) {
+      this.ref.close();
+    }
+  }
+
+  onClickBackToMyPlanners(){
+    this.router.navigate(['planners']);
   }
 }