Adjusts the margins. Resets enable toggle on failure to save. Improves an error message.

This commit is contained in:
Victor Usoltsev 2022-10-29 00:21:51 +13:00
commit 044ba8e1eb
2 changed files with 52 additions and 38 deletions

View file

@ -1,16 +1,19 @@
<settings-menu></settings-menu> <settings-menu></settings-menu>
<div class="small-middle-container"> <div class="small-middle-container">
<div *ngIf="currentSettings"> <div *ngIf="savedSettings">
<fieldset> <fieldset>
<legend style="margin-bottom: 1em;">Emby Configuration</legend> <legend style="margin-bottom: 1em;">Emby Configuration</legend>
<div class="form-group"> <div class="form-group">
<div style="margin-bottom: 2em;">
<mat-slide-toggle (change)="toggleEnableFlag($event)" [checked]="savedSettings.enable"> <mat-slide-toggle (change)="toggleEnableFlag($event)" [checked]="savedSettings.enable">
Enable Enable
</mat-slide-toggle> </mat-slide-toggle>
</div>
<h2 style="margin: 1em 0 0 0;">Servers</h2> <div style="margin-bottom: 1em;">
<mat-list style="display:flex; flex-flow: wrap;"> <h2 style="margin: 0 0 .5em 0;">Servers</h2>
<mat-card class="emby-server-card" *ngFor="let server of currentSettings.servers"> <div style="display:flex; flex-flow: wrap;">
<mat-card class="emby-server-card" *ngFor="let server of savedSettings.servers">
<button mat-button (click)="editServer(server)"> <button mat-button (click)="editServer(server)">
<h3>{{server.name}}</h3> <h3>{{server.name}}</h3>
</button> </button>
@ -22,25 +25,32 @@
<h3>New Server</h3> <h3>New Server</h3>
</button> </button>
</mat-card> </mat-card>
</mat-list> </div>
</div>
<h2 style="margin: 1em 0 0 0;">Actions</h2> <div style="margin-bottom: 1em;">
<h2 style="margin: 0 0 .5em 0;">Actions</h2>
<div class="md-form-field"> <div class="md-form-field">
<button mat-stroked-button [disabled]="!savedSettings.enable || savedSettings.servers.length == 0" <button mat-stroked-button
[disabled]="!savedSettings.enable || savedSettings.servers.length == 0"
style="margin: 0 1em 1em 0;" (click)="runIncrementalSync()" type="button" style="margin: 0 1em 1em 0;" (click)="runIncrementalSync()" type="button"
id="recentlyAddedSync"> id="recentlyAddedSync">
Run Incremental Sync Run Incremental Sync
</button> </button>
<button mat-stroked-button [disabled]="!savedSettings.enable|| savedSettings.servers.length == 0" <button mat-stroked-button
[disabled]="!savedSettings.enable|| savedSettings.servers.length == 0"
style="margin: 0 1em 1em 0;" (click)="runFullSync()" type="button" id="save"> style="margin: 0 1em 1em 0;" (click)="runFullSync()" type="button" id="save">
Run Full Sync Run Full Sync
</button> </button>
<button mat-stroked-button [disabled]="!savedSettings.enable|| savedSettings.servers.length == 0" <button mat-stroked-button
style="margin: 0 1em 1em 0;" (click)="runCacheWipeWithFullSync()" type="button" id="clearData"> [disabled]="!savedSettings.enable|| savedSettings.servers.length == 0"
style="margin: 0 1em 1em 0;" (click)="runCacheWipeWithFullSync()" type="button"
id="clearData">
Clear Data And Resync Clear Data And Resync
</button> </button>
</div> </div>
</div> </div>
</div>
</fieldset> </fieldset>
</div> </div>
</div> </div>

View file

@ -18,7 +18,6 @@ import {
}) })
export class EmbyComponent implements OnInit { export class EmbyComponent implements OnInit {
public savedSettings: IEmbySettings; public savedSettings: IEmbySettings;
public currentSettings: IEmbySettings;
constructor( constructor(
private settingsService: SettingsService, private settingsService: SettingsService,
@ -32,7 +31,6 @@ export class EmbyComponent implements OnInit {
next: (result) => { next: (result) => {
if (result.servers == null) result.servers = []; if (result.servers == null) result.servers = [];
this.savedSettings = result; this.savedSettings = result;
this.currentSettings = result;
}, },
error: () => { error: () => {
this.notificationService.error("Failed to retrieve Emby settings."); this.notificationService.error("Failed to retrieve Emby settings.");
@ -41,9 +39,13 @@ export class EmbyComponent implements OnInit {
} }
public toggleEnableFlag(event: MatSlideToggleChange) { public toggleEnableFlag(event: MatSlideToggleChange) {
const newSettings: IEmbySettings = structuredClone(this.savedSettings); const newSettings: IEmbySettings = {
newSettings.enable = event.checked; ...structuredClone(this.savedSettings),
const errorMessage = "There was an error saving Emby settings."; enable: event.checked,
};
const errorMessage = event.checked
? "There was an error enabling Emby settings. Check that all servers are configured correctly."
: "There was an error disabling Emby settings.";
this.settingsService.saveEmby(newSettings).subscribe({ this.settingsService.saveEmby(newSettings).subscribe({
next: (result) => { next: (result) => {
if (result) { if (result) {
@ -54,10 +56,12 @@ export class EmbyComponent implements OnInit {
} Emby settings.` } Emby settings.`
); );
} else { } else {
event.source.checked = !event.checked;
this.notificationService.error(errorMessage); this.notificationService.error(errorMessage);
} }
}, },
error: () => { error: () => {
event.source.checked = !event.checked;
this.notificationService.error(errorMessage); this.notificationService.error(errorMessage);
}, },
}); });