angular.json

@@ -24,7 +24,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/assets"
             ],
             "styles": [
               "src/styles.css"

public/user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="163.839" height="163.839" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 4335 4335" id="user">
+  <path fill="#CCC" d="M2140 103h18c517 0 936 419 936 936s-419 936-936 936h-18c-517 0-936-419-936-936s419-936 936-936zm2001 3922v-617s-722-804-1897-804c-31 0-63 1-94 2-31-1-62-2-94-2-1176 0-1897 804-1897 804v681h3982v-64z" style="fill:#ccc"></path>
+</svg>

src/app/app.component.html

@@ -1 +1 @@
-<app-employee-detail></app-employee-detail>
+<app-mitarbeiterverwaltung-view></app-mitarbeiterverwaltung-view>

src/app/app.component.ts

@@ -1,12 +1,17 @@
 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";
+
 import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
 import { EmployeeDetailComponent } from './components/employee-detail/employee-detail.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent],
+  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/components/login-view/login-view.component.css

@@ -0,0 +1,54 @@
+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;
+  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 */
+}

src/app/components/login-view/login-view.component.html

@@ -0,0 +1,15 @@
+
+<div class="container" style="width: 100%;">
+  <h1>Hi-Tec GmbH</h1>
+  <img src="img.png" alt="Logout Icon" class="logo-image">
+
+  <form>
+    <label for="username">Username</label>
+    <input type="text" id="username" name="username"><br>
+
+    <label for="password">Password</label>
+    <input type="password" id="password" name="password"><br><br>
+
+    <button type="submit">Anmelden</button>
+  </form>
+</div>

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<LoginViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css

@@ -0,0 +1,90 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 20px;
+  background-color: #f0f0f0;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 20px;
+}
+
+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;
+}

src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="header">
+    <button class="logout-button">
+      <img src="user.svg" alt="User Icon">
+    </button>
+    <h1>Employees</h1>
+  </div>
+  <div class="header-actions">
+    <div class="search-bar">
+      <input type="text" placeholder="Search employee">
+      <button>Search</button>
+    </div>
+    <button class="add-button">Add employee</button>
+  </div>
+
+  <table class="employee-table">
+    <thead>
+    <tr>
+      <th><span class="sortable">First Name</span></th>
+      <th><span class="sortable">Last Name</span></th>
+      <th>Street</th>
+      <th>Postcode</th>
+      <th>City</th>
+      <th>Phone</th>
+      <th>Actions</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+</div>

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<MitarbeiterverwaltungViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MitarbeiterverwaltungViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MitarbeiterverwaltungViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}