diff --git a/angular.json b/angular.json index bb8d837..954709f 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,8 @@ { "glob": "**/*", "input": "public" - } + }, + "src/assets" ], "styles": [ "src/styles.css" diff --git a/public/img.png b/public/img.png new file mode 100644 index 0000000..aeaa9da Binary files /dev/null and b/public/img.png differ diff --git a/public/user.svg b/public/user.svg new file mode 100644 index 0000000..3388c8a --- /dev/null +++ b/public/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..ce0f108 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 04ea690..716545a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,14 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {LoginViewComponent} from "./components/login-view/login-view.component"; +import { + MitarbeiterverwaltungViewComponent +} from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, LoginViewComponent, MitarbeiterverwaltungViewComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/components/login-view/login-view.component.css b/src/app/components/login-view/login-view.component.css new file mode 100644 index 0000000..4388089 --- /dev/null +++ b/src/app/components/login-view/login-view.component.css @@ -0,0 +1,56 @@ +body { + font-family: 'Roboto', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; /* Use height instead of min-height */ + background-color: #f0f0f0; +} + +.container { + text-align: center; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #fff; + width: 300px; /* Set a maximum width for the container */ +} + +h1 { + font-size: 2rem; + font-weight: 300; + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; + color: #aaa; + text-align: center; /* Center labels horizontally */ +} + +input[type="text"], +input[type="password"] { + width: 250px; + padding: 12px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; + color: #333; +} + +button { + background-color: transparent; + color: #9c88ff; + border: 1px solid #9c88ff; + padding: 12px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; +} + +.logo-image { + width: 25%; /* Reduce width to 25% of its original size */ + height: auto; /* Maintain aspect ratio */ +} diff --git a/src/app/components/login-view/login-view.component.html b/src/app/components/login-view/login-view.component.html new file mode 100644 index 0000000..93f1bfd --- /dev/null +++ b/src/app/components/login-view/login-view.component.html @@ -0,0 +1,26 @@ + + + + + + Hi-Tec GmbH Login + + + + +
+

Hi-Tec GmbH

+ Logout Icon + +
+ +
+ + +

+ + +
+
+ + diff --git a/src/app/components/login-view/login-view.component.spec.ts b/src/app/components/login-view/login-view.component.spec.ts new file mode 100644 index 0000000..01375bc --- /dev/null +++ b/src/app/components/login-view/login-view.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginViewComponent } from './login-view.component'; + +describe('BrowserLoginViewComponent', () => { + let component: LoginViewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginViewComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/login-view/login-view.component.ts b/src/app/components/login-view/login-view.component.ts new file mode 100644 index 0000000..ffc3ab9 --- /dev/null +++ b/src/app/components/login-view/login-view.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-login-view', + standalone: true, + imports: [], + templateUrl: './login-view.component.html', + styleUrl: './login-view.component.css' +}) +export class LoginViewComponent { + +} diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css new file mode 100644 index 0000000..5118ab7 --- /dev/null +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css @@ -0,0 +1,93 @@ +body { + font-family: sans-serif; + margin: 0; + padding: 20px; + background-color: #f0f0f0; +} + +.container { + width: 80%; + max-width: 960px; + margin: 0 auto; + background-color: #fff; + border-radius: 5px; + padding: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +h1 { + font-size: 2rem; + margin-bottom: 20px; +} + +.search-bar { + display: flex; + margin-bottom: 20px; + align-items: center; +} + +.search-bar input[type="text"] { + padding: 8px; + border: 1px solid #ccc; + border-radius: 3px; + flex-grow: 1; + margin-right: 10px; +} + +.search-bar button { + padding: 10px 15px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; +} + +.add-button { + background-color: #07af16; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 3px; + cursor: pointer; + float: left; + margin-bottom: 10px; +} + +.employee-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +.employee-table th, +.employee-table td { + padding: 12px 15px; + border: 1px solid #ddd; + text-align: left; +} + +.employee-table th { + background-color: #f0f0f0; + font-weight: bold; +} + +.sortable { + cursor: pointer; +} + +.logout-button { + background-color: transparent; + border: none; + cursor: pointer; + border-radius: 50%; + width: 30px; + height: 30px; + display: flex; + float: right; +} + +.logout-button img { + width: 20px; + height: 20px; +} diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html new file mode 100644 index 0000000..7068d02 --- /dev/null +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html @@ -0,0 +1,43 @@ + + + + + + + + + +
+
+ +

Employees

+
+
+
+ + +
+ +
+ + + + + + + + + + + + + + + +
First NameLast NameStreetPostcodeCityPhoneActions
+
+ + + diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.spec.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.spec.ts new file mode 100644 index 0000000..c9db222 --- /dev/null +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MitarbeiterverwaltungViewComponent } from './mitarbeiterverwaltung-view.component'; + +describe('MitarbeiterverwaltungViewComponent', () => { + let component: MitarbeiterverwaltungViewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MitarbeiterverwaltungViewComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MitarbeiterverwaltungViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts new file mode 100644 index 0000000..3a8f197 --- /dev/null +++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-mitarbeiterverwaltung-view', + standalone: true, + imports: [], + templateUrl: './mitarbeiterverwaltung-view.component.html', + styleUrl: './mitarbeiterverwaltung-view.component.css' +}) +export class MitarbeiterverwaltungViewComponent { + +} diff --git a/src/app/views/.gitkeep b/src/app/views/.gitkeep deleted file mode 100644 index e69de29..0000000