Index: trip-planner-front/src/app/_models/images.ts
===================================================================
--- trip-planner-front/src/app/_models/images.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/_models/images.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,9 @@
+export class Images{
+    id: number;
+    content: any[];
+
+    constructor(){
+        this.id = 1;
+        this.content = [];
+    }
+}
Index: trip-planner-front/src/app/_models/location.ts
===================================================================
--- trip-planner-front/src/app/_models/location.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/_models/location.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -1,2 +1,3 @@
+
 export class Location{
     
@@ -7,4 +8,5 @@
     priority: string;
     duration: number;
+    photo: any[];
 
     constructor(){
@@ -15,4 +17,5 @@
         this.priority = 'Location priority';
         this.duration = 1;
+        this.photo = [];
     }
 }
Index: trip-planner-front/src/app/_services/images.service.ts
===================================================================
--- trip-planner-front/src/app/_services/images.service.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/_services/images.service.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,17 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Images } from "../_models/images";
+
+@Injectable({
+    providedIn:'root'
+})
+export class ImagesService{
+    constructor(private httpClient: HttpClient){
+    }
+
+    getAllImagesForLocation(locationId : number):Observable<Images[]>{
+        let url = "http://localhost:8080/api/images";
+        return this.httpClient.get<Images[]>(url + "?locationId=" + locationId);
+    }
+}
Index: trip-planner-front/src/app/_services/location.service.ts
===================================================================
--- trip-planner-front/src/app/_services/location.service.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/_services/location.service.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -26,7 +26,33 @@
     }
 
-    getLocationsFroPlanner(plannerId : number) : Observable<Location[]>{
+    getLocationsForPlanner(plannerId : number) : Observable<Location[]>{
         let url = "http://localhost:8080/api/planner/locations";
         return this.httpClient.get<Location[]>(url + '?plannerId=' + plannerId);
     }
+
+    getAllLocations() : Observable<Location[]> {
+        let url = "http://localhost:8080/api/locations";
+        return this.httpClient.get<Location[]>(url);
+    }
+
+    getWeekendGetaways() : Observable<Location[]>{
+        let url = "http://localhost:8080/api/weekend";
+        return this.httpClient.get<Location[]>(url);
+    }
+
+    getVillages() : Observable<Location[]>{
+        let url = "http://localhost:8080/api/villages";
+        return this.httpClient.get<Location[]>(url);
+    }
+
+    getLocation(id : number) :Observable<Location>{
+        let url = "http://localhost:8080/api/location/" + id;
+        return this.httpClient.get<Location>(url);
+    }
+
+    getAllLocationsForPlanner(id: number): Observable<Location[]>{
+        let url = "http://localhost:8080/api/planner/locations";
+        return this.httpClient.get<Location[]>(url + "?plannerId=" + id);
+    }
+    
 }
Index: trip-planner-front/src/app/_services/planner.service.ts
===================================================================
--- trip-planner-front/src/app/_services/planner.service.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/_services/planner.service.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -1,3 +1,3 @@
-import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
Index: trip-planner-front/src/app/app-routing.module.ts
===================================================================
--- trip-planner-front/src/app/app-routing.module.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/app-routing.module.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -1,4 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomepageComponent } from './homepage/homepage.component';
+import { LocationDetailsComponent } from './location/location-details/location-details.component';
 import { LocationComponent } from './location/location.component';
 import { LocationsFormComponent } from './locations-form/locations-form.component';
@@ -10,5 +12,7 @@
   {path: 'form', component: LocationsFormComponent},
   {path: 'edit/planner/:id', component: EditPlannerComponent},
-  {path: 'locations', component: LocationComponent}
+  {path: 'locations', component: LocationComponent},
+  {path: '', component: HomepageComponent},
+  {path: 'location', component: LocationDetailsComponent}
 ];
 
Index: trip-planner-front/src/app/app.module.ts
===================================================================
--- trip-planner-front/src/app/app.module.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/app.module.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -10,5 +10,4 @@
 import { LocationComponent } from './location/location.component';
 import { MatIconModule } from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
@@ -29,4 +28,13 @@
 import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
 import { AddLocationToPlannerPanelComponent } from './location/add-location-to-planner-panel/add-location-to-planner-panel.component';
