feat: Added grade color directive

src/app/admin-view/grades/grades.component.html

@@ -2,7 +2,7 @@
 <app-room-chooser [rooms]="rooms" (room)="roomNumber($event)"/>
 <form [formGroup]="form">
   <p>Czystość pokoju {{room}} na {{_date.toFormat("cccc, D")}}</p>
-  <p>Ocena: {{grade}}</p>
+  <p>Ocena: <span [appGradeColor]="grade">{{grade}}</span></p>
   <div id="buttons">
     <button mat-mini-fab (click)="downloadData()" color="accent"><mat-icon>cancel</mat-icon></button>
     <button mat-mini-fab (click)="attendence()" color="accent"><mat-icon>overview</mat-icon></button>
@@ -31,4 +31,4 @@
     <mat-label>Dodatkowe uwagi</mat-label>
     <textarea matNativeControl cdkTextareaAutosize formControlName="tips"></textarea>
   </mat-form-field>
-</form>
+</form>

src/app/app-view/personal/clean/clean.component.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Czystość</h1>
 <mat-dialog-content>
   @if (grade) {
-    <h1>Twoja ocena: <span [ngStyle]="gradeColor()">{{grade}}</span></h1>
+    <h1>Twoja ocena: <span [appGradeColor]="grade">{{grade}}</span></h1>
   }
   @else {
   <h1>Nie oceniono</h1>
@@ -21,4 +21,4 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-icon-button mat-dialog-close><mat-icon>close</mat-icon></button>
-</mat-dialog-actions>
+</mat-dialog-actions>

src/app/app-view/personal/clean/clean.component.ts

@@ -38,23 +38,4 @@ export class CleanComponent implements OnInit {
       }
     })
   }
-
-  protected gradeColor() {
-    switch (this.grade) {
-      case 1:
-        return { color: 'red' }
-      case 2:
-        return { color: 'darkorange' }
-      case 3:
-        return { color: 'orange' }
-      case 4:
-        return { color: 'olive' }
-      case 5:
-        return { color: 'green' }
-      case 6:
-        return { color: 'springgreen' }
-      default:
-        return { color: 'inherit' }
-    }
-  }
 }

src/app/app.module.ts

@@ -87,6 +87,7 @@ import { UserSearchComponent } from './commonComponents/user-search/user-search.
 import { StartAdminComponent } from './admin-view/start/start.component'
 import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { LoadShadeComponent } from './commonComponents/load-shade/load-shade.component'
+import { GradeColorDirective } from './grade-color.directive'
 
 @NgModule({
   declarations: [
@@ -139,6 +140,7 @@ import { LoadShadeComponent } from './commonComponents/load-shade/load-shade.com
     UserSearchComponent,
     StartAdminComponent,
     LoadShadeComponent,
+    GradeColorDirective,
   ],
   bootstrap: [AppComponent],
   imports: [

src/app/grade-color.directive.spec.ts

@@ -0,0 +1,8 @@
+import { GradeColorDirective } from './grade-color.directive';
+
+describe('GradeColorDirective', () => {
+  it('should create an instance', () => {
+    const directive = new GradeColorDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/grade-color.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, HostBinding, input } from '@angular/core';
+
+@Directive({
+  selector: 'span[appGradeColor]',
+  standalone: false
+})
+export class GradeColorDirective {
+
+  appGradeColor = input<number>()
+
+  constructor() { }
+
+  @HostBinding("style")
+  get gc() {
+    switch (this.appGradeColor()) {
+      case 1:
+        return { color: 'red' }
+      case 2:
+        return { color: 'darkorange' }
+      case 3:
+        return { color: 'orange' }
+      case 4:
+        return { color: 'olive' }
+      case 5:
+        return { color: 'green' }
+      case 6:
+        return { color: 'springgreen' }
+      default:
+        return { color: 'inherit' }
+    }
+  }
+
+}