From 50e5306d48bef647a554d2608e71a6602e83ae94 Mon Sep 17 00:00:00 2001 From: Georg Spar Date: Sat, 29 May 2021 00:09:12 +0200 Subject: [PATCH] Artikel-CRUD --- angular.json | 8 +- package-lock.json | 25 +++ package.json | 2 + src/app/app.component.css | 8 + src/app/app.component.html | 6 +- src/app/app.module.ts | 41 ++++- .../artikel-data/artikel-data.component.css | 0 .../artikel-data/artikel-data.component.html | 47 +++++ .../artikel-data.component.spec.ts | 25 +++ .../artikel-data/artikel-data.component.ts | 161 ++++++++++++++++++ .../md-add-artikel.component.css | 0 .../md-add-artikel.component.html | 26 +++ .../md-add-artikel.component.spec.ts | 25 +++ .../md-add-artikel.component.ts | 18 ++ src/app/navigation/navigation.component.css | 0 src/app/navigation/navigation.component.html | 16 ++ .../navigation/navigation.component.spec.ts | 25 +++ src/app/navigation/navigation.component.ts | 15 ++ .../server-data/server-data.component.html | 60 ++++++- src/app/server-data/server-data.component.ts | 85 ++++++++- src/app/shared/db-xchange.service.spec.ts | 16 ++ src/app/shared/db-xchange.service.ts | 53 ++++++ src/custom-theme.scss | 35 ++++ src/index.html | 3 + src/main.ts | 1 + src/my.scss | 42 +++++ src/proxy.conf.json | 9 + src/styles.css | 15 +- 28 files changed, 752 insertions(+), 15 deletions(-) create mode 100644 src/app/artikel-data/artikel-data.component.css create mode 100644 src/app/artikel-data/artikel-data.component.html create mode 100644 src/app/artikel-data/artikel-data.component.spec.ts create mode 100644 src/app/artikel-data/artikel-data.component.ts create mode 100644 src/app/md-add-artikel/md-add-artikel.component.css create mode 100644 src/app/md-add-artikel/md-add-artikel.component.html create mode 100644 src/app/md-add-artikel/md-add-artikel.component.spec.ts create mode 100644 src/app/md-add-artikel/md-add-artikel.component.ts create mode 100644 src/app/navigation/navigation.component.css create mode 100644 src/app/navigation/navigation.component.html create mode 100644 src/app/navigation/navigation.component.spec.ts create mode 100644 src/app/navigation/navigation.component.ts create mode 100644 src/app/shared/db-xchange.service.spec.ts create mode 100644 src/app/shared/db-xchange.service.ts create mode 100644 src/custom-theme.scss create mode 100644 src/my.scss create mode 100644 src/proxy.conf.json diff --git a/angular.json b/angular.json index 78a3632..c023b3d 100644 --- a/angular.json +++ b/angular.json @@ -27,7 +27,9 @@ "src/assets" ], "styles": [ - "src/styles.css" + "src/custom-theme.scss", + "src/styles.css", + "src/my.scss" ], "scripts": [] }, @@ -66,6 +68,10 @@ }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "move-safe:build", + "proxyConfig": "src/proxy.conf.json" + }, "configurations": { "production": { "browserTarget": "senuma:build:production" diff --git a/package-lock.json b/package-lock.json index 2c94967..5fc338b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -143,6 +143,23 @@ "tslib": "^2.1.0" } }, + "@angular/cdk": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.1.tgz", + "integrity": "sha512-fO77bM0LWZeHkg+o23ZYGaZbth5DbaGDHrHVq+ygPA+wjmSDs12w2vIXQ6KpruGdP+28tAdpvZDMfD56N7xTbg==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + } + } + }, "@angular/cli": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.0.1.tgz", @@ -314,6 +331,14 @@ "tslib": "^2.1.0" } }, + "@angular/material": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.1.tgz", + "integrity": "sha512-Sevy/ssBuidSbpixUH8SvBXpHn+rKYfDao2YTgQxBJugIun9mnV0QqlzVG2gkdVYCesqEgZJRe3k7QXq7E+vlw==", + "requires": { + "tslib": "^2.1.0" + } + }, "@angular/platform-browser": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.0.1.tgz", diff --git a/package.json b/package.json index 62b1bf7..009aabd 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "private": true, "dependencies": { "@angular/animations": "~12.0.1", + "@angular/cdk": "^12.0.1", "@angular/common": "~12.0.1", "@angular/compiler": "~12.0.1", "@angular/core": "~12.0.1", "@angular/forms": "~12.0.1", + "@angular/material": "^12.0.1", "@angular/platform-browser": "~12.0.1", "@angular/platform-browser-dynamic": "~12.0.1", "@angular/router": "~12.0.1", diff --git a/src/app/app.component.css b/src/app/app.component.css index 75b74cd..114aae0 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -4,6 +4,7 @@ background-color: beige; border-radius: 5px; border-style: 5px solid; + padding: 0px; } @@ -12,6 +13,7 @@ color: wheat; margin: 0 0 0 0; padding-left: 30px; + padding-bottom: 0px; } .mtext { @@ -20,6 +22,12 @@ padding-bottom: 20px; } +.menue { + padding-left: 10px; + padding-top:0px; + margin: 0px; +} + .footer { background-color: chocolate; color: wheat; diff --git a/src/app/app.component.html b/src/app/app.component.html index 759a6cf..dafa3f8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,14 @@

