speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 19:08:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Samuel Lorch 2023-04-02 22:07:11 +02:00
parent 2fb089ba73
commit 232670f161
4 changed files with 40 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/NiceForm.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { loadConfigFromFile } from 'vite';
const props = defineModel<{ const props = defineModel<{
title: string title: string
@ -7,18 +9,45 @@ const props = defineModel<{
label: string, label: string,
component: () => Component, component: () => Component,
props: any, props: any,
default: any,
if?: () => boolean,
}[] }[]
modelValue: any,
}>(); }>();
let { title, fields } = $(props);
let { title, fields, modelValue } = $(props);
let enabled = $ref({name: true} as any);
const emit = defineEmits<{
(event: 'update:modelValue'): void,
(event: 'update:enabled'): void
}>();
onMounted(async() => {
for (const field of fields) {
if (modelValue[field.key] == undefined) {
if (!field.default) {
modelValue[field.key] = {};
} else {
modelValue[field.key] = field.default;
}
enabled[field.key] = true;
}
}
console.log("modelValue", modelValue, enabled);
});
</script> </script>
<template> <template>
<div class="form"> <div class="form">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
<template v-for="(field, index) in fields" :key="index"> <template v-for="(field, index) in fields" :key="index">
<label :for="field.key" v-text="field.label"/> <template v-if="enabled[field.key]">
<component :name="field.key" :is="field.component()" v-bind="field.props"/> <label :for="field.key" v-text="field.label"/>
<component :name="field.key" :is="field.component()" v-bind="field.props" v-model="modelValue[field.key]"/>
</template>
</template> </template>
</div> </div>
</template> </template>

4
client/src/definitions.ts
View file

@ -20,11 +20,11 @@ export const editTypes: { [key: string]: {[key: string]: any} } = {
"interfaces": { "interfaces": {
title: "Interfaces", title: "Interfaces",
fields: [ fields: [
{key: "name", label: "Name", component: () => TextBox }, {key: "name", label: "Name", component: () => TextBox, default: "placeholder"},
{key: "type", label: "Type", component: () => PillBar, props: {options: [{name: 'Hardware', selected: true}, {name: 'VLAN'}, {name: 'Bond'}, {name: 'Brdige'}]}}, {key: "type", label: "Type", component: () => PillBar, props: {options: [{name: 'Hardware', selected: true}, {name: 'VLAN'}, {name: 'Bond'}, {name: 'Brdige'}]}},
{key: "hardware_interface", label: "Hardware Interface", component: () => TextBox }, {key: "hardware_interface", label: "Hardware Interface", component: () => TextBox },
{key: "vlan_id", label: "VLAN ID", component: () => NumberBox, props: {min: 1, max: 4094} }, {key: "vlan_id", label: "VLAN ID", component: () => NumberBox, props: {min: 1, max: 4094} },
{key: "bond_members", label: "Nond Members", component: () => TextBox }, {key: "bond_members", label: "Bond Members", component: () => TextBox, if: () => true },
{key: "bridge_members", label: "Bridge Memebers", component: () => TextBox }, {key: "bridge_members", label: "Bridge Memebers", component: () => TextBox },
{key: "addressing_mode", label: "Addressing Mode", component: () => PillBar, props: {options: [{name: 'None', selected: true}, {name: 'Static'}, {name: 'DHCP'}]}}, {key: "addressing_mode", label: "Addressing Mode", component: () => PillBar, props: {options: [{name: 'None', selected: true}, {name: 'Static'}, {name: 'DHCP'}]}},
{key: "address", label: "Address", component: () => TextBox }, {key: "address", label: "Address", component: () => TextBox },

4
client/src/pages/edit/[subsystem]/[entity]/[id].vue
View file

@ -5,6 +5,8 @@ import { editTypes } from "../../../../definitions";
const props = $defineProps<{subsystem: string, entity: string, id: string}>(); const props = $defineProps<{subsystem: string, entity: string, id: string}>();
const { subsystem, entity, id } = $(props); const { subsystem, entity, id } = $(props);
let data = $ref({} as {});
async function update() { async function update() {
} }
@ -16,7 +18,7 @@ async function update() {
<button @click="update">Update</button> <button @click="update">Update</button>
<button @click="$router.go(-1)">Discard</button> <button @click="$router.go(-1)">Discard</button>
</PageHeader> </PageHeader>
<NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/> <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields" v-model="data"/>
</div> </div>
<div v-else> <div v-else>
<PageHeader title="Error"/> <PageHeader title="Error"/>

4
client/src/pages/edit/[subsystem]/[entity]/index.vue
View file

@ -4,6 +4,8 @@ import { editTypes } from "../../../../definitions";
const props = $defineProps<{subsystem: string, entity: string}>(); const props = $defineProps<{subsystem: string, entity: string}>();
const { subsystem, entity } = $(props); const { subsystem, entity } = $(props);
let data = $ref({});
async function create() { async function create() {
} }
@ -15,7 +17,7 @@ async function create() {
<button @click="create">Create</button> <button @click="create">Create</button>
<button @click="$router.go(-1)">Discard</button> <button @click="$router.go(-1)">Discard</button>
</PageHeader> </PageHeader>
<NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/> <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields" v-model="data"/>
</div> </div>
<div v-else> <div v-else>
<PageHeader title="Error"/> <PageHeader title="Error"/>