Feature: Allow edit of time in guest book.

Feature: Guest book row color is the same as running table colors

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html

@@ -39,6 +39,16 @@
           <textarea matInput formControlName="address"></textarea>
         </mat-form-field>
       </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Hours</mat-label>
+          <input matInput formControlName="hours" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto">
+          <mat-label>Minutes</mat-label>
+          <input matInput formControlName="minutes" />
+        </mat-form-field>
+      </div>
     </form>
   </mat-card-content>
   <mat-card-actions>

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts

@@ -23,6 +23,8 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     phone: FormControl<string | Customer>;
     pax: FormControl<number>;
     address: FormControl<string | null>;
+    hours: FormControl<number>;
+    minutes: FormControl<number>;
   }>;
 
   item: GuestBook = new GuestBook();
@@ -44,6 +46,8 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
       }),
       pax: new FormControl(0, { validators: Validators.required, nonNullable: true }),
       address: new FormControl<string | null>(null),
+      hours: new FormControl(0, { validators: [Validators.min(0), Validators.max(23)], nonNullable: true }),
+      minutes: new FormControl(0, { validators: [Validators.min(0), Validators.max(59)], nonNullable: true }),
     });
     // Setup Account Autocomplete
     this.customers = this.form.controls.phone.valueChanges.pipe(
@@ -77,6 +81,8 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
       phone: item.phone,
       pax: item.pax,
       address: item.address,
+      hours: +item.date.substring(12, 14),
+      minutes: +item.date.substring(15, 17),
     });
   }
 
@@ -115,6 +121,9 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
     }
     this.item.pax = formModel.pax ?? 0;
     this.item.address = formModel.address ?? null;
+    const hours = ('' + (formModel.hours as number)).padStart(2, '0');
+    const minutes = ('' + (formModel.minutes as number)).padStart(2, '0');
+    this.item.date = this.item.date.substring(0, 12) + hours + ':' + minutes;
     return this.item;
   }
 }

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css

@@ -1,17 +0,0 @@
-.full-width-table {
-  width: 100%;
-}
-
-.running {
-  background-color: #f53d24;
-  color: #000000;
-}
-
-.printed {
-  background-color: #00f518;
-  color: #000000;
-}
-.center {
-  display: flex;
-  justify-content: center;
-}

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html

@@ -23,7 +23,7 @@
       <!-- SNo Column -->
       <ng-container matColumnDef="sno">
         <mat-header-cell *matHeaderCellDef>S. No</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.serial }} {{ row.status }}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.serial }}</mat-cell>
       </ng-container>
 
       <!-- Name Column -->
@@ -78,8 +78,8 @@
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row
         *matRowDef="let row; columns: displayedColumns"
-        [class.running]="row.status === 'running'"
-        [class.printed]="row.status === 'printed'"
+        [class.accent]="row.status === 'running'"
+        [class.strong-accent]="row.status === 'printed'"
       ></mat-row>
     </mat-table>
   </mat-card-content>

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.sass

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat
+
+$my-primary: mat.define-palette(mat.$indigo-palette, 500)
+$my-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400)
+
+table
+  width: 100%
+
+.center
+  display: flex
+  justify-content: center
+
+.accent
+  /* Read the 200 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-accent, '200-contrast')
+  background: mat.get-color-from-palette($my-accent, 200)
+
+.strong-accent
+  /* Read the 700 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-accent, '700-contrast')
+  background: mat.get-color-from-palette($my-accent, 700)

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -17,7 +17,7 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
 @Component({
   selector: 'app-guest-book-list',
   templateUrl: './guest-book-list.component.html',
-  styleUrls: ['./guest-book-list.component.css'],
+  styleUrls: ['./guest-book-list.component.sass'],
 })
 export class GuestBookListComponent implements OnInit {
   data: BehaviorSubject<GuestBook[]> = new BehaviorSubject<GuestBook[]>([]);