Custom versions

Author: alexkar598

src/app/panels/byond/byond.component.html

@@ -1,10 +1,50 @@
+<span class="font-bold text-lg">Downloaded versions</span>
+<ul>
+  @for (version of byondService.versions; track version[0]) {
+    <li class="[&:not(:last-child)]:mb-2">
+      <span class="mr-2">
+        {{ version[0] }}
+        @if (version[0] === byondService.activeVersion) {
+          (Active)
+        } @else {
+          ({{ statusToMessage[version[1]] }})
+        }
+      </span>
+      @if (version[0] !== byondService.activeVersion) {
+        <button
+          tuiButton
+          appearance="primary"
+          size="xs"
+          (click)="byondService.load(version[0], true)"
+          class="mr-1.5"
+        >
+          Set active
+        </button>
+      }
+      <button
+        tuiButton
+        appearance="secondary-destructive"
+        size="xs"
+        (click)="byondService.deleteVersion(version[0])"
+      >
+        Delete
+      </button>
+    </li>
+  } @empty {
+    <li>No versions</li>
+  }
+</ul>
+
+<span class="font-bold text-lg">Latest versions</span>
 @if (byondService.latestVersion | async; as latestVersions) {
   <p>
     Latest stable: <span class="font-bold">{{ latestVersions.stable }}</span>
     <button
       tuiButton
       size="xs"
       (click)="byondService.getVersion(latestVersions.stable)"
+      class="ml-2"
+      [disabled]="byondService.versions.has(latestVersions.stable)"
     >
       Fetch
     </button>
@@ -16,6 +56,8 @@
         tuiButton
         size="xs"
         (click)="byondService.getVersion(latestVersions.beta)"
+        class="ml-2"
+        [disabled]="byondService.versions.has(latestVersions.beta)"
       >
         Fetch
       </button>
@@ -25,29 +67,36 @@
   Loading latest version...
 }
 
-<ul>
-  @for (version of byondService.versions; track version[0]) {
-    {{ version[0] }}
-    @if (version[0] === byondService.activeVersion) {
-      (Active)
-    } @else {
-      ({{ statusToMessage[version[1]] }})
-      <button
-        tuiButton
-        appearance="primary"
-        size="xs"
-        (click)="byondService.setActive(version[0])"
-      >
-        Set active
-      </button>
-    }
-    <button
-      tuiButton
-      appearance="secondary-destructive"
-      size="xs"
-      (click)="byondService.deleteVersion(version[0])"
+<span class="font-bold text-lg">Custom version</span>
+<form
+  (ngSubmit)="this.byondService.getVersion(resolveVersion())"
+  [formGroup]="this.form"
+  class="flex flex-row"
+>
+  <div class="flex-grow" tuiGroup>
+    <tui-input-number
+      [step]="1"
+      decimal="never"
+      formControlName="major"
+      tuiTextfieldSize="s"
     >
-      Delete
-    </button>
-  }
-</ul>
+      Major version
+    </tui-input-number>
+    <tui-input-number
+      [step]="1"
+      decimal="never"
+      formControlName="minor"
+      tuiTextfieldSize="s"
+    >
+      Minor version
+    </tui-input-number>
+  </div>
+  <button
+    [disabled]="byondService.versions.has(resolveVersion())"
+    class="ml-2"
+    size="s"
+    tuiButton
+  >
+    Fetch
+  </button>
+</form>

src/app/panels/byond/byond.component.ts

@@ -1,27 +1,67 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ByondService, VersionStatus } from '../../../vm/byond.service';
 import { AsyncPipe } from '@angular/common';
-import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core';
-import { TuiBadgeModule } from '@taiga-ui/kit';
+import {
+  TuiButtonModule,
+  TuiGroupModule,
+  TuiLoaderModule,
+  TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import { TuiBadgeModule, TuiInputNumberModule } from '@taiga-ui/kit';
+import {
+  FormControl,
+  NonNullableFormBuilder,
+  ReactiveFormsModule,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-panel-byond',
   standalone: true,
-  imports: [AsyncPipe, TuiLoaderModule, TuiButtonModule, TuiBadgeModule],
+  imports: [
+    AsyncPipe,
+    TuiLoaderModule,
+    TuiButtonModule,
+    TuiBadgeModule,
+    TuiInputNumberModule,
+    ReactiveFormsModule,
+    TuiGroupModule,
+    TuiTextfieldControllerModule,
+  ],
   templateUrl: './byond.component.html',
   styleUrl: './byond.component.scss',
 })
-export default class ByondPanel {
+export default class ByondPanel implements OnInit {
   // noinspection JSUnusedGlobalSymbols
   static title = 'BYOND versions';
 
-  constructor(protected byondService: ByondService) {}
+  protected form;
+
+  constructor(
+    protected byondService: ByondService,
+    formBuilder: NonNullableFormBuilder,
+  ) {
+    this.form = formBuilder.group({
+      major: new FormControl(0),
+      minor: new FormControl(0),
+    });
+  }
+
+  ngOnInit(): void {
+    this.byondService.latestVersion.then(({ stable }) => {
+      const [major, minor] = stable.split('.').map((x) => parseInt(x));
+      this.form.setControl('major', new FormControl(major));
+      this.form.setControl('minor', new FormControl(minor));
+    });
+  }
+
+  protected resolveVersion() {
+    return `${this.form.value.major}.${this.form.value.minor}`;
+  }
 
   protected statusToMessage: Record<VersionStatus, string> = {
     [VersionStatus.Fetching]: 'Downloading...',
     [VersionStatus.Fetched]: 'Downloaded',
     [VersionStatus.Loading]: 'Loading...',
-    [VersionStatus.Extracting]: 'Extracting...',
     [VersionStatus.Loaded]: 'Loaded',
   };
 }