-
-
-
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: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'},
- { 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.routes.ts b/src/app/app.routes.ts
index dc39edb..bec57b0 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,10 @@
import { Routes } from '@angular/router';
+import { App} from './app';
+import { RisikoobjektView} from './risikoobjektView/risikoobjektView';
+import {Produktbaum} from './produktbaum/produktbaum';
-export const routes: Routes = [];
+export const routes: Routes = [
+ { path: '', redirectTo: '/produktbaum', pathMatch: 'full' },
+ { path: 'produktbaum', component: Produktbaum },
+ { path: 'risikoobjekte', component: RisikoobjektView },
+];
diff --git a/src/app/app.ts b/src/app/app.ts
index 4312c38..14fc063 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,12 +1,23 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component, inject, Injectable, signal} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HttpClient} from '@angular/common/http';
+import {QueryEngine} from '@comunica/query-sparql';
+import {DataFactory} from 'rdf-data-factory';
+import {Store} from 'n3';
+import jsonld from 'jsonld';
+import {FormsModule} from '@angular/forms';
+import {Navbar} from './navbar/navbar';
+import {RouterOutlet} from '@angular/router';
@Component({
selector: 'app-root',
- imports: [RouterOutlet],
+ imports: [CommonModule, FormsModule, Navbar, RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})
+@Injectable({providedIn: 'root'})
export class App {
protected readonly title = signal('OMDSAngularWebClient');
+
+
}
diff --git a/src/app/navbar/navbar.css b/src/app/navbar/navbar.css
new file mode 100644
index 0000000..3af0f1a
--- /dev/null
+++ b/src/app/navbar/navbar.css
@@ -0,0 +1,99 @@
+/* Navbar Grund-Container */
+.navbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #ffffff;
+ padding: 10px 40px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ border-bottom: 3px solid #007bff; /* Passend zum Blau der Buttons */
+}
+
+/* Logo Bereich */
+.navbar-logo {
+ display: flex;
+ align-items: center;
+}
+
+.navbar-logo img {
+ display: block;
+ object-fit: contain;
+ /* Falls das Logo bei 98px zu groß wirkt, kannst du hier max-height nutzen: */
+ max-height: 70px;
+ width: auto;
+}
+
+/* Navigations-Links */
+.navbar-links {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 30px;
+}
+
+.navbar-links li {
+ margin: 0;
+}
+
+.navbar-links a {
+ text-decoration: none;
+ color: #495057;
+ font-weight: 600;
+ font-size: 1rem;
+ padding: 10px 15px;
+ border-radius: 6px;
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+/* Hover-Effekt */
+.navbar-links a:hover {
+ color: #007bff;
+ background-color: #f0f7ff;
+}
+
+/* Aktiver Link (Angular RouterLinkActive Style) */
+/* Falls du [routerLinkActive]="'active'" im HTML nutzt: */
+.navbar-links a.active {
+ color: #007bff;
+ background-color: #e7f1ff;
+}
+
+/* Kleiner Indikator-Strich unter dem Text beim Hover */
+.navbar-links a::after {
+ content: '';
+ position: absolute;
+ bottom: 5px;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background: #007bff;
+ transition: all 0.3s ease;
+ transform: translateX(-50%);
+}
+
+.navbar-links a:hover::after {
+ width: 60%;
+}
+
+/* Mobile Optimierung */
+@media (max-width: 768px) {
+ .navbar {
+ flex-direction: column;
+ padding: 15px;
+ gap: 15px;
+ }
+
+ .navbar-links {
+ gap: 10px;
+ }
+
+ .navbar-logo img {
+ max-height: 50px;
+ }
+}
diff --git a/src/app/navbar/navbar.html b/src/app/navbar/navbar.html
new file mode 100644
index 0000000..3b7255a
--- /dev/null
+++ b/src/app/navbar/navbar.html
@@ -0,0 +1,10 @@
+
diff --git a/src/app/navbar/navbar.spec.ts b/src/app/navbar/navbar.spec.ts
new file mode 100644
index 0000000..8893c93
--- /dev/null
+++ b/src/app/navbar/navbar.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Navbar } from './navbar';
+
+describe('Navbar', () => {
+ let component: Navbar;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [Navbar]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(Navbar);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navbar/navbar.ts b/src/app/navbar/navbar.ts
new file mode 100644
index 0000000..4ecfbd4
--- /dev/null
+++ b/src/app/navbar/navbar.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {NgOptimizedImage} from '@angular/common';
+
+@Component({
+ selector: 'app-navbar',
+ imports: [
+ RouterLink,
+ NgOptimizedImage
+ ],
+ templateUrl: './navbar.html',
+ styleUrl: './navbar.css',
+})
+export class Navbar {
+
+}
diff --git a/src/app/produktbaum/produktbaum.css b/src/app/produktbaum/produktbaum.css
new file mode 100644
index 0000000..dbf2665
--- /dev/null
+++ b/src/app/produktbaum/produktbaum.css
@@ -0,0 +1,184 @@
+/* Grundlayout & Schrift */
+.main {
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ color: #333;
+ line-height: 1.6;
+ background-color: #f8f9fa;
+ padding: 20px;
+ min-height: 100vh;
+}
+
+.content {
+ max-width: 900px;
+ margin: 50px auto;
+ background: white;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+/* Titel & Buttons oben */
+h1, h2 {
+ color: #2c3e50;
+ border-bottom: 2px solid #eee;
+ padding-bottom: 10px;
+}
+
+button:not(.btn-control) {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 500;
+ margin-right: 10px;
+ margin-bottom: 20px;
+ transition: background 0.2s;
+}
+
+button:not(.btn-control):hover {
+ background-color: #0056b3;
+}
+
+button:disabled {
+ background-color: #ccc !important;
+ cursor: not-allowed;
+}
+
+/* Der Produktbaum (Hierarchie) */
+.baustein-list {
+ list-style: none;
+ padding-left: 25px;
+ border-left: 1px dashed #ced4da;
+}
+
+.baustein-item {
+ margin: 10px 0;
+ position: relative;
+}
+
+/* Verbindungslinien-Effekt */
+.baustein-item::before {
+ content: "";
+ position: absolute;
+ top: 15px;
+ left: -25px;
+ width: 20px;
+ border-top: 1px dashed #ced4da;
+}
+
+.baustein-row {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ background: #fff;
+ border: 1px solid #e9ecef;
+ padding: 10px 15px;
+ border-radius: 6px;
+ transition: all 0.2s;
+}
+
+.baustein-row:hover {
+ border-color: #adb5bd;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+/* Baustein Status */
+.baustein-name {
+ font-weight: 600;
+ color: #495057;
+ flex-grow: 1;
+}
+
+.notIncluded {
+ color: #adb5bd !important;
+ font-style: italic;
+ text-decoration: line-through;
+}
+
+/* +/- Buttons */
+.baustein-buttons {
+ display: flex;
+ gap: 5px;
+ margin-left: 15px;
+}
+
+.btn-control {
+ width: 28px;
+ height: 28px;
+ border-radius: 4px;
+ border: 1px solid #dee2e6;
+ background: #f8f9fa;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+.btn-control:hover:not(:disabled) {
+ background: #e2e6ea;
+}
+
+/* Details, Tabellen & Inputs */
+.extraInfo-container {
+ background: #fdfdfe;
+ border: 1px solid #eef2f7;
+ padding: 15px;
+ border-radius: 4px;
+ margin-top: 10px;
+ width: 100%;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 10px;
+}
+
+th {
+ text-align: left;
+ font-size: 0.85rem;
+ color: #6c757d;
+ text-transform: uppercase;
+ padding-bottom: 8px;
+}
+
+td {
+ padding: 6px 0;
+ border-bottom: 1px solid #f1f1f1;
+}
+
+input[type="text"],
+input[type="number"] {
+ padding: 4px 8px;
+ border: 1px solid #ced4da;
+ border-radius: 3px;
+ width: 100%;
+}
+
+/* Fehlermeldungen */
+.meldungen-container {
+ color: #dc3545;
+ background-color: #fff5f5;
+ padding: 8px;
+ border-left: 4px solid #dc3545;
+ margin-top: 10px;
+ font-size: 0.9rem;
+}
+
+/* Risikoobjekte */
+.risikoobjekt-container {
+ margin-top: 15px;
+ padding-top: 10px;
+ border-top: 1px solid #eee;
+}
+
+.risikoobjekt-item-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 5px 0;
+ font-size: 0.9rem;
+}
diff --git a/src/app/produktbaum/produktbaum.html b/src/app/produktbaum/produktbaum.html
new file mode 100644
index 0000000..824e94d
--- /dev/null
+++ b/src/app/produktbaum/produktbaum.html
@@ -0,0 +1,99 @@
+
+
+
Angular
+
+
+
+
+
Produktbaum
+
+
+
+ -
+
+
+ {{baustein.bez}}
+ {{baustein.bez}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Konfiguration
+
+
+
+
+
+
+
+
Es müssen alle Felder ausgefüllt werden
+
+
+
+
Risikoobjekte
+
+
+ -
+ {{ r.handelsbezeichnung }}({{r.baujahr}})
+
+
+
+