Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -0,0 +1,15 @@
+<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 mat-button (click)="onCancelClick()">Cancel</button>
Index: trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts
===================================================================
--- trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/location/add-location-to-planner-panel/add-location-to-planner-panel.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+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';
+
+@Component({
+  selector: 'app-add-location-to-planner-panel',
+  templateUrl: './add-location-to-planner-panel.component.html',
+  styleUrls: ['./add-location-to-planner-panel.component.css']
+})
+export class AddLocationToPlannerPanelComponent implements OnInit {
+
+  planners: Planner[];
+  location: Location;
+  plannerId: number;
+  locationId: number;
+  plannerLocationDto: PlannerLocationDto;
+
+  constructor(private dialogRef: MatDialogRef<AddLocationToPlannerPanelComponent>, private plannerService: PlannerService,
+    private locationService: LocationService, private route: ActivatedRoute) {
+    this.planners = [];
+    this.location = new Location;
+    this.plannerId = 1;
+    this.locationId = 1;
+    this.plannerLocationDto = new PlannerLocationDto();
+  }
+
+  ngOnInit(): void {
+    this.plannerService.getAllPlanners().subscribe(
+      data => {
+        this.planners = data;
+      }
+    );
+
+
+    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);
+      }
+    );
+  }
+
+}
Index: trip-planner-front/src/app/location/location.component.html
===================================================================
--- trip-planner-front/src/app/location/location.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/location/location.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -1,27 +1,23 @@
-<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>
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/location/location.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -1,11 +1,10 @@
-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,10 +15,68 @@
 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}});
+  }
+
 }
