mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-04-01 04:53:40 +00:00
Bugfix/040 UI (#2881)
* fix sideload and install flow * move updates chevron inside upddate button * update dictionaries to include langauge names * fix: address todos (#2880) * fix: address todos * fix enlgish translation --------- Co-authored-by: Matt Hill <mattnine@protonmail.com> * use existing translation, no need to duplicate * fix: update dialog and other fixes (#2882) --------- Co-authored-by: Alex Inkin <alexander@inkin.ru> Co-authored-by: Aiden McClelland <me@drbonez.dev>
This commit is contained in:
@@ -1,73 +1,94 @@
|
||||
import { AsyncPipe } from '@angular/common'
|
||||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
|
||||
import { toSignal } from '@angular/core/rxjs-interop'
|
||||
import { SwUpdate } from '@angular/service-worker'
|
||||
import { Exver, LoadingService } from '@start9labs/shared'
|
||||
import { WA_WINDOW } from '@ng-web-apis/common'
|
||||
import { LoadingService } from '@start9labs/shared'
|
||||
import { Version } from '@start9labs/start-sdk'
|
||||
import { TuiResponsiveDialog } from '@taiga-ui/addon-mobile'
|
||||
import { TuiAutoFocus } from '@taiga-ui/cdk'
|
||||
import { TuiButton, TuiDialog } from '@taiga-ui/core'
|
||||
import { TuiButton } from '@taiga-ui/core'
|
||||
import { PatchDB } from 'patch-db-client'
|
||||
import { debounceTime, endWith, map, merge, Subject } from 'rxjs'
|
||||
import { distinctUntilChanged, map, merge, Subject } from 'rxjs'
|
||||
import { ConfigService } from 'src/app/services/config.service'
|
||||
import { DataModel } from 'src/app/services/patch-db/data-model'
|
||||
|
||||
// @TODO Alex
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'refresh-alert',
|
||||
template: `
|
||||
<!-- <ng-template-->
|
||||
<!-- [tuiDialog]="show$ | async"-->
|
||||
<!-- [tuiDialogOptions]="{ label: 'Refresh Needed', size: 's' }"-->
|
||||
<!-- (tuiDialogChange)="onDismiss()"-->
|
||||
<!-- >-->
|
||||
<!-- Your user interface is cached and out of date. Hard refresh the page to-->
|
||||
<!-- get the latest UI.-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li>-->
|
||||
<!-- <b>On Mac</b>-->
|
||||
<!-- : cmd + shift + R-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <b>On Linux/Windows</b>-->
|
||||
<!-- : ctrl + shift + R-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <button-->
|
||||
<!-- tuiButton-->
|
||||
<!-- tuiAutoFocus-->
|
||||
<!-- appearance="secondary"-->
|
||||
<!-- style="float: right"-->
|
||||
<!-- (click)="onDismiss()"-->
|
||||
<!-- >-->
|
||||
<!-- Ok-->
|
||||
<!-- </button>-->
|
||||
<!-- </ng-template>-->
|
||||
<ng-template
|
||||
[tuiResponsiveDialog]="show()"
|
||||
[tuiResponsiveDialogOptions]="{ label: 'Refresh Needed', size: 's' }"
|
||||
(tuiResponsiveDialogChange)="dismiss$.next()"
|
||||
>
|
||||
@if (isPwa) {
|
||||
<p>
|
||||
Your user interface is cached and out of date. Attempt to reload the
|
||||
PWA using the button below. If you continue to see this message,
|
||||
uninstall and reinstall the PWA.
|
||||
</p>
|
||||
<button
|
||||
tuiButton
|
||||
tuiAutoFocus
|
||||
appearance="secondary"
|
||||
style="float: right"
|
||||
[tuiAppearanceFocus]="false"
|
||||
(click)="pwaReload()"
|
||||
>
|
||||
Reload
|
||||
</button>
|
||||
} @else {
|
||||
Your user interface is cached and out of date. Hard refresh the page to
|
||||
get the latest UI.
|
||||
<ul>
|
||||
<li>
|
||||
<b>On Mac</b>
|
||||
: cmd + shift + R
|
||||
</li>
|
||||
<li>
|
||||
<b>On Linux/Windows</b>
|
||||
: ctrl + shift + R
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
tuiButton
|
||||
tuiAutoFocus
|
||||
appearance="secondary"
|
||||
style="float: right"
|
||||
[tuiAppearanceFocus]="false"
|
||||
(click)="dismiss$.next()"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
}
|
||||
</ng-template>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [TuiDialog, AsyncPipe, TuiButton, TuiAutoFocus],
|
||||
imports: [TuiResponsiveDialog, TuiButton, TuiAutoFocus],
|
||||
})
|
||||
export class RefreshAlertComponent {
|
||||
private readonly win = inject(WA_WINDOW)
|
||||
private readonly updates = inject(SwUpdate)
|
||||
private readonly loader = inject(LoadingService)
|
||||
private readonly exver = inject(Exver)
|
||||
private readonly config = inject(ConfigService)
|
||||
private readonly dismiss$ = new Subject<boolean>()
|
||||
private readonly version = Version.parse(inject(ConfigService).version)
|
||||
|
||||
readonly show$ = merge(
|
||||
this.dismiss$,
|
||||
inject<PatchDB<DataModel>>(PatchDB)
|
||||
.watch$('serverInfo', 'version')
|
||||
.pipe(
|
||||
map(version => !!this.exver.compareExver(this.config.version, version)),
|
||||
endWith(false),
|
||||
),
|
||||
).pipe(debounceTime(0))
|
||||
readonly dismiss$ = new Subject<void>()
|
||||
readonly isPwa = this.win.matchMedia('(display-mode: standalone)').matches
|
||||
|
||||
// @TODO use this like we did on 0344
|
||||
onPwa = false
|
||||
|
||||
ngOnInit() {
|
||||
this.onPwa = window.matchMedia('(display-mode: standalone)').matches
|
||||
}
|
||||
readonly show = toSignal(
|
||||
merge(
|
||||
this.dismiss$.pipe(map(() => false)),
|
||||
inject<PatchDB<DataModel>>(PatchDB)
|
||||
.watch$('serverInfo', 'version')
|
||||
.pipe(
|
||||
distinctUntilChanged(),
|
||||
map(v => this.version.compare(Version.parse(v)) !== 'equal'),
|
||||
),
|
||||
),
|
||||
{
|
||||
initialValue: false,
|
||||
},
|
||||
)
|
||||
|
||||
async pwaReload() {
|
||||
const loader = this.loader.open('Reloading PWA').subscribe()
|
||||
@@ -80,11 +101,7 @@ export class RefreshAlertComponent {
|
||||
} finally {
|
||||
loader.unsubscribe()
|
||||
// always reload, as this resolves most out of sync cases
|
||||
window.location.reload()
|
||||
this.win.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
onDismiss() {
|
||||
this.dismiss$.next(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { TuiDropdownService } from '@taiga-ui/core'
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
Directive,
|
||||
Injectable,
|
||||
} from '@angular/core'
|
||||
import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'
|
||||
|
||||
@Injectable({ providedIn: `root` })
|
||||
export class SidebarService extends TuiPortalService {}
|
||||
|
||||
@Directive({
|
||||
selector: '[tuiSidebar]',
|
||||
standalone: true,
|
||||
providers: [{ provide: TuiDropdownService, useExisting: SidebarService }],
|
||||
})
|
||||
export class SidebarDirective {}
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar-host',
|
||||
template: '<ng-container #viewContainer></ng-container>',
|
||||
styles: [':host { position: fixed; top: 0; }'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
providers: [{ provide: TuiPortalService, useExisting: SidebarService }],
|
||||
})
|
||||
export class SidebarHostComponent extends TuiPortals {}
|
||||
Reference in New Issue
Block a user