noch einmal

src/app/Pruefungsergebnis.ts

@@ -0,0 +1,9 @@
+export class Pruefungsergebnis{
+    apprenticeid?: number;	
+    examid?: number;
+    firstname?: string;
+    lastname?: string;
+    date_of_exam?: Date;
+    acquired?: number; 
+}
+

src/app/Userlogin.ts

@@ -0,0 +1,6 @@
+export class Userlogin {
+    id?: number;
+    login?: string;
+    name?: string;
+    email?: string;
+}

src/app/app.module.ts

@@ -39,7 +39,12 @@ import { AngularMaterialModule } from '../app/angular-material/angular-material.
 import { DashComponent } from './dash/dash.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { LoginComponent } from './login/login.component'
-import {MatCardModule} from '@angular/material/card'; 
+import {MatCardModule} from '@angular/material/card';
+import { PrergebnisComponent } from './prergebnis/prergebnis.component'; 
+import { MatOption } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { PruefungsergebnisComponent } from './pruefungsergebnis/pruefungsergebnis.component';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 @NgModule({
    imports: [
@@ -61,7 +66,9 @@ import {MatCardModule} from '@angular/material/card';
       MatTableModule,
       DragDropModule,
       NgbModule,
-      MatCardModule
+      MatCardModule,
+      MatSelectModule,
+      MatDatepickerModule
    ],
    declarations: [
       AppComponent,
@@ -83,7 +90,9 @@ import {MatCardModule} from '@angular/material/card';
       Lehrling2berufComponent,
       AusbildungComponent,
       DashComponent,
-      LoginComponent
+      LoginComponent,
+      PrergebnisComponent,
+      PruefungsergebnisComponent
    ],
    providers: [],
    bootstrap: [

src/app/app.routes.ts

@@ -13,6 +13,7 @@ import { EditLehrlingeComponent } from "./edit-lehrlinge/edit-lehrlinge.componen
 import { Lehrling2berufComponent } from "./lehrling2beruf/lehrling2beruf.component";
 import { DashComponent } from "./dash/dash.component";
 import { LoginComponent } from "./login/login.component";
+import { PrergebnisComponent } from "./prergebnis/prergebnis.component";
 
 export const APP_ROUTES: Routes = [
     {
@@ -53,6 +54,10 @@ export const APP_ROUTES: Routes = [
         path: 'pruefung',
         component: PruefungComponent
     },
+    {
+        path: 'pruefungergebnis',
+        component: PrergebnisComponent
+    },
     {
         path: 'modul',
         component: ModulComponent

src/app/login/login.component.html

@@ -1,24 +1,31 @@
-<mat-card class="login-card col-3 float-left">
+<mat-card class="login-card col-4 float-left">
     <mat-card-title class="kopf p-3">
         Anmelden
     </mat-card-title>
-    <mat-card-content>
+    <mat-card-content >
-       <form class="my-form">
+       <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="my-form col-12">
-        <div class="row">
+        <div class="row ">   
-          <mat-form-field class="full-width">
+            <mat-form-field class="full-width">
-             <mat-label>E-Mail</mat-label>
+               <mat-label>Login</mat-label>
-             <input  matInput  placeholder="E-Mail eingeben" name="email">
+               <input class="col-12" matInput formControlName="login" 
-          </mat-form-field>
+                     placeholder="Benutzername oder E-Mail eingeben" 
+                     autocomlete="off" name="login">
+               <div class="error" *ngIf="loginForm.controls['login'].hasError('required') && loginForm.controls['login'].touched">Bitte eine gültige E-Mail Adresse eingeben!</div>
+            </mat-form-field>            
         </div>
-        <div class="row">
+        <div class="row"> 
-          <mat-form-field class="full-width">
+            <mat-form-field class="full-width">
-             <mat-label>Passwort</mat-label>
+               <mat-label>Passwort</mat-label>
-             <input type="password"  matInput  placeholder="Passwort eingeben" name="password">
+               <input  type="password"  matInput formControlName="password" placeholder="Passwort eingeben" name="password">
-          </mat-form-field>
+               <div class="error" *ngIf="loginForm.controls['password'].hasError('required') && loginForm.controls['password'].touched">Bitte ein Passwort eingeben!</div>
-        </div>
+            </mat-form-field>            
-       </form>
+         </div>
-    </mat-card-content>
     <mat-card-actions>
-       <button mat-raised-button (click)="login()" color="primary">Anmelden</button>
+      <div class="error" *ngIf="invalidLogin">
-    </mat-card-actions>
+         <div *ngIf="invalidLogin">Ungültige E-Mail oder falsches Passwort eingegeben! Bitte noch einmal.</div>
+       </div>
+       <button class="btn btn-success btn-default ml-3 mb-2" mat-raised-button [disabled]="loginForm.invalid" color="primary">Anmelden</button>
+      </mat-card-actions>
+   </form>
+   </mat-card-content>
  </mat-card>

src/app/login/login.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
+import { Router } from '@angular/router';
+import { LoginService } from '../services/login.service';
+import { Userlogin } from '../Userlogin';
 
 @Component({
   selector: 'app-login',
@@ -8,12 +12,47 @@ import { MatCardModule } from '@angular/material/card';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  loginForm: any;
+  invalidLogin: boolean = false;
+  message: any;
+
+  constructor(private formBuilder: FormBuilder, private router: Router, private loginService: LoginService) { }
 
   ngOnInit(): void {
+    this.loginForm = this.formBuilder.group({
+      login: ['', Validators.compose([Validators.required])],
+      password: ['', Validators.required]
+    })
   }
   
-  login() {
+  onSubmit() {
+    
+    console.log(this.loginForm.value);
 
-  }
+
+    if(this.loginForm.invalid)
+    {
+      return;
+    }
+
+    const logindata = {
+      login: this.loginForm.controls.login.value,
+      password: this.loginForm.controls.password.value
+    };
+
+    this.loginService.login(logindata).subscribe((data: any) => {
+      console.log(data);
+      this.message = data.message;
+    
+    if(data.token) {
+      window.localStorage.setItem('token', data.token);
+      this.router.navigate(['dash']);
+    }
+    else
+    {
+      this.invalidLogin = true;
+      alert(data.message);
+    }
+  });
+}
 }

src/app/prergebnis/prergebnis.component.css

@@ -0,0 +1,17 @@
+.demo-table {
+    width: 100%;
+  }
+  
+  .row-is-clicked {
+    color: red;
+    background-color: #fdf9e9;
+    font-weight: bold;
+  }
+  
+  .mat-row.hovered {
+    background: #eee;
+}
+
+.mat-row.highlighted {
+  background: #fdf9e9;
+}

src/app/prergebnis/prergebnis.component.html

@@ -0,0 +1,114 @@
+<div class="container col-12 float-left">
+    <div class="row">
+      <div class="auswahl col-6">
+      <mat-form-field>
+        <mat-label>Ergebnis zuordnen</mat-label>
+        <mat-select [(ngModel)]="displayType" (ngModelChange)="onChange(displayType)">
+          <mat-option *ngFor="let type of selectType" [value]="type.value">
+            {{type.text}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      </div>
+      <div class="row">
+        <div class="prueffilter col-6">
+        <mat-form-field class="pl-4" appearance="standard">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applypruefFilter($event)" placeholder="Suchbegriff" #input>
+        </mat-form-field>
+      </div>
+      <div class="personfilter col-6">
+        <mat-form-field class="pl-4" appearance="standard">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applypersonFilter($event)" placeholder="Suchbegriff" #input>
+        </mat-form-field>
+      </div>
+    </div>
+    </div>
+    <div class="row col-12">
+      <div class="person col-6">
+         <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
+        <!-- Checkbox Column -->
+<!--     <ng-container matColumnDef="select">
+      <mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
+      <mat-cell class="align-bottom" *matCellDef="let pruerow">
+        <mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
+          [checked]="selection.isSelected(pruerow)">
+        </mat-checkbox>
+      </mat-cell>
+    </ng-container>
+-->
+    <ng-container matColumnDef="examid">
+        <th  class="kopf col-1" mat-header-cell *matHeaderCellDef> ID </th>
+        <td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
+    </ng-container>
+    <ng-container matColumnDef="examshort">
+        <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Prüfung </th>
+        <td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
+    </ng-container>
+    <ng-container matColumnDef="examname">
+        <th  class="kopf col-3" mat-sort-header  mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
+    </ng-container>
+    <ng-container matColumnDef="examdescription">
+        <th  class="kopf col-5" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
+        <td mat-cell *matCellDef="let prue"> {{prue.examdescription}} </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row 
+        *matRowDef="let  pruerow; columns: displayedColumns;"
+        (click)="selectHandler(pruerow)" (change)="selectHandler(pruerow)"
+        [ngClass]="{hovered: pruerow.hovered, highlighted: selection.isSelected(pruerow)}"
+        (mouseover)="pruerow.hovered = true" (mouseout)="pruerow.hovered = false"></tr>
+</table>
+<mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[5, 10, 20, 30]" showFirstLastButtons></mat-paginator>
+</div>
+<div class="pruef col-6">
+    <table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
+        		<!-- Checkbox Column -->
+   <!--     <ng-container matColumnDef="select">
+          <mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
+          <mat-cell class="align-bottom" *matCellDef="let pruerow">
+            <mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
+              [checked]="selection.isSelected(pruerow)">
+            </mat-checkbox>
+          </mat-cell>
+        </ng-container>
+-->
+        <ng-container matColumnDef="firstname">
+            <th  class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
+            <td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
+        </ng-container>
+        <ng-container matColumnDef="lastname">
+            <th  class="kopf col-4" mat-sort-header  mat-header-cell *matHeaderCellDef> Nachname </th>
+            <td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
+        </ng-container>
+        <ng-container matColumnDef="date_of_exam">
+            <th  class="kopf col-2" mat-sort-header  mat-header-cell *matHeaderCellDef> Datum </th>
+            <td mat-cell *matCellDef="let pers"> {{pers.date_of_exam}} </td>
+        </ng-container>
+        <ng-container matColumnDef="acquired">
+            <th  class="kopf text-right col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Bestanden </th>
+            <td mat-cell class="text-center" *matCellDef="let pers">{{pers.acquired}}
+    <!--          <div *ngIf="1">
+                  <img src="../../assets/icons/ok.png">
+              </div> -->
+               </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
+        <tr mat-row 
+            *matRowDef="let  persrow; columns: ergdisplayedColumns;"
+            (click)="selectHandler(persrow)" (change)="selectHandler(persrow)"
+            [ngClass]="{hovered: persrow.hovered, highlighted: selection.isSelected(persrow)}"
+            (mouseover)="persrow.hovered = true" (mouseout)="persrow.hovered = false"></tr>
+    </table>
+    <mat-paginator class="mat-elevation-z8 mt-3" #ergpaginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
+    </div>
+    </div>
+    <div>
+        <h3>
+          Ausgewählt:
+        </h3>
+        {{selection.selected | json}}
+      </div>
+</div>

src/app/prergebnis/prergebnis.component.spec.ts

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

src/app/prergebnis/prergebnis.component.ts

@@ -0,0 +1,152 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { Pruefung } from '../Pruefung';
+import { PruefungService } from '../services/pruefung.service';
+import {MatSelectModule} from '@angular/material/select';
+import { PruefungsergebnisService } from '../services/pruefungsergebnis.service';
+import { Pruefungsergebnis } from '../Pruefungsergebnis';
+
+export enum SelectType {
+  single,
+  multiple
+}
+
+@Component({
+  selector: 'app-prergebnis',
+  templateUrl: './prergebnis.component.html',
+  styleUrls: ['./prergebnis.component.css']
+})
+
+export class PrergebnisComponent implements OnInit {
+
+  constructor(private Pruefung: PruefungService, 
+              private pruefungsergebnis: PruefungsergebnisService,
+              private _liveAnnouncer: LiveAnnouncer,
+              private _ergliveAnnouncer: LiveAnnouncer) { }
+
+
+   public dataSource: any;
+   public ergdataSource: any;
+   public pruefungen: any;  
+   public pruefergebnisse: any;
+   public angewaehlt: any;
+   public ergangewaehlt: any;
+   public abgewählt: any;
+
+   displayedColumns: any = [  "examid", "examshort", "examname", "examdescription"];
+   ergdisplayedColumns: any = [  "firstname", "lastname", "date_of_exam", "acquired"];
+   selection = new SelectionModel<Pruefung>(true, []);
+   ergselection = new SelectionModel<Pruefungsergebnis>(true, []);
+   displayType = SelectType.single;
+
+   //clickedRows = new Set<Pruefung>();
+
+  ngOnInit(): void {
+    
+    this.Pruefung.getPruefungen().subscribe(
+      (
+        data: any) => {
+      //  console.log(data);
+        this.pruefungen = data.exam;
+        this.dataSource = new MatTableDataSource(this.pruefungen);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+    })
+    this.pruefungsergebnis.getPruefergebnisse().subscribe(
+      (
+        data: any) => {
+      //  console.log(data);
+        this.pruefergebnisse = data;
+        this.ergdataSource = new MatTableDataSource(this.pruefergebnisse);
+        this.ergdataSource.ergpaginator = this.ergpaginator;
+        this.ergdataSource.sort = this.sort;
+    })
+  }
+
+  selectHandler(row: Pruefung) {
+    if (this.displayType == SelectType.single) {
+      if (!this.selection.isSelected(row)) {
+        this.selection.clear();
+      }
+    }
+    this.selection.toggle(row);
+  }
+
+  ergselectHandler(row: Pruefungsergebnis) {
+    if (this.displayType == SelectType.single) {
+      if (!this.ergselection.isSelected(row)) {
+        this.ergselection.clear();
+      }
+    }
+    this.ergselection.toggle(row);
+  }
+
+  onChange(typeValue: number) {
+    this.displayType = typeValue;
+    this.selection.clear();
+  }
+
+  selectType = [
+    { text: "Einfachauswahl", value: SelectType.single },
+    { text: "Mehrfachauswahl", value: SelectType.multiple }
+  ];
+
+  @ViewChild('paginator') paginator: MatPaginator;
+  @ViewChild('ergpaginator') ergpaginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort) ergsort: MatSort;
+
+  ngAfterViewInit() {
+    if(this.ergdataSource != undefined) {
+      this.ergdataSource.ergpaginator = this.ergpaginator;
+      this.ergdataSource.ergsort = this.ergsort;
+      console.log(this.ergdataSource);
+    }
+    else
+      console.log("Erg Datasource ist undefined in AfterViewInit");
+
+    if(this.dataSource != undefined) {
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+      console.log(this.dataSource);
+    }
+    else
+      console.log("DataSource undefined in AfterViewInit");
+  }
+  onclick(pruerow: any) {
+    this.angewaehlt = pruerow;
+    console.log(this.angewaehlt);
+  }
+
+  applypruefFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    console.log("Filter: " + this.dataSource.filter);
+  }
+
+  applypersonFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.ergdataSource.filter = filterValue.trim().toLowerCase();
+    console.log("Filter: " + this.ergdataSource.filter);
+  }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+  ergannounceSortChange(ergsortState: Sort) {
+    if (ergsortState.direction) {
+      this._ergliveAnnouncer.announce(`Sorted ${ergsortState.direction}ending`);
+    } else {
+      this._ergliveAnnouncer.announce('Sorting cleared');
+    }
+  }
+}

src/app/pruefungsergebnis/pruefungsergebnis.component.html

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

src/app/pruefungsergebnis/pruefungsergebnis.component.spec.ts

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

src/app/pruefungsergebnis/pruefungsergebnis.component.ts

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

src/app/services/login.service.spec.ts

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

src/app/services/login.service.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpSentEvent } from '@angular/common/http';
+import { Userlogin } from '../Userlogin';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor(private http: HttpClient) { }
+  baseUrl = "http://localhost/bildungdb/api";
+
+    login(logindata): any {
+      const strloginapi = this.baseUrl + '/login.php';
+      console.log(strloginapi);
+      return this.http.get<Userlogin>(this.baseUrl + '/login.php', logindata);
+  }
+}

src/app/services/pruefungsergebnis.service.spec.ts

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

src/app/services/pruefungsergebnis.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Pruefungsergebnis } from '../Pruefungsergebnis';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PruefungsergebnisService {
+
+  public $url = "http://localhost/bildungdb/api/pruefungsergebnis.php";
+  
+  constructor(private http: HttpClient) { }
+
+  getPruefergebnisse() {
+    return this.http.get<Pruefungsergebnis[]>(this.$url);
+  }
+
+}

src/app/sidebar/sidebar.component.html

@@ -42,6 +42,13 @@
                 <p>Prüfung</p>
             </a>
         </li>
+        
+        <li routerLinkActive="active">
+            <a routerLink="pruefungergebnis">
+                <p>Prüfungsergebnis</p>
+            </a>
+        </li>
+
         <li routerLinkActive="active">
             <a routerLink="l2b">
                 <p>Lehrling zu Beruf</p>