Init webapp

2023-05-10 15:02:48 +02:00
parent 88111e2acf
commit b101ccf6b6
60 changed files with 2519 additions and 1206 deletions
--- a/rossa-tech-cli/src/app/app-routing.module.ts
+++ b/rossa-tech-cli/src/app/app-routing.module.ts
@@ -1,14 +1,21 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { DashboardComponent } from 'src/app/components/dashboard/dashboard.component';
-import { LoginComponent } from './components/login/login.component';
+// import { AuthGuard } from "./auth/auth.guard";
+import { NgModule, inject } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { LoginComponent } from "./components/loginPage/login.component";
+import { IndexComponent } from "./components/indexPage/index.component";
+import { DashboardComponent } from "./components/dashboard/dashboard.component";
+import { AuthService } from "./auth/auth.service";
+import { AuthGuard } from "./auth/auth.guard";

 const routes: Routes = [
-  { path: 'dashboard', component: DashboardComponent },
-  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: '**', redirectTo: '/dashboard', pathMatch: 'full' },
-  // { path: 'login', component: LoginComponent },
-  // { path: '', component: LoginComponent },
+  { path: "login", component: LoginComponent },
+  // { path: "index", component: IndexComponent, canActivate: [AuthGuard] },
+  {
+    path: "dashboard",
+    component: DashboardComponent,
+    canActivate: [AuthGuard],
+  },
+  { path: "", redirectTo: "/dashboard", pathMatch: "full" },
 ];

