Logging & Styling

client/src/app/core/layout/layout.component.html

@@ -12,14 +12,14 @@
 
 <mat-drawer-container class="example-container" autosize>
   <mat-drawer #drawer class="main_sidenav" mode="side" opened="true" style="border-right: 1px solid #dfdfdf">
-    <button mat-button routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
-    <button mat-button routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
-    <button mat-button routerLink="/cylinders" routerLinkActive="mat-elevation-z1">Zylinder</button>
-    <button mat-button routerLink="/systems" routerLinkActive="mat-elevation-z1">Schließanlagen</button>
+    <button matButton routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
+    <button matButton routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
+    <button matButton routerLink="/cylinders" routerLinkActive="mat-elevation-z1">Zylinder</button>
+    <button matButton routerLink="/systems" routerLinkActive="mat-elevation-z1">Schließanlagen</button>
     @if (isAdmin) {
-      <button mat-button routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
+      <button matButton routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
     }
-    <button mat-button (click)="openSidebar()">Einstellungen</button>
+    <button matButton (click)="openSidebar()">Einstellungen</button>
     
   </mat-drawer>
 
@@ -27,7 +27,7 @@
   <router-outlet></router-outlet>
 
   <!-- <div class="example-sidenav-content">
-    <button type="button" mat-button (click)="drawer.toggle()">
+    <button type="button" matButton (click)="drawer.toggle()">
       Toggle sidenav
     </button>
   </div> -->

client/src/app/modules/auth/login/login.component.html

@@ -3,6 +3,6 @@
     Du bist nicht eingeloggt. Logge dich ein um zu Beginnen.
   </p>
   <div>
-    <button mat-raised-button color="primary" (click)="authService.routeToLogin()">Einloggen!</button>
+    <button matButton="elevated" color="primary" (click)="authService.routeToLogin()">Einloggen!</button>
   </div>
 </div>

client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html

@@ -25,8 +25,8 @@
     </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-    <button mat-raised-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" color="accent">
+    <button matButton mat-dialog-close>Abbrechen</button>
+    <button matButton="elevated" (click)="save()" [disabled]="createForm.disabled || createForm.invalid" class="btn-primary">
         <mat-icon>save</mat-icon>
         Speichern
     </button>

client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Zylinder <u>{{cylinder.name}}</u> löschen?</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{cylinder.name}}</b> wirklich entfernen?
             Alle Schlüssel die nur diesen Zylinder haben werden ebenfalls entfernt.
@@ -13,8 +13,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>

client/src/app/modules/cylinder/cylinder.component.html

@@ -4,6 +4,6 @@
     [gridOptions]="gridOptions!"
 />
 <div class="floating-btn-container">
-    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateCylinder()" color="accent" >Zylinder anlegen</button>
+    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateCylinder()"  >Zylinder anlegen</button>
     <button mat-mini-fab disabled><mat-icon>inventory_2</mat-icon></button>
   </div>

client/src/app/modules/dashboard/dashboard.component.html

@@ -17,7 +17,7 @@
                 <p>Aktive Schlüssel</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/keys">Verwalten</button>
+                <button matButton routerLink="/keys">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -31,7 +31,7 @@
                 <p>Registrierte Zylinder</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/cylinders">Verwalten</button>
+                <button matButton routerLink="/cylinders">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -45,7 +45,7 @@
                 <p>Aktive Schließanlagen</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/systems">Verwalten</button>
+                <button matButton routerLink="/systems">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -59,7 +59,7 @@
                 <p>Derzeit ausgegebene Schlüssel</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/keys">Verwalten</button>
+                <button matButton routerLink="/keys">Verwalten</button>
             </mat-card-actions>
         </mat-card>
     </div>

client/src/app/modules/keys/components/archive/archive.component.html

@@ -8,5 +8,5 @@
 
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="dataChanged">Schließen</button>
+  <button matButton [mat-dialog-close]="dataChanged">Schließen</button>
 </mat-dialog-actions>

client/src/app/modules/keys/components/delete-key/delete-key.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Schlüssel <u>{{key.name}}</u> löschen?</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{key.name}}</b> wirklich entfernen?
         </p>
@@ -12,8 +12,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true" class="btn-warning">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html

@@ -43,8 +43,11 @@
     </form>
   </mat-dialog-content>
   <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn" >Schließen</button>
-    <button mat-button (click)="save()" [disabled]="handoverForm.invalid">Speichern</button>
+    <button matButton mat-dialog-close class="btn-warning">Schließen</button>
+    <button matButton="elevated" (click)="save()" class="btn-primary" [disabled]="handoverForm.invalid || handoverForm.pristine">
+      <mat-icon>save</mat-icon>
+      Speichern
+    </button>
   </mat-dialog-actions>
   </mat-tab>
 
