From 38efafa60f43b7dcd20fd9b03178643ec2ad04cc Mon Sep 17 00:00:00 2001 From: FlayInAHook Date: Thu, 24 Sep 2020 13:33:30 +0200 Subject: [PATCH] added table overview and the base for a collapsing navbar --- package-lock.json | 29 +++++----- package.json | 2 +- src/app/app.component.html | 5 ++ src/app/app.component.ts | 9 +++- src/app/app.module.ts | 9 +++- .../menu-list-item.component.html | 16 ++++++ .../menu-list-item.component.scss | 28 ++++++++++ .../menu-list-item.component.ts | 54 +++++++++++++++++++ src/app/components/menu-list-item/nav-item.ts | 8 +++ .../components/menu-list-item/nav.service.ts | 25 +++++++++ .../table-overview.component.html | 28 +++++++++- .../table-overview.component.scss | 11 ++++ .../pages/tables/bikes/bikes.component.html | 9 ++-- src/environments/environment.ts | 4 +- src/generated/graphql.ts | 2 - 15 files changed, 213 insertions(+), 26 deletions(-) create mode 100644 src/app/components/menu-list-item/menu-list-item.component.html create mode 100644 src/app/components/menu-list-item/menu-list-item.component.scss create mode 100644 src/app/components/menu-list-item/menu-list-item.component.ts create mode 100644 src/app/components/menu-list-item/nav-item.ts create mode 100644 src/app/components/menu-list-item/nav.service.ts diff --git a/package-lock.json b/package-lock.json index 478816a..dd92515 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3846,12 +3846,12 @@ } }, "browserslist": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz", - "integrity": "sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==", + "version": "4.14.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.4.tgz", + "integrity": "sha512-7FOuawafVdEwa5Jv4nzeik/PepAjVte6HmVGHsjt2bC237jeL9QlcTBDF3PnHEvcC6uHwLGYPwZHNZMB7wWAnw==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001131", + "caniuse-lite": "^1.0.30001135", "electron-to-chromium": "^1.3.570", "escalade": "^3.1.0", "node-releases": "^1.1.61" @@ -4072,9 +4072,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001131", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz", - "integrity": "sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==", + "version": "1.0.30001135", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz", + "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==", "dev": true }, "canonical-path": { @@ -5655,9 +5655,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.570", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz", - "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==", + "version": "1.3.571", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.571.tgz", + "integrity": "sha512-UYEQ2Gtc50kqmyOmOVtj6Oqi38lm5yRJY3pLuWt6UIot0No1L09uu6Ja6/1XKwmz/p0eJFZTUZi+khd1PV1hHA==", "dev": true }, "elegant-spinner": { @@ -11424,14 +11424,15 @@ } }, "postcss-selector-parser": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", - "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz", + "integrity": "sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==", "dev": true, "requires": { "cssesc": "^3.0.0", "indexes-of": "^1.0.1", - "uniq": "^1.0.1" + "uniq": "^1.0.1", + "util-deprecate": "^1.0.2" } }, "postcss-svgo": { diff --git a/package.json b/package.json index c3356f9..9f9d4e0 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "zone.js": "~0.10.3" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.1000.8", + "@angular-devkit/build-angular": "^0.1000.8", "@angular/cli": "~10.0.8", "@angular/compiler-cli": "~10.0.14", "@graphql-codegen/cli": "^1.17.8", diff --git a/src/app/app.component.html b/src/app/app.component.html index bf77355..322f0d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -28,6 +28,11 @@ + Tabellenübersicht diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e568f0e..e486760 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,9 +1,10 @@ -import { Component, Renderer2 } from '@angular/core'; +import { Component, ElementRef, Renderer2 } from '@angular/core'; import { ColorThemeService } from './services/colorTheme.service'; import { AuthService } from './services/auth.service'; import { Router } from '@angular/router'; import { ViewChild } from '@angular/core'; import { MatSidenav } from '@angular/material/sidenav'; +import { NavService } from './components/menu-list-item/nav.service'; @Component({ selector: 'app-root', @@ -16,12 +17,14 @@ export class AppComponent { loggedIn = false; @ViewChild('sidenav') public sideNav:MatSidenav; + @ViewChild('appDrawer') appDrawer: ElementRef; constructor( private renderer: Renderer2, private themeService: ColorThemeService, private authService: AuthService, private router: Router, + private navService: NavService ) { this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme this.themeService.load(); @@ -37,4 +40,8 @@ export class AppComponent { this.authService.logout().subscribe().add(() => this.router.navigate(['login'])); this.sideNav.close(); } + + ngAfterViewInit() { + this.navService.appDrawer = this.appDrawer; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 149b333..5d9936c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,8 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import {MatCardModule} from '@angular/material/card'; +import {MatGridListModule} from '@angular/material/grid-list'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -30,10 +32,13 @@ import { ParticipantsComponent } from './pages/tables/participants/participants. import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component'; import { TableOverviewComponent } from './pages/table-overview/table-overview.component'; import { StringCellComponent } from './components/tableComponents/string-cell/string-cell.component'; +import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component'; +import { NavService }from './components/menu-list-item/nav.service'; @NgModule({ declarations: [ AppComponent, + MenuListItemComponent, LoginComponent, BikesComponent, ParticipantsComponent, @@ -51,6 +56,8 @@ import { StringCellComponent } from './components/tableComponents/string-cell/st MatToolbarModule, MatButtonModule, MatTableModule, + MatCardModule, + MatGridListModule, MatInputModule, MatMenuModule, MatSlideToggleModule, @@ -64,7 +71,7 @@ import { StringCellComponent } from './components/tableComponents/string-cell/st GraphQLModule, DragDropModule, ], - providers: [], + providers: [NavService], bootstrap: [AppComponent], }) export class AppModule { diff --git a/src/app/components/menu-list-item/menu-list-item.component.html b/src/app/components/menu-list-item/menu-list-item.component.html new file mode 100644 index 0000000..62a708b --- /dev/null +++ b/src/app/components/menu-list-item/menu-list-item.component.html @@ -0,0 +1,16 @@ + + {{item.iconName}} + {{item.displayName}} + + + + expand_more + + + +
+ + +
diff --git a/src/app/components/menu-list-item/menu-list-item.component.scss b/src/app/components/menu-list-item/menu-list-item.component.scss new file mode 100644 index 0000000..df8dd0f --- /dev/null +++ b/src/app/components/menu-list-item/menu-list-item.component.scss @@ -0,0 +1,28 @@ +/*@import '../theme'; + +:host { + display: flex; + flex-direction: column; + outline: none; + width: 100%; + + .mat-list-item.active { + background-color: mat-color($app-primary, 50); + } + &:hover, + &:focus { + >.mat-list-item:not(.expanded) { + background-color: mat-color($app-primary, 100) !important; + } + } +} + +.mat-list-item { + padding: 8px 0; + display: flex; + width: auto; + + .routeIcon { + margin-right: 40px; + } +}*/ diff --git a/src/app/components/menu-list-item/menu-list-item.component.ts b/src/app/components/menu-list-item/menu-list-item.component.ts new file mode 100644 index 0000000..b0d3476 --- /dev/null +++ b/src/app/components/menu-list-item/menu-list-item.component.ts @@ -0,0 +1,54 @@ +import {Component, HostBinding, Input, OnInit} from '@angular/core'; +import {NavItem} from './nav-item'; +import {Router} from '@angular/router'; +import {NavService} from './nav.service'; +import {animate, state, style, transition, trigger} from '@angular/animations'; + +@Component({ + selector: 'app-menu-list-item', + templateUrl: './menu-list-item.component.html', + styleUrls: ['./menu-list-item.component.scss'], + animations: [ + trigger('indicatorRotate', [ + state('collapsed', style({transform: 'rotate(0deg)'})), + state('expanded', style({transform: 'rotate(180deg)'})), + transition('expanded <=> collapsed', + animate('225ms cubic-bezier(0.4,0.0,0.2,1)') + ), + ]) + ] +}) +export class MenuListItemComponent implements OnInit { + expanded: boolean = false; + @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded; + @Input() item: NavItem; + @Input() depth: number; + + constructor(public navService: NavService, + public router: Router) { + if (this.depth === undefined) { + this.depth = 0; + } + } + + ngOnInit() { + this.navService.currentUrl.subscribe((url: string) => { + if (this.item.route && url) { + // console.log(`Checking '/${this.item.route}' against '${url}'`); + this.expanded = url.indexOf(`/${this.item.route}`) === 0; + this.ariaExpanded = this.expanded; + // console.log(`${this.item.route} is expanded: ${this.expanded}`); + } + }); + } + + onItemSelected(item: NavItem) { + if (!item.children || !item.children.length) { + this.router.navigate([item.route]); + this.navService.closeNav(); + } + if (item.children && item.children.length) { + this.expanded = !this.expanded; + } + } +} diff --git a/src/app/components/menu-list-item/nav-item.ts b/src/app/components/menu-list-item/nav-item.ts new file mode 100644 index 0000000..c19ddfd --- /dev/null +++ b/src/app/components/menu-list-item/nav-item.ts @@ -0,0 +1,8 @@ +export interface NavItem { + displayName: string; + disabled?: boolean; + iconName: string; + route?: string; + children?: NavItem[]; + } + \ No newline at end of file diff --git a/src/app/components/menu-list-item/nav.service.ts b/src/app/components/menu-list-item/nav.service.ts new file mode 100644 index 0000000..24302d3 --- /dev/null +++ b/src/app/components/menu-list-item/nav.service.ts @@ -0,0 +1,25 @@ +import {EventEmitter, Injectable} from '@angular/core'; +import {Event, NavigationEnd, Router} from '@angular/router'; +import {BehaviorSubject} from 'rxjs'; + +@Injectable() +export class NavService { + public appDrawer: any; + public currentUrl = new BehaviorSubject(undefined); + + constructor(private router: Router) { + this.router.events.subscribe((event: Event) => { + if (event instanceof NavigationEnd) { + this.currentUrl.next(event.urlAfterRedirects); + } + }); + } + + public closeNav() { + this.appDrawer.close(); + } + + public openNav() { + this.appDrawer.open(); + } +} diff --git a/src/app/pages/table-overview/table-overview.component.html b/src/app/pages/table-overview/table-overview.component.html index 61a83f2..161fcdd 100644 --- a/src/app/pages/table-overview/table-overview.component.html +++ b/src/app/pages/table-overview/table-overview.component.html @@ -1 +1,27 @@ -

table-overview works!

+ +
+
+ + Lastenräder + Beteiligte + Ausleihstationen + Tabelle 4 + +
+ + Tabelle 5 + Tabelle 7 + Tabelle 8 + Tabelle 9 + Tabelle 10 + Tabelle 11 + Tabelle 12 + Tabelle 13 + Tabelle 14 + Tabelle 15 + Tabelle 16 + Tabelle 17 + +
+ + diff --git a/src/app/pages/table-overview/table-overview.component.scss b/src/app/pages/table-overview/table-overview.component.scss index e69de29..40613c0 100644 --- a/src/app/pages/table-overview/table-overview.component.scss +++ b/src/app/pages/table-overview/table-overview.component.scss @@ -0,0 +1,11 @@ +mat-grid-tile { + background: gray; + } + +.grid-list-spacer{ + margin: 15px; +} + +.big-list{ + margin-bottom: 30px; +} \ No newline at end of file diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html index f14e5b5..a8b857f 100644 --- a/src/app/pages/tables/bikes/bikes.component.html +++ b/src/app/pages/tables/bikes/bikes.component.html @@ -7,6 +7,7 @@ mat-table [dataSource]="bikes" class="mat-elevation-z8" + matSort cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" @@ -36,7 +37,7 @@ - Name + Name - ID + ID {{ element.id }} - Fahrgestellnummer + Fahrgestellnummer - Anzahl Kinder + Anzahl Kinder