not as expected

hv-ui/angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -87,6 +88,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []

hv-ui/package-lock.json

@@ -155,6 +155,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.4.tgz",
+      "integrity": "sha512-suhAhsZEv+lLwm8dc524cMvO7gHPi+z2+4tueNS+zDiIObdZc4fs+KoOlnRMdYwba++X/V8mHXuDEQetl3GFcw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.0.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.7.tgz",
@@ -352,6 +369,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/material": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.4.tgz",
+      "integrity": "sha512-yjJEl3UbJxyKZFAbhvyZGphDfhtR1vo0AnDEE3KBxAOp9oD4r7paL6ER9rSXFoNRjST56tIDbNtG/wZNtH0XDQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.0.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.9.tgz",

hv-ui/package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.0.6",
+    "@angular/cdk": "^11.0.4",
     "@angular/common": "~11.0.6",
     "@angular/compiler": "~11.0.6",
     "@angular/core": "~11.0.6",
     "@angular/forms": "~11.0.6",
+    "@angular/material": "^11.0.4",
     "@angular/platform-browser": "~11.0.6",
     "@angular/platform-browser-dynamic": "~11.0.6",
     "@angular/router": "~11.0.6",

hv-ui/src/app/app.component.css

@@ -1,23 +0,0 @@
-/* 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;
-  }

hv-ui/src/app/app.component.html

@@ -4,5 +4,8 @@
     <a routerLink="/objekte">Meine Objekte</a>
     <a routerLink="/mieters">Meine Mieter</a>
 </nav>
+
+<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
+
 <router-outlet></router-outlet>
 <app-messages></app-messages>

hv-ui/src/app/app.module.ts

@@ -10,6 +10,9 @@ import { MietersComponent } from './mieters/mieters.component';
 import { WohnungenComponent } from './wohnungen/wohnungen.component';
 import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MatSliderModule } from '@angular/material/slider'
 
 @NgModule({
   declarations: [
@@ -24,7 +27,9 @@ import { FormsModule } from '@angular/forms';
     BrowserModule,
     FormsModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    BrowserAnimationsModule,
+    MatSliderModule
   ],
   providers: [],
   bootstrap: [AppComponent]

hv-ui/src/app/messages/messages.component.css

@@ -1,20 +0,0 @@
-/* MessagesComponent's private CSS styles */
-h2 {
-    color: red;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-  }
-  
-  button.clear {
-    font-family: Arial, sans-serif;
-    color: #333;
-    background-color: #eee;
-    margin-bottom: 12px;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  button:hover {
-    background-color: #cfd8dc;
-  }

hv-ui/src/app/messages/messages.component.html

@@ -1,8 +1,5 @@
 <div *ngIf="messageService.messages.length">
-
     <h2>Messages</h2>
-    <button class="clear"
+    <button (click)="messageService.clear()">clear</button>
-            (click)="messageService.clear()">clear</button>
     <div *ngFor='let message of messageService.messages'> {{message}} </div>
-  
 </div>

hv-ui/src/app/mieters/mieters.component.css

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.mieters {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.mieters li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.mieters li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.mieters li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.mieters li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.mieters .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.mieters a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.mieters a:hover {
-  color:#607D8B;
-}

hv-ui/src/app/objekte/objekte.component.css

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.objekte {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.objekte li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.objekte li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.objekte li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.objekte li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.objekte .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.objekte a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.objekte a:hover {
-  color:#607D8B;
-}

hv-ui/src/app/wohnungen/wohnungen.component.css

@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.wohnungen {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.wohnungen li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.wohnungen li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.wohnungen li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.wohnungen li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.wohnungen .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.wohnungen a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.wohnungen a:hover {
-  color:#607D8B;
-}

hv-ui/src/app/zahlung.ts

@@ -0,0 +1,7 @@
+export interface Zahlung {
+    id: number;
+    mieter_id: number;
+    ref_wohnung: number;
+    datum: string;
+    betrag: number;
+}

hv-ui/src/index.html

@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto: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>

hv-ui/src/styles.css

@@ -1,22 +0,0 @@
-/* Application-wide Styles */
-h1 {
-    color: #369;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 250%;
-  }
-h2, h3 {
-    color: #444;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-}
-body {
-    margin: 2em;
-}
-body, input[type="text"], button {
-    color: #333;
-    font-family: Cambria, Georgia, serif;
-}
-/* everywhere else */
-* {
-    font-family: Arial, Helvetica, sans-serif;
-}