Make last backup time a link to /db

TODO.md

@@ -2,5 +2,4 @@
 - create weight endpoints which retuns weight in last day, week, month, year
 - fix pgexporter logs about missing role
 - Try using WebTestClient https://docs.spring.io/spring-framework/reference/testing/webtestclient.html#webtestclient-json
-- Make last backup time a link to /db
 - Add button to backup tool which shows the dump on UI with INSERTS (possibly data only toggle) 

client/README.md

@@ -26,4 +26,9 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
 
-# Version 17
+# Kubetools version: 30
+
+# Resources
+
+- https://flowbite.com/docs/components/tables/
+- https://hslpicker.com/

client/src/app/app.component.html

@@ -1,9 +1,13 @@
-<app-header title="Workout"
-  ><app-heading *ngIf="lastNackupState.isReady" level="3" class="lastBackup"
-    >Last backup
-    <app-badge >{{ lastNackupState.value.time | relativeTime }}</app-badge></app-heading
-  ></app-header
->
+<app-header title="Workout">
+  <app-header-menu href="/db">
+    <app-heading *ngIf="lastNackupState.isReady" level="3" class="lastBackup"
+      >Last backup
+      <app-badge>{{
+        lastNackupState.value.time | relativeTime
+      }}</app-badge></app-heading
+    >
+  </app-header-menu>
+</app-header>
 <app-main>
   <div id="main">
     <app-weight *ngIf="syncState.isReady"></app-weight>

client/src/app/common-components/badge/badge.component.css

@@ -1,5 +1,6 @@
 :host {
-  background-color: white;
+  background-color: var(--color-scope, white);
+  transition: background-color 0.3s;
   color: rgb(30, 66, 159);
   display: inline-block;
   padding: 0.125em 0.4em;

client/src/app/common-components/common-components.module.ts

@@ -7,6 +7,7 @@ import { LoaderComponent } from './loader/loader.component';
 import { MainComponent } from './main/main.component';
 import { NotificationComponent } from './notification/notification.component';
 import { NotificationsComponent } from './notifications/notifications.component';
+import { HeaderMenuComponent } from './header-menu/header-menu.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { NotificationsComponent } from './notifications/notifications.component'
     NotificationComponent,
     NotificationsComponent,
     LoaderComponent,
+    HeaderMenuComponent,
   ],
   imports: [CommonModule],
   exports: [
@@ -26,7 +28,8 @@ import { NotificationsComponent } from './notifications/notifications.component'
     BadgeComponent,
     NotificationComponent,
     NotificationsComponent,
-    LoaderComponent
+    LoaderComponent,
+    HeaderMenuComponent
   ],
 })
 export class CommonComponentsModule {}

client/src/app/common-components/header-menu/header-menu.component.css

@@ -0,0 +1,8 @@
+a {
+  text-decoration: initial;
+}
+
+a:hover {
+  --color-scope: hsl(218, 93%, 61%);
+  color: var(--color-scope);
+}

client/src/app/common-components/header-menu/header-menu.component.html

@@ -0,0 +1 @@
+<a [href]="href"><ng-content></ng-content></a>

client/src/app/common-components/header-menu/header-menu.component.spec.ts

@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+import { HeaderMenuComponent } from './header-menu.component';
+
+async function setup({
+  template,
+}: {
+  template?: string;
+} = {}) {
+  @Component({
+    template,
+  })
+  class TestComponent {}
+
+  await TestBed.configureTestingModule({
+    declarations: [HeaderMenuComponent, TestComponent],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TestComponent);
+  const debugElement = fixture.debugElement.children[0];
+  fixture.detectChanges();
+
+  return {
+    fixture,
+    nativeElement: debugElement.nativeElement as HTMLElement,
+  };
+}
+
+describe('HeaderMenuComponent', () => {
+  it('render content', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-header-menu>test text</app-header-menu>',
+    });
+    expect(nativeElement.textContent).toBe('test text');
+  });
+
+  it('renders href', async () => {
+    const { nativeElement } = await setup({
+      template: '<app-header-menu href="/test/url"></app-header-menu>',
+    });
+    expect(nativeElement.getAttribute('href')).toBe('/test/url');
+  });
+});

client/src/app/common-components/header-menu/header-menu.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-menu',
+  templateUrl: './header-menu.component.html',
+  styleUrls: ['./header-menu.component.css'],
+})
+export class HeaderMenuComponent {
+  @Input('href') public href = '';
+}

client/src/app/common-components/header/header.component.html

@@ -1,4 +1,6 @@
 <header>
-  <app-heading>{{ title }}</app-heading>
+  <app-header-menu href="/"
+    ><app-heading>{{ title }}</app-heading></app-header-menu
+  >
   <ng-content></ng-content>
 </header>

client/src/app/common-components/header/header.component.spec.ts

@@ -3,6 +3,7 @@ import { TestBed } from '@angular/core/testing';
 import { HeadingComponent } from '../heading/heading.component';
 import { HeaderComponent } from './header.component';
 import { Component } from '@angular/core';
+import { HeaderMenuComponent } from '../header-menu/header-menu.component';
 
 async function setup({
   template,
@@ -15,7 +16,7 @@ async function setup({
   class TestComponent {}
 
   await TestBed.configureTestingModule({
-    declarations: [HeaderComponent, TestComponent, HeadingComponent],
+    declarations: [HeaderComponent, TestComponent, HeadingComponent, HeaderMenuComponent],
   }).compileComponents();
 
   const fixture = TestBed.createComponent(TestComponent);

client/src/app/common-components/heading/heading.component.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
-  color: white;
+  color: var(--color-scope, white);
+  transition: color 0.3s;
 }
 
 :host.level1 {

server/README.md

@@ -181,4 +181,4 @@ After succesful authentication using `AuthenticationManager` `OAuth2Authorizatio
 
 As last step it redirects back to previous url.
 
-# Version 32
+# Kubetools version: 30