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')
+}
|