Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -16,12 +16,17 @@
     }
 
-    postInitialPlanner(plannerDto: PlannerDto): Observable<Object>{     
+    postInitialPlanner(planner: Planner, locationList: Location[]): Observable<Object>{     
         let url = "http://localhost:8080/api/planner/new";
-        return this.httpClient.post<Planner>(url, plannerDto);
+        return this.httpClient.post<Planner>(url, planner);
     }
 
-    updatePlanner(id: number):Observable<Planner>{    
+    updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{    
     let url = "http://localhost:8080/api/edit/planner/" + id;
-    return this.httpClient.put<Planner>(url, null);
+    return this.httpClient.put<Planner>(url, plannerDto);
+    }
+
+    getPlannerById(id:number):Observable<Planner>{
+        let url = "http://localhost:8080/api/planner/" + id;
+        return this.httpClient.get<Planner>(url);
     }
 }
Index: trip-planner-front/src/app/app-routing.module.ts
===================================================================
--- trip-planner-front/src/app/app-routing.module.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/app-routing.module.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { LocationComponent } from './location/location.component';
 import { LocationsFormComponent } from './locations-form/locations-form.component';
 import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
@@ -8,5 +9,6 @@
   {path: 'planners', component: PlannerComponent},
   {path: 'form', component: LocationsFormComponent},
-  {path: 'edit/planner/:id', component: EditPlannerComponent}
+  {path: 'edit/planner/:id', component: EditPlannerComponent},
+  {path: 'locations', component: LocationComponent}
 ];
 
Index: trip-planner-front/src/app/app.component.html
===================================================================
--- trip-planner-front/src/app/app.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/app.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -1,3 +1,2 @@
-
   <router-outlet></router-outlet>
 
Index: trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html
===================================================================
--- trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -4,9 +4,9 @@
     <p>Planner name</p>
     <mat-form-field appearance="fill">
-      <input matInput required   type="text" [(ngModel)]="plannerDto.name" name="name" placeholder="Planner name">
+      <input matInput required   type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
     </mat-form-field>
     <p>Planner description</p>
     <mat-form-field appearance="fill">
