Merge branch 'main' of https://github.com/kerriestauffer/indiv-berner…

…-rundgaenge into backend-endpoints-alexis
kerriestauffer · May 12, 2023 · e405978 · e405978
2 parents c5b4f47 + 3326738
commit e405978
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 34 deletions.
diff --git a/backend/src/environment.ts b/backend/src/environment.ts
@@ -1,3 +1,3 @@
 export const environment = {
-    osrm_url:'http://router.project-osrm.org'
+    base_url:'http://router.project-osrm.org'
 } 
diff --git a/backend/src/main.ts b/backend/src/main.ts
@@ -1,13 +1,11 @@
 import { NestFactory } from '@nestjs/core';
 import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
 import { AppModule } from './app.module';
-import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
 import { ConfigService } from '@nestjs/config';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
-<<<<<<< HEAD
   const config = new DocumentBuilder()
     .setTitle('Individuelle Berner Stadtspaziergänge')
     .setDescription('API Routenfinder')
@@ -16,7 +14,6 @@ async function bootstrap() {
     .build();
   const document = SwaggerModule.createDocument(app, config);
   SwaggerModule.setup('api', app, document);
-=======
   const configService: ConfigService = app.get(ConfigService);
 
   app.enableCors();
@@ -38,7 +35,6 @@ async function bootstrap() {
   }
 
   const port = await configService.get('PORT');
->>>>>>> 5cafa6eb487f1c4f44ecca48f559674489167e1b
   await app.listen(3000);
 }
 bootstrap();
diff --git a/backend/src/routes/dto/route.dto.ts b/backend/src/routes/dto/route.dto.ts
@@ -1,3 +1,25 @@
-export class RouteDto{
-
-}
+interface Waypoints {
+    hint: string;
+    distance: number;
+    name: string;
+    location: Array<number>;
+  }
+
+interface Routes {
+    geometry: Geometry;
+    weight_name: string;
+    weight: number;
+    duration: number;
+    distance: number;
+  }
+
+interface Geometry {
+    coordinates: Array<Array<number>>;
+    type: string;
+  }
+
+
+interface Route {
+    routes: Array<Routes>;
+    waypoints: Array<Waypoints>;
+  }
diff --git a/backend/src/routes/routes.service.ts b/backend/src/routes/routes.service.ts
@@ -2,20 +2,27 @@ import { HttpService } from '@nestjs/axios';
 import { Injectable } from '@nestjs/common';
 import { firstValueFrom, map } from 'rxjs';
 import { environment } from 'src/environment';
