Move types to definitions.ts, minor improvements

This commit is contained in:
Samuel Lorch 2023-04-02 18:57:30 +02:00
parent f91132f200
commit ffe2bf1880
3 changed files with 38 additions and 62 deletions

27
client/src/definitions.ts Normal file
View file

@ -0,0 +1,27 @@
import PillBar from "./components/inputs/PillBar.vue";
import TextBox from "./components/inputs/TextBox.vue";
import MultilineTextBox from "./components/inputs/MultilineTextBox.vue";
import CheckBox from "./components/inputs/CheckBox.vue";
export const editTypes: { [key: string]: {[key: string]: any} } = {
"firewall": {
"forwardrules": {
title: "Forward Rule",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
{key: "counter", label: "Counter", component: () => CheckBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
"network": {
"interfaces": {
title: "Interfaces",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
};

View file

@ -1,35 +1,10 @@
<script setup lang="ts">
import PillBar from "../../../../components/inputs/PillBar.vue";
import TextBox from "../../../../components/inputs/TextBox.vue";
import MultilineTextBox from "../../../../components/inputs/MultilineTextBox.vue";
import CheckBox from "../../../../components/inputs/CheckBox.vue";
import { editTypes } from "../../../../definitions";
const props = $defineProps<{subsystem: string, entity: string, id: string}>();
const { subsystem, entity, id } = $(props);
const editTypes: { [key: string]: {[key: string]: any} } = {
"firewall": {
"forwardrules": {
title: "Forward Rule",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
{key: "counter", label: "Counter", component: () => CheckBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
"network": {
"interfaces": {
title: "Interfaces",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
};
async function update() {
}
@ -41,10 +16,10 @@ async function update() {
<button @click="update">Update</button>
<button @click="$router.go(-1)">Discard</button>
</PageHeader>
{{ subsystem }} {{ entity }} {{ id }}
<NiceForm class="scroll cl-secondary" title="Test" :fields="editTypes[subsystem][entity].fields"/>
<NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
</div>
<div v-else>
No edit for this Entity
<PageHeader title="Error"/>
No editType for this Entity
</div>
</template>

View file

@ -1,50 +1,24 @@
<script setup lang="ts">
import PillBar from "../../../../components/inputs/PillBar.vue";
import TextBox from "../../../../components/inputs/TextBox.vue";
import MultilineTextBox from "../../../../components/inputs/MultilineTextBox.vue";
import CheckBox from "../../../../components/inputs/CheckBox.vue";
import { editTypes } from "../../../../definitions";
const props = $defineProps<{subsystem: string, entity: string}>();
const { subsystem, entity } = $(props);
const createTypes: { [key: string]: {[key: string]: any} } = {
"firewall": {
"forwardrules": {
title: "Forward Rule",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
{key: "counter", label: "Counter", component: () => CheckBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
"network": {
"interfaces": {
title: "Interfaces",
fields: [
{key: "name", label: "Name", component: () => TextBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
],
}
},
};
async function create() {
}
</script>
<template>
<div v-if="createTypes[subsystem][entity]">
<PageHeader :title="'Edit ' + createTypes[subsystem][entity].title">
<div v-if="editTypes[subsystem][entity]">
<PageHeader :title="'Edit ' + editTypes[subsystem][entity].title">
<button @click="create">Create</button>
<button @click="$router.go(-1)">Discard</button>
</PageHeader>
{{ subsystem }} {{ entity }}
<NiceForm class="scroll cl-secondary" title="Test" :fields="createTypes[subsystem][entity].fields"/>
<NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
</div>
<div v-else>
No create for this Entity
<PageHeader title="Error"/>
No editType for this Entity
</div>
</template>