small improvements, pwa update

ngsw-config.json

@@ -2,7 +2,7 @@
   "$schema": "./node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.html",
   "appData": {
-    "version": "1.5.2"
+    "version": "1.5.3"
   },
   "assetGroups": [
     {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bstlboard",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "license": "AGPL3",
   "scripts": {
     "ng": "ng",

src/app/pages/search/search.page.scss

@@ -2,15 +2,19 @@ mat-list mat-list-item {
   height: auto;
 }
 
-mat-form-field {
-  margin-right: 15px;
-  flex-basis: 0;
-  flex-grow: 1;
-  min-width: 100px;
-}
-
 .container {
   margin-bottom: 0;
+
+  mat-form-field {
+    margin-right: 15px;
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 50px;
+
+    &:first-child {
+      min-width: 300px;
+    }
+  }
 }
 
 mat-form-field .mat-form-field-wrapper {

src/app/ui/entries/entries.ui.html

@@ -36,7 +36,7 @@
   <span class="spacer"></span>
 
   <div class="mat-mdc-paginator flex">
-    <div *ngIf="filter" class="filter-container">
+    <div *ngIf="filter" class="mat-mdc-paginator filter-container">
       <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'entries.filter' | i18n}}"
         [color]="filterOpen ? 'accent' : 'primary'">
         <mat-icon>filter_alt</mat-icon>

src/app/ui/main/main.ui.html

@@ -86,7 +86,7 @@
         style="font-size: 0.7em;">
         {{'page.privacy-policy' | i18n}}
       </a>
-      <span style="font-size: 0.7em; margin-right: 1em; float: right;">v{{version}}</span>
+      <span style="font-size: 0.7em; margin-right: 1em; float: right;">v{{version}} <span *ngIf="hasUpdate" (click)="updateSw()">{{'updateSw' | i18n}}</span></span>
     </mat-nav-list>
   </mat-sidenav>
 

src/app/ui/main/main.ui.ts

@@ -11,6 +11,7 @@ import { I18nService } from '../../services/i18n.service';
 import { SettingsService } from '../../services/settings.service';
 
 import packageJson from '../../../../package.json';
+import { SwUpdate } from '@angular/service-worker';
 
 @Component({
   selector: 'ui-main',
@@ -28,6 +29,7 @@ export class UiMain {
   authenticated: boolean = false;
   moderator: boolean = false;
   searchFocus: boolean = false;
+  hasUpdate: boolean = false;
 
   touchThresh: number = 150;
   touchStartX: number;
@@ -43,8 +45,23 @@ export class UiMain {
     private router: Router,
     private iconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer,
-    private _adapter: DateAdapter<any>) {
+    private _adapter: DateAdapter<any>, private swUpdate: SwUpdate) {
     iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
+
+    this.swUpdate.versionUpdates.subscribe(evt => {
+      if (evt.type == 'VERSION_READY') {
+        this.hasUpdate = true;
+      } else if (evt.type == 'VERSION_INSTALLATION_FAILED') {
+        console.error(`Failed to install version '${evt.version.hash}': ${evt.error}`);
+      }
+    })
+
+    if (this.swUpdate.isEnabled) {
+      // check for PWA update every 30s
+      setInterval(() => {
+        this.swUpdate.checkForUpdate();
+      }, 30000);
+    }
   }
 
   async ngOnInit() {
@@ -98,6 +115,7 @@ export class UiMain {
 
   close() {
     this.opened = false;
+    this.searchFocus = false;
   }
 
   preventClose(event) {
@@ -193,5 +211,28 @@ export class UiMain {
     })
   }
 
+  updateSw(force: boolean = false): void {
+    if (this.hasUpdate || force) {
+      if (this.swUpdate.isEnabled) {
+        this.swUpdate.activateUpdate().then(() => {
+          this.clearAndRefresh();
+        });
+      } else {
+        this.clearAndRefresh();
+      }
+    }
+  }
+
+  clearAndRefresh() {
+    if ('caches' in window) {
+      caches.keys()
+        .then(function (keyList) {
+          return Promise.all(keyList.map(function (key) {
+            return caches.delete(key);
+          }));
+        })
+    }
+    window.location.reload()
+  }
 }
 

src/assets/i18n/de-informal.json

@@ -152,6 +152,7 @@
 			"error": "Url erforderlich"
 		}
 	},
+	"updateSw": "Update?",
 	"user": {
 		".": "User",
 		"about": "Über",

src/assets/i18n/en.json

@@ -152,6 +152,7 @@
 			"error": "url required"
 		}
 	},
+	"updateSw": "Update?",
 	"user": {
 		".": "user",
 		"about": "about",