+import { RouteDto } from './dto/route.dto';
 
 @Injectable()
 export class RoutesService {
-    osrm_url = environment.osrm_url;
+    base_url = environment.base_url;
+    tripService = 'trip';
+    osrm_trip_url = `${this.base_url}/${this.tripService}`
+
 
     constructor(private httpService: HttpService){}
 
     async getRoute(coordinates: any, mode: any) {
         console.log('params: ' + coordinates + ' mode ' + mode)
-        console.log(`${this.osrm_url}/route/v1/${mode}/${coordinates}?geometries=geojson`)
-        const routes$ = this.httpService.get(`${this.osrm_url}/route/v1/${mode}/${coordinates}?geometries=geojson`);
+        console.log(`${this.osrm_trip_url}/v1/${mode}/${coordinates}?geometries=geojson`)
+        const routes$ = this.httpService.get(`${this.osrm_trip_url}/v1/${mode}/${coordinates}?geometries=geojson`);
 
-        return this.httpService.get(`${this.osrm_url}/route/v1/${mode}/${coordinates}?geometries=geojson`).pipe(map((response)  => {
-            return response.data;
+        return this.httpService.get(`${this.osrm_trip_url}/v1/${mode}/${coordinates}?geometries=geojson`).pipe(map((response)  => {
+            let routeDto: RouteDto;
+            routeDto = JSON.parse(response.data);
+            console.log('routeDto ' + routeDto)
+            return routeDto;
         }))
     }
 }
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -1,5 +1,4 @@
 .main-wrapper {
   padding: 2rem;
-  height: 100%;
   background-color: #d3edf8;
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -8,6 +8,9 @@ import { HomeComponent } from './home/home.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { HttpClientModule } from '@angular/common/http';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
 import { MapComponent } from './map/map.component';
 
 @NgModule({
@@ -19,6 +22,9 @@ import { MapComponent } from './map/map.component';
     ReactiveFormsModule,
     MatSlideToggleModule,
     HttpClientModule,
+    MatCardModule,
+    MatExpansionModule,
+    MatButtonModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
@@ -16,3 +16,55 @@ <h2>Mobility Options</h2>
     >
   </div>
 </form>
+<h2>Ausgewählte Points of Interests</h2>
+<ul *ngFor="let chosenPOI of chosenPOIs">
+  <li>{{ chosenPOI.Punktname }}</li>
+</ul>
+<button
+  *ngIf="isAtLeastTwoSelected()"
+  mat-raised-button
+  color="primary"
+  (click)="getIndividualWalk()"
+>
+  Individuellen Spaziergang erhalten
+</button>
+
+<h2>Points of Interests auswählen</h2>
+<mat-accordion>
+  <div class="categories" *ngFor="let category of categoriesWithData">
+    <mat-expansion-panel hideToggle>
+      <mat-expansion-panel-header>
+        <mat-panel-title>{{ category.name }}</mat-panel-title>
+      </mat-expansion-panel-header>
+      <div class="grid-container">
+        <div class="card-container" *ngFor="let poi of category.data">
+          <mat-card class="example-card" (click)="togglePOISelection(poi)">
+            <mat-card-header>
+              <mat-card-title-group>
+                <mat-card-title
+                  >{{ poi.Punktname }}
+                  <span class="selected" *ngIf="isSelected(poi)"
+                    >AUSGEWÄHLT</span
+                  ></mat-card-title
+                >
+                <mat-card-subtitle>{{ poi.Rubrik }}</mat-card-subtitle>
+                <img
+                  *ngIf="poi.Pfad_Foto"
+                  mat-card-xl-image
+                  [src]="poi.Pfad_Foto"
+                />
+              </mat-card-title-group>
+            </mat-card-header>
+            <mat-card-content>
+              <div
+                class="poi-beschrieb"
+                *ngIf="poi.Beschrieb"
+                [innerHTML]="poi.Beschrieb"
+              ></div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </mat-expansion-panel>
+  </div>
+</mat-accordion>
diff --git a/frontend/src/app/home/home.component.scss b/frontend/src/app/home/home.component.scss
@@ -3,3 +3,24 @@
   flex-direction: column;
   gap: 1rem;
 }
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.selected {
+  color: #ff6600;
+}
+
+.categories {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+h2,
+h3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
@@ -1,6 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { DataService } from '../shared/data.service';
+import { DataService, POI } from '../shared/data.service';
+
+export type CategorizedData = {
+  name: string;
+  data: POI[];
+};
 
 @Component({
   selector: 'app-home',
@@ -14,12 +19,55 @@ export class HomeComponent {
     publibike: new FormControl(false),
   });
 
-  POIoptions = []; // POI of interest we get from the backend
-  chosenPOIs = []; // array to store user chose POIs
+  public POIoptions: POI[] = []; // POI of interest we get from the backend
+  chosenPOIs: POI[] = []; // array to store user chose POIs
+
+  public categoriesWithData: CategorizedData[] = [
+    { name: 'Kunst im öffentlichen Raum', data: [] },
+    { name: 'Stadtverwaltung', data: [] },
+    { name: 'Spielplatz', data: [] },
+    { name: 'Kantonsverwaltung', data: [] },
+    { name: 'Sehenswürdigkeiten', data: [] },
+    { name: 'Café', data: [] },
+    { name: 'Sport & Aktivitäten &#62; Aareschwimmen & Baden', data: [] },
+    { name: 'Kunst & Kultur', data: [] },
+  ];
 
-  constructor(private dataService: DataService) {
+  public constructor(private dataService: DataService) {
     dataService.testRequest().subscribe((res) => {
-      // console.log(res);
+      this.POIoptions = res;
+      //console.log(res);
+      for (let category of this.categoriesWithData) {
+        category.data = this.categorizeData(this.POIoptions, category.name);
+      }
+      console.log(this.categoriesWithData);
     });
   }
+
+  getIndividualWalk() {
+    console.log(this.chosenPOIs);
+    // send backend request
+  }
+
+  private categorizeData(data: POI[], category: String): POI[] {
+    return data.filter((poi) => poi.Rubrik === category);
+  }
+
+  togglePOISelection(poi: POI) {
+    if (this.chosenPOIs.includes(poi)) {
+      this.chosenPOIs = this.chosenPOIs.filter(
+        (element) => element.Punktname !== poi.Punktname
+      );
+    } else {
+      this.chosenPOIs.push(poi);
+    }
+  }
+
+  isSelected(poi: POI): boolean {
+    return this.chosenPOIs.includes(poi);
+  }
+
+  isAtLeastTwoSelected(): boolean {
+    return this.chosenPOIs.length >= 2;
+  }
 }
diff --git a/frontend/src/app/map/map.component.html b/frontend/src/app/map/map.component.html
@@ -1,10 +1,19 @@
-<div id="map_page">
-  <div><a href="/">Home</a></div>
-  <div id="">
-    <div id="container">
-      <div id="map"></div>
+<div>
+  <div id="map_page">
+    <div><a href="/">Home</a></div>
+    <div id="map-infos">
+      <div id="container">
+        <div id="map"></div>
+      </div>
+
+      <div id="route-info">
+        <h3>Ausgewählte Sehenswürdigkeiten</h3>
+        <ng-container *ngFor="let point of waypoints"
+          ><div>
+            <p>{{ point.name }}</p>
+          </div></ng-container
+        >
+      </div>
     </div>
-    <div></div>
   </div>
 </div>
-
diff --git a/frontend/src/app/map/map.component.scss b/frontend/src/app/map/map.component.scss
@@ -1,7 +1,26 @@
 #map {
   height: 75vh;
   width: 100%;
-  max-width: 1000px;
+  max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
-}
+  @media screen and (max-width: 600px) {
+    height: 50vh;
+  }
+}
+
+#route-info {
+  background-color: white;
+  padding: 1em;
+}
+
+#map-infos {
+  display: flex;
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+  }
+}
+
+#container {
+  width: 100%;
+}
diff --git a/frontend/src/app/map/map.component.ts b/frontend/src/app/map/map.component.ts
@@ -137,7 +137,9 @@ export class MapComponent {
           this.waypoints[i].location[1],
           this.waypoints[i].location[0]
         )
-      ).addTo(this.map);
+      )
+        .bindPopup(this.waypoints[i].name)
+        .addTo(this.map);
     }
   }
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -10,7 +10,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -3,10 +3,10 @@
 
 html,
 body {
-  height: calc(100% - 4.1%) !important;
+  height: 100%;
 }
-
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
-}
+  background-color: #d3edf8;
+}