Adding basic components and API service

Frontend/package-lock.json

@@ -27,7 +27,7 @@
         "@angular/cli": "~12.2.6",
         "@angular/compiler-cli": "~12.2.0",
         "@types/jasmine": "~3.8.0",
-        "@types/node": "^12.11.1",
+        "@types/node": "^12.20.27",
         "jasmine-core": "~3.8.0",
         "karma": "~6.3.0",
         "karma-chrome-launcher": "~3.1.0",
@@ -2576,9 +2576,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "12.20.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.25.tgz",
-      "integrity": "sha512-hcTWqk7DR/HrN9Xe7AlJwuCaL13Vcd9/g/T54YrJz4Q3ESM5mr33YCzW2bOfzSIc3aZMeGBvbLGvgN6mIJ0I5Q==",
+      "version": "12.20.27",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.27.tgz",
+      "integrity": "sha512-qZdePUDSLAZRXXV234bLBEUM0nAQjoxbcSwp1rqSMUe1rZ47mwU6OjciR/JvF1Oo8mc0ys6GE0ks0HGgqAZoGg==",
       "dev": true
     },
     "node_modules/@types/parse-json": {
@@ -17878,9 +17878,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "12.20.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.25.tgz",
-      "integrity": "sha512-hcTWqk7DR/HrN9Xe7AlJwuCaL13Vcd9/g/T54YrJz4Q3ESM5mr33YCzW2bOfzSIc3aZMeGBvbLGvgN6mIJ0I5Q==",
+      "version": "12.20.27",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.27.tgz",
+      "integrity": "sha512-qZdePUDSLAZRXXV234bLBEUM0nAQjoxbcSwp1rqSMUe1rZ47mwU6OjciR/JvF1Oo8mc0ys6GE0ks0HGgqAZoGg==",
       "dev": true
     },
     "@types/parse-json": {

Frontend/package.json

@@ -29,7 +29,7 @@
     "@angular/cli": "~12.2.6",
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^12.20.27",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",

Frontend/src/app/app.module.ts

@@ -6,16 +6,30 @@ import {AppComponent} from './app.component';
 import {AppRouting} from './app.routing';
 import {LandingpageComponent} from './pages/landingpage/landingpage.component';
 import {PageNotFoundComponent} from './pages/page-not-found/page-not-found.component';
+import {WeekComponent} from './components/week/week.component';
+import {DayComponent} from './components/day/day.component';
+import {EventComponent} from './components/event/event.component';
+import {ChangeComponent} from './components/change/change.component';
+import {DatepickerComponent} from './components/datepicker/datepicker.component';
+import {EventDetailComponent} from './components/event-detail/event-detail.component';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
     declarations: [
         AppComponent,
         LandingpageComponent,
-        PageNotFoundComponent
+        PageNotFoundComponent,
+        WeekComponent,
+        DayComponent,
+        EventComponent,
+        ChangeComponent,
+        DatepickerComponent,
+        EventDetailComponent
     ],
     imports: [
         BrowserModule,
         AppRouting,
+        HttpClientModule,
         NgbModule
     ],
     providers: [],

Frontend/src/app/components/change/change.component.html

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

Frontend/src/app/components/change/change.component.spec.ts

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

Frontend/src/app/components/change/change.component.ts

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

Frontend/src/app/components/datepicker/datepicker.component.html

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

Frontend/src/app/components/datepicker/datepicker.component.spec.ts

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

Frontend/src/app/components/datepicker/datepicker.component.ts

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

Frontend/src/app/components/day/day.component.html

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

Frontend/src/app/components/day/day.component.spec.ts

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

Frontend/src/app/components/day/day.component.ts

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

Frontend/src/app/components/event-detail/event-detail.component.html

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

Frontend/src/app/components/event-detail/event-detail.component.spec.ts

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

Frontend/src/app/components/event-detail/event-detail.component.ts

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

Frontend/src/app/components/event/event.component.html

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

Frontend/src/app/components/event/event.component.spec.ts

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

Frontend/src/app/components/event/event.component.ts

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

Frontend/src/app/components/week/week.component.html

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

Frontend/src/app/components/week/week.component.spec.ts

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

Frontend/src/app/components/week/week.component.ts

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

Frontend/src/app/mocks/mock.service.ts

@@ -1,19 +1,19 @@
 import {Observable} from 'rxjs';
 
 export abstract class AbstractMockObservableService {
-    protected _observable: Observable<any>;
+    protected _observable: Observable<any> | undefined;
     protected _fakeContent: any;
     protected _fakeError: any;
 
-    set error(err) {
+    set error(err: any) {
         this._fakeError = err;
     }
 
-    set content(data) {
+    set content(data: any) {
         this._fakeContent = data;
     }
 
-    get subscription(): Observable<any> {
+    get subscription(): Observable<any> | undefined {
         return this._observable;
     }
 

Frontend/src/app/models/change.ts

@@ -0,0 +1,16 @@
+export interface Change {
+    change_id: string;
+    event_id: string;
+    change_timestamp: Date;
+    is_deleted: boolean;
+    new_summary: string;
+    new_description: string;
+    new_start: Date;
+    new_end: Date;
+    new_last_modified: Date;
+    new_created: Date;
+    new_location: string;
+    new_organizer: string;
+    new_categories: string;
+    new_recurring: string;
+}

Frontend/src/app/models/event.ts

@@ -0,0 +1,9 @@
+import {Change} from './change';
+
+export interface Event {
+    event_id: string;
+    event_uid: string;
+    latest_event_summary: string;
+    latest_start_date: Date;
+    changes: Change[];
+}

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -2,7 +2,7 @@
     <p>TINF19B4 RaPla Changes</p>
 </header>
 <div id="content">
-
+    Events: {{eventCount}}
 </div>
 <footer class="fixed-bottom start-50 translate-middle">
     Footer

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -1,4 +1,6 @@
 import {Component, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api/api.service';
+import {Event} from '../../models/event';
 
 @Component({
     selector: 'app-landingpage',
@@ -6,11 +8,22 @@ import {Component, OnInit} from '@angular/core';
     styleUrls: ['./landingpage.component.css']
 })
 export class LandingpageComponent implements OnInit {
+    events: Event[] = [];
+    eventCount: number = 0;
 
-    constructor() {
+    constructor(
+        private apiService: ApiService
+    ) {
     }
 
     ngOnInit(): void {
+        this.getEvents();
     }
 
+    getEvents() {
+        this.apiService.getEvents('2021-10-04').subscribe(events => {
+            this.events = events;
+            this.eventCount = events.length;
+        });
+    }
 }

Frontend/src/app/services/api/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/src/app/services/api/api.service.ts

@@ -0,0 +1,36 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {Event} from '../../models/event';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ApiService {
+    apiUrl = 'https://api.plutodev.de/raplachanges/';
+
+    constructor(
+        private http: HttpClient
+    ) {
+    }
+
+    /*
+        ______     __     ________
+       / ____/__  / /_   / ____/ /_  ____ _____  ____ ____  _____
+      / / __/ _ \/ __/  / /   / __ \/ __ `/ __ \/ __ `/ _ \/ ___/
+     / /_/ /  __/ /_   / /___/ / / / /_/ / / / / /_/ /  __(__  )
+     \____/\___/\__/   \____/_/ /_/\__,_/_/ /_/\__, /\___/____/
+                                              /____/
+     */
+
+    getEvents(week: string): Observable<Event[]> {
+        try {
+            let params = new HttpParams();
+            params = params.append('week', week);
+            return this.http.get<Event[]>((this.apiUrl), {params});
+        } catch (exception) {
+            console.log('Error fetching events from API');
+        }
+        return new Observable<Event[]>();
+    }
+}