Add more pages

src/app/app-routing.module.ts

@@ -1,12 +1,19 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent} from './pages/login/login.component'
-import { BikesComponent} from './pages/bikes/bikes.component'
+import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
+import { BikesComponent} from './pages/tables/bikes/bikes.component'
+import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
+import { ParticipantsComponent } from './pages/tables/participants/participants.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
-  { path: 'bikes', component: BikesComponent },
-  { path: '', redirectTo: '/bikes', pathMatch: 'full' },
+  { path: 'tableOverview', component: TableOverviewComponent },
+  { path: 'table/bikes', component: BikesComponent },
+  { path: 'table/participants', component: ParticipantsComponent },
+  { path: 'table/lendingStations', component: LendingStationsComponent },
+  { path: '', redirectTo: 'tableOverview', pathMatch: 'full' },
+  { path: 'table', redirectTo: 'tableOverview', pathMatch: 'full' },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -29,13 +29,11 @@
 
   <mat-sidenav-container id="content">
     <mat-sidenav #sidenav>
-      <mat-nav-list>
-        <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
-        <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
-        <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
-        <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
-        <a mat-list-item [routerLink]="'/activities'"> Activities </a>
-        <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
+      <mat-nav-list (click)="sidenav.toggle()">
+        <a mat-list-item [routerLink]="'/tableOverview'"> Tabellenübersicht </a>
+        <a mat-list-item [routerLink]="'/table/bikes'"> Lastenräder </a>
+        <a mat-list-item [routerLink]="'/table/participants'"> Beteiligte </a>
+        <a mat-list-item [routerLink]="'/table/lendingStations'"> Ausleihstationen </a>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>

src/app/app.module.ts

@@ -22,8 +22,11 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginComponent } from './pages/login/login.component';
-import { BikesComponent } from './pages/bikes/bikes.component';
+import { BikesComponent } from './pages/tables/bikes/bikes.component';
 import { GraphQLModule } from './graphql.module';
+import { ParticipantsComponent } from './pages/tables/participants/participants.component';
+import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
+import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
 
 
 
@@ -31,7 +34,10 @@ import { GraphQLModule } from './graphql.module';
   declarations: [
     AppComponent,
     LoginComponent,
-    BikesComponent
+    BikesComponent,
+    ParticipantsComponent,
+    LendingStationsComponent,
+    TableOverviewComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1 @@
+<p>table-overview works!</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableOverviewComponent } from './table-overview.component';
+
+describe('TableOverviewComponent', () => {
+  let component: TableOverviewComponent;
+  let fixture: ComponentFixture<TableOverviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TableOverviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-table-overview',
+  templateUrl: './table-overview.component.html',
+  styleUrls: ['./table-overview.component.scss']
+})
+export class TableOverviewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
-import { GetCargoBikesGQL, GetCargoBikesQuery } from '../../../generated/graphql';
+import { GetCargoBikesGQL, GetCargoBikesQuery } from '../../../../generated/graphql';
 
 type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBikes"]>;
 

src/app/pages/tables/lending-stations/lending-stations.component.html

@@ -0,0 +1 @@
+<p>lending-stations works!</p>

src/app/pages/tables/lending-stations/lending-stations.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LendingStationsComponent } from './lending-stations.component';
+
+describe('LendingStationsComponent', () => {
+  let component: LendingStationsComponent;
+  let fixture: ComponentFixture<LendingStationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LendingStationsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LendingStationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/tables/lending-stations/lending-stations.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lending-stations',
+  templateUrl: './lending-stations.component.html',
+  styleUrls: ['./lending-stations.component.scss']
+})
+export class LendingStationsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/tables/participants/participants.component.html

@@ -0,0 +1 @@
+<p>participants works!</p>

src/app/pages/tables/participants/participants.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BikesComponent } from './bikes.component';
+import { ParticipantsComponent } from './participants.component';
 
-describe('BikesComponent', () => {
-  let component: BikesComponent;
-  let fixture: ComponentFixture<BikesComponent>;
+describe('ParticipantsComponent', () => {
+  let component: ParticipantsComponent;
+  let fixture: ComponentFixture<ParticipantsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BikesComponent ]
+      declarations: [ ParticipantsComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BikesComponent);
+    fixture = TestBed.createComponent(ParticipantsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-participants',
+  templateUrl: './participants.component.html',
+  styleUrls: ['./participants.component.scss']
+})
+export class ParticipantsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/services/bikes.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BikesService {
+
+  constructor() { }
+}

src/app/services/lending-stations.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LendingStationsService {
+
+  constructor() { }
+}

src/app/services/participants.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ParticipantsService {
+
+  constructor() { }
+}