implement toggling gateways for service interface

web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts

@@ -1,11 +1,18 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  inject,
+} from '@angular/core'
 import { TuiTitle } from '@taiga-ui/core'
 import { TuiSkeleton, TuiSwitch } from '@taiga-ui/kit'
 import { FormsModule } from '@angular/forms'
-import { i18nPipe } from '@start9labs/shared'
+import { i18nPipe, LoadingService, ErrorService } from '@start9labs/shared'
 import { TuiCell } from '@taiga-ui/layout'
 import { InterfaceGateway } from './interface.service'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { InterfaceComponent } from './interface.component'
 
 @Component({
   selector: 'section[gateways]',
@@ -21,7 +28,7 @@ import { InterfaceGateway } from './interface.service'
           [showIcons]="false"
           [ngModel]="gateway.enabled"
           (ngModelChange)="onToggle(gateway)"
-          [disabled]="isOs() && !gateway.public"
+          [disabled]="!interface.packageId() && !gateway.public"
         />
       </label>
     } @empty {
@@ -54,8 +61,39 @@ import { InterfaceGateway } from './interface.service'
   ],
 })
 export class InterfaceGatewaysComponent {
-  readonly gateways = input.required<InterfaceGateway[] | undefined>()
-  readonly isOs = input.required<boolean>()
+  private readonly loader = inject(LoadingService)
+  private readonly errorService = inject(ErrorService)
+  private readonly api = inject(ApiService)
+  readonly interface = inject(InterfaceComponent)
 
-  async onToggle(gateway: InterfaceGateway) {}
+  readonly gateways = input.required<InterfaceGateway[] | undefined>()
+
+  async onToggle(gateway: InterfaceGateway) {
+    const addressInfo = this.interface.value()!.addressInfo
+    const pkgId = this.interface.packageId()
+
+    const loader = this.loader.open().subscribe()
+
+    try {
+      if (pkgId) {
+        await this.api.pkgBindingToggleGateway({
+          gateway: gateway.id,
+          enabled: !gateway.enabled,
+          internalPort: addressInfo.internalPort,
+          host: addressInfo.hostId,
+          package: pkgId,
+        })
+      } else {
+        await this.api.serverBindingToggleGateway({
+          gateway: gateway.id,
+          enabled: !gateway.enabled,
+          internalPort: 80,
+        })
+      }
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
 }

web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts

@@ -11,10 +11,7 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
   selector: 'service-interface',
   template: `
     <div>
-      <section
-        [gateways]="value()?.gateways"
-        [isOs]="!!value()?.isOs"
-      ></section>
+      <section [gateways]="value()?.gateways"></section>
       <section [publicDomains]="value()?.publicDomains"></section>
       <section [torDomains]="value()?.torDomains"></section>
       <section [privateDomains]="value()?.privateDomains"></section>

web/projects/ui/src/app/routes/portal/components/interfaces/interface.service.ts

@@ -488,7 +488,6 @@ export type MappedServiceInterface = T.ServiceInterface & {
     common: DisplayAddress[]
     uncommon: DisplayAddress[]
   }
-  isOs: boolean
 }
 
 export type InterfaceGateway = GatewayPlus & {

web/projects/ui/src/app/routes/portal/routes/services/routes/interface.component.ts

@@ -135,7 +135,6 @@ export default class ServiceInterfaceRoute {
       torDomains: host.onions.map(o => `${o}.onion`),
       publicDomains: getPublicDomains(host.publicDomains, gateways),
       privateDomains: host.privateDomains,
-      isOs: false,
     }
   })
 

web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts

@@ -131,6 +131,13 @@ export default class GatewaysComponent {
             handler: async (input: typeof spec._TYPE) => {
               const loader = this.loader.open('Saving').subscribe()
 
+              console.log('FILE', input.config.value.file)
+
+              console.log(
+                'FILE STRINGIFIED',
+                JSON.stringify(input.config.value.file),
+              )
+
               try {
                 await this.api.addTunnel({
                   name: input.name,

web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts

@@ -98,7 +98,6 @@ export default class StartOsUiComponent {
       torDomains: network.host.onions.map(o => `${o}.onion`),
       publicDomains: getPublicDomains(network.host.publicDomains, gateways),
       privateDomains: network.host.privateDomains,
-      isOs: true,
     }
   })
 }

web/projects/ui/src/app/services/api/api.types.ts

@@ -325,7 +325,10 @@ export namespace RR {
   }
   export type OsUiRemovePrivateDomainRes = null
 
-  export type PkgBindingToggleGatewayReq = ServerBindingToggleGatewayReq & {
+  export type PkgBindingToggleGatewayReq = Omit<
+    ServerBindingToggleGatewayReq,
+    'internalPort'
+  > & {
     // package.host.binding.set-gateway-enabled
     internalPort: number
     package: T.PackageId // string