SeNuMa Seriennummern-Verwaltung

+ +
+
+
- +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7495735..3638e66 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,53 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; - +import { MatFormField } from '@angular/material/form-field'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatTreeModule } from '@angular/material/tree'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { FormsModule } from '@angular/forms'; +import { MatTableModule } from '@angular/material/table'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatListModule } from '@angular/material/list'; import { AppComponent } from './app.component'; import { ServerDataComponent } from './server-data/server-data.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ArtikelDataComponent } from './artikel-data/artikel-data.component'; +import { MatInputModule } from '@angular/material/input'; +import { NavigationComponent } from './navigation/navigation.component'; +import { MdAddArtikelComponent } from './md-add-artikel/md-add-artikel.component'; +import { MatDialogModule } from '@angular/material/dialog'; + @NgModule({ declarations: [ AppComponent, - ServerDataComponent + ServerDataComponent, + ArtikelDataComponent, + NavigationComponent, + MdAddArtikelComponent ], imports: [ BrowserModule, - HttpClientModule + HttpClientModule, + BrowserAnimationsModule, + MatTreeModule, + MatIconModule, + MatButtonModule, + FormsModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatFormFieldModule, + MatInputModule, + MatMenuModule, + MatListModule, + MatDialogModule + ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/artikel-data/artikel-data.component.css b/src/app/artikel-data/artikel-data.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/artikel-data/artikel-data.component.html b/src/app/artikel-data/artikel-data.component.html new file mode 100644 index 0000000..cb9132a --- /dev/null +++ b/src/app/artikel-data/artikel-data.component.html @@ -0,0 +1,47 @@ + +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID{{row.id}}externe Artikelnummer{{row.artNrExt}}Bezeichnung{{row.bezeichnung}}
+ + + +
\ No newline at end of file diff --git a/src/app/artikel-data/artikel-data.component.spec.ts b/src/app/artikel-data/artikel-data.component.spec.ts new file mode 100644 index 0000000..b0be44f --- /dev/null +++ b/src/app/artikel-data/artikel-data.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArtikelDataComponent } from './artikel-data.component'; + +describe('ArtikelDataComponent', () => { + let component: ArtikelDataComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ArtikelDataComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ArtikelDataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/artikel-data/artikel-data.component.ts b/src/app/artikel-data/artikel-data.component.ts new file mode 100644 index 0000000..67207a3 --- /dev/null +++ b/src/app/artikel-data/artikel-data.component.ts @@ -0,0 +1,161 @@ +import { Component, AfterViewInit, ViewChild, Output, EventEmitter } from '@angular/core'; +import { DbXchangeService } from '../shared/db-xchange.service' +import { MatTableDataSource } from '@angular/material/table'; +import { MatSort } from '@angular/material/sort'; +import { MatPaginator } from '@angular/material/paginator'; +import { SelectionModel } from '@angular/cdk/collections'; +import { MatInput } from '@angular/material/input'; +import { MatFormField } from '@angular/material/form-field'; +import { MatDialog } from '@angular/material/dialog'; + +import { MdAddArtikelComponent } from '../md-add-artikel/md-add-artikel.component'; +import { fromEventPattern } from 'rxjs'; + + +export interface Artikel { + id: number; + artNrExt: number; + bezeichnung: string; +} + +@Component({ + selector: 'app-artikel-data', + templateUrl: './artikel-data.component.html', + styleUrls: ['./artikel-data.component.css'] +}) +export class ArtikelDataComponent implements AfterViewInit { + + dataSource!: MatTableDataSource; + data: Artikel[] = [{id:0,artNrExt:0, bezeichnung:''}]; + res: any; + selection: SelectionModel; + pageSizeOptions: number[] = [5, 10, 20]; + art: Artikel = {id:0,artNrExt:0, bezeichnung:''}; + + + @ViewChild(MatSort) + sort!: MatSort; + @ViewChild(MatPaginator, { static: true }) + paginator!: MatPaginator; + @Output() sendEvent = new EventEmitter(); + + displayedColumns = ['update', 'delete', 'id', 'artNrExt', 'bezeichnung']; + constructor(private dbx: DbXchangeService, public mdAdd: MatDialog) { + const initialSelection: Artikel[] | undefined = [] ; + const allowMultiSelect = false; + this.selection = new SelectionModel(allowMultiSelect, initialSelection); + + } + + ngAfterViewInit(): void { + this.dbx.getAllArtikel() + .subscribe(result => { + this.res = result; + //this.data = this.transform(this.res); + this.dataSource = new MatTableDataSource(this.res); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }, + error => console.log(error)); + } + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + filterValue.trim().toLowerCase(); + this.dataSource.filter = filterValue; + } + + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); + } + + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected == numRows; + } + + transform( res: any) { + var tfd: Artikel[] = [{id:0,artNrExt:0, bezeichnung:''}]; + let i = 0; + + for(let blubb of res) { + tfd[i].id = blubb.id; + tfd[i].artNrExt = blubb.artNrExt; + tfd[i].bezeichnung = blubb.bezeichnung; + i++; + } + return tfd; + } + + addArtikel() { + + let res: any; + + const dialogRef = this.mdAdd.open(MdAddArtikelComponent, { + width: '650px', data: this.art + }); + dialogRef.afterClosed(). + subscribe(result => { + this.art = result; + console.log('nach dem Dialog', this.art); + this.dbx.addArtikel(this.art) + .subscribe(result2 => { + res = result2; + if( res ) { + console.log('hat funktioniert', res) + confirm("Artikel mit der ID " + res.id.toString() + " wurde angelegt"); + } + else { + console.log('hat nicht funktioniert'); + } + } ); + + }); + } + + updateArtikel(id: number) { + let res: any; + + this.dbx.getArtikel(id) + .subscribe(result => { + res = result; + this.art.id = res.id; + this.art.artNrExt = res.artNrExt; + this.art.bezeichnung = res.bezeichnung; + const dialogRef = this.mdAdd.open(MdAddArtikelComponent, { width: '650px', data: this.art + }); + dialogRef.afterClosed() + .subscribe( resu => { + this.art = resu; + this.dbx.updateArtikel(this.art) + .subscribe( result2 => { + if (result2 ) { + confirm("Artikel mit der ID " + this.art.id + " upgedated"); + } + + }, + error => console.log(error)); + }) + + }, + error => console.log(error)); + + + } + + deleteArtikel(id: number) { + if(confirm("Artikel mit der ID " + id.toString() + " wirklich löschen?")) { + this.dbx.deleteArt(id) + .subscribe(result => { + if (result) { + confirm(result.toString()) + } + }, + error => console.log(error)); + } + } + +} \ No newline at end of file diff --git a/src/app/md-add-artikel/md-add-artikel.component.css b/src/app/md-add-artikel/md-add-artikel.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/md-add-artikel/md-add-artikel.component.html b/src/app/md-add-artikel/md-add-artikel.component.html new file mode 100644 index 0000000..6de56a2 --- /dev/null +++ b/src/app/md-add-artikel/md-add-artikel.component.html @@ -0,0 +1,26 @@ +

+ Neuen Artikel eingeben +

+ +
+
+ + externe Artikelnummer + + + +
+
+ + Bezeichnung + + + +
+ +
+ +
+ + +
diff --git a/src/app/md-add-artikel/md-add-artikel.component.spec.ts b/src/app/md-add-artikel/md-add-artikel.component.spec.ts new file mode 100644 index 0000000..1d2840a --- /dev/null +++ b/src/app/md-add-artikel/md-add-artikel.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MdAddArtikelComponent } from './md-add-artikel.component'; + +describe('MdAddArtikelComponent', () => { + let component: MdAddArtikelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MdAddArtikelComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MdAddArtikelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/md-add-artikel/md-add-artikel.component.ts b/src/app/md-add-artikel/md-add-artikel.component.ts new file mode 100644 index 0000000..e7cdbd0 --- /dev/null +++ b/src/app/md-add-artikel/md-add-artikel.component.ts @@ -0,0 +1,18 @@ +import { Component, Inject } from '@angular/core'; +import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import { Artikel } from '../artikel-data/artikel-data.component'; + +@Component({ + selector: 'app-md-add-artikel', + templateUrl: './md-add-artikel.component.html', + styleUrls: ['./md-add-artikel.component.css'] +}) +export class MdAddArtikelComponent { + + constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: Artikel) { } + + onNoClick(): void { + this.dialogRef.close(); + } + +} diff --git a/src/app/navigation/navigation.component.css b/src/app/navigation/navigation.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html new file mode 100644 index 0000000..7d508c5 --- /dev/null +++ b/src/app/navigation/navigation.component.html @@ -0,0 +1,16 @@ + + + Artikel + + + Kunde + + + Lieferant + + + Seriennummern + + + + diff --git a/src/app/navigation/navigation.component.spec.ts b/src/app/navigation/navigation.component.spec.ts new file mode 100644 index 0000000..23438b0 --- /dev/null +++ b/src/app/navigation/navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavigationComponent } from './navigation.component'; + +describe('NavigationComponent', () => { + let component: NavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NavigationComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts new file mode 100644 index 0000000..9c64285 --- /dev/null +++ b/src/app/navigation/navigation.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-navigation', + templateUrl: './navigation.component.html', + styleUrls: ['./navigation.component.css'] +}) +export class NavigationComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/server-data/server-data.component.html b/src/app/server-data/server-data.component.html index d9c777e..341c8ba 100644 --- a/src/app/server-data/server-data.component.html +++ b/src/app/server-data/server-data.component.html @@ -1 +1,59 @@ -

server-data works!

+
+ hier kommen wir hin +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Artikelnummer{{row.id}}Kundennummer{{row.kdId}}Lieferantennummer{{row.liefId}}Seriennummer{{row.serienNr}}EK-Datum{{row.ekDat}}VK-Datum{{row.vkDat}}GarantieBis{{row.garantieBis}}Bemerkung{{row.bemerkung}}
+ + + +
\ No newline at end of file diff --git a/src/app/server-data/server-data.component.ts b/src/app/server-data/server-data.component.ts index f3c73f3..1745cd1 100644 --- a/src/app/server-data/server-data.component.ts +++ b/src/app/server-data/server-data.component.ts @@ -1,4 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, AfterViewInit, ViewChild, Output, EventEmitter } from '@angular/core'; +import { DbXchangeService } from '../shared/db-xchange.service' +import { MatTableDataSource } from '@angular/material/table'; +import { MatSort } from '@angular/material/sort'; +import { MatPaginator } from '@angular/material/paginator'; +import { SelectionModel } from '@angular/cdk/collections'; export interface SerienNummer { @@ -7,22 +12,88 @@ export interface SerienNummer { kdId: number; liefId: number; serienNr: string; - ekDat: Date; - vkDat: Date; - garentieBis: Date; + ekDat: string; + vkDat: string; + garantieBis: string; bemerkung: string; } + + + + @Component({ selector: 'app-server-data', templateUrl: './server-data.component.html', styleUrls: ['./server-data.component.css'] }) -export class ServerDataComponent implements OnInit { +export class ServerDataComponent implements AfterViewInit { + dataSource!: MatTableDataSource; + data: SerienNummer[] = [{id:0,artId:0,kdId:0,liefId:0,serienNr:'', ekDat:'',vkDat:'',garantieBis:'', bemerkung:''}]; + res: any; + selection: SelectionModel; + pageSizeOptions: number[] = [5, 10, 20]; - constructor() { } + @ViewChild(MatSort) + sort!: MatSort; + @ViewChild(MatPaginator, { static: true }) + paginator!: MatPaginator; + @Output() sendEvent = new EventEmitter(); - ngOnInit(): void { + displayedColumns = ['artId', 'kdId', 'liefId', 'serienNr', 'ekDat', 'vkDat', 'garantieBis', 'bemerkung']; + constructor(private dbx: DbXchangeService) { + const initialSelection: SerienNummer[] | undefined = [] ; + const allowMultiSelect = false; + this.selection = new SelectionModel(allowMultiSelect, initialSelection); + } + ngAfterViewInit(): void { + this.dbx.getAllSerials() + .subscribe(result => { + this.res = result; + //this.data = this.transform(this.res); + this.dataSource = new MatTableDataSource(this.res); + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + }, + error => console.log(error)); + } + + applyFilter(filterValue: string) { + filterValue = filterValue.trim(); + filterValue = filterValue.toLowerCase(); + this.dataSource.filter = filterValue; + } + + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); + } + + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected == numRows; + } + + transform( res: any) { + var tfd: SerienNummer[] = [{id:0,artId:0,kdId:0,liefId:0,serienNr:'', ekDat:'',vkDat:'',garantieBis:'', bemerkung:''}]; + let i = 0; + + for(let blubb of res) { + tfd[i].id = blubb.id; + tfd[i].artId = blubb.artId; + tfd[i].kdId = blubb.kdId; + tfd[i].liefId = blubb.liefId; + tfd[i].serienNr = blubb.serienNr; + tfd[i].ekDat = blubb.ekDat; + tfd[i].vkDat = blubb.vkDat; + tfd[i].garantieBis = blubb.garantieBis; + tfd[i].bemerkung = blubb.bemerkung; + i++; + } + return tfd; + } } diff --git a/src/app/shared/db-xchange.service.spec.ts b/src/app/shared/db-xchange.service.spec.ts new file mode 100644 index 0000000..2367b88 --- /dev/null +++ b/src/app/shared/db-xchange.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DbXchangeService } from './db-xchange.service'; + +describe('DbXchangeService', () => { + let service: DbXchangeService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DbXchangeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/db-xchange.service.ts b/src/app/shared/db-xchange.service.ts new file mode 100644 index 0000000..7636037 --- /dev/null +++ b/src/app/shared/db-xchange.service.ts @@ -0,0 +1,53 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Artikel } from '../artikel-data/artikel-data.component'; + +@Injectable({ + providedIn: 'root' +}) +export class DbXchangeService { + Url: string; + baseUrl = "http://localhost:4200/api/"; + + constructor(private http: HttpClient) { + this.Url = ""; + } + httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json'}) + } + + + getAllArtikel() { + this.Url = this.baseUrl + `artikel`; + return this.http.get(this.Url, this.httpOptions) + } + + getAllSerials() { + this.Url = this.baseUrl + `artikel`; + return this.http.get(this.Url, this.httpOptions) + } + + deleteArt(id: number) { + this.Url = this.baseUrl + `artikel/${id}`; + return this.http.delete(this.Url, this.httpOptions) + } + + addArtikel(art: Artikel) { + let body: any; + console.log("hier bin ich mit folgendem Artikel: ", art) + this.Url = this.baseUrl + `artikel`; + body = art; + return this.http.post(this.Url, body, this.httpOptions); + } + + getArtikel(id: number) { + this.Url = this.baseUrl + `artikel/${id}`; + return this.http.get(this.Url, this.httpOptions) + } + + updateArtikel(art: Artikel) { + this.Url = this.baseUrl + `artikel/${art.id}`; + return this.http.put(this.Url, art, this.httpOptions) + } +} diff --git a/src/custom-theme.scss b/src/custom-theme.scss new file mode 100644 index 0000000..638c70a --- /dev/null +++ b/src/custom-theme.scss @@ -0,0 +1,35 @@ + +// Custom Theming for Angular Material +// For more information: https://material.angular.io/guide/theming +@use '~@angular/material' as mat; +// Plus imports for other components in your app. + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat.core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$senuma-primary: mat.define-palette(mat.$indigo-palette); +$senuma-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); + +// The warn palette is optional (defaults to red). +$senuma-warn: mat.define-palette(mat.$red-palette); + +// Create the theme object. A theme consists of configurations for individual +// theming systems such as "color" or "typography". +$senuma-theme: mat.define-light-theme(( + color: ( + primary: $senuma-primary, + accent: $senuma-accent, + warn: $senuma-warn, + ) +)); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include mat.all-component-themes($senuma-theme); + diff --git a/src/index.html b/src/index.html index 6812943..6668356 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,9 @@ + + + diff --git a/src/main.ts b/src/main.ts index c7b673c..77df31e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,6 @@ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import "@angular/compiler"; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; diff --git a/src/my.scss b/src/my.scss new file mode 100644 index 0000000..960b955 --- /dev/null +++ b/src/my.scss @@ -0,0 +1,42 @@ +mat-nav-list.list-horizontal { + + padding: 0px; + .mat-list-item { + display: inline-block; + height: auto; + width: auto; + color: wheat; + background-color: rgb(236, 103, 8); + border: 1px solid; + margin: 2px; + } +} + +table.mat-table { + border: 1px solid; + tr.mat-header-row { + height: 32px; + background-color: rgb(236, 103, 8); + .mat-header-cell, .mat-sort-header-arrow { + color: #fff; + } + + } + tr.mat-row { + height: 40px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + .mat-cell { + font-size: 12px; + } + } +} + +.mb { + display: inline-block; + height: auto; + width: auto; + color: wheat; + background-color: rgb(236, 103, 8); + border: 1px solid; + margin: 2px; +} \ No newline at end of file diff --git a/src/proxy.conf.json b/src/proxy.conf.json new file mode 100644 index 0000000..e1ca0d1 --- /dev/null +++ b/src/proxy.conf.json @@ -0,0 +1,9 @@ +{ + "/api/*": { + "target": "http://localhost:8081", + "secure": false, + "logLevel": "debug", + "changeOrigin": true + + } +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index ebb5f67..8aef7d0 100644 --- a/src/styles.css +++ b/src/styles.css @@ -6,5 +6,16 @@ body { h1 { padding-top: 10px; - padding-bottom: 10px -} \ No newline at end of file + padding-bottom: 10px; + margin:0px; +} +html, body { height: 100%; } +.tabelle { + width: 98%; + display: table; + margin: 10px; +} + + + +