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

Timestamp:

11/11/21 12:59:26 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

59329aa

Parents:

6c1585f

Message:

add location to planner

Location:

trip-planner-front/src/app/location

Files:

• add-location-to-planner-panel/add-location-to-planner-panel.component.css (added)
• add-location-to-planner-panel/add-location-to-planner-panel.component.html (added)
• add-location-to-planner-panel/add-location-to-planner-panel.component.ts (added)
• location.component.html (modified) (1 diff)
• location.component.ts (modified) (2 diffs)

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

@@ -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">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <h3>Here are all locations</h3>
 
-<div class="container">
-  <table mat-table  class="mat-elevation-z8">
-
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
-  
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> Location name </th>
-      <td mat-cell *matCellDef="let element">  </td>
-    </ng-container>
-  
-  
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element">  </td>
-    </ng-container>
-  
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</div>
+<table class="table" >
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Location name</th>
+      <th scope="col"> Add to my planner</th>
+      <th scope="col">See details </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let location of listLocations">
+      <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">See details</button></td>
+    </tr>  
+  </tbody>
+</table>

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

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-import { Category } from '../_models/category';
-import { City } from '../_models/city';
-import { Companion } from '../_models/companion';
-import { Country } from '../_models/country';
-import { CategoryService } from '../_services/cateogry.service';
-import { CityService } from '../_services/city.service';
-import { CompanionService } from '../_services/companion.service';
-import { CountryService } from '../_services/country.service';
+import { Route } from '@angular/compiler/src/core';
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '../_models/location';
+import { LocationService } from '../_services/location.service';
+import { AddLocationToPlannerPanelComponent } from './add-location-to-planner-panel/add-location-to-planner-panel.component';
 
 @Component({
@@ -16 +15 @@
 export class LocationComponent implements OnInit {
 
-  constructor() {
-    
-   }
-   
+  form: FormGroup;
+  categoryIds: string;
+  cityId: number;
+  companionId: number;
+  lengthOfStay: number;
+  listLocations: any[];
+  cityOption: boolean = false;
+  regionOption: boolean = false;
+  regionId: number;
+
+  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)
+    });
+    this.cityId = 1;
+    this.companionId = 1;
+    this.lengthOfStay = 1;
+    this.categoryIds = '';
+    this.listLocations = [];
+    this.regionId = 1;
+  }
+
   ngOnInit(): void {
-   
+
+    this.route.queryParams
+      .subscribe(params => {
+        console.log(params);
+        this.cityId = params.cityId;
+        this.regionId = params.regionId;
+        this.companionId = params.companionId;
+        this.lengthOfStay = params.lengthOfStay;
+        this.categoryIds = params.categoryIds;
+      }
+      );
+
+    if (this.route.snapshot.queryParams['cityId']) {
+      this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
+        result => {
+          console.log(result);
+          this.listLocations = result;
+        }
+      );
+    } else
+      if (this.route.snapshot.queryParams['regionId']) {
+        console.log("I am in region console");
+        this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
+          result => {
+            console.log(result);
+            this.listLocations = result;
+          }
+        );
+      }
+
   }
+
+  openDialogSave(locationId: number){
+    console.log(locationId);
+      const dialogRef = this.dialog.open(AddLocationToPlannerPanelComponent, {
+        width: '250px',
+        data: {}
+      });
+      this.router.navigate(['locations'], {queryParams: {locationId: locationId}});
+  }
+
 }