From cb45cd1c512441b43c2e266f5313a6a2f6e5475b Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <w.hottgenroth@krohne.com>
Date: Mon, 18 Jan 2021 12:28:06 +0100
Subject: [PATCH] router and config

---
 hv-ui/src/app/app-routing.module.ts |  7 ++++++-
 hv-ui/src/app/app.component.css     | 29 +++++++++++++++++++++++------
 hv-ui/src/app/app.component.html    |  7 +++++--
 hv-ui/src/app/config.ts             |  1 +
 hv-ui/src/app/mieter.service.ts     |  5 +++--
 hv-ui/src/app/objekt.service.ts     |  5 +++--
 6 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 hv-ui/src/app/config.ts

diff --git a/hv-ui/src/app/app-routing.module.ts b/hv-ui/src/app/app-routing.module.ts
index d425c6f..de4af2b 100644
--- a/hv-ui/src/app/app-routing.module.ts
+++ b/hv-ui/src/app/app-routing.module.ts
@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { MietersComponent } from './mieters/mieters.component';
+import { ObjekteComponent } from './objekte/objekte.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'objekte', component: ObjekteComponent },
+  { path: 'mieters', component: MietersComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/hv-ui/src/app/app.component.css b/hv-ui/src/app/app.component.css
index b021db3..00a1e5e 100644
--- a/hv-ui/src/app/app.component.css
+++ b/hv-ui/src/app/app.component.css
@@ -1,6 +1,23 @@
-.right {
-    float: right
-}
-.clear {
-    float: clear
-}
\ No newline at end of file
+/* AppComponent's private CSS styles */
+h1 {
+    font-size: 1.2em;
+    margin-bottom: 0;
+  }
+  nav a {
+    padding: 5px 10px;
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+    background-color: #eee;
+    border-radius: 4px;
+  }
+  nav a:visited, a:link {
+    color: #334953;
+  }
+  nav a:hover {
+    color: #039be5;
+    background-color: #cfd8dc;
+  }
+  nav a.active {
+    color: #039be5;
+  }
\ No newline at end of file
diff --git a/hv-ui/src/app/app.component.html b/hv-ui/src/app/app.component.html
index 27d871d..df17cd8 100644
--- a/hv-ui/src/app/app.component.html
+++ b/hv-ui/src/app/app.component.html
@@ -1,5 +1,8 @@
 <h1>{{title}}</h1>
 
-<app-objekte></app-objekte>
-<app-mieters></app-mieters>
+<nav>
+    <a routerLink="/objekte">Meine Objekte</a>
+    <a routerLink="/mieters">Meine Mieter</a>
+</nav>
+<router-outlet></router-outlet>
 <app-messages></app-messages>
\ No newline at end of file
diff --git a/hv-ui/src/app/config.ts b/hv-ui/src/app/config.ts
new file mode 100644
index 0000000..3b658e3
--- /dev/null
+++ b/hv-ui/src/app/config.ts
@@ -0,0 +1 @@
+export const serviceBaseUrl = "http://172.16.3.32:5000";
\ No newline at end of file
diff --git a/hv-ui/src/app/mieter.service.ts b/hv-ui/src/app/mieter.service.ts
index 19ea9f2..59f3096 100644
--- a/hv-ui/src/app/mieter.service.ts
+++ b/hv-ui/src/app/mieter.service.ts
@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Mieter } from './mieter';
 import { MessageService } from './message.service';
+import { serviceBaseUrl } from './config'
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +14,11 @@ export class MieterService {
   
   getMieters(): Promise<Mieter[]> {
     this.messageService.add('MieterService: fetched mieters');
-    return this.http.get<Mieter[]>(`http://172.16.3.185:5000/hv/mieters`).toPromise()
+    return this.http.get<Mieter[]>(`${serviceBaseUrl}/hv/mieters`).toPromise()
   }
 
   getMieter(id: number): Promise<Mieter> {
     this.messageService.add(`MieterService: fetch mieter id=${id}`);
-    return this.http.get<Mieter>(`http://172.16.3.185:5000/hv/mieter/${id}`).toPromise()
+    return this.http.get<Mieter>(`${serviceBaseUrl}/hv/mieter/${id}`).toPromise()
   }
 }
diff --git a/hv-ui/src/app/objekt.service.ts b/hv-ui/src/app/objekt.service.ts
index 4fab1c8..729cc19 100644
--- a/hv-ui/src/app/objekt.service.ts
+++ b/hv-ui/src/app/objekt.service.ts
@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Objekt } from './objekt';
 import { MessageService } from './message.service';
+import { serviceBaseUrl } from './config';
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +14,11 @@ export class ObjektService {
   
   getObjekte(): Promise<Objekt[]> {
     this.messageService.add('ObjektService: fetched objekte');
-    return this.http.get<Objekt[]>(`http://172.16.3.185:5000/hv/objekte`).toPromise()
+    return this.http.get<Objekt[]>(`${serviceBaseUrl}/hv/objekte`).toPromise()
   }
 
   getObjekt(id: number): Promise<Objekt> {
     this.messageService.add(`ObjektService: fetch objekt id=${id}`);
-    return this.http.get<Objekt>(`http://172.16.3.185:5000/hv/objekt/${id}`).toPromise()
+    return this.http.get<Objekt>(`${serviceBaseUrl}/hv/objekt/${id}`).toPromise()
   }
 }