-      <textarea matInput required name="description" [(ngModel)]="plannerDto.description" type="text" placeholder="Planner description"></textarea>
+      <textarea matInput required name="description" [(ngModel)]="planner.description" type="text" placeholder="Planner description"></textarea>
     </mat-form-field>
   </div>
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -40,5 +40,5 @@
   onFormSubmitPlanner(form: NgForm){
    console.log(this.planner);
-      this.plannerService.postInitialPlanner(this.plannerDto).subscribe(
+      this.plannerService.postInitialPlanner(this.planner, this.locations).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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/location/location.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -1,9 +1,27 @@
-<div *ngFor="let category of categories">
-  {{category.name}}
-  </div>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
-  <hr>
+<h3>Here are all locations</h3>
 
-  <div *ngFor="let companion of companions">
-    {{companion.type}}
-  </div>
+<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>
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/location/location.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -16,24 +16,10 @@
 export class LocationComponent implements OnInit {
 
-  categories: Category[];
-  companions: Companion[];
-  constructor(private categoryService: CategoryService, private companionService : CompanionService) {
-    this.categories = [];
-    this.companions = [];
+  constructor() {
+    
    }
    
   ngOnInit(): void {
-    this.categoryService.getAllCategories().subscribe(
-      data => {
-        this.categories = data;
-        console.log(data);
-      }
-    );
-
-    this.companionService.getAllCompanions().subscribe(
-      data => {
-        this.companions = data;
-      }
-    );
+   
   }
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -13,21 +13,4 @@
   <br>
   <br>
-  <!--
-  <mat-form-field class="example-full-width" appearance="fill">
-    <mat-label>Please select a place</mat-label>
-    <input type="text"
-           placeholder="Pick one"
-           aria-label="Place"
-           matInput
-           [formControl]="myControl"
-           [matAutocomplete]="auto">
-    <mat-autocomplete autoActiveFirstOption  #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
-        {{option.name}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-  -->
-
 
   <div *ngIf="cityOption">
@@ -40,5 +23,4 @@
     </mat-form-field>
   </div>
-
 
   <div *ngIf="regionOption">
Index: trip-planner-front/src/app/locations-form/locations-form.component.ts
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -16,4 +16,5 @@
 import { Region } from '../_models/region';
 import { RegionService } from '../_services/region.service';
+import { Router } from '@angular/router';
 
 @Component({
@@ -47,5 +48,5 @@
   constructor(private cityService : CityService, private regionService: RegionService,
               private companionService : CompanionService, private categoryService : CategoryService,
-              private locationService: LocationService){
+              private locationService: LocationService, private router : Router){
     this.filteredOptions = new Observable<City[]>();
     this.cities = [];
@@ -99,55 +100,59 @@
   
   filter(val: string): Observable<City[]> {
-  // call the service which makes the http-request
+    // call the service which makes the http-request
     return this.cityService.getAllCities()
-    .pipe(
-    map(response => response.filter(option => { 
-      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
-    }))
-  )
-  
- }  
+      .pipe(
+        map(response => response.filter(option => {
+          return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
+        }))
+      )
+
+  }
 
  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);
+   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);
  }
 
 
- createMyPlanner(){
-   this.categoryIds = this.chipsSeletion.join(',');
-   console.log(this.categoryIds);
-   
-   if(this.cityOption){
-    this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
-      result => {
-        console.log(result);
-      }
-    );
-   }else if(this.regionOption){
- 
-    this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
-      result => {
-        console.log(result);
-      }
-    );
-   }
- }
- 
- chooseCityOption(){
-   this.cityOption = true;
-   this.regionOption = false;
- }
+  createMyPlanner() {
+    this.categoryIds = this.chipsSeletion.join(',');
+    console.log(this.categoryIds);
+
+    if (this.cityOption) {
+      this.locationService.getLocationsFromCity(this.cityId, 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']);
+        }
+      );
+    }
+
+
+
+  }
+
+  chooseCityOption() {
+    this.cityOption = true;
+    this.regionOption = false;
+  }
   chooseRegionOption() {
     this.regionOption = true;
@@ -155,8 +160,8 @@
   }
 
-  constraintMaxNumberDays(){
-     if(this.value > this.max){
-       this.value = this.max;
-     }
+  constraintMaxNumberDays() {
+    if (this.value > this.max) {
+      this.value = this.max;
+    }
   }
 
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -3,13 +3,13 @@
 <h3>Here you can edit your planner</h3>
 
-<form>
+<form [formGroup] = "form" (ngSubmit)="onSubmit()">
     <div class="form-gorup">
         <p>Planner name</p>
         <mat-form-field appearance="fill">
-          <input matInput required   type="text" name="name"  placeholder="Planner name">
+          <input matInput required type="text" formControlName="name"  placeholder="Planner name">
         </mat-form-field>
         <p>Planner description</p>
         <mat-form-field appearance="fill">
-          <textarea matInput required name="description"  type="text" placeholder="Planner description"></textarea>
+          <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
         </mat-form-field>
     </div>
@@ -25,6 +25,5 @@
                         </thead>
                         <tbody>
-                        <tr>
-                            
+                        <tr>                           
                             <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
                                  Add locations
@@ -38,5 +37,5 @@
         </div>
     </div>
-    <button mat-raised-button color="primary" (click)="onClickSavePlanner()">
+    <button mat-raised-button color="primary" >
         <mat-icon>edit</mat-icon> Save
       </button>
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PlannerDto } from 'src/app/_models/dto/plannerDto';
 import { Planner } from 'src/app/_models/planner';
+import { PlannerService } from 'src/app/_services/planner.service';
 
 @Component({
@@ -11,20 +14,57 @@
 
   planner: Planner;
+  planners: Planner[];
+  form: FormGroup;
+  plannerDto: PlannerDto;
+  id: number;
 
 
-  constructor(private router: Router) { 
+  constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) { 
     this.planner = new Planner();
+    this.planners = [];
+    this.form = fb.group({
+      title: fb.control('initial value', Validators.required)
+  });
+    this.plannerDto = new PlannerDto();
+    this.id = 1;
   }
 
   ngOnInit(): void {
+    this.id = this.route.snapshot.params['id'];
+
+    this.form = this.fb.group({
+        name: [''],
+        description: [''],
+        locationList: []
+    });
+
+    this.plannerService.getPlannerById(this.id)
+    .pipe()
+    .subscribe(x => this.form.patchValue(x));
   }
 
 
-  onClickSavePlanner(){
-      this.router.navigate(['planners']);
+  onSubmit(){
+    this.updatePlanner();
+      
   }
 
-  onClickAddLocation(){
+  onClickAddLocation()
+  {
     this.router.navigate(['form']);
   }
+
+  private updatePlanner() {
+    this.plannerService.updatePlanner(this.id, this.form.value)
+        .pipe()
+        .subscribe({
+            next: () => {
+              this.router.navigate(['planners']);
+            },
+            error: error => {
+                console.log("error");
+            }
+        });
 }
+  
+}
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -11,8 +11,7 @@
         </mat-card-content>
         <mat-card-actions class="mt-auto">
-          <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
+          <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
             <mat-icon>edit</mat-icon> Edit
-          </button>
-          
+          </button>        
           <button mat-raised-button color="accent">
             <mat-icon>remove_red_eye</mat-icon>Details
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -5,4 +5,6 @@
 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
 import { Router } from '@angular/router';
+import { PlannerDto } from '../_models/dto/plannerDto';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 
@@ -15,9 +17,16 @@
 
   planners: Planner[];
-  plannerId: number;
+  plannerDto: PlannerDto;
+  editForm: FormGroup;
 
-  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 
+
+
+  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router,
+    private fb : FormBuilder) { 
     this.planners = [];
-    this.plannerId = 1;
+    this.plannerDto = new PlannerDto();
+    this.editForm = fb.group({
+      title: fb.control('initial value', Validators.required)
+  });
   };
  
@@ -37,10 +46,15 @@
   }
   
-  onClickEditPlanner(id: number){
+  onClickEditPlannerGet(id: number){
     console.log(id);
-   
-         
-          this.router.navigate(['edit/planner/', this.plannerId])
+        this.plannerService.getPlannerById(id).subscribe(
+            data => {
+              
+              this.router.navigate(['edit/planner/', id])
+            }
+     );
     
   }
+
+  
 }
Index: trip-planner/pom.xml
===================================================================
--- trip-planner/pom.xml	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner/pom.xml	(revision 6c1585fa4f148668e18010744f1c91faa3165d6b)
@@ -80,9 +80,4 @@
             <version>3.0.3</version>
         </dependency>
-        <dependency>
-            <groupId>org.apache.httpcomponents</groupId>
-            <artifactId>httpclient</artifactId>
-            <scope>test</scope>
-        </dependency>
     </dependencies>