Browser-Dashboard-UI #64
8 changed files with 70 additions and 48 deletions
11
src/app/app-routing.module.ts
Normal file
11
src/app/app-routing.module.ts
Normal file
|
@ -0,0 +1,11 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import {routes} from "./app.routes";
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
|
@ -1,25 +1,26 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouterOutlet} from '@angular/router';
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterModule, 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';
|
||||
import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
|
||||
import { EmployeeDetailComponent } from './components/employee-detail/employee-detail.component';
|
||||
import {
|
||||
MitarbeiterBearbeitenViewComponent
|
||||
} from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
|
||||
import {
|
||||
QualifikatonBearbeitenViewComponent
|
||||
} from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
|
||||
import {AppRoutingModule} from "./app-routing.module";
|
||||
import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
|
||||
imports: [AppRoutingModule, RouterModule, RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
<div class="d-flex flex-col" style="height: 100%;">
|
||||
<app-navigation-bar></app-navigation-bar>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="dropdown position-absolute top-0 end-0 m-3">
|
||||
|
@ -47,3 +49,4 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-mitarbeiterverwaltung-view',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
NavigationBarComponent
|
||||
],
|
||||
templateUrl: './mitarbeiterverwaltung-view.component.html',
|
||||
styleUrl: './mitarbeiterverwaltung-view.component.css'
|
||||
})
|
||||
|
|
|
@ -1,22 +1,17 @@
|
|||
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-light border-end border-primary" style="width: 300px; height: 100%;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
|
||||
<a routerLink="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-black text-decoration-none">
|
||||
<img src="logo.svg" class="bi pe-none me-2" width="40" height="32"/>
|
||||
<span class="fs-4">Hi-Tec GmbH</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active text-black" aria-current="page">
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-black">
|
||||
<a routerLink="/mitarbeiter" routerLinkActive="active" class="nav-link text-black">
|
||||
Mitarbeiterverwaltung
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-black">
|
||||
<a routerLink="/qualifikationbearbeiten" routerLinkActive="active" class="nav-link text-black">
|
||||
Qualifikationsverwaltung
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
@ -1,9 +1,13 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {RouterLink, RouterLinkActive} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-navigation-bar',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
RouterLink,
|
||||
RouterLinkActive
|
||||
],
|
||||
templateUrl: './navigation-bar.component.html',
|
||||
styleUrl: './navigation-bar.component.css'
|
||||
})
|
||||
|
|
|
@ -1,36 +1,38 @@
|
|||
<div class="container">
|
||||
<button class="back-button">Back</button>
|
||||
<div class="d-flex flex-col" style="height: 100%;">
|
||||
<app-navigation-bar></app-navigation-bar>
|
||||
<div class="container">
|
||||
<button class="back-button">Back</button>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" value="(Hier kommt name der gewählten qualification hin)">
|
||||
</div>
|
||||
|
||||
<div class="employee-container">
|
||||
<h2>Employees possessing the qualification</h2>
|
||||
|
||||
<ul class="employee-list">
|
||||
<li>
|
||||
<button class="delete-skill-button">
|
||||
<img src="Delete-button.svg" alt="Delete">
|
||||
</button>
|
||||
<span class="employee-name">Max Mustermann</span>
|
||||
</li>
|
||||
<li>
|
||||
<button class="delete-skill-button">
|
||||
<img src="Delete-button.svg" alt="Delete">
|
||||
</button>
|
||||
<span class="employee-name">Mehdi Boudjoudi</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="add-employee-section">
|
||||
<label for="employeeSearch">Search for employee</label>
|
||||
<input type="text" id="employeeSearch" placeholder="Last name of employee">
|
||||
<button class="add-employee-button">Add employee</button>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" value="(Hier kommt name der gewählten qualification hin)">
|
||||
</div>
|
||||
|
||||
<div class="employee-container">
|
||||
<h2>Employees possessing the qualification</h2>
|
||||
|
||||
<ul class="employee-list">
|
||||
<li>
|
||||
<button class="delete-skill-button">
|
||||
<img src="Delete-button.svg" alt="Delete">
|
||||
</button>
|
||||
<span class="employee-name">Max Mustermann</span>
|
||||
</li>
|
||||
<li>
|
||||
<button class="delete-skill-button">
|
||||
<img src="Delete-button.svg" alt="Delete">
|
||||
</button>
|
||||
<span class="employee-name">Mehdi Boudjoudi</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="add-employee-section">
|
||||
<label for="employeeSearch">Search for employee</label>
|
||||
<input type="text" id="employeeSearch" placeholder="Last name of employee">
|
||||
<button class="add-employee-button">Add employee</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="save-button">Save</button>
|
||||
</div>
|
||||
|
||||
<button class="save-button">Save</button>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {NavigationBarComponent} from "../navigation-bar/navigation-bar.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-qualifikaton-bearbeiten-view',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
NavigationBarComponent
|
||||
],
|
||||
templateUrl: './qualifikaton-bearbeiten-view.component.html',
|
||||
styleUrl: './qualifikaton-bearbeiten-view.component.css'
|
||||
})
|
||||
|
|
Loading…
Add table
Reference in a new issue