From c80312de9d0322a9ea57c33524b021bba53a2f1e Mon Sep 17 00:00:00 2001 From: Patrick Mueller Date: Sun, 25 Dec 2022 21:24:17 +0100 Subject: [PATCH] Add first version of admin table with basic edit capabilities --- src/app/app.module.ts | 10 ++- src/app/components/event/event.component.css | 3 + src/app/components/event/event.component.html | 68 ++++++++++++++++++- src/app/components/event/event.component.ts | 20 +++++- .../events-table/events-table.component.css | 3 + .../events-table/events-table.component.html | 14 ++++ .../events-table.component.spec.ts | 23 +++++++ .../events-table/events-table.component.ts | 18 +++++ src/app/models/event.ts | 12 ++-- src/app/pages/admin/admin.component.html | 15 +++- src/app/pages/admin/admin.component.ts | 38 ++++++++++- src/app/services/api.service.ts | 21 +++++- 12 files changed, 230 insertions(+), 15 deletions(-) create mode 100644 src/app/components/events-table/events-table.component.css create mode 100644 src/app/components/events-table/events-table.component.html create mode 100644 src/app/components/events-table/events-table.component.spec.ts create mode 100644 src/app/components/events-table/events-table.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7628daf..b503b20 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,9 @@ import {AdminComponent} from './pages/admin/admin.component'; import {LandingpageComponent} from './pages/landingpage/landingpage.component'; import {NotfoundComponent} from './pages/notfound/notfound.component'; import {ApiService} from './services/api.service'; +import {HttpClientModule} from '@angular/common/http'; +import {FormsModule} from '@angular/forms'; +import {EventsTableComponent} from './components/events-table/events-table.component'; @NgModule({ declarations: [ @@ -17,11 +20,14 @@ import {ApiService} from './services/api.service'; EventComponent, AdminComponent, LandingpageComponent, - NotfoundComponent + NotfoundComponent, + EventsTableComponent ], imports: [ BrowserModule, - AppRouting + HttpClientModule, + AppRouting, + FormsModule ], providers: [ApiService], bootstrap: [AppComponent] diff --git a/src/app/components/event/event.component.css b/src/app/components/event/event.component.css index e69de29..86bb390 100644 --- a/src/app/components/event/event.component.css +++ b/src/app/components/event/event.component.css @@ -0,0 +1,3 @@ +table, th, td { + border: .05em solid black; +} diff --git a/src/app/components/event/event.component.html b/src/app/components/event/event.component.html index 8a7c90c..572e3c2 100644 --- a/src/app/components/event/event.component.html +++ b/src/app/components/event/event.component.html @@ -1 +1,67 @@ -

event works!

+ +
+ {{this.event?.calendarId}} +
+
+ {{this.event?.calendarId}} +
+ + +
+ +
+
+ {{this.event?.name}} +
+ + +
+ +
+
+ {{this.event?.description}} +
+ + +
+ +
+
+ {{this.event?.startDateTime}} +
+ + +
+ +
+
+ {{this.event?.endDateTime}} +
+ + +
+ +
+
+ {{this.event?.location}} +
+ + +
+ +
+
+ {{this.event?.createdBy}} +
+ + +
+ +
+
+ {{this.event?.url}} +
+ + + + diff --git a/src/app/components/event/event.component.ts b/src/app/components/event/event.component.ts index c7a7ea0..50b7fe7 100644 --- a/src/app/components/event/event.component.ts +++ b/src/app/components/event/event.component.ts @@ -1,16 +1,30 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, Input, OnInit} from '@angular/core'; +import {Event} from '../../models/event'; +import {ApiService} from '../../services/api.service'; @Component({ - selector: 'app-event', + selector: '[app-event]', templateUrl: './event.component.html', styleUrls: ['./event.component.css'] }) export class EventComponent implements OnInit { - constructor() { + @Input() event: Event | undefined; + + editActive: boolean = false; + constructor(private api: ApiService) { } ngOnInit(): void { } + toggleEdit() { + if(this.editActive && this.event !== undefined) { + this.api.updateEvent(this.event).subscribe((res: any) => { + console.log(res); + }); + } + + this.editActive = !this.editActive; + } } diff --git a/src/app/components/events-table/events-table.component.css b/src/app/components/events-table/events-table.component.css new file mode 100644 index 0000000..86bb390 --- /dev/null +++ b/src/app/components/events-table/events-table.component.css @@ -0,0 +1,3 @@ +table, th, td { + border: .05em solid black; +} diff --git a/src/app/components/events-table/events-table.component.html b/src/app/components/events-table/events-table.component.html new file mode 100644 index 0000000..6da37cb --- /dev/null +++ b/src/app/components/events-table/events-table.component.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +
CalendarNameDescriptionStartEndLocationCreated byURLEdit
diff --git a/src/app/components/events-table/events-table.component.spec.ts b/src/app/components/events-table/events-table.component.spec.ts new file mode 100644 index 0000000..9e94f72 --- /dev/null +++ b/src/app/components/events-table/events-table.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EventsTableComponent } from './events-table.component'; + +describe('EventsTableComponent', () => { + let component: EventsTableComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EventsTableComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EventsTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/events-table/events-table.component.ts b/src/app/components/events-table/events-table.component.ts new file mode 100644 index 0000000..e484e35 --- /dev/null +++ b/src/app/components/events-table/events-table.component.ts @@ -0,0 +1,18 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Event} from '../../models/event'; + +@Component({ + selector: 'app-events-table', + templateUrl: './events-table.component.html', + styleUrls: ['./events-table.component.css'] +}) +export class EventsTableComponent implements OnInit { + + @Input() events: Event[] = []; + constructor() { + } + + ngOnInit(): void { + } + +} diff --git a/src/app/models/event.ts b/src/app/models/event.ts index 500720a..226ba69 100644 --- a/src/app/models/event.ts +++ b/src/app/models/event.ts @@ -1,13 +1,13 @@ export interface Event { - event_id: number; - calendar_id: number; + eventId: number; + calendarId: number; uuid: string; name: string; description: string; - start_datetime: Date; - end_datetime: Date; - created_date: Date; + startDateTime: Date; + endDateTime: Date; + createdDate: Date; location: string; - created_by: string; + createdBy: string; url: string; } diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index 49659db..59808fc 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -1 +1,14 @@ -

admin works!

+
+

Please log in:

+ + +
+
+ + +
diff --git a/src/app/pages/admin/admin.component.ts b/src/app/pages/admin/admin.component.ts index 5eb4c11..e0c98de 100644 --- a/src/app/pages/admin/admin.component.ts +++ b/src/app/pages/admin/admin.component.ts @@ -1,4 +1,7 @@ import {Component, OnInit} from '@angular/core'; +import {ApiService} from '../../services/api.service'; +import {UtilsService} from '../../services/utils.service'; +import {Event} from '../../models/event'; @Component({ selector: 'app-admin', @@ -7,10 +10,43 @@ import {Component, OnInit} from '@angular/core'; }) export class AdminComponent implements OnInit { - constructor() { + isLoggedIn: boolean = false; + events: Event[] = []; + selectedCalendar: string = ''; + password: string = ''; + name: string = ''; + constructor( + private api: ApiService + ) { } ngOnInit(): void { + if (UtilsService.getPasswordFromLocalStorage() !== '') { + this.isLoggedIn = true; + this.getEvents(); + } } + getEvents(): void { + if(this.selectedCalendar === '') { + return; + } + + this.api.getEvents(this.selectedCalendar).subscribe((events: Event[]): void => { + events.forEach((event: Event) => { + this.events.push({ + ...event, + startDateTime: new Date(event.startDateTime), + endDateTime: new Date(event.endDateTime), + createdDate: new Date(event.createdDate) + }) + }) + }) + } + + login(): void { + UtilsService.saveUserInfoToLocalStorage(this.password, this.name); + this.isLoggedIn = true; + this.getEvents(); + } } diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 36d5bb0..08ae76e 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -8,7 +8,8 @@ import {UtilsService} from './utils.service'; providedIn: 'root' }) export class ApiService { - apiUrl = 'https://api.nachklang/calendar/events/'; + // apiUrl = 'https://api.nachklang.art/calendar/events/'; + apiUrl = 'http://localhost:3000/calendar/events/'; constructor( private http: HttpClient @@ -28,4 +29,22 @@ export class ApiService { } return new Observable(); } + + updateEvent(event: Event): Observable { + try { + // Get password + let password = UtilsService.getPasswordFromLocalStorage(); + + let updateEvent: any = event; + + updateEvent.password = password; + + console.log(event); + + return this.http.put(this.apiUrl + updateEvent.eventId, updateEvent); + } catch (exception) { + console.log('Error fetching events from API'); + } + return new Observable(); + } }