+import { HomepageComponent } from './homepage/homepage.component';
+import {AccordionModule} from 'primeng/accordion';     //accordion and accordion tab
+import {MenuItem} from 'primeng/api'; 
+import {CarouselModule} from 'primeng/carousel';
+import {ButtonModule} from 'primeng/button';
+import {ToastModule} from 'primeng/toast';
+import {TabViewModule} from 'primeng/tabview';
+import { LocationDetailsComponent } from './location/location-details/location-details.component';
+import {GalleriaModule} from 'primeng/galleria';
 
 @NgModule({
@@ -39,5 +47,7 @@
     EditPlannerComponent,
     DetailPlannerComponent,
-    AddLocationToPlannerPanelComponent
+    AddLocationToPlannerPanelComponent,
+    HomepageComponent,
+    LocationDetailsComponent
     ],
   imports: [
@@ -61,6 +71,11 @@
     HttpClientModule,
     ReactiveFormsModule,
-    MatSelectModule
-    
+    MatSelectModule,
+    AccordionModule,
+    CarouselModule,
+    ButtonModule,
+    ToastModule,
+    TabViewModule,
+    GalleriaModule
   ],
   providers: [
Index: trip-planner-front/src/app/homepage/homepage.component.css
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.css	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/homepage/homepage.component.css	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,38 @@
+header, main{
+    margin:auto;
+    max-width: 80%;
+}
+
+main img {
+    width: 100%;
+    height: 400px;
+}
+
+header img{
+    width: 50px;
+    height: 50px;
+}
+nav button{
+    border-radius: 30px;
+}
+
+.navbar-nav {
+    margin-left: auto;
+}
+
+.product-item-content {
+    border: 1px solid var(--surface-d);
+    border-radius: 3px;
+    margin: .3rem;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+.product-image {
+    width: 50%;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.p-mb-3 img {
+    height: 300px;
+}
Index: trip-planner-front/src/app/homepage/homepage.component.html
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/homepage/homepage.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,281 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+
+  <title></title>
+</head>
+
+<body>
+
+  <header>
+    <nav class="navbar navbar-expand-sm bg-light">
+      <img src={{myLogo}} />
+      <strong class="navbar-brand">Trivia Trip</strong>
+
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item">
+          <button class="btn btn-dark">Sign in</button>
+        </li>
+      </ul>
+    </nav>
+  </header>
+
+  <main role="main">
+    <img src={{imageURI}} />
+    <h4></h4>
+
+    <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
+      <div class="card">
+        <p-carousel [value]="locations" [numVisible]="3" [numScroll]="3" [circular]="false"
+          [responsiveOptions]="responsiveOptions">
+          <ng-template pTemplate="header">
+            <h5>Weekend favourites</h5>
+          </ng-template>
+          <ng-template let-data pTemplate="item">
+            <div class="product-item">
+              <div class="product-item-content">
+                <div class="p-mb-3">
+                  <img src="data:image/png;base64,{{data.photo}}" class="product-image" />
+                </div>
+                <div>
+                  <h4 class="p-mb-1">{{data.name}}</h4>
+                  <div class="car-buttons p-mt-5">
+                    <p-button type="button" styleClass="p-button p-button-rounded p-mr-2" icon="pi pi-search">
+                    </p-button>
+                    <p-button type="button" styleClass="p-button-success p-button-rounded p-mr-2"
+                      icon="pi pi-star-fill"></p-button>
+                    <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </p-carousel>
+      </div>
+    </div>
+
+
+    <div class="content-section implementation carousel-demo" style="padding-top: 2em;">
+      <div class="card">
+        <p-carousel [value]="villages" [numVisible]="3" [numScroll]="3" [circular]="false"
+          [responsiveOptions]="responsiveOptions">
+          <ng-template pTemplate="header">
+            <h5>Rural tourism</h5>
+          </ng-template>
+          <ng-template let-village pTemplate="item">
+            <div class="product-item">
+              <div class="product-item-content">
+                <div class="p-mb-3">
+                  <img src="data:image/png;base64,{{village.photo}}" class="product-image" />
+                </div>
+                <div>
+                  <h4 class="p-mb-1">{{village.name}}</h4>
+                  <div class="car-buttons p-mt-5">
+                    <p-button type="button" styleClass="p-button p-button-rounded p-mr-2" icon="pi pi-search">
+                    </p-button>
+                    <p-button type="button" styleClass="p-button-success p-button-rounded p-mr-2"
+                      icon="pi pi-star-fill"></p-button>
+                    <p-button type="button" styleClass="p-button-help p-button-rounded" icon="pi pi-cog"></p-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </p-carousel>
+      </div>
+    </div>
+  </main>
+<br>
+
+  <footer class="bg-dark text-center text-white">
+    <!-- Grid container -->
+    <div class="container p-4">
+      <!-- Section: Social media -->
+      <section class="mb-4">
+        <!-- Facebook -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-facebook-f"></i
+        ></a>
+  
+        <!-- Twitter -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-twitter"></i
+        ></a>
+  
+        <!-- Google -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-google"></i
+        ></a>
+  
+        <!-- Instagram -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-instagram"></i
+        ></a>
+  
+        <!-- Linkedin -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-linkedin-in"></i
+        ></a>
+  
+        <!-- Github -->
+        <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
+          ><i class="fab fa-github"></i
+        ></a>
+      </section>
+      <!-- Section: Social media -->
+  
+      <!-- Section: Form -->
+      <section class="">
+        <form action="">
+          <!--Grid row-->
+          <div class="row d-flex justify-content-center">
+            <!--Grid column-->
+            <div class="col-auto">
+              <p class="pt-2">
+                <strong>Sign up for our newsletter</strong>
+              </p>
+            </div>
+            <!--Grid column-->
+  
+            <!--Grid column-->
+            <div class="col-md-5 col-12">
+              <!-- Email input -->
+              <div class="form-outline form-white mb-4">
+                <input type="email" id="form5Example21" class="form-control" />
+                <label class="form-label" for="form5Example21">Email address</label>
+              </div>
+            </div>
+            <!--Grid column-->
+  
+            <!--Grid column-->
+            <div class="col-auto">
+              <!-- Submit button -->
+              <button type="submit" class="btn btn-outline-light mb-4">
+                Subscribe
+              </button>
+            </div>
+            <!--Grid column-->
+          </div>
+          <!--Grid row-->
+        </form>
+      </section>
+      <!-- Section: Form -->
+  
+      <!-- Section: Text -->
+      <section class="mb-4">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt distinctio earum
+          repellat quaerat voluptatibus placeat nam, commodi optio pariatur est quia magnam
+          eum harum corrupti dicta, aliquam sequi voluptate quas.
+        </p>
+      </section>
+      <!-- Section: Text -->
+  
+      <!-- Section: Links -->
+      <section class="">
+        <!--Grid row-->
+        <div class="row">
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+  
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+  
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+  
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+  
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+  
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+  
+          <!--Grid column-->
+          <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Links</h5>
+  
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a href="#!" class="text-white">Link 1</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 2</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 3</a>
+              </li>
+              <li>
+                <a href="#!" class="text-white">Link 4</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+        </div>
+        <!--Grid row-->
+      </section>
+      <!-- Section: Links -->
+    </div>
+    <!-- Grid container -->
+  
+    <!-- Copyright -->
+    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
+      © 2020 Copyright:
+      <a class="text-white" href="#">Trivia trip</a>
+    </div>
+    <!-- Copyright -->
+  </footer>
+  <!-- Footer -->
+</body>
+
+</html>
Index: trip-planner-front/src/app/homepage/homepage.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/homepage.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/homepage/homepage.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '../_models/location';
+import { LocationService } from '../_services/location.service';
+
+
+@Component({
+   selector: 'app-homepage',
+   templateUrl: './homepage.component.html',
+   styleUrls: ['./homepage.component.css']
+})
+export class HomepageComponent implements OnInit {
+
+   imageURI = 'https://i.pinimg.com/736x/a1/1a/57/a11a572a1ec4e07039bbd04661a3b035.jpg';
+   myLogo = 'http://www.logo-designer.co/wp-content/uploads/2020/02/2020-tripadvisor-new-logo-design-by-mother-design-4.png';
+   responsiveOptions;
+   locations: Location[];
+   villages: Location[];
+
+   constructor(private locationService: LocationService) {
+      this.responsiveOptions = [
+         {
+            breakpoint: '1024px',
+            numVisible: 3,
+            numScroll: 3
+         },
+         {
+            breakpoint: '768px',
+            numVisible: 2,
+            numScroll: 2
+         },
+         {
+            breakpoint: '560px',
+            numVisible: 1,
+            numScroll: 1
+         }
+      ];
+      this.locations = [];
+      this.villages = [];
+   }
+
+   ngOnInit(): void {
+
+      this.locationService.getWeekendGetaways().subscribe(
+         data => {
+            this.locations = data;
+         });
+
+      this.locationService.getVillages().subscribe(
+         village => {
+            this.villages = village;
+         }
+      );
+   }
+}
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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -13,3 +13,3 @@
   </form>
   
-  <button mat-button (click)="onCancelClick()">Cancel</button>
+  <button type="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 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -1,4 +1,3 @@
 import { Component, OnInit } from '@angular/core';
-import { NgForm } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
@@ -21,4 +20,6 @@
   locationId: number;
   plannerLocationDto: PlannerLocationDto;
+  locationsInPlanner: Location[];
+
 
   constructor(private dialogRef: MatDialogRef<AddLocationToPlannerPanelComponent>, private plannerService: PlannerService,
@@ -29,4 +30,5 @@
     this.locationId = 1;
     this.plannerLocationDto = new PlannerLocationDto();
+    this.locationsInPlanner = [];
   }
 
@@ -56,4 +58,5 @@
     this.plannerLocationDto.locationId = this.locationId;
     this.plannerLocationDto.plannerId = plannerId;
+    /*
     this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
       data => {
@@ -61,5 +64,8 @@
       }
     );
-  }
+    */
+
+   // window.location.reload();
+    }
 
 }
Index: trip-planner-front/src/app/location/location-details/location-details.component.html
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location-details/location-details.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,20 @@
+<p>Details for the location</p>
+<p>{{locationDetails.name}}</p>
+<p>{{locationDetails.description}}</p>
+
+
+<div class="content-section implementation">
+    <div class="card">
+        <h5>More photos</h5>
+        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}" [numVisible]="5"
+            [circular]="true" [showItemNavigators]="true">
+            <ng-template pTemplate="item" let-image>
+                <img src="data:image/png;base64,{{image.content}}" style="width: 100%; height: 350px; display: block;" />
+            </ng-template>
+            <ng-template pTemplate="thumbnail" let-image>
+                <div class="p-grid p-nogutter p-justify-center">
+                    <img src="data:image/png;base64,{{image.content}}" style="width: 50px; height:50px; display: block;" />
+                </div>
+            </ng-template>
+        </p-galleria>
+    </div>
Index: trip-planner-front/src/app/location/location-details/location-details.component.ts
===================================================================
--- trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
+++ trip-planner-front/src/app/location/location-details/location-details.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -0,0 +1,63 @@
+import { Component, OnInit , ViewEncapsulation} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Images } from 'src/app/_models/images';
+import { Location } from 'src/app/_models/location';
+import { ImagesService } from 'src/app/_services/images.service';
+import { LocationService } from 'src/app/_services/location.service';
+
+@Component({
+  selector: 'app-location-details',
+  templateUrl: './location-details.component.html',
+  styleUrls: ['./location-details.component.css']
+})
+export class LocationDetailsComponent implements OnInit {
+
+  locationId: number;
+  locationDetails: Location;
+  images: Images[];
+  responsiveOptions;
+
+  constructor(private route: ActivatedRoute, private router: Router, private locationService : LocationService,
+              private imagesService : ImagesService) {
+    this.locationId = 1;
+    this.locationDetails = new Location();
+    this.images = [];
+
+    this.responsiveOptions = [
+      {
+        breakpoint: '1024px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+  ];
+   }
+
+
+  ngOnInit(): void {
+    this.route.queryParams
+    .subscribe(params => {     
+      this.locationId = params.id; 
+    });
+
+    this.locationService.getLocation(this.locationId).subscribe(
+      data => {
+          this.locationDetails = data;
+      }
+    );
+    
+    this.imagesService.getAllImagesForLocation(this.locationId).subscribe(
+      image => {
+         this.images = image;
+      }
+   );
+  }
+
+  
+}
Index: trip-planner-front/src/app/location/location.component.html
===================================================================
--- trip-planner-front/src/app/location/location.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/location/location.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -18,5 +18,5 @@
       <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>
+      <td><button mat-raised-button color="primary" (click)="onClickSeeDetails(location.id)">See details</button></td>
     </tr>  
   </tbody>
Index: trip-planner-front/src/app/location/location.component.ts
===================================================================
--- trip-planner-front/src/app/location/location.component.ts	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/location/location.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -1,8 +1,6 @@
-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';
@@ -24,4 +22,5 @@
   regionOption: boolean = false;
   regionId: number;
+  locationId: number;
 
   constructor(private fb: FormBuilder, private route: ActivatedRoute, private locationService: LocationService,
@@ -36,4 +35,5 @@
     this.listLocations = [];
     this.regionId = 1;
+    this.locationId = 1;
   }
 
@@ -71,12 +71,16 @@
   }
 
-  openDialogSave(locationId: number){
-    console.log(locationId);
+  openDialogSave(locationId){
+   // console.log(locationId);
       const dialogRef = this.dialog.open(AddLocationToPlannerPanelComponent, {
         width: '250px',
         data: {}
       });
-      this.router.navigate(['locations'], {queryParams: {locationId: locationId}});
+      this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds, locationId: locationId}});
+      
   }
 
+  onClickSeeDetails(id: number){
+    this.router.navigate(['location'], {queryParams: {id: id}});
+  }
 }
Index: trip-planner-front/src/app/locations-form/locations-form.component.html
===================================================================
--- trip-planner-front/src/app/locations-form/locations-form.component.html	(revision ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/locations-form/locations-form.component.html	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -22,5 +22,5 @@
         <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-select [(ngModel)]="cityId" placeholder="Select city" name="city" >
             <mat-option [value]="city.id" *ngFor="let city of cities" > {{city.name}}</mat-option>
           </mat-select>
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 ceaed429447854991cde276cd74df8d5dc9a2009)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 59329aad30ff25ec5095bb7ffb78ddb59b7dc111)
@@ -48,5 +48,5 @@
       .subscribe(x => this.form.patchValue(x));
 
-    this.locationService.getLocationsFroPlanner(this.id).subscribe(
+    this.locationService.getLocationsForPlanner(this.id).subscribe(
       data => {
           this.locations = data;
