diff --git a/package-lock.json b/package-lock.json index f9fad1ac964f7a3c2ba45c26632e5dc977b8aa6a..be9bea4a1532f90c3f14174b40782b0f383c4551 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "hammerjs": "^2.0.8", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -6048,6 +6049,14 @@ "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", "dev": true }, + "node_modules/hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==", + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -16124,6 +16133,11 @@ "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==" + }, "handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", diff --git a/package.json b/package.json index 20fd0b4a48cefa653d7b63d6b1d95139fd553daa..997d35f5b9262c935e9ad3b93ac5bb0a4d58bdb0 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", + "hammerjs": "^2.0.8", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -37,4 +38,4 @@ "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.7.2" } -} \ No newline at end of file +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f32f615f8c587a833896ae4e800249d72c42b389..24aefee2a57f72f90bb6d037e41c66e54b04b095 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MembersComponent } from './members/members.component' -import { RoutesComponent } from './routes/routes.component' +import { MembersListComponent } from './components/members/members-list.component' +import { RoutesComponent } from './components/routes/routes.component' const routes: Routes = [ { - path:'members', component:MembersComponent + path:'members', component:MembersListComponent }, { path:'routes', component:RoutesComponent diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 927e1f03c529bdaa5f1857c3b680a1bfd31c21bb..99eca01c297798708fd068ba44b7f2ab388b66ba 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,20 +5,40 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatMenuModule} from '@angular/material/menu'; -import { MembersComponent } from './members/members.component'; -import { RoutesComponent } from './routes/routes.component' +import { MembersListComponent } from './components/members/members-list.component'; +import { RoutesComponent } from './components/routes/routes.component' +import {FormsModule} from "@angular/forms"; +import {MatTableModule} from "@angular/material/table"; +import {HttpClientModule} from "@angular/common/http"; +import {MatSliderModule} from "@angular/material/slider"; +import {MatPaginatorModule} from "@angular/material/paginator"; +import {MatSortModule} from "@angular/material/sort"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {MatInputModule} from "@angular/material/input"; +import {MatButtonModule} from '@angular/material/button'; +import {MatIconModule} from "@angular/material/icon"; @NgModule({ declarations: [ AppComponent, - MembersComponent, + MembersListComponent, RoutesComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, - MatMenuModule + MatMenuModule, + MatPaginatorModule, + MatSortModule, + MatFormFieldModule, + MatInputModule, + FormsModule, + MatTableModule, + HttpClientModule, + MatSliderModule, + MatButtonModule, + MatIconModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/members/members-list.component.html b/src/app/components/members/members-list.component.html new file mode 100644 index 0000000000000000000000000000000000000000..06aa41fcc462d11f665eed10d9f32af7a4e7c777 --- /dev/null +++ b/src/app/components/members/members-list.component.html @@ -0,0 +1,74 @@ +
+ + Member Table + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{member.id}} Firstname {{member.firstName}} Lastname {{member.lastName}} Details + + Delete + +
+ + +
+ + + + + diff --git a/src/app/components/members/members-list.component.scss b/src/app/components/members/members-list.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..1a044225d62cffeef58213c47a373e33b21a01bd --- /dev/null +++ b/src/app/components/members/members-list.component.scss @@ -0,0 +1,15 @@ +table { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + min-width: 500px; +} + +th.mat-header-cell { + text-align: left; + max-width: 300px; +} + +th.mat-sort-header-sorted { + color: black; +} diff --git a/src/app/members/members.component.spec.ts b/src/app/components/members/members-list.component.spec.ts similarity index 58% rename from src/app/members/members.component.spec.ts rename to src/app/components/members/members-list.component.spec.ts index f626726fdfa71b742da01101702e13af5b3b98ea..63ccbbabcef003d8372f5307b89c1108e4a01814 100644 --- a/src/app/members/members.component.spec.ts +++ b/src/app/components/members/members-list.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MembersComponent } from './members.component'; +import { MembersListComponent } from './members-list.component'; describe('MembersComponent', () => { - let component: MembersComponent; - let fixture: ComponentFixture; + let component: MembersListComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MembersComponent ] + declarations: [ MembersListComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(MembersComponent); + fixture = TestBed.createComponent(MembersListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/members/members-list.component.ts b/src/app/components/members/members-list.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..50494473c1f0412ba03c7f5076328ffb5ee2c89f --- /dev/null +++ b/src/app/components/members/members-list.component.ts @@ -0,0 +1,103 @@ +import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {MemberService} from "../../services/member.service"; +import {Member} from "../../models/member"; +import {HttpErrorResponse} from "@angular/common/http"; +import {MatPaginator} from "@angular/material/paginator"; +import {MatSort, Sort} from "@angular/material/sort"; +import {LiveAnnouncer} from "@angular/cdk/a11y"; +import {MatTableDataSource} from "@angular/material/table"; + + + + + +@Component({ + selector: 'app-members', + templateUrl: './members-list.component.html', + styleUrls: ['./members-list.component.scss'] +}) +export class MembersListComponent implements OnInit, AfterViewInit { + + private _filter!: string; + members: Member[] = []; + filteredMembers!: Member[]; + dataSource = new MatTableDataSource(this.members); + displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete']; + + constructor(private memberService: MemberService, private _liveAnnouncer: LiveAnnouncer) {} + + @ViewChild(MatPaginator) paginator!: MatPaginator; + @ViewChild(MatSort) sort!: MatSort; + + + ngOnInit(): void { + this.getMembers(); + } + + ngAfterViewInit(): void { + //this.dataSource.paginator = this.paginator; + //this.dataSource.sort = this.sort; + + } + + public getMembers(): void { + this.memberService.getMembers().subscribe( + (response:Member[]) => { + console.log(response); + this.members = response; + this.filteredMembers = response; + this.dataSource = new MatTableDataSource(response); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + + }, + (error: HttpErrorResponse) => { + alert(error.message); + } + ) + } + + get filter(){ + return this._filter; + } + + set filter(value: string){ + this._filter = value; + this.filteredMembers = this.filterMembers(value); + this.writeLog(value); + this.writeLog(this.filteredMembers) + } + + writeLog(log: any){ + console.log(log); + } + + filterMembers(filter: string){ + return this.filteredMembers.filter((member: Member) => member.lastName.includes(filter)); + + } + + public deleteMember() { + + } + + public redirectToDetails = (id: number) => { + + } + + public redirectToUpdate = (id: string) => { + + } + + public redirectToDelete = (id: string) => { + + } + + announceSortChange(sortState: Sort) { + if (sortState.direction) { + this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); + } else { + this._liveAnnouncer.announce('Sorting cleared'); + } + } +} diff --git a/src/app/routes/route.ts b/src/app/components/routes/route.ts similarity index 100% rename from src/app/routes/route.ts rename to src/app/components/routes/route.ts diff --git a/src/app/routes/routes.component.html b/src/app/components/routes/routes.component.html similarity index 100% rename from src/app/routes/routes.component.html rename to src/app/components/routes/routes.component.html diff --git a/src/app/routes/routes.component.scss b/src/app/components/routes/routes.component.scss similarity index 100% rename from src/app/routes/routes.component.scss rename to src/app/components/routes/routes.component.scss diff --git a/src/app/routes/routes.component.spec.ts b/src/app/components/routes/routes.component.spec.ts similarity index 100% rename from src/app/routes/routes.component.spec.ts rename to src/app/components/routes/routes.component.spec.ts diff --git a/src/app/routes/routes.component.ts b/src/app/components/routes/routes.component.ts similarity index 100% rename from src/app/routes/routes.component.ts rename to src/app/components/routes/routes.component.ts diff --git a/src/app/members/members.component.html b/src/app/members/members.component.html deleted file mode 100644 index 9f48fd4b1f648798e6ede4065d5e34e3f8214997..0000000000000000000000000000000000000000 --- a/src/app/members/members.component.html +++ /dev/null @@ -1 +0,0 @@ -

members works!

diff --git a/src/app/members/members.component.scss b/src/app/members/members.component.scss deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/src/app/members/members.component.ts b/src/app/members/members.component.ts deleted file mode 100644 index 13b1f635bfe9449730ab5275f471c2e0159c6eee..0000000000000000000000000000000000000000 --- a/src/app/members/members.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-members', - templateUrl: './members.component.html', - styleUrls: ['./members.component.scss'] -}) -export class MembersComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/models/address.ts b/src/app/models/address.ts new file mode 100644 index 0000000000000000000000000000000000000000..99fcc2e2bffaca7fedd00d163d567a2eeebb4ad3 --- /dev/null +++ b/src/app/models/address.ts @@ -0,0 +1,5 @@ +export interface Address { + street: string; + houseNumber: number; + postCode: string; +} diff --git a/src/app/models/difficultyLevelEnum.ts b/src/app/models/difficultyLevelEnum.ts new file mode 100644 index 0000000000000000000000000000000000000000..c996df443f5805aae4ee5a1d478d815b5681e874 --- /dev/null +++ b/src/app/models/difficultyLevelEnum.ts @@ -0,0 +1,6 @@ +export enum difficultyLevelEnum { + easy, + medium, + hard, + hell +} diff --git a/src/app/models/favouriteRoutes.ts b/src/app/models/favouriteRoutes.ts new file mode 100644 index 0000000000000000000000000000000000000000..66b95fd18f0c7a2ac7cdfbe5d564c864b4145922 --- /dev/null +++ b/src/app/models/favouriteRoutes.ts @@ -0,0 +1,5 @@ +export interface FavouriteRoute { + id: number; + name: string; + difficultyLevelEnum: null; +} diff --git a/src/app/models/member.ts b/src/app/models/member.ts new file mode 100644 index 0000000000000000000000000000000000000000..89fa0a7a0d838ba35cb4e12818a142decc5418bc --- /dev/null +++ b/src/app/models/member.ts @@ -0,0 +1,10 @@ +import {Address} from "./address"; +import {FavouriteRoute} from "./favouriteRoutes"; + +export interface Member { + id: number; + firstName: string; + lastName: string; + addressDto: Address; + favouriteRoutes: FavouriteRoute[]; +} diff --git a/src/app/services/member.service.spec.ts b/src/app/services/member.service.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..8928158cefd8d63fafc3edae087e7ed6b5ca322b --- /dev/null +++ b/src/app/services/member.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { MemberService } from './member.service'; + +describe('MemberService', () => { + let service: MemberService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(MemberService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..6cb033390ff6eb95baff33fd2954167a178aa92f --- /dev/null +++ b/src/app/services/member.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {Observable} from "rxjs"; +import {Member} from "../models/member"; +import {environment} from "../../environments/environment"; + +@Injectable({ + providedIn: 'root' +}) +export class MemberService { + private apiServerUrl = environment.apiServerUrl; + + constructor(private http: HttpClient) { } + + public getMembers(): Observable { + return this.http.get(`${this.apiServerUrl}/members/all`); + } + + public addMember(member: Member): Observable { + return this.http.post(`${this.apiServerUrl}/member/add`, member); + } + + /*public updateMember(memberId: number): Observable { + return this.http.put(`${this.apiServerUrl}/member/${memberId}`); + }*/ + + public deleteMember(memberId: number): Observable { + return this.http.delete(`${this.apiServerUrl}/member/${memberId}`); + } + +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index f56ff47022c7a46eac3aee615d6d9150338524dc..dd2f00b2f51becdebeec700218e6b63a84ba985f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,8 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + apiServerUrl: 'http://localhost:8080' }; /* diff --git a/src/styles.scss b/src/styles.scss index 324ec5dbdd00b7dc49c17bbd24d764a1fb678927..24b2054a4787629c2d73c522a74087faeeeaeb66 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,4 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; box-sizing: border-box; font-size: 16px} +html, body { height: 100%; margin: 20px; box-sizing: border-box; font-size: 16px} body { margin: 0; font-family: 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; }