@NgModule({
--- a/rossa-tech-cli/src/app/app.component.css
+++ b/rossa-tech-cli/src/app/app.component.css
--- a/rossa-tech-cli/src/app/app.component.html
+++ b/rossa-tech-cli/src/app/app.component.html
@@ -1,3 +1,3 @@
-<app-loader></app-loader>
 <app-header></app-header>
+
 <router-outlet></router-outlet>
--- a/rossa-tech-cli/src/app/app.component.spec.ts
+++ b/rossa-tech-cli/src/app/app.component.spec.ts
@@ -1,35 +1,33 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import { TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { AppComponent } from "./app.component";

-describe('AppComponent', () => {
+describe("AppComponent", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
    }).compileComponents();
  });

-  it('should create the app', () => {
+  it("should create the app", () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

-  it(`should have as title 'rossa-tech-cli'`, () => {
+  it(`should have as title 'rossa-tech'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
-    expect(app.title).toEqual('rossa-tech-cli');
+    expect(app.title).toEqual("rossa-tech");
  });

-  it('should render title', () => {
+  it("should render title", () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('rossa-tech-cli app is running!');
+    expect(compiled.querySelector(".content span")?.textContent).toContain(
+      "rossa-tech app is running!"
+    );
  });
 });
--- a/rossa-tech-cli/src/app/app.component.ts
+++ b/rossa-tech-cli/src/app/app.component.ts
@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";

@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
 })
 export class AppComponent {
-  title = 'rossa-tech-cli';
+  title = "rossa-tech";
 }
--- a/rossa-tech-cli/src/app/app.module.ts
+++ b/rossa-tech-cli/src/app/app.module.ts
@@ -1,60 +1,59 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { NgModule } from "@angular/core";
+import { BrowserModule, DomSanitizer } from "@angular/platform-browser";

-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";

-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTableModule } from '@angular/material/table';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { MetersComponent } from './components/meters/meters.component';
-
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { LoaderComponent } from './components/loader/loader.component';
-import { HeaderComponent } from './components/header/header.component';
-import { MeterDataListComponent } from './components/subcomponents/meter-data-list/meter-data-list.component';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { ConsumptionLastYearComponent } from './components/subcomponents/consumption-last-year/consumption-last-year.component';
-import { MeterDataWrapperComponent } from './components/subcomponents/meter-data-wrapper/meter-data-wrapper.component';
-import { MeterDataAddDialogComponent } from './components/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
-import { LoginComponent } from './components/login/login.component';
-import { LogoutComponent } from './components/logout/logout.component';
-// import { HttpInterceptorService } from './components/interceptors/httpInterceptor.service';
+import { AppRoutingModule } from "./app-routing.module";
+import { HttpClientModule } from "@angular/common/http";
+import { AppComponent } from "./app.component";
+import { LoginComponent } from "./components/loginPage/login.component";
+import { IndexComponent } from "./components/indexPage/index.component";
+import { DashboardComponent } from "./components/dashboard/dashboard.component";
+import { MeterDataListComponent } from "./components/subcomponents/meter-data-list/meter-data-list.component";
+import { ConsumptionLastYearComponent } from "./components/subcomponents/consumption-last-year/consumption-last-year.component";
+import { MeterDataWrapperComponent } from "./components/subcomponents/meter-data-wrapper/meter-data-wrapper.component";
+import { HeaderComponent } from "./components/header/header.component";
+import { LoaderComponent } from "./components/loader/loader.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

+import { MatCardModule } from "@angular/material/card";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+import { MatTableModule } from "@angular/material/table";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatIconModule, MatIconRegistry } from "@angular/material/icon";
+import { MatListModule } from "@angular/material/list";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatNativeDateModule } from "@angular/material/core";
+import { MeterDataAddDialogComponent } from "./dialogs/meter-data-add-dialog/meter-data-add-dialog.component";
+import { SnackbarComponent } from "./components/snackbar/snackbar.component";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
@NgModule({
  declarations: [
    AppComponent,
+    LoginComponent,
+    IndexComponent,
    DashboardComponent,
-    MetersComponent,
    LoaderComponent,
    HeaderComponent,
    MeterDataListComponent,
    ConsumptionLastYearComponent,
    MeterDataWrapperComponent,
    MeterDataAddDialogComponent,
-    LoginComponent,
-    LogoutComponent,
+    SnackbarComponent,
  ],
  imports: [
    BrowserModule,
-    HttpClientModule,
-    BrowserAnimationsModule,
-    FormsModule,
    AppRoutingModule,
+    HttpClientModule,
+    FormsModule,
+    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
@@ -71,6 +70,7 @@ import { LogoutComponent } from './components/logout/logout.component';
    ReactiveFormsModule,
    MatDatepickerModule,
    MatNativeDateModule,
+    MatSnackBarModule,
  ],
  providers: [
    MatDatepickerModule,
@@ -85,7 +85,7 @@ import { LogoutComponent } from './components/logout/logout.component';
 export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIconSet(
-      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
+      domSanitizer.bypassSecurityTrustResourceUrl("./assets/mdi.svg")
    );
  }
 }
--- a/rossa-tech-cli/src/app/auth/auth.guard.ts
+++ b/rossa-tech-cli/src/app/auth/auth.guard.ts
@@ -0,0 +1,32 @@
+import { Observable } from "rxjs";
+import { Injectable } from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  Router,
+  RouterStateSnapshot,
+} from "@angular/router";
+import { AuthService } from "./auth.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AuthGuard {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> | Promise<boolean> | boolean {
+    console.log("authGuard");
+
+    if (this.authService.checkUserLoggedIn()) {
+      console.log("logged in");
+
+      return true;
+    } else {
+      console.log("not logged in");
+      this.router.navigate(["/login"]);
+      return false;
+    }
+  }
+}
--- a/rossa-tech-cli/src/app/auth/auth.service.ts
+++ b/rossa-tech-cli/src/app/auth/auth.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AuthService {
+  constructor() {}
+
+  public checkUserLoggedIn(): Boolean {
+    let retVal: Boolean = false,
+      currUserObj: any = null,
+      currUser: any;
+    if (sessionStorage.getItem("currentUser") != null) {
+      currUserObj = sessionStorage.getItem("currentUser");
+      if (
+        currUserObj != null &&
+        currUserObj.toString() != null &&
+        currUserObj.toString().trim() !== ""
+      ) {
+        currUser = JSON.parse(currUserObj.toString());
+        if (currUser && currUser.userId && currUser.userId.trim() !== "") {
+          retVal =
+            currUser.tokenValue != null && currUser.tokenValue.trim() !== "";
+        }
+      }
+    }
+
+    return retVal;
+  }
+}
--- a/rossa-tech-cli/src/app/auth/login.service.ts
+++ b/rossa-tech-cli/src/app/auth/login.service.ts
@@ -0,0 +1,99 @@
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Observable } from "rxjs";
+
+import { LoginUser } from "../dataModels/loginUser.type";
+import { environment } from "../../environments/environment";
+
+@Injectable({
+  providedIn: "root",
+})
+export class LoginService {
+  constructor(private http: HttpClient) {}
+
+  public login(userToLogin: LoginUser): Observable<any> {
+    return this.http.post<any>(
+      environment.apiBaseUrl + "/authenticate",
+      userToLogin
+    );
+  }
+
+  public signout(): Observable<any> {
+    let jwtToken: String = this.getUserSecurityToken(),
+      headers: HttpHeaders = new HttpHeaders({
+        authorization: "bearer " + jwtToken,
+      }),
+      options = { headers: headers };
+    return this.http.post<any>(
+      environment.apiBaseUrl + "/signOut",
+      null,
+      options
+    );
+  }
+
+  public setSessionCurrentUser(userToAdd: any): void {
+    if (
+      userToAdd != null &&
+      userToAdd.userId &&
+      userToAdd.userId.trim() !== "" &&
+      userToAdd.tokenValue &&
+      userToAdd.tokenValue.trim() !== ""
+    ) {
+      if (sessionStorage.getItem("currentUser") != null) {
+        sessionStorage.removeItem("currentUser");
+      }
+
+      sessionStorage.setItem("currentUser", JSON.stringify(userToAdd));
+    }
+  }
+
+  public removeSessionCurrentUser(): void {
+    if (sessionStorage.getItem("currentUser") != null) {
+      sessionStorage.removeItem("currentUser");
+    }
+  }
+
+  public getLoggedinUser(): any | null {
+    let retVal: any | null = null,
+      currUser: any | null = null,
+      currUserObj: any = null;
+
+    if (sessionStorage.getItem("currentUser") != null) {
+      currUserObj = sessionStorage.getItem("currentUser");
+      if (
+        currUserObj != null &&
+        currUserObj.toString() != null &&
+        currUserObj.toString().trim() !== ""
+      ) {
+        currUser = JSON.parse(currUserObj.toString());
+        if (currUser && currUser.userId && currUser.userId.trim() !== "") {
+          retVal = currUser;
+        }
+      }
+    }
+
+    return retVal;
+  }
+
+  public getUserSecurityToken(): String {
+    let retVal: String = "",
+      currUser: any | null = null,
+      currUserObj: any = null;
+
+    if (sessionStorage.getItem("currentUser") != null) {
+      currUserObj = sessionStorage.getItem("currentUser");
+      if (
+        currUserObj != null &&
+        currUserObj.toString() != null &&
+        currUserObj.toString().trim() !== ""
+      ) {
+        currUser = JSON.parse(currUserObj.toString());
+        if (currUser && currUser.userId && currUser.userId.trim() !== "") {
+          retVal = currUser.tokenValue;
+        }
+      }
+    }
+
+    return retVal;
+  }
+}
--- a/rossa-tech-cli/src/app/components/dashboard/dashboard.component.ts
+++ b/rossa-tech-cli/src/app/components/dashboard/dashboard.component.ts
@@ -1,27 +1,25 @@
-import { Component } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { LoaderService } from 'src/app/components/loader/loader.service';
-import { MeterDataAddDialogComponent } from 'src/app/components/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
-import { DatabaseService } from 'src/app/services/database.service';
-import { GlobalService } from 'src/app/services/global.service';
-import { UsageType } from 'src/app/models/UsageType';
-import { MeterData } from 'src/app/models/Meterdata';
+import { HttpErrorResponse } from "@angular/common/http";
+import { Component } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { LoaderService } from "src/app/components/loader/loader.service";
+import { MeterData } from "src/app/dataModels/Meterdata";
+import { UsageType } from "src/app/dataModels/UsageType";
+import { MeterDataAddDialogComponent } from "src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component";
+import { DatabaseService } from "src/app/services/database.service";
+import { ErrorService } from "src/app/services/error.service";
+import { GlobalService } from "src/app/services/global.service";

@Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss'],
+  selector: "app-dashboard",
+  templateUrl: "./dashboard.component.html",
+  styleUrls: ["./dashboard.component.scss"],
 })
 export class DashboardComponent {
  usageTypes = UsageType;

-  // meterDataEnergy1Hem: MeterData[] = [];
-  // meterDataEnergy1Log: MeterData[] = [];
  meterDataEnergy: MeterData[] = [];
  meterDataWater: MeterData[] = [];

-  // meterDataEnergyDTO1Log: MeterData[] = [];
-  // meterDataEnergyDTO1Hem: MeterData[] = [];
  meterDataEnergyDTO: MeterData[] = [];
  meterDataWaterDTO: MeterData[] = [];

@@ -29,12 +27,13 @@ export class DashboardComponent {
  energyAverageAmountLastYear1Hem: number = 0;
  waterAverageAmountLastYear: number = 0;

-  displayedColumns: string[] = ['date', 'amount', 'meter'];
+  displayedColumns: string[] = ["date", "amount", "meter"];

  constructor(
    private dataService: DatabaseService,
    private loaderService: LoaderService,
    private globalService: GlobalService,
+    private errorService: ErrorService,
    private dialog: MatDialog
  ) {
    this.loadMeterData();
@@ -46,11 +45,11 @@ export class DashboardComponent {
      next: (data) => {
        this.splitMeterData(data);
        this.loaderService.hide();
-        console.log('Meter data:', data);
+        console.log("Meter data:", data);
      },
-      error: (err) => {
+      error: (error: HttpErrorResponse) => {
+        this.errorService.handleError(error);
        this.loaderService.hide();
-        console.error(err);
      },
    });
  }
@@ -70,16 +69,6 @@ export class DashboardComponent {
  }

  initEnergyMeterData(): void {
-    // this.meterDataEnergy1Log = this.globalService.sortMeterData(
-    //   this.meterDataEnergy1Log
-    // );
-    // this.meterDataEnergy1Hem = this.globalService.sortMeterData(
-    //   this.meterDataEnergy1Hem
-    // );
-
-    // this.meterDataEnergyDTO1Log = this.meterDataEnergy1Log;
-    // this.meterDataEnergyDTO1Hem = this.meterDataEnergy1Hem;
-
    this.meterDataEnergy = this.globalService.sortMeterData(
      this.meterDataEnergy
    );
@@ -103,8 +92,9 @@ export class DashboardComponent {
          next: (meterData: MeterData) => {
            console.log({ meterData });
          },
-          error: (err) => {
-            console.log('add meterData error', { err });
+          error: (error: HttpErrorResponse) => {
+            this.errorService.handleError(error);
+            this.loaderService.hide();
          },
        });
      }
--- a/rossa-tech-cli/src/app/components/header/header.component.html
+++ b/rossa-tech-cli/src/app/components/header/header.component.html
@@ -1,13 +1,14 @@
-<div class="header-wrapper">
+<div class="header-wrapper" *ngIf="userLoggedIn">
  <div class="logo">
    rossa-tech
  </div>

  <div class="nav">
-
+    <button type="button" class="btn btn-link" routerLink="/index">home</button>
+    <button type="button" class="btn btn-link" routerLink="/dashboard">dashboard</button>
  </div>

  <div class="account">
-    <button mat-button>logout</button>
+    <button mat-button (click)="onClickLogout()">logout</button>
  </div>
 </div>
--- a/rossa-tech-cli/src/app/components/header/header.component.ts
+++ b/rossa-tech-cli/src/app/components/header/header.component.ts
@@ -1,10 +1,76 @@
-import { Component } from '@angular/core';
+import { HttpErrorResponse } from "@angular/common/http";
+import { Component, OnInit } from "@angular/core";
+import { AuthService } from "src/app/auth/auth.service";
+import { LoginService } from "src/app/auth/login.service";
+import { ErrorService } from "src/app/services/error.service";
+import { PageSecurityService } from "src/app/services/pageSecurity.service";
+import { LoaderService } from "../loader/loader.service";
+import { NotificationService } from "src/app/services/notification.service";

@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  selector: "app-header",
+  templateUrl: "./header.component.html",
+  styleUrls: ["./header.component.scss"],
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
+  userLoggedIn: Boolean = false;

+  constructor(
+    private loginService: LoginService,
+    private pageSecurityService: PageSecurityService,
+    private errorService: ErrorService,
+    private loaderService: LoaderService,
+    private notificationService: NotificationService,
+    private authService: AuthService
+  ) {}
+
+  ngOnInit(): void {
+    this.userLoggedIn = this.authService.checkUserLoggedIn();
+  }
+
+  public onClickLogout(): void {
+    this.loaderService.hide();
+
+    this.loginService.signout().subscribe({
+      next: (resp: any) => {
+        if (resp != null) {
+          if (resp.successful) {
+            // alert("Signed out successfully"); /// XXX
+            this.notificationService.showSnackbar(
+              "Signed out successfully",
+              3000,
+              "snackbar-success",
+              true,
+              "check"
+            );
+            this.loginService.removeSessionCurrentUser();
+            this.pageSecurityService.gotoLoginPage();
+          } else {
+            // alert("Signed out failed with error. " + resp.detailedMessage); /// XXX
+            this.notificationService.showSnackbar(
+              "Signed out failed with error. " + resp.detailedMessage,
+              3000,
+              "snackbar-warning",
+              true,
+              "information-slab-circle-outline"
+            );
+          }
+        } else {
+          // alert("Signed out failed with error. Unknown error."); /// XXX
+          this.notificationService.showSnackbar(
+            "Signed out failed with error. Unknown error.",
+            3000,
+            "snackbar-warning",
+            true,
+            "information-slab-circle-outline"
+          );
+        }
+        this.loaderService.hide();
+      },
+      error: (error: HttpErrorResponse) => {
+        this.errorService.handleError(error);
+        this.loaderService.hide();
+      },
+    });
+  }
 }
--- a/rossa-tech-cli/src/app/components/indexPage/index.component.css
+++ b/rossa-tech-cli/src/app/components/indexPage/index.component.css
@@ -0,0 +1,3 @@
+.link_click  {
+	cursor:pointer;
+}
--- a/rossa-tech-cli/src/app/components/indexPage/index.component.html
+++ b/rossa-tech-cli/src/app/components/indexPage/index.component.html
@@ -0,0 +1,28 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Game Title</th>
+            <th scope="col">Publisher</th>
+            <th scope="col">Developed by</th>
+            <th scope="col">Publishing Year</th>
+            <th scope="col">Retail Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let title of allTitles; let i = index">
+            <td>{{i}}</td>
+            <td>{{title.gameTitleValue}}</td>
+            <td>{{title.publisherValue}}</td>
+            <td>{{title.devStudioNameValue}}</td>
+            <td>{{title.publishingYearValue}}</td>
+            <td>${{title.retailPriceValue}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
--- a/rossa-tech-cli/src/app/components/indexPage/index.component.ts
+++ b/rossa-tech-cli/src/app/components/indexPage/index.component.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit } from "@angular/core";
+import { HttpErrorResponse } from "@angular/common/http";
+// import { PageSecurityService } from "../common/pageSecurity.service";
+import { GameTitlesService } from "../../services/gameTitles.service";
+import { LoginService } from "../../auth/login.service";
+import { GameTitle } from "../../dataModels/gameTitle.type";
+import { PageSecurityService } from "src/app/services/pageSecurity.service";
+import { AuthService } from "src/app/auth/auth.service";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./index.component.html",
+  styleUrls: ["./index.component.css"],
+})
+export class IndexComponent implements OnInit {
+  private _allTitles: Array<GameTitle> = [];
+  public testArray: Array<String> = [];
+
+  constructor(
+    private loginService: LoginService,
+    private pageSecurityService: PageSecurityService,
+    private gameTitlesService: GameTitlesService,
+    private authService: AuthService
+  ) {
+    this.testArray.push("Test1");
+    this.testArray.push("Test2");
+    this.testArray.push("Test3");
+    this.testArray.push("Test4");
+    this.testArray.push("Test5");
+  }
+
+  public get allTitles(): Array<GameTitle> {
+    return this._allTitles;
+  }
+
+  public set allTitles(val: Array<GameTitle>) {
+    this._allTitles = val;
+  }
+
+  ngOnInit(): void {
+    // let userLoggedIn: Boolean = this.authService.checkUserLoggedIn();
+    // if (!userLoggedIn) {
+    //   this.pageSecurityService.gotoLoginPage();
+    // } else {
+    this.loadAllGameTitles();
+    // }
+  }
+
+  private loadAllGameTitles(): void {
+    let self = this;
+    self.gameTitlesService.getAllGameTitles().subscribe(
+      (resp: any) => {
+        if (resp && resp.length > 0) {
+          for (var itm of resp) {
+            if (itm) {
+              let titleToAdd: GameTitle = new GameTitle(
+                itm.gameTitle,
+                itm.publisher,
+                itm.devStudioName,
+                itm.publishingYear,
+                itm.retailPrice
+              );
+              self._allTitles.push(titleToAdd);
+            }
+          }
+        }
+      },
+      (error: HttpErrorResponse) => {
+        if (error != null) {
+          if (error.status === 0) {
+            // XXX
+            console.log("Client error.");
+          } else if (error.status === 401 || error.status === 403) {
+            // XXX
+            alert("You are not authorized.");
+            console.log("You are not authorized.");
+            self.loginService.removeSessionCurrentUser();
+            self.pageSecurityService.gotoLoginPage();
+          } else if (error.status === 500) {
+            alert("Server error.");
+            console.log("Server error occurred.");
+          } else {
+            alert("Unknown error.");
+            console.log("Unknown error: " + error.status);
+          }
+        }
+      }
+    );
+  }
+}
--- a/rossa-tech-cli/src/app/components/loginPage/login.component.html
+++ b/rossa-tech-cli/src/app/components/loginPage/login.component.html
@@ -0,0 +1,23 @@
+<div class="login-form-wrapper">
+
+  <mat-card>
+    <mat-card-content>
+      <form [formGroup]="loginForm" (ngSubmit)="login()">
+        <h2>Log In</h2>
+        <mat-form-field>
+          <input matInput placeholder="Email" formControlName="userName" name="username" required>
+          <mat-error>
+            Please provide a valid email address
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <input matInput type="password" placeholder="Password" formControlName="userPass" name="password" required>
+          <mat-error>
+            Please provide a valid password
+          </mat-error>
+        </mat-form-field>
+        <button mat-raised-button color="primary" [disabled]="!loginForm.valid">Login</button>
+      </form>
+    </mat-card-content>
+  </mat-card>
+</div>
--- a/rossa-tech-cli/src/app/components/loginPage/login.component.scss
+++ b/rossa-tech-cli/src/app/components/loginPage/login.component.scss
@@ -0,0 +1,17 @@
+mat-card {
+  max-width: 400px;
+  margin: 2em auto;
+  text-align: center;
+  color: #333333;
+}
+
+mat-form-field {
+  display: block;
+}
+
+login-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+}
--- a/rossa-tech-cli/src/app/components/loginPage/login.component.ts
+++ b/rossa-tech-cli/src/app/components/loginPage/login.component.ts
@@ -0,0 +1,95 @@
+import { Component, OnInit } from "@angular/core";
+import { HttpErrorResponse } from "@angular/common/http";
+import { Router } from "@angular/router";
+
+import { LoginUser } from "../../dataModels/loginUser.type";
+import { LoginService } from "../../auth/login.service";
+import { FormsService } from "../../services/forms.service";
+import { AuthService } from "src/app/auth/auth.service";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { LoaderService } from "../loader/loader.service";
+import { NotificationService } from "src/app/services/notification.service";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.scss"],
+})
+export class LoginComponent implements OnInit {
+  loginForm: FormGroup = new FormGroup({
+    userName: new FormControl("", Validators.required),
+    userPass: new FormControl("", Validators.required),
+  });
+
+  constructor(
+    private loginService: LoginService,
+    private formsService: FormsService,
+    private authService: AuthService,
+    private loaderService: LoaderService,
+    private notificationService: NotificationService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    let userLoggedIn: Boolean = this.authService.checkUserLoggedIn();
+    if (userLoggedIn) {
+      this.router.navigate(["/index"]);
+    }
+  }
+
+  public resetForm(): void {
+    this.loginForm.reset();
+    this.formsService.makeFormFieldsClean(this.loginForm);
+  }
+
+  public login(): void {
+    this.formsService.makeFormFieldsDirty(this.loginForm);
+
+    if (this.loginForm.valid) {
+      this.loaderService.show();
+
+      let userToLogin: LoginUser = new LoginUser(
+        this.loginForm.value.userName,
+        this.loginForm.value.userPass
+      );
+
+      this.loginService.login(userToLogin).subscribe({
+        next: (resp: any) => {
+          if (
+            resp != null &&
+            resp.userId != null &&
+            resp.userId.trim() !== "" &&
+            resp.tokenValue != null &&
+            resp.tokenValue.trim() !== ""
+          ) {
+            this.loginService.setSessionCurrentUser(resp);
+            this.router.navigate(["/"]);
+          }
+        },
+        error: (error: HttpErrorResponse) => {
+          if (error != null) {
+            if (error.status === 0) {
+              console.log("Client error.");
+              this.notificationService.showSnackbar(
+                "Client error",
+                3000,
+                "snackbar-warning",
+                true,
+                "alert-circle-outline"
+              );
+            } else if (error.status === 401 || error.status === 403) {
+              this.loginForm.reset();
+              this.formsService.makeFormFieldsClean(this.loginForm);
+              console.log("You are not authorized.");
+            } else if (error.status === 500) {
+              console.log("Server error occurred.");
+            } else {
+              console.log("Unknown error: " + error.status);
+            }
+            this.loaderService.hide();
+          }
+        },
+      });
+    }
+  }
+}
--- a/rossa-tech-cli/src/app/components/snackbar/snackbar-component.scss
+++ b/rossa-tech-cli/src/app/components/snackbar/snackbar-component.scss
@@ -0,0 +1,42 @@
+snack-bar-container.mat-mdc-snack-bar-container {
+  background-color: white;
+  padding: 10px 16px 10px 12px;
+  border-radius: 3px;
+  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.12);
+  min-width: 352px;
+  max-width: 544px;
+}
+
+div.snackbar {
+  color: #595959;
+  display: flex;
+  align-items: center;
+
+  mat-icon.snackbar-icon {
+    margin-right: 12px;
+  }
+
+  span.snackbar-text {
+    flex: 1;
+  }
+
+  mat-icon.snackbar-btn {
+    color: #595959;
+    height: 22px;
+    width: 22px;
+    cursor: pointer;
+    margin-left: 72px;
+  }
+
+  &.snackbar-warning {
+    color: red;
+  }
+
+  &.snackbar-success {
+    color: green;
+  }
+
+  &.snackbar-primary {
+    color: blue;
+  }
+}
--- a/rossa-tech-cli/src/app/components/snackbar/snackbar.component.html
+++ b/rossa-tech-cli/src/app/components/snackbar/snackbar.component.html
@@ -0,0 +1,7 @@
+<div class="snackbar" [ngClass]="data?.className">
+  <mat-icon class="snackbar-icon" svgIcon="{{data?.iconName}}" *ngIf="data?.icon"></mat-icon>
+  <span class="snackbar-text">
+    {{data?.message}}
+  </span>
+  <mat-icon svgIcon="close" class="snackbar-btn" (click)="snackBar.dismiss()"></mat-icon>
+</div>
--- a/rossa-tech-cli/src/app/components/snackbar/snackbar.component.ts
+++ b/rossa-tech-cli/src/app/components/snackbar/snackbar.component.ts
@@ -0,0 +1,30 @@
+import { Component, Inject } from "@angular/core";
+import { MAT_SNACK_BAR_DATA, MatSnackBar } from "@angular/material/snack-bar";
+
+@Component({
+  selector: "app-snackbar",
+  templateUrl: "./snackbar.component.html",
+  styleUrls: ["snackbar-component.scss"],
+})
+export class SnackbarComponent {
+  /*
+   * data = {
+   *   message: string; snackbar text
+   *   className: string; snackbar class
+   *   btnLabel: string; Button label text
+   *   icon: boolean; show icon
+   *   iconName: string; name of the icon
+   * }
+   *
+   * icons:
+   *    check
+   *    alert-circle-outline
+   *    information-slab-circle-outline
+   *    server-off
+   *
+   */
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: any,
+    public snackBar: MatSnackBar
+  ) {}
+}
--- a/rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.html
+++ b/rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.html
@@ -1,20 +1,43 @@
 <ng-container *ngIf="type == usageTypes.ENERGY; else water">
  <div style="display: flex; flex-direction: column">

-    <div>energy</div>
-    <div style="display: flex; flex-direction: row;">
-      <div>{{averageEnergy1Log}} kWh</div>
-      <div>{{averageEnergy1Hem}} kWh</div>
-    </div>
+    <h2>{{type}}</h2>
+
+    <mat-grid-list cols="2" rowHeight="50px">
+      <mat-grid-tile>
+        1LOG - Hausstrom
+      </mat-grid-tile>
+      <mat-grid-tile>
+        1HEM - Heizstrom
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <div>{{averageEnergy1Log}} kWh</div>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <div>{{averageEnergy1Hem}} kWh</div>
+      </mat-grid-tile>
+    </mat-grid-list>
  </div>
-
-
 </ng-container>
+
 <ng-template #water>
+  <div style="display: flex; flex-direction: column">

+    <h2>{{type}}</h2>

-</ng-template>
-
-
-<!-- <ng-container *ngIf="amount > 0; else noData">{{amount}} kWh</ng-container>
-<ng-template #noData>keine Daten vorhanden</ng-template> -->
+    <mat-grid-list cols="2" rowHeight="50px">
+      <mat-grid-tile>
+        Wasser
+      </mat-grid-tile>
+      <mat-grid-tile>
+        Abwasser
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <div>xxxxx</div>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <div>xxxxx</div>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
+</ng-template>
--- a/rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.ts
+++ b/rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.ts
@@ -1,44 +1,46 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { Meters } from 'src/app/models/Meter';
-import { MeterData } from 'src/app/models/Meterdata';
-import { UsageType } from 'src/app/models/UsageType';
-import { GlobalService } from 'src/app/services/global.service';
+import { Component, Input, OnChanges } from "@angular/core";
+import { Meters } from "src/app/dataModels/Meter";
+import { MeterData } from "src/app/dataModels/Meterdata";
+import { UsageType } from "src/app/dataModels/UsageType";
+import { GlobalService } from "src/app/services/global.service";

@Component({
-  selector: 'app-consumption-last-year',
-  templateUrl: './consumption-last-year.component.html',
-  styleUrls: ['./consumption-last-year.component.scss'],
+  selector: "app-consumption-last-year",
+  templateUrl: "./consumption-last-year.component.html",
+  styleUrls: ["./consumption-last-year.component.scss"],
 })
 export class ConsumptionLastYearComponent implements OnChanges {
-  @Input() meterData: MeterData[];
-  @Input() type: UsageType;
+  @Input()
+  meterData!: MeterData[];
+  @Input()
+  type!: UsageType;

  usageTypes = UsageType;
  meters = Meters;

  meterDataEnergy1Hem: MeterData[] = [];
-  averageEnergy1Hem: number;
+  averageEnergy1Hem!: number;

  meterDataEnergy1Log: MeterData[] = [];
-  averageEnergy1Log: number;
+  averageEnergy1Log!: number;

  meterDataWasser: MeterData[] = [];
-  averageWasser: number;
+  averageWasser!: number;

  meterDataAbwasser: MeterData[] = [];
-  averageDirtyAbwasser: number;
+  averageDirtyAbwasser!: number;

  constructor(private globalService: GlobalService) {}

  ngOnChanges(): void {
    if (this.type && this.type === this.usageTypes.ENERGY) {
-      console.log('count energy');
+      console.log("count energy");

      if (this.meterData) {
        this.meterData.forEach((data) => {
-          if (data.meter.name === this.meters['1LOG']) {
+          if (data.meter.name === this.meters["1LOG"]) {
            this.meterDataEnergy1Log.push(data);
-          } else if (data.meter.name === this.meters['1HEM']) {
+          } else if (data.meter.name === this.meters["1HEM"]) {
            this.meterDataEnergy1Hem.push(data);
          }
        });
@@ -61,13 +63,13 @@ export class ConsumptionLastYearComponent implements OnChanges {
        );
      }
    } else if (this.type && this.type === this.usageTypes.WATER) {
-      console.log('count water');
+      console.log("count water");

      if (this.meterData) {
        this.meterData.forEach((data) => {
-          if (data.meter.name === this.meters['WASSER']) {
+          if (data.meter.name === this.meters["WASSER"]) {
            this.meterDataWasser.push(data);
-          } else if (data.meter.name === this.meters['ABWASSER']) {
+          } else if (data.meter.name === this.meters["ABWASSER"]) {
            this.meterDataAbwasser.push(data);
          }
        });
--- a/rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.html
+++ b/rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.html
@@ -1,5 +1,3 @@
-<h2>{{type}}</h2>
-
 <div class="meter-data-list-wrapper">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

--- a/rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.ts
+++ b/rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.ts
@@ -1,18 +1,20 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
-import { UsageType } from 'src/app/models/UsageType';
-import { MeterData } from 'src/app/models/Meterdata';
+import { Component, Input, OnChanges, OnInit } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { UsageType } from "src/app/dataModels/UsageType";
+import { MeterData } from "src/app/dataModels/Meterdata";

@Component({
-  selector: 'app-meter-data-list',
-  templateUrl: './meter-data-list.component.html',
-  styleUrls: ['./meter-data-list.component.scss'],
+  selector: "app-meter-data-list",
+  templateUrl: "./meter-data-list.component.html",
+  styleUrls: ["./meter-data-list.component.scss"],
 })
 export class MeterDataListComponent implements OnInit, OnChanges {
-  @Input() meterData: MeterData[];
-  @Input() type: UsageType;
+  @Input()
+  meterData: MeterData[] = [];
+  @Input()
+  type: UsageType = UsageType.ENERGY;

-  displayedColumns: string[] = ['id', 'date', 'amount', 'meter'];
+  displayedColumns: string[] = ["id", "date", "amount", "meter"];

  dataSource = new MatTableDataSource<MeterData>();
  // dataSource = [
--- a/rossa-tech-cli/src/app/components/subcomponents/meter-data-wrapper/meter-data-wrapper.component.ts
+++ b/rossa-tech-cli/src/app/components/subcomponents/meter-data-wrapper/meter-data-wrapper.component.ts
@@ -1,16 +1,18 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { MeterData } from 'src/app/models/Meterdata';
-import { UsageType } from 'src/app/models/UsageType';
-import { GlobalService } from 'src/app/services/global.service';
+import { Component, Input, OnChanges } from "@angular/core";
+import { MeterData } from "src/app/dataModels/Meterdata";
+import { UsageType } from "src/app/dataModels/UsageType";
+import { GlobalService } from "src/app/services/global.service";

@Component({
-  selector: 'app-meter-data-wrapper',
-  templateUrl: './meter-data-wrapper.component.html',
-  styleUrls: ['./meter-data-wrapper.component.scss'],
+  selector: "app-meter-data-wrapper",
+  templateUrl: "./meter-data-wrapper.component.html",
+  styleUrls: ["./meter-data-wrapper.component.scss"],
 })
 export class MeterDataWrapperComponent /* implements OnChanges */ {
-  @Input() meterData: MeterData[];
-  @Input() type: UsageType;
+  @Input()
+  meterData: MeterData[] = [];
+  @Input()
+  type: UsageType = UsageType.ENERGY;

  // usageTypes = UsageType;
  // averageConsumptionLastYear: number;
--- a/rossa-tech-cli/src/app/dataModels/Meter.ts
+++ b/rossa-tech-cli/src/app/dataModels/Meter.ts
@@ -0,0 +1,16 @@
+export class Meter {
+  id: number;
+  name: '1LOG' | '1HEM' | 'WASSER' | 'ABWASSER';
+
+  constructor(id: number, name: '1LOG' | '1HEM' | 'WASSER' | 'ABWASSER') {
+    this.id = id;
+    this.name = name;
+  }
+}
+
+export enum Meters {
+  '1LOG' = '1LOG',
+  '1HEM' = '1HEM',
+  'WASSER' = 'WASSER',
+  'ABWASSER' = 'ABWASSER',
+}
--- a/rossa-tech-cli/src/app/dataModels/Meterdata.ts
+++ b/rossa-tech-cli/src/app/dataModels/Meterdata.ts
@@ -0,0 +1,23 @@
+import { Meter } from "./Meter";
+
+export class MeterData {
+  id?: number;
+  type: "ENERGY" | "WATER";
+  date: Date;
+  amount: number;
+  meter: Meter;
+
+  constructor(
+    type: "ENERGY" | "WATER",
+    date: Date,
+    amount: number,
+    meter: Meter,
+    id?: number
+  ) {
+    this.id = id;
+    this.type = type;
+    this.date = date;
+    this.amount = amount;
+    this.meter = meter;
+  }
+}
--- a/rossa-tech-cli/src/app/dataModels/UsageType.ts
+++ b/rossa-tech-cli/src/app/dataModels/UsageType.ts
@@ -0,0 +1,4 @@
+export enum UsageType {
+  ENERGY = 'ENERGY',
+  WATER = 'WATER'
+}
--- a/rossa-tech-cli/src/app/dataModels/gameTitle.type.ts
+++ b/rossa-tech-cli/src/app/dataModels/gameTitle.type.ts
@@ -0,0 +1,49 @@
+export class GameTitle {
+  constructor(
+    private gameTitle: String,
+    private publisher: String,
+    private devStudioName: String,
+    private publishingYear: Number,
+    private retailPrice: Number
+  ) {}
+
+  public get gameTitleValue(): String {
+    return this.gameTitle;
+  }
+
+  public set gameTitleValue(val: String) {
+    this.gameTitle = val;
+  }
+
+  public get publisherValue(): String {
+    return this.publisher;
+  }
+
+  public set publisherValue(val: String) {
+    this.publisher = val;
+  }
+
+  public get devStudioNameValue(): String {
+    return this.devStudioName;
+  }
+
+  public set devStudioNameValue(val: String) {
+    this.devStudioName = val;
+  }
+
+  public get publishingYearValue(): Number {
+    return this.publishingYear;
+  }
+
+  public set publishingYearValue(val: Number) {
+    this.publishingYearValue = val;
+  }
+
+  public get retailPriceValue(): Number {
+    return this.retailPrice;
+  }
+
+  public set retailPriceValue(val: Number) {
+    this.retailPrice = val;
+  }
+}
--- a/rossa-tech-cli/src/app/dataModels/info.md
+++ b/rossa-tech-cli/src/app/dataModels/info.md
@@ -0,0 +1,15 @@
+CREATE TABLE meter (
+  id INT NOT NULL AUTO_INCREMENT,
+  name VARCHAR(255) NOT NULL,
+  PRIMARY KEY (id)
+);
+
+CREATE TABLE meterdata (
+  id INT NOT NULL AUTO_INCREMENT,
+  type ENUM('energy', 'water') NOT NULL,
+  date DATETIME NOT NULL,
+  amount FLOAT NOT NULL,
+  meter_id INT NOT NULL,
+  PRIMARY KEY (id),
+  FOREIGN KEY (meter_id) REFERENCES meter(id)
+);
--- a/rossa-tech-cli/src/app/dataModels/loginUser.type.ts
+++ b/rossa-tech-cli/src/app/dataModels/loginUser.type.ts
@@ -0,0 +1,19 @@
+export class LoginUser {
+  constructor(private userName: String, private userPass: String) {}
+
+  public get userNameValue() {
+    return this.userName;
+  }
+
+  public set userNameValue(val: String) {
+    this.userName = val;
+  }
+
+  public get userPassValue() {
+    return this.userPass;
+  }
+
+  public set userPassValue(val: String) {
+    this.userPass = val;
+  }
+}
--- a/rossa-tech-cli/src/app/dataModels/userRole.type.ts
+++ b/rossa-tech-cli/src/app/dataModels/userRole.type.ts
@@ -0,0 +1,19 @@
+export class UserRole {
+  constructor(private roleId: String, private roleName: String) {}
+
+  public get roleIdValue(): String {
+    return this.roleId;
+  }
+
+  public set roleIdValue(val: String) {
+    this.roleId = val;
+  }
+
+  public get roleNameValue(): String {
+    return this.roleName;
+  }
+
+  public set roleNameValue(val: String) {
+    this.roleName = val;
+  }
+}
--- a/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.html
+++ b/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.html
@@ -0,0 +1,25 @@
+<h1 mat-dialog-title>Neuer Eintrag - Typ: {{usageType}}</h1>
+<form [formGroup]="form">
+  <div mat-dialog-content>
+    <mat-form-field>
+      <input matInput [matDatepicker]="picker" formControlName="date">
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Meter</mat-label>
+      <mat-select formControlName="meter" (valueChange)="setUsageType($event.name)">
+        <mat-option *ngFor="let el of meters" [value]="el">{{el.name}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput type="number" formControlName="amount">
+    </mat-form-field>
+  </div>
+
+  <div mat-dialog-actions>
+    <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+  </div>
+</form>
--- a/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.scss
+++ b/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.scss
--- a/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.spec.ts
+++ b/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MeterDataAddDialogComponent } from './meter-data-add-dialog.component';
+
+describe('MeterDataAddDialogComponent', () => {
+  let component: MeterDataAddDialogComponent;
+  let fixture: ComponentFixture<MeterDataAddDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MeterDataAddDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MeterDataAddDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.ts
+++ b/rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { MatDialogRef } from "@angular/material/dialog";
+import { Meter, Meters } from "src/app/dataModels/Meter";
+import { MeterData } from "src/app/dataModels/Meterdata";
+import { UsageType } from "src/app/dataModels/UsageType";
+import { DatabaseService } from "src/app/services/database.service";
+
+@Component({
+  selector: "app-meter-data-add-dialog",
+  templateUrl: "./meter-data-add-dialog.component.html",
+  styleUrls: ["./meter-data-add-dialog.component.scss"],
+})
+export class MeterDataAddDialogComponent implements OnInit {
+  meters: Meter[] = [];
+  usageTypes = UsageType;
+  usageType: UsageType = UsageType.ENERGY;
+
+  form: FormGroup = this.fb.group({
+    date: [new Date(), Validators.required],
+    meter: ["", Validators.required],
+    amount: ["", Validators.required],
+  });
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<MeterDataAddDialogComponent>,
+    private dataService: DatabaseService
+  ) {}
+
+  ngOnInit(): void {
+    this.dataService.getMeters().subscribe({
+      next: (meters: Meter[]) => {
+        console.log({ meters });
+        this.meters = meters;
+      },
+      error: (err) => {
+        console.log("get meters error", { err });
+      },
+    });
+  }
+
+  submit() {
+    if (this.form.valid) {
+      const formValues = this.form.value;
+      const newMeterData: MeterData = {
+        amount: formValues.amount,
+        date: formValues.date,
+        meter: formValues.meter,
+        type: this.usageType,
+      };
+
+      this.dialogRef.close(newMeterData);
+    }
+  }
+
+  setUsageType(meterName: string): void {
+    if (meterName === Meters["1HEM"] || meterName === Meters["1LOG"]) {
+      this.usageType = this.usageTypes.ENERGY;
+    } else if (meterName === Meters.ABWASSER || meterName === Meters.WASSER) {
+      this.usageType = this.usageTypes.WATER;
+    }
+  }
+}
--- a/rossa-tech-cli/src/app/services/database.service.ts
+++ b/rossa-tech-cli/src/app/services/database.service.ts
@@ -1,22 +1,34 @@
-import { MeterData } from './../models/Meterdata';
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { Meter } from 'src/app/models/Meter';
-import { environment } from 'src/environments/environment';
+import { Injectable } from "@angular/core";
+import {
+  HttpClient,
+  HttpErrorResponse,
+  HttpHeaders,
+} from "@angular/common/http";
+import { Observable, throwError } from "rxjs";
+import { catchError } from "rxjs/operators";
+import { environment } from "src/environments/environment";
+import { MeterData } from "../dataModels/Meterdata";
+import { Meter } from "../dataModels/Meter";
+import { LoginService } from "../auth/login.service";

@Injectable({
-  providedIn: 'root',
+  providedIn: "root",
 })
 export class DatabaseService {
-  private baseUrl = environment.hostUrl + '/v1';
+  private baseUrl = environment.apiBaseUrl;

-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient, private userService: LoginService) {}

  getMeterData(): Observable<MeterData[]> {
    const url = `${this.baseUrl}/meter-data`;
-    return this.http.get<MeterData[]>(url).pipe(catchError(this.handleError));
+    let jwtToken: String = this.userService.getUserSecurityToken(),
+      headers: HttpHeaders = new HttpHeaders({
+        authorization: "bearer " + jwtToken,
+      }),
+      options = { headers: headers };
+    return this.http
+      .get<MeterData[]>(url, options)
+      .pipe(catchError(this.handleError));
  }

  getMeterDataByType(usageType: string): Observable<MeterData[]> {
@@ -41,7 +53,7 @@ export class DatabaseService {

    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
-      console.error('An error occurred:', error.error.message);
+      console.error("An error occurred:", error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
--- a/rossa-tech-cli/src/app/services/error.service.ts
+++ b/rossa-tech-cli/src/app/services/error.service.ts
@@ -0,0 +1,63 @@
+import { Injectable } from "@angular/core";
+import { HttpErrorResponse } from "@angular/common/http";
+import { NotificationService } from "./notification.service";
+import { LoginService } from "../auth/login.service";
+import { PageSecurityService } from "./pageSecurity.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ErrorService {
+  constructor(
+    private notificationService: NotificationService,
+    private loginService: LoginService,
+    private pageSecurityService: PageSecurityService
+  ) {}
+
+  handleError(error: HttpErrorResponse): void {
+    if (error != null) {
+      if (error.status === 0) {
+        console.log("Client error.");
+        this.notificationService.showSnackbar(
+          "Client error",
+          3000,
+          "snackbar-warning",
+          true,
+          "alert-circle-outline"
+        );
+      } else if (error.status === 401 || error.status === 403) {
+        console.log("You are not authorized.");
+        // todo: redirect to login page?
+
+        this.loginService.removeSessionCurrentUser();
+        this.pageSecurityService.gotoLoginPage();
+
+        this.notificationService.showSnackbar(
+          "You are not authorized",
+          3000,
+          "snackbar-warning",
+          true,
+          "cancel"
+        );
+      } else if (error.status === 500) {
+        console.log("Server error occurred.");
+        this.notificationService.showSnackbar(
+          "Server error occurred",
+          3000,
+          "snackbar-warning",
+          true,
+          "server-off"
+        );
+      } else {
+        console.log("Unknown error: " + error.status);
+        this.notificationService.showSnackbar(
+          "Unknown error",
+          3000,
+          "snackbar-warning",
+          true,
+          "alert-circle-outline"
+        );
+      }
+    }
+  }
+}
--- a/rossa-tech-cli/src/app/services/forms.service.ts
+++ b/rossa-tech-cli/src/app/services/forms.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class FormsService {
+  public makeFormFieldsClean(formToCheck: any): void {
+    if (formToCheck != null) {
+      Object.keys(formToCheck.controls).forEach((key) => {
+        formToCheck.controls[key].markAsUntouched({});
+        formToCheck.controls[key].markAsPristine();
+      });
+    }
+  }
+
+  public makeFormFieldsDirty(formToCheck: any): void {
+    if (formToCheck != null) {
+      Object.keys(formToCheck.controls).forEach((key) => {
+        formToCheck.controls[key].markAsDirty();
+      });
+    }
+  }
+}
--- a/rossa-tech-cli/src/app/services/gameTitles.service.ts
+++ b/rossa-tech-cli/src/app/services/gameTitles.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Observable } from "rxjs";
+
+import { environment } from "../../environments/environment";
+import { LoginService } from "../auth/login.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class GameTitlesService {
+  constructor(private http: HttpClient, private userService: LoginService) {}
+
+  public getAllGameTitles(): Observable<any> {
+    let jwtToken: String = this.userService.getUserSecurityToken(),
+      headers: HttpHeaders = new HttpHeaders({
+        authorization: "bearer " + jwtToken,
+      }),
+      options = { headers: headers };
+    return this.http.get<any>(
+      environment.apiBaseUrl + "secure/allGameTitles",
+      options
+    );
+  }
+}
--- a/rossa-tech-cli/src/app/services/global.service.ts
+++ b/rossa-tech-cli/src/app/services/global.service.ts
@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { MeterData } from '../models/Meterdata';
+import { Injectable } from "@angular/core";
+import { MeterData } from "../dataModels/Meterdata";

@Injectable({
-  providedIn: 'root',
+  providedIn: "root",
 })
 export class GlobalService {
  constructor() {}
--- a/rossa-tech-cli/src/app/services/notification.service.ts
+++ b/rossa-tech-cli/src/app/services/notification.service.ts
@@ -0,0 +1,71 @@
+import { Injectable, OnDestroy } from "@angular/core";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { Subscription } from "rxjs";
+import { SnackbarComponent } from "../components/snackbar/snackbar.component";
+
+interface SnackbarData {
+  message: string;
+  className?: string;
+  icon?: boolean;
+  iconName?: string;
+}
+
+@Injectable({
+  providedIn: "root",
+})
+export class NotificationService implements OnDestroy {
+  // Configuration api subscription
+  private configState!: Subscription;
+
+  /**
+   * Constructor
+   * @param toast MatSnackBar
+   */
+  constructor(private toast: MatSnackBar) {}
+
+  /**
+   * Unsubscribe from the config state
+   * when the component is destroyed, and remove
+   * the in-memory parameters.
+   */
+  ngOnDestroy(): void {
+    this.configState.unsubscribe();
+  }
+
+  /**
+   * Display a MatSnackbar notification and return the reference.
+   * @param message string
+   * @param durationTime number in milliceconds
+   * @param className string snackbar-warning, snackbar-success, snackbar-primary
+   * @param icon boolean
+   * @param iconName string name of the icon
+   */
+  showSnackbar(
+    message: string,
+    durationTime?: number,
+    className?: string,
+    icon?: boolean,
+    iconName?: string
+  ): void {
+    const duration = durationTime || 8000;
+
+    const data: SnackbarData = {
+      message,
+    };
+
+    if (icon && iconName) {
+      data.icon = icon;
+      data.iconName = iconName;
+    }
+    if (className) {
+      data.className = className;
+    }
+
+    this.toast.openFromComponent(SnackbarComponent, {
+      data,
+      duration,
+      horizontalPosition: "left",
+      verticalPosition: "bottom",
+    });
+  }
+}
--- a/rossa-tech-cli/src/app/services/pageSecurity.service.ts
+++ b/rossa-tech-cli/src/app/services/pageSecurity.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { HttpErrorResponse } from "@angular/common/http";
+
+@Injectable({
+  providedIn: "root",
+})
+export class PageSecurityService {
+  constructor(private router: Router) {}
+
+  public gotoLoginPage() {
+    this.router.navigate(["/login"]);
+  }
+
+  public checkPageSecurityError(httpError: HttpErrorResponse) {
+    if (!httpError || httpError.status == null) {
+      throw new Error("Invalid http error object.");
+    }
+
+    if (httpError.status === 401) {
+      this.gotoLoginPage();
+    }
+
+    if (httpError.status === 403) {
+      this.router.navigate(["/accessDenied"]);
+    }
+  }
+}