mirror of
https://github.com/speatzle/nfsense.git
synced 2025-05-11 19:08:20 +00:00
Use Tableview for Rule Pages
This commit is contained in:
parent
ddc17caba5
commit
d4741c933f
3 changed files with 66 additions and 21 deletions
|
@ -2,6 +2,9 @@
|
|||
import { apiCall } from "../../api";
|
||||
|
||||
let rules = $ref([]);
|
||||
let loading = $ref(false);
|
||||
let selection = $ref([] as number[]);
|
||||
|
||||
const columns = [
|
||||
{heading: 'Name', path: 'name'},
|
||||
{heading: 'Source', path: 'match.source_addresses'},
|
||||
|
@ -11,27 +14,39 @@ const columns = [
|
|||
{heading: 'Comment', path: 'comment'},
|
||||
];
|
||||
|
||||
async function loadRules(){
|
||||
async function load(){
|
||||
let res = await apiCall("Firewall.GetDestinationNATRules", {});
|
||||
if (res.Error === null) {
|
||||
rules = res.Data.DestinationNATRules;
|
||||
rules = res.Data.destination_nat_rules;
|
||||
console.debug("rules", rules);
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(){
|
||||
let res = await apiCall("Firewall.DeleteDestinationNATRule", {index: selection[0]});
|
||||
if (res.Error === null) {
|
||||
console.debug("deleted rule");
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
load();
|
||||
}
|
||||
|
||||
onMounted(async() => {
|
||||
loadRules();
|
||||
load();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader title="DNAT Rules">
|
||||
<button @click="loadRules">Load Rules</button>
|
||||
</PageHeader>
|
||||
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
|
||||
<TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
|
||||
<button @click="load">Refresh</button>
|
||||
<button @click="load">Create</button>
|
||||
<button @click="load" :disabled="selection.length != 1">Edit</button>
|
||||
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
|
||||
</TableView>
|
||||
</div>
|
||||
</template>
|
|
@ -2,6 +2,9 @@
|
|||
import { apiCall } from "../../api";
|
||||
|
||||
let rules = $ref([]);
|
||||
let loading = $ref(false);
|
||||
let selection = $ref([] as number[]);
|
||||
|
||||
const columns = [
|
||||
{heading: 'Name', path: 'name'},
|
||||
{heading: 'Source', path: 'match.source_addresses'},
|
||||
|
@ -12,27 +15,39 @@ const columns = [
|
|||
{heading: 'Comment', path: 'comment'},
|
||||
];
|
||||
|
||||
async function loadRules(){
|
||||
async function load(){
|
||||
let res = await apiCall("Firewall.GetForwardRules", {});
|
||||
if (res.Error === null) {
|
||||
rules = res.Data.ForwardRules;
|
||||
rules = res.Data.forward_rules;
|
||||
console.debug("rules", rules);
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(){
|
||||
let res = await apiCall("Firewall.DeleteForwardRule", {index: selection[0]});
|
||||
if (res.Error === null) {
|
||||
console.debug("deleted rule");
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
load();
|
||||
}
|
||||
|
||||
onMounted(async() => {
|
||||
loadRules();
|
||||
load();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader title="Forward Rules">
|
||||
<button @click="loadRules">Load Rules</button>
|
||||
</PageHeader>
|
||||
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
|
||||
<TableView title="Forward Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
|
||||
<button @click="load">Refresh</button>
|
||||
<button @click="load">Create</button>
|
||||
<button @click="load" :disabled="selection.length != 1">Edit</button>
|
||||
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
|
||||
</TableView>
|
||||
</div>
|
||||
</template>
|
|
@ -2,6 +2,9 @@
|
|||
import { apiCall } from "../../api";
|
||||
|
||||
let rules = $ref([]);
|
||||
let loading = $ref(false);
|
||||
let selection = $ref([] as number[]);
|
||||
|
||||
const columns = [
|
||||
{heading: 'Name', path: 'name'},
|
||||
{heading: 'Source', path: 'match.source_addresses'},
|
||||
|
@ -11,27 +14,39 @@ const columns = [
|
|||
{heading: 'Comment', path: 'comment'},
|
||||
];
|
||||
|
||||
async function loadRules(){
|
||||
async function load(){
|
||||
let res = await apiCall("Firewall.GetSourceNATRules", {});
|
||||
if (res.Error === null) {
|
||||
rules = res.Data.SourceNATRules;
|
||||
rules = res.Data.source_nat_rules;
|
||||
console.debug("rules", rules);
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(){
|
||||
let res = await apiCall("Firewall.DeleteSourceNATRule", {index: selection[0]});
|
||||
if (res.Error === null) {
|
||||
console.debug("deleted rule");
|
||||
} else {
|
||||
console.debug("error", res);
|
||||
}
|
||||
load();
|
||||
}
|
||||
|
||||
onMounted(async() => {
|
||||
loadRules();
|
||||
load();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader title="SNAT Rules">
|
||||
<button @click="loadRules">Load Rules</button>
|
||||
</PageHeader>
|
||||
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/>
|
||||
<TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
|
||||
<button @click="load">Refresh</button>
|
||||
<button @click="load">Create</button>
|
||||
<button @click="load" :disabled="selection.length != 1">Edit</button>
|
||||
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
|
||||
</TableView>
|
||||
</div>
|
||||
</template>
|
Loading…
Add table
Reference in a new issue