styling

src/app/features/demo/components/demo2/demo2.component.ts

@@ -1,4 +1,11 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  Inject,
+  OnInit,
+  PLATFORM_ID,
+  Renderer2,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { CardComponent } from '../../../../shared/components/ui/card/card.component';
 // Wir müssen KpiColor hier importieren, um es als Typ verwenden zu können
@@ -10,7 +17,20 @@ import {
   OrdersTableComponent,
   Order,
 } from '../../../../shared/components/data-display/orders-table/orders-table.component';
-import { PaginatorComponent } from '../../../../shared/components/data-display/paginator/paginator.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
+import { FormGroupComponent } from '../../../../shared/components/form/form-group/form-group.component';
+import {
+  FormSelectComponent,
+  SelectOption,
+} from '../../../../shared/components/form/form-select/form-select.component';
+
+import { FormsModule } from '@angular/forms';
+
+import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
+
+import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
+
+import { isPlatformBrowser } from '@angular/common';
 
 // Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
 interface Kpi {
@@ -25,10 +45,15 @@ interface Kpi {
   standalone: true,
   imports: [
     CommonModule,
-    CardComponent,
+
     KpiCardComponent,
     OrdersTableComponent,
-    PaginatorComponent,
+    FormGroupComponent,
+    FormFieldComponent,
+    FormSelectComponent,
+    FormsModule,
+    FormTextareaComponent,
+    SlideToggleComponent,
   ],
   templateUrl: './demo2.component.html',
 })
@@ -127,21 +152,111 @@ export class Demo2Component {
       status: 'danger',
       statusText: 'Storniert',
     },
+    {
+      id: '10543',
+      user: {
+        name: 'Max Mustermann',
+        email: 'max.m@example.com',
+        avatarUrl: 'https://i.pravatar.cc/40?u=max',
+      },
+      amount: '€ 129,99',
+      status: 'success',
+      statusText: 'Abgeschlossen',
+    },
+    {
+      id: '10542',
+      user: {
+        name: 'Erika Mustermann',
+        email: 'erika.m@example.com',
+        avatarUrl: 'https://i.pravatar.cc/40?u=erika',
+      },
+      amount: '€ 49,50',
+      status: 'warning',
+      statusText: 'In Bearbeitung',
+    },
+    {
+      id: '10541',
+      user: {
+        name: 'Peter Pan',
+        email: 'peter.p@example.com',
+        avatarUrl: 'https://i.pravatar.cc/40?u=peter',
+      },
+      amount: '€ 87,00',
+      status: 'danger',
+      statusText: 'Storniert',
+    },
   ];
 
-  // Eigenschaften für den Paginator
-  currentPage = 1;
-  totalItems = this.ordersData.length;
-  itemsPerPage = 10;
+  benutzername: string = '';
+  email: string = '';
+  aktuellesPasswort: any = '';
+  neuesPasswort: any = '';
 
-  // --- EVENT-HANDLER FÜR DIE KIND-KOMPONENTEN ---
+  selectedCountry: string | null = null;
 
-  onPageChange(newPage: number): void {
-    this.currentPage = newPage;
-    console.log('Seite gewechselt zu:', newPage);
-    // In einer echten Anwendung würden Sie hier die Daten neu laden
+  countryOptions: SelectOption[] = [
+    { value: 'de', label: 'Deutschland' },
+    { value: 'at', label: 'Österreich' },
+    { value: 'ch', label: 'Schweiz' },
+  ];
+
+  biografie: string =
+    'Dies ist eine Beispiel-Biografie, die über mehrere Zeilen gehen kann.';
+
+  benachrichtigungenAktiv: boolean = true;
+  profilIstPrivat: boolean = false;
+
+  private readonly darkModeKey = 'app-dark-mode-setting';
+  darkModeAktiv: boolean = false;
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  ngOnInit(): void {
+    this.loadThemeSetting();
   }
 
+  private loadThemeSetting(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        const storedValue = localStorage.getItem(this.darkModeKey);
+        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert.
+        this.darkModeAktiv = storedValue === 'true';
+      } catch (e) {
+        console.error('Could not access localStorage:', e);
+      }
+    }
+    // Wende das Theme an - entweder den Standardwert (false) oder den geladenen Wert.
+    this.updateTheme(this.darkModeAktiv);
+  }
+
+  onDarkModeChange(isEnabled: boolean): void {
+    this.darkModeAktiv = isEnabled;
+
+    // --- KORREKTUR 2: Speichere die neue Einstellung ---
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        localStorage.setItem(this.darkModeKey, String(isEnabled));
+      } catch (e) {
+        console.error('Could not write to localStorage:', e);
+      }
+    }
+
+    // Wende die visuelle Änderung an.
+    this.updateTheme(isEnabled);
+  }
+
+  // This method is CORRECT. It just needs to be called.
+  private updateTheme(isEnabled: boolean): void {
+    if (isEnabled) {
+      this.renderer.addClass(this.document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-theme');
+    }
+  }
   handleDeleteOrder(orderId: string): void {
     console.log('Lösche Bestellung mit ID:', orderId);
     // Hier könnten Sie z.B. einen Bestätigungs-Dialog öffnen