Index: trip-planner-front/src/app/_models/dto/plannerDto.ts
===================================================================
--- trip-planner-front/src/app/_models/dto/plannerDto.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/_models/dto/plannerDto.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -1,11 +1,13 @@
+import { Location } from "../location";
+
 export class PlannerDto{
     name: string;
     description: string;
-    locationList: any[];
+
 
     constructor(){
         this.name = '';
         this.description = '';
-        this.locationList = [];
+      
     }
 }
Index: trip-planner-front/src/app/_models/dto/plannerLocationDto.ts
===================================================================
--- trip-planner-front/src/app/_models/dto/plannerLocationDto.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/_models/dto/plannerLocationDto.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -0,0 +1,10 @@
+
+export class PlannerLocationDto {
+    locationId: number;
+    plannerId: number;
+
+    constructor(){
+     this.locationId = 1;
+     this.plannerId = 1;
+    }
+}
Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -2,4 +2,6 @@
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
+import { PlannerLocationDto } from "../_models/dto/plannerLocationDto";
+import { Location } from "../_models/location";
 
 @Injectable({
@@ -9,5 +11,5 @@
     constructor(private httpClient : HttpClient){}
 
-    getLocationsFromCity(cityId: number, companionId: number, lengthOfStay: number, categoryIds: string): Observable<Object[]>{
+    getLocationsFromCity(cityId: number, companionId: number, lengthOfStay: number, categoryIds: string): Observable<Location[]>{
         let url = "http://localhost:8080/api/city/locations";
         return this.httpClient.get<Location[]>(url + '?cityId=' + cityId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
@@ -18,3 +20,13 @@
         return this.httpClient.get<Location[]>(url + '?regionId=' + regionId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
     }
+
+    postLocationToPlanner(plannerLocationDto : PlannerLocationDto) : Observable<Location>{
+        let url = "http://localhost:8080/api/add-location";
+        return this.httpClient.put<Location>(url, plannerLocationDto);
+    }
+
+    getLocationsFroPlanner(plannerId : number) : Observable<Location[]>{
+        let url = "http://localhost:8080/api/planner/locations";
+        return this.httpClient.get<Location[]>(url + '?plannerId=' + plannerId);
+    }
 }
Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -9,6 +9,8 @@
 })
 export class PlannerService{
+    
     constructor(private httpClient: HttpClient){
     }
+
     getAllPlanners():Observable<Planner[]>{
         let url = "http://localhost:8080/api/planners";
@@ -16,5 +18,5 @@
     }
 
-    postInitialPlanner(planner: Planner, locationList: Location[]): Observable<Object>{     
+    postInitialPlanner(planner: Planner): Observable<Object>{     
         let url = "http://localhost:8080/api/planner/new";
         return this.httpClient.post<Planner>(url, planner);
@@ -30,3 +32,5 @@
         return this.httpClient.get<Planner>(url);
     }
+
+
 }
Index: trip-planner-front/src/app/app.component.ts
===================================================================
--- trip-planner-front/src/app/app.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/app.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -13,3 +13,5 @@
   ngOnInit(): void {
   }
+
+ 
 }
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/app.module.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -28,4 +28,5 @@
 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
 import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
+import { AddLocationToPlannerPanelComponent } from './location/add-location-to-planner-panel/add-location-to-planner-panel.component';
 
 @NgModule({
@@ -37,5 +38,6 @@
     LocationsFormComponent,
     EditPlannerComponent,
-    DetailPlannerComponent
+    DetailPlannerComponent,
+    AddLocationToPlannerPanelComponent
     ],
   imports: [
Index: trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts
===================================================================
--- trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -18,12 +18,10 @@
   planner: Planner;
   planners: Planner[];
-  locations : Location[];
   plannerDto: PlannerDto;
 
-  constructor(public dialogRef: MatDialogRef<CreateInitialPlannerComponent>,
+  constructor(private dialogRef: MatDialogRef<CreateInitialPlannerComponent>,
               private plannerService : PlannerService, private router : Router) {
                 this.planner = new Planner;
                 this.planners = [];
-                this.locations = [];
                 this.plannerDto = new PlannerDto();
               }
@@ -40,5 +38,5 @@
   onFormSubmitPlanner(form: NgForm){
    console.log(this.planner);
-      this.plannerService.postInitialPlanner(this.planner, this.locations).subscribe(
+      this.plannerService.postInitialPlanner(this.planner).subscribe(
         data=>{
           console.log(data);
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}});
+  }
+
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -1,62 +1,72 @@
-<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">
 
-<div class="example-form">
 
-  <div class="form-group">
-    <button class="btn" (click)="chooseCityOption()" >
-      City
-    </button>
-    <button class="btn" (click)="chooseRegionOption()">
-      Region
-    </button>
-  </div>
-  <br>
-  <br>
+    <div class="example-form">
 
-  <div *ngIf="cityOption">
-    <label><h5>Please select a city</h5></label>
-    <mat-form-field appearance="fill" class="example-full-width">
-      <mat-label>Please select a city</mat-label>
-      <mat-select [(ngModel)]="cityId" placeholder="Select city">
-        <mat-option [value]="city.id" *ngFor="let city of cities" [value]="city.id"> {{city.name}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
+      <div class="form-group">
+        <button class="btn" (click)="chooseCityOption()">
+          City
+        </button>
+        <button class="btn" (click)="chooseRegionOption()">
+          Region
+        </button>
+      </div>
+      <br>
+      <br>
+  
+      <div *ngIf="cityOption">
+        <label>
+          <h5>Please select a city</h5>
+        </label>
+        <mat-form-field appearance="fill" class="example-full-width">
+          <mat-label>Please select a city</mat-label>
+          <mat-select [(ngModel)]="cityId" placeholder="Select city" name="city">
+            <mat-option [value]="city.id" *ngFor="let city of cities" > {{city.name}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+  
+      <div *ngIf="regionOption">
+        <label>
+          <h5>Please select a region</h5>
+        </label>
+        <mat-form-field appearance="fill" class="example-full-width">
+          <mat-label>Please select a region</mat-label>
+          <mat-select [(ngModel)]="regionId" placeholder="Select region" name="region">
+            <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+  
+      <h5>Who are you travelling with? </h5>
+      <mat-form-field appearance="fill" class="example-full-width">
+        <mat-label>Please select a companion</mat-label>
+        <mat-select [(ngModel)]="companionId" placeholder="Please select a companion" name="company">
+          <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+  
+      <h5>How many days are you willing to stay ?</h5>
+      <mat-form-field class="example-full-width" appearance="fill">
+        <mat-label>Please select a number of days</mat-label>
+        <input matInput placeholder="No. Days" type="number" min="1" value="0" max="30" [constraintMaxNumberDays()]
+          [(ngModel)]="lengthOfStay" name="nomdays" [value] = "lengthOfStay">
+      </mat-form-field>
+  
+      <h5>What are your priorities to visit?</h5>
+      <mat-chip-list selectable multiple>
+        <mat-chip #c="matChip" selected *ngFor="let category of categories" (click)="toggleSelection(c, category)"
+          [ngClass]="{'yellow' : toggle}" name="chips">
+          <mat-icon *ngIf="!c.selected">check</mat-icon>
+          {{category.name}}
+        </mat-chip>
+      </mat-chip-list>
+      <br>
+      <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
+  
+    </div>
 
-  <div *ngIf="regionOption">
-    <label><h5>Please select a region</h5></label>
-    <mat-form-field appearance="fill" class="example-full-width">
-      <mat-label>Please select a region</mat-label>
-      <mat-select [(ngModel)]="regionId" placeholder="Select region">
-        <mat-option [value]="region.id" *ngFor="let region of regions" [value]="region.id"> {{region.name}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-  </div>
 
-  <h5>Who are you travelling with?  </h5>
-  <mat-form-field appearance="fill" class="example-full-width">
-    <mat-label>Please select a companion</mat-label>
-    <mat-select [(ngModel)]="companionId" placeholder="Please select a companion">
-      <mat-option [value]="companion.id" *ngFor="let companion of companions">{{companion.type}}</mat-option>
-    </mat-select>
-  </mat-form-field>
-
-  <h5>How many days are you willing to stay ?</h5>
-  <mat-form-field class="example-full-width" appearance="fill">
-    <mat-label>Please select a number of days</mat-label>
-    <input matInput placeholder="No. Days"  type="number" min="1" value="0" max="30" [constraintMaxNumberDays()] [(ngModel)]="lengthOfStay">
-  </mat-form-field>
-
-   <h5>What are your priorities to visit?</h5> 
-  <mat-chip-list  selectable multiple >
-    <mat-chip #c="matChip" selected *ngFor="let category of categories" 
-    (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
-  <mat-icon *ngIf="!c.selected" >check</mat-icon>
-  {{category.name}}
-  </mat-chip>
-  </mat-chip-list>
-  <br>
-  <button mat-raised-button color="primary" (click)="createMyPlanner()">Create my planner</button>
-
-</div>
   
Index: trip-planner-front/src/app/locations-form/locations-form.component.ts
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -1,20 +1,20 @@
-import { Component, Injectable, OnInit } from '@angular/core';
-import { FormControl, NgForm } from '@angular/forms';
-import {map, startWith, switchMap} from 'rxjs/operators';
-import {forkJoin, Observable} from 'rxjs';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
+import { map, startWith, switchMap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 import { CityService } from '../_services/city.service';
 import { City } from '../_models/city';
-import { Country } from '../_models/country';
-import { CountryService } from '../_services/country.service';
 import { Companion } from '../_models/companion';
 import { CompanionService } from '../_services/companion.service';
 import { Category } from '../_models/category';
 import { CategoryService } from '../_services/cateogry.service';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import { MatChip } from '@angular/material/chips';
 import { LocationService } from '../_services/location.service';
 import { Region } from '../_models/region';
 import { RegionService } from '../_services/region.service';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Location } from '../_models/location';
+
+
 
 @Component({
@@ -41,12 +41,14 @@
   cityOption: boolean = false;
   regionOption: boolean = false;
-  value:number;
+  value: number;
   max: number;
   toggle = true;
   status = 'Enable';
+  proba: any[];
 
-  constructor(private cityService : CityService, private regionService: RegionService,
-              private companionService : CompanionService, private categoryService : CategoryService,
-              private locationService: LocationService, private router : Router){
+
+  constructor(private cityService: CityService, private regionService: RegionService,
+    private companionService: CompanionService, private categoryService: CategoryService,
+    private locationService: LocationService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
     this.filteredOptions = new Observable<City[]>();
     this.cities = [];
@@ -63,14 +65,16 @@
     this.value = 0;
     this.max = 30;
+    this.proba = [];
   }
+
+  ngOnInit(): void {
   
-  ngOnInit() :void {
     this.filteredOptions = this.myControl.valueChanges
-    .pipe(
-      startWith(''),
-      switchMap(val => {
-        return this.filter(val || '')
-      })       
-    );
+      .pipe(
+        startWith(''),
+        switchMap(val => {
+          return this.filter(val || '')
+        })
+      );
 
     this.cityService.getAllCities().subscribe(
@@ -96,7 +100,8 @@
         this.companions = data;
       }
-    )
+    );
+
   }
-  
+
   filter(val: string): Observable<City[]> {
     // call the service which makes the http-request
@@ -107,22 +112,22 @@
         }))
       )
-
   }
 
- toggleSelection(chip: MatChip, category: Category){
-  chip.toggleSelected();
-  
-   if (this.chipsSeletion.length > 0) {
-     if (this.chipsSeletion.indexOf(category.id) <= -1) {
-       this.chipsSeletion.push(category.id);
-     } else {
-       const index = this.chipsSeletion.indexOf(category.id);
-       this.chipsSeletion.splice(index, 1);
-     }
-   } else {
-     this.chipsSeletion.push(category.id);
-   }
-   console.log(this.chipsSeletion);
- }
+  toggleSelection(chip: MatChip, category: Category) {
+    chip.toggleSelected();
+
+    if (this.chipsSeletion.length > 0) {
+      if (this.chipsSeletion.indexOf(category.id) <= -1) {
+        this.chipsSeletion.push(category.id);
+      } else {
+        const index = this.chipsSeletion.indexOf(category.id);
+        this.chipsSeletion.splice(index, 1);
+      }
+    } else {
+      this.chipsSeletion.push(category.id);
+    }
+    console.log(this.chipsSeletion);
+  }
+
 
 
@@ -135,18 +140,17 @@
         result => {
           console.log(result);
-          this.router.navigate(['locations']);
+          this.proba = result;
+          this.router.navigate(['locations'], {queryParams: {cityId: this.cityId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
         }
       );
-    } else if (this.regionOption) {
-      this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
-        result => {
-          console.log(result);
-          this.router.navigate(['locations']);
-        }
-      );
-    }
-
-
-
+    } else
+      if (this.regionOption) {
+        this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
+          result => {
+            console.log(result);
+            this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
+          }
+        );
+      }
   }
 
@@ -166,3 +170,4 @@
   }
 
+
 }
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -28,5 +28,10 @@
                             <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
                                  Add locations
-                              </button>
+                                 </button>
+                            </td>
+                        </tr>
+                        <tr *ngFor ="let location of locations">
+                            <td>
+                                {{location.name}}
                             </td>
                         </tr>
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -3,5 +3,7 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { PlannerDto } from 'src/app/_models/dto/plannerDto';
+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';
 
@@ -18,14 +20,17 @@
   plannerDto: PlannerDto;
   id: number;
+  locations: Location[];
 
 
-  constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) { 
+  constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
+    private locationService : LocationService) {
     this.planner = new Planner();
     this.planners = [];
     this.form = fb.group({
       title: fb.control('initial value', Validators.required)
-  });
+    });
     this.plannerDto = new PlannerDto();
     this.id = 1;
