diff --git a/angular.json b/angular.json
index 1adde08..3d0d5fe 100644
--- a/angular.json
+++ b/angular.json
@@ -31,11 +31,10 @@
],
"styles": [
"node_modules/datatables.net-dt/css/jquery.datatables.css",
- "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+ "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"node_modules/@angular-architects/paper-design/assets/css/bootstrap.css",
"node_modules/@angular-architects/paper-design/assets/scss/paper-dashboard.scss",
- "src/styles.scss",
- "node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
+ "src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
diff --git a/package-lock.json b/package-lock.json
index 298c358..e121658 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"jquery": "^3.6.0",
+ "moment": "^2.29.4",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@@ -8272,6 +8273,14 @@
"node": ">=10"
}
},
+ "node_modules/moment": {
+ "version": "2.29.4",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -18098,6 +18107,11 @@
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true
},
+ "moment": {
+ "version": "2.29.4",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+ },
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index cb0971c..6f46da9 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"jquery": "^3.6.0",
+ "moment": "^2.29.4",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@@ -50,4 +51,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.4"
}
-}
\ No newline at end of file
+}
diff --git a/src/app/Gruppe.ts b/src/app/Gruppe.ts
new file mode 100644
index 0000000..f5aeee8
--- /dev/null
+++ b/src/app/Gruppe.ts
@@ -0,0 +1,7 @@
+export class Gruppe {
+ groupid?: number;
+ groupname?: string;
+ date_started?: Date;
+ date_end?: Date;
+ Anmerkung?: string;
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7a279b7..92d78e3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -47,6 +47,12 @@ import { PruefungsergebnisComponent } from './pruefungsergebnis/pruefungsergebni
import { MatDatepickerModule } from '@angular/material/datepicker';
import {MatTabsModule} from '@angular/material/tabs';
import {MatRadioModule} from '@angular/material/radio';
+import { MatNativeDateModule } from '@angular/material/core';
+import { GruppenComponent } from './gruppen/gruppen.component';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatListModule} from '@angular/material/list';
+
@NgModule({
imports: [
HttpClientModule,
@@ -71,7 +77,10 @@ import {MatRadioModule} from '@angular/material/radio';
MatSelectModule,
MatDatepickerModule,
MatTabsModule,
- MatRadioModule
+ MatRadioModule,
+ MatSidenavModule,
+ MatToolbarModule,
+ MatListModule
],
declarations: [
AppComponent,
@@ -95,7 +104,8 @@ import {MatRadioModule} from '@angular/material/radio';
DashComponent,
LoginComponent,
PrergebnisComponent,
- PruefungsergebnisComponent
+ PruefungsergebnisComponent,
+ GruppenComponent
],
providers: [],
bootstrap: [
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 8ff40f5..a005d1c 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -14,6 +14,7 @@ import { Lehrling2berufComponent } from "./lehrling2beruf/lehrling2beruf.compone
import { DashComponent } from "./dash/dash.component";
import { LoginComponent } from "./login/login.component";
import { PrergebnisComponent } from "./prergebnis/prergebnis.component";
+import { GruppenComponent } from "./gruppen/gruppen.component";
export const APP_ROUTES: Routes = [
{
@@ -38,6 +39,10 @@ export const APP_ROUTES: Routes = [
path: 'list-lehrling',
component: ListLehrlingeComponent
},
+ {
+ path: 'gruppen',
+ component: GruppenComponent
+ },
{
path: 'editLehrling/:id',
component: EditLehrlingeComponent
diff --git a/src/app/dash/dash.component.css b/src/app/dash/dash.component.css
index 5ae3d14..f84c014 100644
--- a/src/app/dash/dash.component.css
+++ b/src/app/dash/dash.component.css
@@ -8,3 +8,21 @@
width: 100%;
}
+ .demo-table {
+ width: 100%;
+ }
+
+ .row-is-clicked {
+ color: red;
+ background: #472ddb;
+ font-weight: bold;
+ }
+
+ .mat-row.hovered {
+ background: rgb(228, 238, 255);
+}
+
+.mat-row.highlighted {
+ background: #d04b2d;
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/app/dash/dash.component.html b/src/app/dash/dash.component.html
index 88ddb54..f4c44cb 100644
--- a/src/app/dash/dash.component.html
+++ b/src/app/dash/dash.component.html
@@ -39,7 +39,10 @@
-
+
-
Lehrling
+
{{aktuellername}}
Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt
diff --git a/src/app/dash/dash.component.ts b/src/app/dash/dash.component.ts
index 91b84b3..05c1f8d 100644
--- a/src/app/dash/dash.component.ts
+++ b/src/app/dash/dash.component.ts
@@ -13,6 +13,7 @@ import { MatPaginator} from '@angular/material/paginator';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatSort } from '@angular/material/sort';
import {MatTabsModule} from '@angular/material/tabs';
+import { SelectionModel } from '@angular/cdk/collections';
@Component({
selector: 'app-dash',
templateUrl: './dash.component.html',
@@ -26,6 +27,9 @@ export class DashComponent implements OnInit, AfterViewInit {
public widget: any;
selectedLehrling: Lehrling | null = null;
public datasource: MatTableDataSource;
+ public angewaehlt: any;
+ public aktuellername: any;
+ selection = new SelectionModel(true, []);
displayedColumns: string[] = ['apprenticeid',
'firstname',
@@ -78,5 +82,17 @@ private _liveAnnouncer: any;
}
}
+ onclick(row: any) {
+ this.angewaehlt = row;
+ this.aktuellername = row.firstname + ' ' + row.lastname;
+ // console.log(this.aktuellername);
+ }
+ selectHandler(row: Pruefung) {
+
+ if (!this.selection.isSelected(row)) {
+ this.selection.clear();
+ }
+
+ }
}
diff --git a/src/app/gruppen/gruppen.component.css b/src/app/gruppen/gruppen.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/gruppen/gruppen.component.html b/src/app/gruppen/gruppen.component.html
new file mode 100644
index 0000000..0fd77c9
--- /dev/null
+++ b/src/app/gruppen/gruppen.component.html
@@ -0,0 +1,37 @@
+
+ Gruppe
+
+
+
+ Filter
+
+
+
+
+
+ ID |
+ {{grp.groupid}} |
+
+
+ Name |
+ {{grp.groupname}} |
+
+
+ Gestartet |
+ {{grp.date_started}} |
+
+
+ Beendet |
+ {{grp.date_end}} |
+
+
+ Anmerkung |
+ {{grp.Anmerkung}} |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/gruppen/gruppen.component.spec.ts b/src/app/gruppen/gruppen.component.spec.ts
new file mode 100644
index 0000000..dc3894a
--- /dev/null
+++ b/src/app/gruppen/gruppen.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GruppenComponent } from './gruppen.component';
+
+describe('GruppenComponent', () => {
+ let component: GruppenComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ GruppenComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GruppenComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/gruppen/gruppen.component.ts b/src/app/gruppen/gruppen.component.ts
new file mode 100644
index 0000000..63a25f4
--- /dev/null
+++ b/src/app/gruppen/gruppen.component.ts
@@ -0,0 +1,79 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Gruppe } from '../Gruppe';
+import { GruppeService } from '../services/gruppe.service';
+
+@Component({
+ selector: 'app-gruppen',
+ templateUrl: './gruppen.component.html',
+ styleUrls: ['./gruppen.component.css']
+})
+export class GruppenComponent implements OnInit {
+
+ public gruppen: any;
+ public selection: any;
+ public dataSource: any;
+ displayedColumns: any = ["groupid", "groupname", "date_started", "date_end", "Anmerkung"];
+
+ constructor(private _liveAnnouncer: LiveAnnouncer,
+ private formbuilder: FormBuilder,
+ private router: Router,
+ private activatedRoute: ActivatedRoute,
+ private http: HttpClient,
+ private grpService: GruppeService
+ ) { }
+
+ @ViewChild('paginator') paginator: MatPaginator;
+ @ViewChild(MatSort) sort: MatSort;
+
+ ngOnInit(): void {
+ this.grpService.getGruppen().subscribe (
+ (
+ result: any) => {
+ console.log(result);
+ this.gruppen = result.data;
+ this.dataSource = new MatTableDataSource(this.gruppen)
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+ })
+ }
+
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ console.log("Filter: " + this.dataSource.filter);
+ }
+
+ /** Announce the change in sort state for assistive technology. */
+ announceSortChange(sortState: Sort) {
+ // This example uses English messages. If your application supports
+ // multiple language, you would internationalize these strings.
+ // Furthermore, you can customize the message to add additional
+ // details about the values being sorted.
+ if (sortState.direction) {
+ this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+ } else {
+ this._liveAnnouncer.announce('Sorting cleared');
+ }
+ }
+
+ ngAfterViewInit() {
+ 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(aktuell: Gruppe) {
+
+ }
+}
diff --git a/src/app/kompetenz/kompetenz.component.html b/src/app/kompetenz/kompetenz.component.html
index f7073a2..d3934e1 100644
--- a/src/app/kompetenz/kompetenz.component.html
+++ b/src/app/kompetenz/kompetenz.component.html
@@ -29,10 +29,12 @@
-
+
-
Kompetenz bearbeiten
-
+
Kompetenz bearbeiten
+
+
+