jamie/ipam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 28 Wiki Activity

refactor: 🎨 use a modal for dhcp config

Browse Source
This commit is contained in:
Jamie
2026-05-23 18:12:34 +00:00
parent 31e417b9f5
commit 39a8f4a49b
4 changed files with 168 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DhcpView.vue
-51
View File
@@ -1,51 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, RouterLink } from "vue-router";
import { api } from "@/api";
const route = useRoute();
const pool = ref<{ start_ip?: string; end_ip?: string; excluded_ips?: string } | null>(null);
const form = ref({ start_ip: "", end_ip: "", excluded_ips: "" });
const msg = ref("");
onMounted(async () => {
try {
const d = await api.getDhcp(Number(route.params.id)) as { pools?: { start_ip: string; end_ip: string; excluded_ips?: string }[] };
if (d.pools?.[0]) {
pool.value = d.pools[0];
form.value.start_ip = d.pools[0].start_ip;
form.value.end_ip = d.pools[0].end_ip;
form.value.excluded_ips = d.pools[0].excluded_ips || "";
}
} catch { /* no pool */ }
});
async function save() {
await api.setDhcp(Number(route.params.id), {
pools: [{ start_ip: form.value.start_ip, end_ip: form.value.end_ip, excluded_ips: form.value.excluded_ips.split(",").map((s) => s.trim()).filter(Boolean) }],
});
msg.value = "Saved";
}
async function remove() {
await api.setDhcp(Number(route.params.id), { remove: true });
pool.value = null;
msg.value = "Removed";
}
</script>
<template>
<div>
<RouterLink :to="`/subnets/${route.params.id}`" class="text-sm text-accent hover:underline">← Subnet</RouterLink>
<h1 class="mt-4 text-2xl font-bold">DHCP pool</h1>
<form class="card mt-6 max-w-lg space-y-4" @submit.prevent="save">
<input v-model="form.start_ip" class="input-field" placeholder="Start IP" required />
<input v-model="form.end_ip" class="input-field" placeholder="End IP" required />
<input v-model="form.excluded_ips" class="input-field" placeholder="Excluded IPs (comma-separated)" />
<div class="flex gap-2">
<button type="submit" class="btn-primary">Save</button>
<button v-if="pool" type="button" class="btn-secondary" @click="remove">Remove pool</button>
</div>
<p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
</form>
</div>
</template>
frontend/src/views/SubnetDetailView.vue
+15 -3
View File
@@ -4,15 +4,19 @@ import { useRoute, RouterLink } from "vue-router";
import { api, type Subnet } from "@/api";
import { useAuthStore } from "@/stores/auth";
import IpHistoryModal from "@/components/IpHistoryModal.vue";
import DhcpModal from "@/components/DhcpModal.vue";
const route = useRoute();
const auth = useAuthStore();
const subnet = ref<Subnet | null>(null);
const historyIp = ref<string | null>(null);
const showDhcp = ref(false);
onMounted(async () => {
async function loadSubnet() {
subnet.value = await api.subnet(Number(route.params.id));
});
}
onMounted(loadSubnet);
async function saveNotes(ipId: number, notes: string) {
await api.patchIpNotes(ipId, notes);
@@ -27,7 +31,14 @@ async function saveNotes(ipId: number, notes: string) {
<p class="font-mono text-slate-500">{{ subnet.cidr }} · {{ subnet.site || "Unassigned" }}</p>
</div>
<div class="flex gap-2">
<RouterLink :to="`/subnets/${subnet.id}/dhcp`" class="btn-secondary text-sm">DHCP</RouterLink>
<button
v-if="auth.can('view_dhcp') || auth.can('configure_dhcp')"
type="button"
class="btn-secondary text-sm"
@click="showDhcp = true"
>
DHCP
</button>
<a v-if="auth.can('export_subnet_csv')" :href="`/api/v2/subnets/${subnet.id}/export`" class="btn-secondary text-sm">Export CSV</a>
</div>
</div>
@@ -65,5 +76,6 @@ async function saveNotes(ipId: number, notes: string) {
</table>
</div>
<IpHistoryModal :ip="historyIp" @close="historyIp = null" />
<DhcpModal :open="showDhcp" :subnet-id="subnet.id" @close="showDhcp = false" @saved="loadSubnet" />
</div>
</template>