add

client/stillbox/src/app/version/checker.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CheckerService } from './checker.service';
+
+describe('CheckerService', () => {
+  let service: CheckerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CheckerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/stillbox/src/app/version/checker.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { SwUpdate } from '@angular/service-worker';
+import { Subscription } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CheckerService {
+  updateAvailable = false;
+  versionSub!: Subscription;
+
+  doUpdate() {}
+
+  constructor(private swUpd: SwUpdate) {
+    this.checkUpdate();
+  }
+
+  checkUpdate() {
+    this.versionSub?.unsubscribe();
+    if (!this.swUpd.isEnabled) {
+      return;
+    }
+    this.versionSub = this.swUpd.versionUpdates.subscribe((evt) => {
+      switch (evt.type) {
+        case 'VERSION_DETECTED':
+          console.log('Detected new version ${evt.version.hash}');
+          break;
+        case 'VERSION_READY':
+          console.log(`Current app version: ${evt.currentVersion.hash}`);
+          console.log(
+            `New app version ready for use: ${evt.latestVersion.hash}`,
+          );
+          this.updateAvailable = true;
+          break;
+        case 'VERSION_INSTALLATION_FAILED':
+          console.log(
+            `Failed to install app version '${evt.version.hash}': ${evt.error}`,
+          );
+      }
+    });
+  }
+}

client/stillbox/src/app/version/update-nag/update-nag.component.html

@@ -0,0 +1,6 @@
+@if (checkerSvc.updateAvailable) {
+  <div class="updater" (click)="update()">
+    <p>New version available!</p>
+    <button class="sbButton">Update</button>
+  </div>
+}

client/stillbox/src/app/version/update-nag/update-nag.component.scss

@@ -0,0 +1,32 @@
+@media screen and (max-width: 768px) {
+  .updater {
+    width: 100%;
+  }
+}
+
+@media not screen and (max-width: 768px) {
+  .updater {
+    width: 400px;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    height: 80px;
+  }
+}
+
+.updater {
+  display: flex;
+  align-items: center;
+  background-color: #311818;
+  padding-right: 20px;
+}
+
+.updater p {
+  flex: 2 0;
+  margin-left: 20px;
+}
+
+.updater button {
+  flex: 0 0 100px;
+  justify-content: flex-end;
+}

client/stillbox/src/app/version/update-nag/update-nag.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateNagComponent } from './update-nag.component';
+
+describe('UpdateNagComponent', () => {
+  let component: UpdateNagComponent;
+  let fixture: ComponentFixture<UpdateNagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UpdateNagComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UpdateNagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/stillbox/src/app/version/update-nag/update-nag.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CheckerService } from '../checker.service';
+
+@Component({
+  selector: 'app-update-nag',
+  imports: [],
+  templateUrl: './update-nag.component.html',
+  styleUrl: './update-nag.component.scss',
+})
+export class UpdateNagComponent {
+  constructor(public checkerSvc: CheckerService) {}
+
+  update() {
+    this.checkerSvc.doUpdate();
+  }
+}