@@ -59,7 +62,7 @@
     </div>
   </mat-dialog-content>
   <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn" >Schließen</button>
+    <button matButton mat-dialog-close >Schließen</button>
   </mat-dialog-actions>
   </mat-tab>
 </mat-tab-group> 

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts

@@ -24,10 +24,11 @@ import {MatTabsModule} from '@angular/material/tabs';
 import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
 import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
 import { AgGridAngular } from 'ag-grid-angular';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'app-handover-dialog',
-    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe],
+    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule],
     providers: [
         provideNativeDateAdapter(),
         { provide: LOCALE_ID, useValue: 'de-DE' },

client/src/app/modules/keys/components/lost-key/lost-key.component.html

@@ -6,7 +6,7 @@
 <mat-dialog-content>
     <div class="warning-message">
         @if(key.keyLost != null) {
-            <mat-icon color="accent">report</mat-icon>
+            <mat-icon >report</mat-icon>
             <p>
                 <b>{{key.name}}</b> wirklich als gefunden markieren?
             </p>
@@ -14,7 +14,7 @@
                 <small>Die Information, dass er am {{ key.keyLost| date:'shortDate' }} verloren wurde, wird gelöscht!</small>
             </p>
         } @else {
-            <mat-icon color="warn">warning</mat-icon>
+            <mat-icon>warning</mat-icon>
         <p>
             <b>{{key.name}}</b> wirklich als verloren markieren?
         </p>
@@ -25,15 +25,15 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="null">Abbrechen</button>
+    <button matButton [mat-dialog-close]="null">Abbrechen</button>
     
     @if(key.keyLost != null) {
-        <button mat-raised-button color="accent" (click)="closeFound()">
+        <button matButton="elevated"  (click)="closeFound()">
             <mat-icon>report</mat-icon>
             Als gefunden melden
         </button>
     } @else {
-        <button mat-raised-button color="warn" (click)="closeWithData()">
+        <button matButton="elevated" (click)="closeWithData()">
             <mat-icon>report_problem</mat-icon>
             Als verloren melden
         </button>

client/src/app/modules/keys/components/lost-keys/lost-keys.component.html

@@ -7,5 +7,5 @@
     />
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="dataChanged">Schließen</button>
+    <button matButton [mat-dialog-close]="dataChanged">Schließen</button>
 </mat-dialog-actions>

client/src/app/modules/keys/create/create.component.html

@@ -41,8 +41,8 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-  <button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" mat-raised-button color="accent">
+  <button matButton mat-dialog-close>Abbrechen</button>
+  <button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" matButton="elevated" class="btn-primary">
     <mat-icon>save</mat-icon>
         Speichern
   </button>

client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html

@@ -10,6 +10,6 @@
 
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button color="warn" [mat-dialog-close]="null">Abbrechen</button>
-    <button mat-button color="accent" [mat-dialog-close]="selectedCylinders">Übernehmen</button>
+    <button matButton [mat-dialog-close]="null">Abbrechen</button>
+    <button matButton  [mat-dialog-close]="selectedCylinders">Übernehmen</button>
 </mat-dialog-actions>

client/src/app/modules/keys/keys.component.html

@@ -5,7 +5,7 @@
 />
 
 <div class="floating-btn-container">
-  <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()" color="accent" >Schlüssel anlegen</button>
+  <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()"  >Schlüssel anlegen</button>
   <button mat-mini-fab (click)="openArchive()" matTooltip="Archiv"><mat-icon>inventory_2</mat-icon></button>
   <button mat-mini-fab (click)="openLostKeys()" class="lost icon-btn-xs" style="background-repeat: no-repeat; background-position: center;" matTooltip="Verlorene Schlüssel"></button>
 </div>

client/src/app/modules/settings/settings.component.html

@@ -3,12 +3,16 @@
 }
 <div class="sidebar" [class.open]="isOpen">
   <div class="sidebar-header">
+    <div class="title_text">Einstellungen</div>
     <button class="close-btn" (click)="closeSidebar()">✕</button>
   </div>
   
   <div class="content" style="flex: 1 1 auto" >
 
-    <h4>Einstellungen</h4>
+    <div class="px-4">
+      <div class="text-2xl">Allgemeine Einstellungen</div>
+      <div>Name, Login...:</div>
+    </div>
 
     <form [formGroup]="userData" class="flex flex-col p-4">
       <mat-form-field appearance="outline">
@@ -23,12 +27,14 @@
       <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
         <input type="text" matInput formControlName="userName">
+        <mat-hint>Wird zum Login benötigt</mat-hint>
       </mat-form-field>
-      <button mat-button [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
+      <div class="spacer-y16"></div>
+      <button matButton="elevated" [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
     </form>
 
-
-    <div class=" px-4">
+<div class="spacer-y32"></div>
+    <div class="px-4">
       <div class="text-2xl">Emailbenachrichtigungen</div>
       <div>Sende Emails bei: </div>
     </div>

client/src/app/modules/settings/settings.component.scss

@@ -35,7 +35,10 @@
 .sidebar-header {
   padding: 1rem;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  .title_text {
+    font-size: 2rem;
+  }
 }
 
 .close-btn {

client/src/app/modules/settings/settings.component.ts

@@ -44,6 +44,9 @@ export class SettingsComponent {
   }
 
   closeSidebar() {
+    if (this.isDirty()) {
+      this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
+    }
     this.isOpen = false;
   }
 
@@ -83,11 +86,13 @@ export class SettingsComponent {
       next: () => {
         this.toast.success('Gespeichert')
         this.isLoading = false;
+        this.userSettings.markAsPristine();
       }
     });
   }
 
   saveUser() {
+    this.isDirty();
     const user = this.authService.user;
     user.firstName = this.$userData.firstName.value!;
     user.lastName = this.$userData.lastName.value!;
@@ -95,8 +100,14 @@ export class SettingsComponent {
 
     this.api.saveUser(user).subscribe({
       next: () => {
-        this.toast.success('Gespeichert')
+        this.toast.success('Gespeichert');
+        this.userSettings.markAsPristine()
       }
     })
   }
+
+  isDirty(): boolean {
+    
+    return this.userData.dirty || this.userSettings.dirty;
+  }
 }

client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html

@@ -2,7 +2,7 @@
 <h2 mat-dialog-title>Manager entfernen</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{ manager.firstName }} {{ manager.lastName }}</b> wirklich entfernen?
             Der Benutzer hat dann keinen Zugriff mehr auf diese Schließanlage mit allen ihren Daten.
@@ -14,8 +14,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>

client/src/app/modules/system/components/system-manager/system-manager.component.html

@@ -18,7 +18,7 @@
       <mat-hint>Emailadresse des neuen Users eingeben</mat-hint>
       <mat-icon matPrefix class="text-gray-400 mr-2">email</mat-icon>
     </mat-form-field>
-    <button mat-raised-button 
+    <button matButton="elevated" 
             color="primary" 
             (click)="addManagerByEmail()" 
             [disabled]="email == '' || email == null">
@@ -29,5 +29,5 @@
 </div>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="true">Schließen</button>
+  <button matButton [mat-dialog-close]="true">Schließen</button>
 </mat-dialog-actions>

client/src/app/modules/system/components/system-manager/system-manager.component.scss

@@ -6,26 +6,3 @@
     --ag-selected-row-background-color: rgb(229 231 235);
 }
 
-.p-4 {
-    padding: 1rem;
-}
-
-.bg-gray-50 {
-    background-color: rgb(249 250 251);
-}
-
-.rounded-md {
-    border-radius: 0.375rem;
-}
-
-.shadow-sm {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.text-gray-400 {
-    color: rgb(156 163 175);
-}
-
-.mr-2 {
-    margin-right: 0.5rem;
-}

client/src/app/modules/system/create/create.component.html

@@ -14,8 +14,8 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-  <button mat-raised-button (click)="save()" [disabled]="createForm.disabled" color="accent">
+  <button matButton mat-dialog-close>Abbrechen</button>
+  <button matButton="elevated" (click)="save()" [disabled]="createForm.disabled" >
     <mat-icon>save</mat-icon>
     Speichern
   </button>

client/src/app/modules/system/system.component.html

@@ -5,5 +5,5 @@
 />
 
 <div class="floating-btn-container">
-    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()" color="accent" >Schließanlage anlegen</button>
+    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()"  >Schließanlage anlegen</button>
   </div>

client/src/styles.scss

@@ -157,4 +157,60 @@ div.ag-row {
 .mdc-notched-outline__notch
 {
   border-right: none;
+}
+
+
+.p-4 {
+    padding: 1rem;
+}
+
+.bg-gray-50 {
+    background-color: rgb(249 250 251);
+}
+
+.rounded-md {
+    border-radius: 0.375rem;
+}
+
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.text-gray-400 {
+    color: rgb(156 163 175);
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.spacer-y8 {
+  height: 8px;
+}
+
+.spacer-y16 {
+  height: 16px;
+}
+
+.spacer-y32 {
+  height: 32px;
+}
+
+.mat-mdc-button, .mat-mdc-raised-button:not(.mat-mdc-button-disabled) {
+  .mdc-button__label, .mat-icon {
+    color: #000;
+  }
+}
+
+
+.btn-warning:not(.mat-mdc-button-disabled) {
+  .mdc-button__label, .mat-icon {
+    color: rgb(197, 0, 0);
+  }
+}
+
+.btn-primary:not(.mat-mdc-button-disabled).mat-mdc-raised-button {
+  .mdc-button__label, .mat-icon {
+    color: rgb(32, 100, 0);
+  }
 }