Index: trip-planner-front/src/app/_models/dto/plannerDto.ts
===================================================================
--- trip-planner-front/src/app/_models/dto/plannerDto.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/_models/dto/plannerDto.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,11 @@
+export class PlannerDto{
+    name: string;
+    description: string;
+    locationList: any[];
+
+    constructor(){
+        this.name = '';
+        this.description = '';
+        this.locationList = [];
+    }
+}
Index: trip-planner-front/src/app/_models/planner.ts
===================================================================
--- trip-planner-front/src/app/_models/planner.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/_models/planner.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -6,6 +6,6 @@
     constructor(){
         this.id = 1;
-        this.name = 'Planner name';
-        this.description = 'Planner description';
+        this.name = '';
+        this.description = '';
     }
 }
Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,5 +1,6 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
+import { PlannerDto } from "../_models/dto/plannerDto";
 import { Planner } from "../_models/planner";
 
@@ -14,3 +15,13 @@
         return this.httpClient.get<Planner[]>(url);
     }
+
+    postInitialPlanner(plannerDto: PlannerDto): Observable<Object>{     
+        let url = "http://localhost:8080/api/planner/new";
+        return this.httpClient.post<Planner>(url, plannerDto);
+    }
+
+    updatePlanner(id: number):Observable<Planner>{    
+    let url = "http://localhost:8080/api/edit/planner/" + id;
+    return this.httpClient.put<Planner>(url, null);
+    }
 }
