Fixes #89

duplicati · Jan 15, 2025 · 05e35be · 05e35be
1 parent bc57b3c
commit 05e35be
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 48 deletions.
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -101,55 +101,51 @@ <h3 i18n>Language</h3>
   <section>
     <div class="left">
       <h3 i18n>Update channel</h3>
-      <!-- TODO -->
-      <p i18n>Update channel selection is not implemented yet.</p>
+      <p>
+        @if (updateChannel() !== '' && sysinfo()?.ServerVersion) {
+          {{ sysinfo()?.ServerVersion }}
+        }
+      </p>
+
+      @if (updatingChannel()) {
+        <spk-progress-bar class="indeterminate primary" />
+      }
     </div>
 
     <div class="right radios">
-      <div class="radio-option" (click)="settingsForm.controls.updateChannel.setValue('')">
-        <spk-radio class="outlined primary" i18n>
+      <div class="radio-option" (click)="setNewChannel('')">
+        <spk-radio class="primary raised" [class.active]="updateChannel() === ''" i18n>
           Default ({{ sysinfo()?.DefaultUpdateChannel }})
-          <input type="radio" name="updateChannel" value="" formControlName="updateChannel" />
         </spk-radio>
 
         <p i18n>Same as the base install version: {{ sysinfo()?.ServerVersionType }}</p>
       </div>
 
-      <div class="radio-option" (click)="settingsForm.controls.updateChannel.setValue('stable')">
-        <spk-radio class="outlined primary" i18n>
-          Stable
-          <input type="radio" name="updateChannel" value="stable" formControlName="updateChannel" />
-        </spk-radio>
+      <div class="radio-option" (click)="setNewChannel('stable')">
+        <spk-radio class="primary raised" [class.active]="updateChannel() === 'stable'" i18n>Stable</spk-radio>
 
         <p i18n>Official releases</p>
       </div>
 
-      <div class="radio-option" (click)="settingsForm.controls.updateChannel.setValue('beta')">
-        <spk-radio class="outlined primary" i18n>
-          Beta
-          <input type="radio" name="updateChannel" value="beta" formControlName="updateChannel" />
-        </spk-radio>
+      <div class="radio-option" (click)="setNewChannel('beta')">
+        <spk-radio class="primary raised" [class.active]="updateChannel() === 'beta'" i18n>Beta</spk-radio>
 
         <p i18n>
           Try out the new features that we are working on. Currently the most stable version available. Test Restore
           data before using this in production environments.
         </p>
       </div>
 
-      <div class="radio-option" (click)="settingsForm.controls.updateChannel.setValue('experimental')">
-        <spk-radio class="outlined primary" i18n>
+      <div class="radio-option" (click)="setNewChannel('experimental')">
+        <spk-radio class="primary raised" [class.active]="updateChannel() === 'experimental'" i18n>
           Experimental
-          <input type="radio" name="updateChannel" value="experimental" formControlName="updateChannel" />
         </spk-radio>
 
         <p i18n>Specific builds for developers only. Not for use with important data.</p>
       </div>
 
-      <div class="radio-option" (click)="settingsForm.controls.updateChannel.setValue('canary')">
-        <spk-radio class="outlined primary" i18n>
-          Canary
-          <input type="radio" name="updateChannel" value="canary" formControlName="updateChannel" />
-        </spk-radio>
+      <div class="radio-option" (click)="setNewChannel('canary')">
+        <spk-radio class="primary raised" [class.active]="updateChannel() === 'canary'" i18n>Canary</spk-radio>
 
         <p i18n>Individual builds for developers only. Not for use with important data.</p>
       </div>
@@ -182,17 +178,4 @@ <h3 i18n>Usage statistics</h3>
       </spk-select>
     </div>
   </section>
-
-  <!-- <section>
-    <div class="left">
-      <h3>Add advanced options</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <spk-button-group>
-        <button type="button" [class.active]="editAs() === 'list'" (click)="editAs.set('list')">Edit as list</button>
-        <button type="button" [class.active]="editAs() === 'text'" (click)="editAs.set('text')">Edit as text</button>
-      </spk-button-group>
-    </div>
-
-    <div class="right">Empty for now</div>
-  </section> -->
 </form>
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
@@ -3,11 +3,12 @@ import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   SparkleButtonComponent,
   SparkleOptionComponent,
+  SparkleProgressBarComponent,
   SparkleRadioComponent,
   SparkleSelectComponent,
 } from '@sparkle-ui/core';
 import { derivedFrom } from 'ngxtension/derived-from';
-import { map, pipe, startWith } from 'rxjs';
+import { catchError, finalize, map, of, pipe, startWith } from 'rxjs';
 import StatusBarComponent from '../core/components/status-bar/status-bar.component';
 import { LANGUAGES } from '../core/locales/locales.utility';
 import { DuplicatiServerService } from '../core/openapi';
@@ -78,6 +79,7 @@ type UsageStatisticsType = (typeof USAGE_STATISTICS_OPTIONS)[number];
     SparkleButtonComponent,
     SparkleRadioComponent,
     SparkleSelectComponent,
+    SparkleProgressBarComponent,
   ],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
@@ -105,9 +107,32 @@ export default class SettingsComponent {
       timeType: fb.control<TimeTypes>('s'),
     }),
     usageStatistics: fb.control<UsageStatisticsType['value']>(''),
-    updateChannel: fb.control<UpdateChannel>(''),
   });
 
+  updatingChannel = signal(false);
+  updateChannel = signal<UpdateChannel>('');
+
+  setNewChannel(channel: UpdateChannel) {
+    const prevChannel = this.updateChannel();
+
+    this.updateChannel.set(channel);
+
+    this.#dupServer
+      .patchApiV1Serversettings({
+        requestBody: {
+          'update-channel': channel,
+        },
+      })
+      .pipe(
+        finalize(() => this.updatingChannel.set(false)),
+        catchError(() => {
+          this.updateChannel.set(prevChannel);
+          return of(null);
+        })
+      )
+      .subscribe();
+  }
+
   get pauseSettings() {
     return this.settingsForm.controls.pauseSettings;
   }
@@ -169,17 +194,9 @@ export default class SettingsComponent {
         requestBody: {
           'usage-reporter-level': this.settingsForm.controls.usageStatistics.value,
           'startup-delay': startupDelay === '0s' ? '' : startupDelay,
-          'update-channel': this.settingsForm.controls.updateChannel.value,
         },
       })
-      .subscribe({
-        next: (res) => {
-          console.log('res', res);
-        },
-        error: (err) => {
-          console.error('err', err);
-        },
-      });
+      .subscribe();
   }
 
   getServerSettings() {
@@ -196,8 +213,9 @@ export default class SettingsComponent {
             timeType: (timeUnitOptions.includes(unit) ? unit : 's') as TimeTypes,
           },
           usageStatistics: res['usage-reporter-level'],
-          updateChannel: res['update-channel'] as UpdateChannel,
         });
+
+        this.updateChannel.set(res['update-channel'] as UpdateChannel);
       },
     });
   }