add backup status colors

client/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@mucsi96/ui-elements": "^59.0.0",
+    "@mucsi96/ui-elements": "^60.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

client/src/app/app.component.html

@@ -12,14 +12,22 @@
         <ul bt-dropdown-menu>
           @for(database of databases(); track database.name) {
           <li>
-            <a routerLink="/database/{{ database.name }}">{{ database.name }}</a>
+            <a routerLink="/database/{{ database.name }}">{{
+              database.name
+            }}</a>
           </li>
           }
         </ul>
       </div>
       @if (time) {
       <h3 bt>
-        Last backup <span bt-badge>{{ time | relativeTime }}</span>
+        Last backup
+        <span
+          bt-badge
+          [attr.bt-green]="!olderThenOneDay(time) ? '' : null"
+          [attr.bt-red]="olderThenOneDay(time) ? '' : null"
+          >{{ time | relativeTime }}</span
+        >
       </h3>
       } }
     </div>

client/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { BackupsService } from './backups/backups.service';
 import { RelativeTimePipe } from './utils/relativeTime.pipe';
 import { DatabasesService } from './databases/databases.service';
 import { Database } from '../types';
+import { olderThenOneDay } from './utils/dateUtils';
 
 @Component({
   selector: 'app-root',
@@ -16,6 +17,7 @@ export class AppComponent {
   databaseName = signal<string | undefined>(undefined);
   databases: Signal<Database[] | undefined>;
   lastBackupTime: Signal<Date | undefined>;
+  olderThenOneDay = olderThenOneDay
 
   constructor(
     private readonly route: ActivatedRoute,

client/src/app/databases/databases.component.html

@@ -25,7 +25,15 @@ <h2 bt>
       <td bt-no-wrap bt-center-align>{{ database.totalRowCount }}</td>
       <td bt-no-wrap bt-center-align>{{ database.backupsCount }}</td>
       @if (database.lastBackupTime) {
-      <td bt-no-wrap bt-right-align>{{ database.lastBackupTime | relativeTime }}</td>
+      <td
+        bt-no-wrap
+        bt-right-align
+        bt-text
+        [attr.bt-green]="!olderThenOneDay(database.lastBackupTime) ? '' : null"
+        [attr.bt-red]="olderThenOneDay(database.lastBackupTime) ? '' : null"
+      >
+        {{ database.lastBackupTime | relativeTime }}
+      </td>
       } @else {
       <td bt-no-wrap></td>
       }

client/src/app/databases/databases.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { DatabasesService } from './databases.service';
 import { Database } from '../../types';
 import { RelativeTimePipe } from '../utils/relativeTime.pipe';
+import { olderThenOneDay } from '../utils/dateUtils';
 
 @Component({
   selector: 'app-databases',
@@ -14,6 +15,7 @@ import { RelativeTimePipe } from '../utils/relativeTime.pipe';
 export class DatabasesComponent {
   databases: Signal<Database[] | undefined>;
   loading: Signal<boolean>;
+  olderThenOneDay = olderThenOneDay;
 
   constructor(
     private readonly databasesService: DatabasesService,
@@ -26,4 +28,5 @@ export class DatabasesComponent {
   selectDatabase(database: Database) {
     this.router.navigate(['/database', database.name]);
   }
+
 }

client/src/app/utils/dateUtils.ts

@@ -0,0 +1,3 @@
+export function olderThenOneDay(date?: Date): boolean {
+  return !date || Date.now() - date.getTime() > 24 * 60 * 60 * 1000;
+}

client/src/mocks/browser.ts

@@ -15,7 +15,7 @@ const databases: Database[] = [
     tablesCount: 3,
     totalRowCount: 12,
     backupsCount: 3,
-    lastBackupTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 3),
+    lastBackupTime: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 0.5),
   },
 ];