Index: trip-planner-front/src/app/app-routing.module.ts
===================================================================
--- trip-planner-front/src/app/app-routing.module.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/app-routing.module.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,6 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { LocationsFormComponent } from './locations-form/locations-form.component';
+import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
+import { PlannerComponent } from './planner/planner.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'planners', component: PlannerComponent},
+  {path: 'form', component: LocationsFormComponent},
+  {path: 'edit/planner/:id', component: EditPlannerComponent}
+];
 
 @NgModule({
Index: trip-planner-front/src/app/app.component.html
===================================================================
--- trip-planner-front/src/app/app.component.html	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/app.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,3 +1,4 @@
 
-  <app-locations-form>
-  </app-locations-form>
+  <router-outlet></router-outlet>
+
+
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/app.module.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -26,4 +26,6 @@
 import { MatFormFieldModule } from '@angular/material/form-field';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
+import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
 
 @NgModule({
@@ -33,6 +35,8 @@
     LocationComponent,
     CreateInitialPlannerComponent,
-    LocationsFormComponent
-  ],
+    LocationsFormComponent,
+    EditPlannerComponent,
+    DetailPlannerComponent
+    ],
   imports: [
     BrowserModule,
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 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,15 +1,19 @@
-<h1 mat-dialog-title>Hi </h1>
-<div mat-dialog-content>
-  <p>Trip name</p>
-  <mat-form-field appearance="fill">
-    <input matInput required >
-  </mat-form-field>
-  <p>Trip description</p>
-  <mat-form-field appearance="fill">
-    <textarea matInput ></textarea>
-  </mat-form-field>
-</div>
-<div mat-dialog-actions>
-  <button mat-button (click)="onCancelClick()">Cancel</button>
-  <button mat-button cdkFocusInitial>Save</button>
-</div>
+<form (ngSubmit)="onFormSubmitPlanner(f)" #f="ngForm">
+  <h1 mat-dialog-title>Hi </h1>
+  <div mat-dialog-content>
+    <p>Planner name</p>
+    <mat-form-field appearance="fill">
+      <input matInput required   type="text" [(ngModel)]="plannerDto.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>
+    </mat-form-field>
+  </div>
+  <div mat-dialog-actions>
+    
+    <button mat-button type="submit" [disabled]="!f.form.valid" >Save</button>
+  </div>
+</form>
+
+<button mat-button (click)="onCancelClick()">Cancel</button>
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 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,4 +1,11 @@
+import { ResourceLoader } from '@angular/compiler';
+import { Route } from '@angular/compiler/src/core';
 import { Component, Inject, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { PlannerDto } from '../_models/dto/plannerDto';
+import { Planner } from '../_models/planner';
+import { PlannerService } from '../_services/planner.service';
 
 @Component({
@@ -9,8 +16,20 @@
 export class CreateInitialPlannerComponent implements OnInit {
 
-  constructor(
-    public dialogRef: MatDialogRef<CreateInitialPlannerComponent>) {}
+  planner: Planner;
+  planners: Planner[];
+  locations : Location[];
+  plannerDto: PlannerDto;
+
+  constructor(public dialogRef: MatDialogRef<CreateInitialPlannerComponent>,
+              private plannerService : PlannerService, private router : Router) {
+                this.planner = new Planner;
+                this.planners = [];
+                this.locations = [];
+                this.plannerDto = new PlannerDto();
+              }
 
   ngOnInit(): void {
+    this.planner = new Planner();
+    this.plannerDto = new PlannerDto();
   }
 
@@ -18,4 +37,17 @@
     this.dialogRef.close();
   }
+  
+  onFormSubmitPlanner(form: NgForm){
+   console.log(this.planner);
+      this.plannerService.postInitialPlanner(this.plannerDto).subscribe(
+        data=>{
+          console.log(data);
+          this.router.navigate(['planner']);
+        },
+        error => console.log('oops', error)
+     );
+     window.location.reload();
+  }
+
 
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.css
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.css	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/locations-form/locations-form.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -19,5 +19,5 @@
 }
 
-.colorClass{
-  color:yellow;
+.yellow{
+  background-color:yellow;
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -67,7 +67,7 @@
 
    <h5>What are your priorities to visit?</h5> 
-  <mat-chip-list  selectable multiple>
+  <mat-chip-list  selectable multiple >
     <mat-chip #c="matChip" selected *ngFor="let category of categories" 
-    (click)="toggleSelection(c, category)">
+    (click)="toggleSelection(c, category)" [ngClass]="{'yellow' : toggle}">
   <mat-icon *ngIf="!c.selected" >check</mat-icon>
   {{category.name}}
Index: trip-planner-front/src/app/locations-form/locations-form.component.ts
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,4 +1,4 @@
 import { Component, Injectable, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, NgForm } from '@angular/forms';
 import {map, startWith, switchMap} from 'rxjs/operators';
 import {forkJoin, Observable} from 'rxjs';
@@ -42,4 +42,6 @@
   value:number;
   max: number;
+  toggle = true;
+  status = 'Enable';
 
   constructor(private cityService : CityService, private regionService: RegionService,
@@ -109,4 +111,5 @@
  toggleSelection(chip: MatChip, category: Category){
   chip.toggleSelected();
+  
   if(this.chipsSeletion.length > 0){
     if(this.chipsSeletion.indexOf(category.id) <= -1){
@@ -141,7 +144,6 @@
     );
    }
-   
-  
  }
+ 
  chooseCityOption(){
    this.cityOption = true;
@@ -158,3 +160,4 @@
      }
   }
+
 }
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,1 @@
+<p>detail-planner works!</p>
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailPlannerComponent } from './detail-planner.component';
+
+describe('DetailPlannerComponent', () => {
+  let component: DetailPlannerComponent;
+  let fixture: ComponentFixture<DetailPlannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DetailPlannerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailPlannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-planner',
+  templateUrl: './detail-planner.component.html',
+  styleUrls: ['./detail-planner.component.css']
+})
+export class DetailPlannerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,3 @@
+mat-form-field{
+    width:300px;
+}
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,45 @@
+<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 you can edit your planner</h3>
+
+<form>
+    <div class="form-gorup">
+        <p>Planner name</p>
+        <mat-form-field appearance="fill">
+          <input matInput required   type="text" name="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>
+        </mat-form-field>
+    </div>
+    <div class="container mb-4" >
+        <div class="row">
+            <div class="col-12">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                        <tr>
+                            <th scope="col">Location name</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            
+                            <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
+                                 Add locations
+                              </button>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button mat-raised-button color="primary" (click)="onClickSavePlanner()">
+        <mat-icon>edit</mat-icon> Save
+      </button>
+</form>
+
+   
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 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Planner } from 'src/app/_models/planner';
+
+@Component({
+  selector: 'app-edit-planner',
+  templateUrl: './edit-planner.component.html',
+  styleUrls: ['./edit-planner.component.css']
+})
+export class EditPlannerComponent implements OnInit {
+
+  planner: Planner;
+
+
+  constructor(private router: Router) { 
+    this.planner = new Planner();
+  }
+
+  ngOnInit(): void {
+  }
+
+
+  onClickSavePlanner(){
+      this.router.navigate(['planners']);
+  }
+
+  onClickAddLocation(){
+    this.router.navigate(['form']);
+  }
+}
Index: trip-planner-front/src/app/planner/planner.component.css
===================================================================
--- trip-planner-front/src/app/planner/planner.component.css	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/planner/planner.component.css	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,3 +1,9 @@
-.example-card {
-    
-  }
+mat-card  {   
+  width: 280px;   
+  height: 160px; 
+
+}
+.example-card button {
+  box-shadow:none !important;
+  cursor:pointer;
+}
Index: trip-planner-front/src/app/planner/planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/planner.component.html	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/planner/planner.component.html	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -1,14 +1,15 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
 <button mat-raised-button (click)="openDialog()">Create initial planner</button>
 
-<mat-grid-list cols="4" rowHeight="250px">
-  <mat-grid-tile *ngFor="let planner of planners" >
-      <mat-card class="example-card" >
+<mat-grid-list cols="4" >
+  <mat-grid-tile *ngFor="let planner of planners">
+      <mat-card class="d-flex flex-column">
         <mat-card-title>{{planner.name}}</mat-card-title>
         <mat-card-content>
           {{planner.description}}
         </mat-card-content>
-        <mat-card-actions>
-          <button mat-raised-button color="primary">
+        <mat-card-actions class="mt-auto">
+          <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
             <mat-icon>edit</mat-icon> Edit
           </button>
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision 6a8023106281cf8cc9e4dc316984fdb52cdcf8e2)
@@ -4,4 +4,5 @@
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
+import { Router } from '@angular/router';
 
 
@@ -14,6 +15,9 @@
 
   planners: Planner[];
-  constructor(private plannerService: PlannerService, public dialog: MatDialog) { 
+  plannerId: number;
+
+  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 
     this.planners = [];
+    this.plannerId = 1;
   };
  
@@ -33,3 +37,10 @@
   }
   
+  onClickEditPlanner(id: number){
+    console.log(id);
+   
+         
+          this.router.navigate(['edit/planner/', this.plannerId])
+    
+  }
 }