+    this.locations = [];
   }
 
@@ -34,22 +39,26 @@
 
     this.form = this.fb.group({
-        name: [''],
-        description: [''],
-        locationList: []
+      name: [''],
+      description: [''],
+      locationList: []
     });
 
     this.plannerService.getPlannerById(this.id)
-    .pipe()
-    .subscribe(x => this.form.patchValue(x));
+      .pipe()
+      .subscribe(x => this.form.patchValue(x));
+
+    this.locationService.getLocationsFroPlanner(this.id).subscribe(
+      data => {
+          this.locations = data;
+      }
+    );
+    }
+ 
+  onSubmit() {
+    this.updatePlanner();
+
   }
 
-
-  onSubmit(){
-    this.updatePlanner();
-      
-  }
-
-  onClickAddLocation()
-  {
+  onClickAddLocation() {
     this.router.navigate(['form']);
   }
@@ -57,14 +66,14 @@
   private updatePlanner() {
     this.plannerService.updatePlanner(this.id, this.form.value)
-        .pipe()
-        .subscribe({
-            next: () => {
-              this.router.navigate(['planners']);
-            },
-            error: error => {
-                console.log("error");
-            }
-        });
+      .pipe()
+      .subscribe({
+        next: () => {
+          this.router.navigate(['planners']);
+        },
+        error: error => {
+          console.log("error");
+        }
+      });
+  }
+
 }
-  
-}
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -22,5 +22,5 @@
 
 
-  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router,
+  constructor(private plannerService: PlannerService, private dialog: MatDialog, private router: Router,
     private fb : FormBuilder) { 
     this.planners = [];
@@ -49,7 +49,6 @@
     console.log(id);
         this.plannerService.getPlannerById(id).subscribe(
-            data => {
-              
-              this.router.navigate(['edit/planner/', id])
+            data => {          
+              this.router.navigate(['edit/planner/', id]);
             }
      );
Index: trip-planner-front/tsconfig.json
===================================================================
--- trip-planner-front/tsconfig.json	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
+++ trip-planner-front/tsconfig.json	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
@@ -20,5 +20,6 @@
       "es2018",
       "dom"
-    ]
+    ],
+    "noImplicitAny": false
   },
   "angularCompilerOptions": {
