Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
@@ -9,7 +9,12 @@
     constructor(private httpClient : HttpClient){}
 
-    getAllPlaces(locationId: number, companionId: number, lengthOfStay: number, categoryIds: string): Observable<Object[]>{
-        let url = "http://localhost:8080/api/trip/locations";
-        return this.httpClient.get<Location[]>(url + '?locationId=' + locationId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
+    getLocationsFromCity(cityId: number, companionId: number, lengthOfStay: number, categoryIds: string): Observable<Object[]>{
+        let url = "http://localhost:8080/api/city/locations";
+        return this.httpClient.get<Location[]>(url + '?cityId=' + cityId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
+    }
+
+    getLocationsFromRegion(regionId: number, companionId: number, lengthOfStay: number, categoryIds: string):Observable<Object[]>{
+        let url = "http://localhost:8080/api/region/locations";
+        return this.httpClient.get<Location[]>(url + '?regionId=' + regionId + '&companionId=' + companionId + '&lengthOfStay=' + lengthOfStay + '&categoryIds='+ categoryIds);
     }
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.css
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.css	(revision eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/locations-form/locations-form.component.css	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
@@ -18,2 +18,6 @@
   float: right;
 }
+
+.colorClass{
+  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 eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
@@ -3,5 +3,5 @@
 <div class="example-form">
 
-  <div class="d-block">
+  <div class="form-group">
     <button class="btn" (click)="chooseCityOption()" >
       City
@@ -35,9 +35,10 @@
     <mat-form-field appearance="fill" class="example-full-width">
       <mat-label>Please select a city</mat-label>
-      <mat-select [(ngModel)]="locationId" placeholder="Select city">
+      <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 *ngIf="regionOption">
@@ -62,5 +63,5 @@
   <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" [(ngModel)]="lengthOfStay">
+    <input matInput placeholder="No. Days"  type="number" min="1" value="0" max="30" [constraintMaxNumberDays()] [(ngModel)]="lengthOfStay">
   </mat-form-field>
 
@@ -68,11 +69,11 @@
   <mat-chip-list  selectable multiple>
     <mat-chip #c="matChip" selected *ngFor="let category of categories" 
-    (click)="toggleSelection(c, category)" >
+    (click)="toggleSelection(c, category)">
   <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 eed0bf860deec9614c6d4891e655270e2bb3b8ab)
+++ trip-planner-front/src/app/locations-form/locations-form.component.ts	(revision 188ee53d7e92cd841a2f812afa7a47793c1280f2)
@@ -35,8 +35,11 @@
   locationId: number;
   regionId: number;
+  cityId: number;
   companionId: number;
   lengthOfStay: number;
   cityOption: boolean = false;
   regionOption: boolean = false;
+  value:number;
+  max: number;
 
   constructor(private cityService : CityService, private regionService: RegionService,
@@ -54,4 +57,7 @@
     this.categoryIds = '';
     this.regionId = 0;
+    this.cityId = 0;
+    this.value = 0;
+    this.max = 30;
   }
   
@@ -119,10 +125,22 @@
  createMyPlanner(){
    this.categoryIds = this.chipsSeletion.join(',');
-   console.log(this.companionId);
-   this.locationService.getAllPlaces(this.locationId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
-     result => {
-       console.log(result);
-     }
-   );
+   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(){
@@ -134,3 +152,9 @@
     this.cityOption = false;
   }
+
+  constraintMaxNumberDays(){
+     if(this.value > this.max){
+       this.value = this.max;
+     }
+  }
 }
