diff --git a/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts b/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts index dea27e84e..f7a385a86 100644 --- a/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts +++ b/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts @@ -65,7 +65,7 @@ import { TunnelData, WgServer } from 'src/app/services/patch-db/data-model' @for (device of devices(); track $index) { {{ device.name }} - {{ device.subnetName }} + {{ device.subnet.name }} {{ device.ip }} @@ -156,7 +156,11 @@ import { TunnelData, WgServer } from 'src/app/services/patch-db/data-model' /> } } - + @@ -252,8 +256,10 @@ export default class Devices { protected readonly devices = computed(() => this.subnets().flatMap(subnet => Object.entries(subnet.clients).map(([ip, { name }]) => ({ - subnet: subnet.range, - subnetName: subnet.name, + subnet: { + name: subnet.name, + range: subnet.range, + }, ip, name, })), @@ -269,7 +275,7 @@ export default class Devices { protected readonly mobile = inject(TUI_IS_MOBILE) protected readonly form = inject(NonNullableFormBuilder).group({ name: ['', Validators.required], - subnet: [{} as MappedSubnet, Validators.required], + subnet: [{} as MappedDevice['subnet'], Validators.required], ip: ['', Validators.required], }) @@ -279,9 +285,9 @@ export default class Devices { this.dialog.set(true) } - protected onEdit(name: string): void { + protected onEdit(device: MappedDevice): void { this.editing.set(true) - this.form.reset({ name }) + this.form.reset(device) this.dialog.set(true) } @@ -319,7 +325,10 @@ export default class Devices { .subscribe(async () => { const loader = this.loading.open().subscribe() try { - await this.api.deleteDevice({ subnet: device.subnet, ip: device.ip }) + await this.api.deleteDevice({ + subnet: device.subnet.range, + ip: device.ip, + }) } catch (e) { console.log(e) } finally { @@ -337,8 +346,10 @@ type MappedSubnet = { } type MappedDevice = { - subnet: string - subnetName: string + subnet: { + name: string + range: string + } ip: string name: string } diff --git a/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts b/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts index 49f083d39..c632c025a 100644 --- a/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts +++ b/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts @@ -63,7 +63,7 @@ import { TunnelData } from 'src/app/services/patch-db/data-model' tuiOption iconStart="@tui.pencil" new - (click)="onEdit(subnet.name)" + (click)="onEdit(subnet)" > Rename @@ -102,7 +102,11 @@ import { TunnelData } from 'src/app/services/patch-db/data-model' [error]="[] | tuiFieldError | async" /> } - + `, @@ -130,7 +134,7 @@ export default class Subnets { protected readonly dialog = signal(false) protected readonly editing = signal(false) - protected readonly subnets = toSignal( + protected readonly subnets = toSignal( this.patch.watch$('wg', 'subnets').pipe( map(s => Object.entries(s).map(([range, info]) => ({ @@ -165,9 +169,9 @@ export default class Subnets { this.dialog.set(true) } - protected onEdit(name: string): void { + protected onEdit(subnet: MappedSubnet): void { this.editing.set(true) - this.form.reset({ name }) + this.form.reset({ subnet: subnet.range, name: subnet.name }) this.dialog.set(true) } @@ -212,3 +216,9 @@ export default class Subnets { }) } } + +type MappedSubnet = { + range: string + name: string + hasClients: boolean +} diff --git a/web/projects/start-tunnel/src/app/services/api/mock-api.service.ts b/web/projects/start-tunnel/src/app/services/api/mock-api.service.ts index 1db31fe51..a7d84eae7 100644 --- a/web/projects/start-tunnel/src/app/services/api/mock-api.service.ts +++ b/web/projects/start-tunnel/src/app/services/api/mock-api.service.ts @@ -46,7 +46,6 @@ export class MockApiService extends ApiService { openWebsocket$(guid: string): WebSocketSubject { return this.mockWsSource$.pipe( - tap(v => console.log('MOCK WS', v)), shareReplay({ bufferSize: 1, refCount: true }), ) as WebSocketSubject } @@ -80,7 +79,7 @@ export class MockApiService extends ApiService { const patch: AddOperation[] = [ { op: PatchOp.ADD, - path: `/wg/subnets/${params.subnet}`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}`, value: { name: params.name, clients: {} }, }, ] @@ -95,7 +94,7 @@ export class MockApiService extends ApiService { const patch: ReplaceOperation[] = [ { op: PatchOp.REPLACE, - path: `/wg/subnets/${params.subnet}/name`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}/name`, value: params.name, }, ] @@ -110,7 +109,7 @@ export class MockApiService extends ApiService { const patch: RemoveOperation[] = [ { op: PatchOp.REMOVE, - path: `/wg/subnets/${params.subnet}`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}`, }, ] this.mockRevision(patch) @@ -124,7 +123,7 @@ export class MockApiService extends ApiService { const patch: AddOperation[] = [ { op: PatchOp.ADD, - path: `/wg/subnets/${params.subnet}/clients/${params.ip}`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}/clients/${params.ip}`, value: { name: params.name }, }, ] @@ -139,7 +138,7 @@ export class MockApiService extends ApiService { const patch: ReplaceOperation[] = [ { op: PatchOp.REPLACE, - path: `/wg/subnets/${params.subnet}/clients/${params.ip}/name`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}/clients/${params.ip}/name`, value: params.name, }, ] @@ -154,7 +153,7 @@ export class MockApiService extends ApiService { const patch: RemoveOperation[] = [ { op: PatchOp.REMOVE, - path: `/wg/subnets/${params.subnet}/clients/${params.ip}`, + path: `/wg/subnets/${replaceSlashes(params.subnet)}/clients/${params.ip}`, }, ] this.mockRevision(patch) @@ -199,3 +198,7 @@ export class MockApiService extends ApiService { this.mockWsSource$.next(revision) } } + +function replaceSlashes(val: string) { + return val.replace(new RegExp('/', 'g'), '~1') +}