diff --git a/webservice/Frontend/Aktienbot/angular.json b/webservice/Frontend/Aktienbot/angular.json index 905ae0b..dc2bf0a 100644 --- a/webservice/Frontend/Aktienbot/angular.json +++ b/webservice/Frontend/Aktienbot/angular.json @@ -26,11 +26,9 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], + "assets": ["src/favicon.ico", "src/assets"], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/ipurple-green.css", "src/styles.scss" ], "scripts": [] @@ -94,11 +92,9 @@ "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets" - ], + "assets": ["src/favicon.ico", "src/assets"], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss" ], "scripts": [] diff --git a/webservice/Frontend/Aktienbot/package-lock.json b/webservice/Frontend/Aktienbot/package-lock.json index 8be1ec9..3328d6d 100644 --- a/webservice/Frontend/Aktienbot/package-lock.json +++ b/webservice/Frontend/Aktienbot/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "~13.2.0", + "@angular/cdk": "^13.2.6", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", + "@angular/material": "^13.2.6", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", @@ -341,6 +343,28 @@ "@angular/core": "13.2.6" } }, + "node_modules/@angular/cdk": { + "version": "13.2.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", + "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^5.0.0" + }, + "peerDependencies": { + "@angular/common": "^13.0.0 || ^14.0.0-0", + "@angular/core": "^13.0.0 || ^14.0.0-0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/cdk/node_modules/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 + }, "node_modules/@angular/cli": { "version": "13.2.6", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.6.tgz", @@ -551,6 +575,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "13.2.6", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", + "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^13.0.0 || ^14.0.0-0", + "@angular/cdk": "13.2.6", + "@angular/common": "^13.0.0 || ^14.0.0-0", + "@angular/core": "^13.0.0 || ^14.0.0-0", + "@angular/forms": "^13.0.0 || ^14.0.0-0", + "@angular/platform-browser": "^13.0.0 || ^14.0.0-0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "13.2.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.2.6.tgz", @@ -11606,6 +11647,23 @@ "tslib": "^2.3.0" } }, + "@angular/cdk": { + "version": "13.2.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", + "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "requires": { + "parse5": "^5.0.0", + "tslib": "^2.3.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": "13.2.6", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.6.tgz", @@ -11751,6 +11809,14 @@ "tslib": "^2.3.0" } }, + "@angular/material": { + "version": "13.2.6", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", + "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "requires": { + "tslib": "^2.3.0" + } + }, "@angular/platform-browser": { "version": "13.2.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.2.6.tgz", diff --git a/webservice/Frontend/Aktienbot/package.json b/webservice/Frontend/Aktienbot/package.json index f32b987..4901226 100644 --- a/webservice/Frontend/Aktienbot/package.json +++ b/webservice/Frontend/Aktienbot/package.json @@ -11,10 +11,12 @@ "private": true, "dependencies": { "@angular/animations": "~13.2.0", + "@angular/cdk": "^13.2.6", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", + "@angular/material": "^13.2.6", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", @@ -36,4 +38,4 @@ "karma-jasmine-html-reporter": "~1.7.0", "typescript": "~4.5.2" } -} +} \ No newline at end of file diff --git a/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.html b/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.html index e69de29..7588ebb 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.html +++ b/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.html @@ -0,0 +1,18 @@ + + + Aktienbot + + + diff --git a/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.scss b/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.scss index e69de29..9633d15 100644 --- a/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.scss +++ b/webservice/Frontend/Aktienbot/src/app/Views/header/header.component.scss @@ -0,0 +1,3 @@ +.example-spacer { + flex: 1 1 auto; +} diff --git a/webservice/Frontend/Aktienbot/src/app/app.module.ts b/webservice/Frontend/Aktienbot/src/app/app.module.ts index 6d1c2cc..92f55e9 100644 --- a/webservice/Frontend/Aktienbot/src/app/app.module.ts +++ b/webservice/Frontend/Aktienbot/src/app/app.module.ts @@ -1,22 +1,27 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; + import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginComponent } from './Views/login/login.component'; import { HeaderComponent } from './Views/header/header.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ - declarations: [ - AppComponent, - LoginComponent, - HeaderComponent - ], + declarations: [AppComponent, LoginComponent, HeaderComponent], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/webservice/Frontend/Aktienbot/src/index.html b/webservice/Frontend/Aktienbot/src/index.html index 640f3a5..35db5c5 100644 --- a/webservice/Frontend/Aktienbot/src/index.html +++ b/webservice/Frontend/Aktienbot/src/index.html @@ -1,13 +1,22 @@ - + - - - Aktienbot - - - - - - - + + + Aktienbot + + + + + + + + + + diff --git a/webservice/Frontend/Aktienbot/src/polyfills.ts b/webservice/Frontend/Aktienbot/src/polyfills.ts index 429bb9e..e4555ed 100644 --- a/webservice/Frontend/Aktienbot/src/polyfills.ts +++ b/webservice/Frontend/Aktienbot/src/polyfills.ts @@ -45,8 +45,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js'; // Included with Angular CLI. - +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/webservice/Frontend/Aktienbot/src/styles.scss b/webservice/Frontend/Aktienbot/src/styles.scss index 90d4ee0..9945fb5 100644 --- a/webservice/Frontend/Aktienbot/src/styles.scss +++ b/webservice/Frontend/Aktienbot/src/styles.scss @@ -1 +1,36 @@ -/* You can add global styles to this file, and also import other style files */ +@import "~@angular/material/prebuilt-themes/purple-green.css"; + +html, +body { + height: 100%; + overflow-x: hidden; +} +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +.mat-card-standard { + position: relative; + width: 90%; + margin-left: auto; + margin-right: auto; +} + +button { + cursor: pointer; +} + +.form-button { + background-color: Transparent; + background-repeat: no-repeat; + border: none; + cursor: pointer; + overflow: hidden; + outline: none; +} + +.invisible-button { + background: transparent; + border: none !important; +}