Change style of overview

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { NavService } from './components/menu-list-item/nav.service';
 import { NavItem } from './components/menu-list-item/nav-item';
+import { tableLinks } from 'src/app/tableLinks';
 
 @Component({
   selector: 'app-root',
@@ -20,28 +21,12 @@ export class AppComponent {
   @ViewChild('sidenav') public sideNav:MatSidenav;
   @ViewChild('appDrawer') appDrawer: ElementRef;
 
-
   navItems: NavItem[] = [
     {
       displayName: 'Tabellen',
       iconName: 'recent_actors',
       route: 'tableOverview',
-      children: [
-        {
-          displayName: 'Lastenräder',
-          iconName: 'directions_bike',
-          route: 'table/bikes'
-        },
-        {
-          displayName: 'Beteiligte',
-          iconName: 'group',
-          route: 'table/participants'
-        },
-        {
-          displayName: 'Standorte',
-          iconName: 'place',
-          route: 'table/lendingStations'
-        }]
+      children: tableLinks
       }];
         
 

src/app/pages/table-overview/table-overview.component.html

@@ -1,27 +1,21 @@
-
-<div class="grid-list-spacer">
-<div class="big-list">
-<mat-grid-list class="big-list" cols="2" rowHeight="3:1">
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikes">Lastenräder</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/participants">Aktive</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/lendingStations">Standorte</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/persons">Personen</mat-grid-tile>
-  </mat-grid-list>
-  <div>
-  <mat-grid-list cols="4" rowHeight="60px"  >
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/equipmentTypes">Equipmenttypen</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/equipments">Equipment</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/timeFrames">Zeitscheiben</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/organisations">Organisation</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/contactInformation">Kontaktinformation</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/providers">Anbieter</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/engagements">Engagements</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/engagementTypes">Engagementtypen</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikeEvents">Lastenradevents</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/bikeEventTypes">Lastenradeventtypen</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/workshops">Workshops</mat-grid-tile>
-    <mat-grid-tile class="mat-elevation-z4" routerLink = "/table/workshopTypes">Workshoptypen</mat-grid-tile>
-  </mat-grid-list>
+<div class="page-wrapper">
+  <div class="link-box">
+    <div class="text-wrapper">
+      <h1>Wohin soll es gehen?</h1>
+      <mat-list>
+        <mat-list-item *ngFor="let link of tableLinks">
+          <a mat-button color="primary" [routerLink]="link.route">
+            <mat-icon>{{ link.iconName }}</mat-icon>
+            {{ link.displayName }}
+          </a>
+        </mat-list-item>
+      </mat-list>
+    </div>
+  </div>
+  <div class="banner-box mat-elevation-z8">
+    <span class="center-text mat-display-3">Willkommen, {{ username }}!</span>
+    <div class="banner-img-box">
+      <img class="banner-img" src="../../../assets/rain.png" />
+    </div>
+  </div>
 </div>
-
-  

src/app/pages/table-overview/table-overview.component.scss

@@ -1,12 +1,34 @@
-mat-grid-tile {
-  cursor: pointer;
-  background: grey;
-}
-
-.grid-list-spacer {
-  margin: 15px;
-}
-
-.big-list {
-  margin-bottom: 30px;
+.page-wrapper {
+  display: flex;
+  height: 100%;
+  .link-box {
+    flex-basis: 50%;
+    height: 100%;
+    overflow: auto;
+    .text-wrapper {
+      padding: 2em;
+    }
+  }
+  .banner-box {
+    flex-basis: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    .center-text {
+      margin: 0.5em;
+      position: absolute;
+      word-break: break-word;
+      color: white;
+      z-index: 5;
+    }
+    .banner-img-box {
+      height: 100%;
+      filter: blur(2px);
+      img {
+        height: 100%;
+      }
+    }
+  }
 }

src/app/pages/table-overview/table-overview.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'src/app/services/auth.service';
+import { tableLinks } from 'src/app/tableLinks';
 
 @Component({
   selector: 'app-table-overview',
@@ -7,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TableOverviewComponent implements OnInit {
 
-  constructor() { }
+  username = "fLotte Nutzer"
+  tableLinks = tableLinks;
+
+  constructor(private auth: AuthService) {
+   }
 
   ngOnInit(): void {
+    this.auth.currentUser.subscribe(user => {
+      const name = user?.user?.name;
+      this.username = name || this.username    
+    });
   }
 
 }

src/app/pages/tables/bike-events/bike-events.component.ts

@@ -118,7 +118,7 @@ export class BikeEventsComponent implements OnInit {
   tableDataGQLCreateInputType: string = 'BikeEventCreateInput';
   tableDataGQLUpdateInputType: string = 'BikeEventUpdateInput';
 
-  headline = 'Lastenradevent';
+  headline = 'Lastenradevents';
   headlineIconName = 'event';
 
   loadingRowIds: string[] = [];

src/app/pages/tables/organisations/organisations.component.ts

@@ -50,7 +50,7 @@ export class OrganisationsComponent implements OnInit {
   tableDataGQLCreateInputType: string = 'OrganisationCreateInput';
   tableDataGQLUpdateInputType: string = 'OrganisationUpdateInput';
 
-  headline = 'Organisation';
+  headline = 'Organisationen';
   headlineIconName = 'business';
 
   loadingRowIds: string[] = [];

src/app/tableLinks.ts

@@ -0,0 +1,83 @@
+
+export const tableLinks = [
+    {
+      displayName: 'Lastenräder',
+      iconName: 'directions_bike',
+      route: 'table/bikes'
+    },
+    {
+      displayName: 'Aktive',
+      iconName: 'directions_run',
+      route: 'table/participants'
+    },
+    {
+      displayName: 'Standorte',
+      iconName: 'location_on',
+      route: 'table/lendingStations'
+    },
+    {
+      displayName: 'Personen',
+      iconName: 'person',
+      route: 'table/persons'
+    },
+    {
+      displayName: 'Kontaktinformationen',
+      iconName: 'contact_page',
+      route: 'table/contactInformation'
+    },
+    {
+      displayName: 'Zeitscheiben',
+      iconName: 'access_time',
+      route: 'table/timeFrames'
+    },
+    {
+      displayName: 'Lastenfahrrad-Eventtypen',
+      iconName: 'build',
+      route: 'table/bikeEventTypes'
+    },
+    {
+      displayName: 'Lastenfahrrad-Events',
+      iconName: 'event',
+      route: 'table/bikeEvents'
+    },
+    {
+      displayName: 'Equipmenttypen',
+      iconName: 'toys',
+      route: 'table/equipmentTypes'
+    },
+    {
+      displayName: 'Equipment',
+      iconName: 'battery_full',
+      route: 'table/equipments'
+    },
+    {
+      displayName: 'Engagementypen',
+      iconName: 'track_changes',
+      route: 'table/engagementTypes'
+    },
+    {
+      displayName: 'Engagements',
+      iconName: 'update',
+      route: 'table/engagements'
+    },
+    {
+      displayName: 'Organisationen',
+      iconName: 'business',
+      route: 'table/organisations'
+    },
+    {
+      displayName: 'Anbieter',
+      iconName: 'people',
+      route: 'table/providers'
+    },
+    {
+      displayName: 'Workshops',
+      iconName: 'school',
+      route: 'table/workshops'
+    },
+    {
+      displayName: 'Workshoptypen',
+      iconName: 'multiline_chart',
+      route: 'table/workshopTypes'
+    },
+  ]