opensignalbox-interface 0.1.0__py3-none-any.whl

opensignalbox/interface/web_ui/src/views/interfaces/basicio/BasicIOInterfaceEdit.vue

@@ -0,0 +1,795 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { 
+    Card, 
+    CardContent, 
+    CardDescription, 
+    CardHeader, 
+    CardTitle 
+} from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@/components/ui/number-field'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Collapsible,
+  CollapsibleContent,
+} from '@/components/ui/collapsible'
+import { 
+    TagsInput, 
+    TagsInputInput, 
+    TagsInputItem, 
+    TagsInputItemDelete, 
+    TagsInputItemText 
+} from '@/components/ui/tags-input'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from '@/components/ui/sheet'
+import { ChevronDown, ChevronLeft, ChevronUp, Search } from 'lucide-vue-next'
+import SharedVariablePicker from '@/components/SharedVariablePicker.vue'
+import { reactive, computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useForm } from '@tanstack/vue-form';
+import { useQuery } from '@tanstack/vue-query';
+import axios from 'axios'
+import { z } from 'zod'
+
+const route = useRoute()
+const router = useRouter()
+
+const maxChannelCount = 128
+
+type InputMapping = {
+    channel: number
+    systemName: string
+    userName: string
+    description: string
+    tags: string[]
+    defaultValue: boolean
+}
+
+type OutputMapping = {
+    channel: number
+    sharedVariableName: string
+}
+
+type interfaceData = {
+    systemName: string
+    userName: string
+    description: string
+    connectionType: string
+    adapterName: string
+    address: number
+    inputStartAddress: number
+    inputBits: number
+    inputByteSwap: boolean
+    inputWordSwap: boolean
+    outputStartAddress: number
+    outputBits: number
+    outputByteSwap: boolean
+    outputWordSwap: boolean
+    inputMap: InputMapping[]
+    outputMap: OutputMapping[]
+}
+
+const connectionTypes = {
+    ModbusAdapter: {
+        key: 'ModbusAdapter',
+        displayName: 'Modbus',
+        adapterType: 'Modbus'
+    },
+    DingtianModbusAdapter: {
+        key: 'DingtianModbusAdapter',
+        displayName: 'Dingtian Modbus',
+        adapterType: 'Modbus'
+    }
+} as const
+
+// Extract just the keys for the enum values
+const connectionTypeEnum = Object.fromEntries(
+    Object.entries(connectionTypes).map(([key, config]) => [key, config.key])
+) as Record<keyof typeof connectionTypes, string>
+
+const interfaceQuery = useQuery({
+    queryKey: ['interface', route.params.name],
+    queryFn: async () => axios.get(location.origin + "/api/interfaces/basicio/" + route.params.name),
+    select: (response): interfaceData => response.data,
+    enabled: "name" in route.params
+});
+
+function initInputMap(values: InputMapping[]): InputMapping[] {
+    const out: InputMapping[] = [...values]
+    for (let i=values.length; i<maxChannelCount; i++) {
+        out.push({channel: i+1, systemName:"", userName:"", description:"", tags:[], "defaultValue": false})
+    }
+    return out
+}
+
+function initOutputMap(values: OutputMapping[]): OutputMapping[] {
+    const out: OutputMapping[] = [...values]
+    for (let i=values.length; i<maxChannelCount; i++) {
+        out.push({channel: i+1, sharedVariableName: ""})
+    }
+    return out
+}
+
+function initInputMappingIsOpen() {
+    const out: boolean[] = []
+    for (let i=0; i<maxChannelCount; i++) {
+        out.push(false)
+    }
+    return out
+}
+
+const systemName = computed(() => interfaceQuery.data.value?.systemName || "")
+const userName = computed(() => interfaceQuery.data.value?.userName || "")
+const description = computed(() => interfaceQuery.data.value?.description || "")
+const connectionType = computed(() => interfaceQuery.data.value?.connectionType || connectionTypeEnum.ModbusAdapter)
+const adapterName = computed(() => interfaceQuery.data.value?.adapterName || "")
+const address = computed(() => interfaceQuery.data.value?.address || 0)
+const inputStartAddress = computed(() => interfaceQuery.data.value?.inputStartAddress || 0)
+const inputBits = computed(() => interfaceQuery.data.value?.inputBits || 0)
+const inputByteSwap = computed(() => interfaceQuery.data.value?.inputByteSwap || false)
+const inputWordSwap = computed(() => interfaceQuery.data.value?.inputWordSwap || false)
+const outputStartAddress = computed(() => interfaceQuery.data.value?.outputStartAddress || 0)
+const outputBits = computed(() => interfaceQuery.data.value?.outputBits || 0)
+const outputByteSwap = computed(() => interfaceQuery.data.value?.outputByteSwap || false)
+const outputWordSwap = computed(() => interfaceQuery.data.value?.outputWordSwap || false)
+const inputMap = computed(() => initInputMap(interfaceQuery.data.value?.inputMap || []))
+const outputMap = computed(() => initOutputMap(interfaceQuery.data.value?.outputMap || []))
+
+type adapterData = {
+    systemName: string
+    userName: string
+    adapterType: string
+}
+
+const adapterQuery = useQuery({
+    queryKey: ['adapters', connectionType.value],
+    queryFn: async () => axios.get(location.origin + "/api/adapters"),
+    select: (response) => {
+        const connectionConfig = connectionTypes[connectionType.value as keyof typeof connectionTypes];
+        if (!connectionConfig) return [];
+        return response.data.filter((adapter: adapterData) => adapter.adapterType === connectionConfig.adapterType);
+    }
+});
+
+const defaultValues = reactive({
+    systemName,
+    userName,
+    description,
+    connectionType,
+    adapterName,
+    address,
+    inputStartAddress,
+    inputBits,
+    inputByteSwap,
+    inputWordSwap,
+    outputStartAddress,
+    outputBits,
+    outputByteSwap,
+    outputWordSwap,
+    inputMap,
+    outputMap
+});
+
+const form = useForm<Partial<interfaceData>>({
+    defaultValues,
+    onSubmit: async ({ value }) => {
+        // Do something with form data
+        value.inputMap = value.inputMap?.slice(0, value.inputBits)
+        value.outputMap = value.outputMap?.slice(0, value.outputBits)
+        
+        try {
+            if (route.params.name) {
+                axios.patch(location.origin + "/api/interfaces/basicio/" + route.params.name, value)
+            } else {
+                axios.post(location.origin + "/api/interfaces/basicio/", value)
+            }
+
+            // Navigate back to overview
+            router.push("/")
+        } catch (error) {
+            console.error('Failed to save interface:', error)
+            // TODO: Show error message to user
+            alert('Failed to save interface')
+        }
+    },
+});
+
+const inputBitsState = form.useStore((state) => state.values.inputBits)
+const outputBitsState = form.useStore((state) => state.values.outputBits)
+const inputMappingIsOpen = ref(initInputMappingIsOpen())
+
+const outputPickerOpen = ref(false)
+const editingOutput = ref(0)
+
+function updateOutputMapping(variable: string) {
+    form.setFieldValue(`outputMap[${editingOutput.value}].sharedVariableName`, variable)
+    outputPickerOpen.value = false
+}
+
+</script>
+
+<template>
+    <div class="w-full">
+        <p v-if="interfaceQuery.isLoading.value">Loading..</p>
+        <form v-else @submit.prevent.stop="form.handleSubmit">
+            <div class="flex items-center gap-4 mb-4">
+                <Button type="button" variant="outline" size="icon" class="h-7 w-7" @click.prevent="$router.back()">
+                    <ChevronLeft class="h-4 w-4" />
+                    <span class="sr-only">Back</span>
+                </Button>
+                <h1 class="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
+                    Interface
+                </h1>
+                <div class="flex items-center gap-2 ml-auto">
+                    <Button type="button" variant="outline" size="sm" @click.prevent="$router.back()">
+                        Discard
+                    </Button>
+                    <Button size="sm">
+                        Save Interface
+                    </Button>
+                </div>
+            </div>
+            <div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:grid-cols-3">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>General Details</CardTitle>
+                        <CardDescription>
+                            Please enter some information about the interface
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="grid gap-6">
+                            <div class="grid gap-3">
+                                <form.Field 
+                                name="systemName"
+                                :validators="{
+                                    onBlur: z
+                                        .string()
+                                        .regex(/^([\da-z-])+$/, 'Name can only include a-z, 0-9, and hyphen.'),
+                                    }"
+                                >
+                                    <template v-slot="{ field }">
+                                        <Label :for="field.name">System Name</Label>
+                                        <Input
+                                            :id="field.name"
+                                            :name="field.name"
+                                            :model-value="field.state.value as string"
+                                            placeholder="Type a name..."
+                                            @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                            @blur="field.handleBlur"
+                                            class="w-full"
+                                            type="text"
+                                        />
+                                        <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                    </template>
+                                </form.Field>
+                                <form.Field 
+                                name="userName"
+                                :validators="{
+                                    onBlur: z
+                                        .string(),
+                                    }"
+                                >
+                                    <template v-slot="{ field }">
+                                        <Label :for="field.name">User Name</Label>
+                                        <Input
+                                            :id="field.name"
+                                            :model-value="field.state.value as string"
+                                            placeholder="Type a name..."
+                                            @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                            @blur="field.handleBlur"
+                                            class="w-full"
+                                            type="text"
+                                        />
+                                        <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                    </template>
+                                </form.Field>
+                                <form.Field 
+                                name="description"
+                                :validators="{
+                                    onBlur: z
+                                        .string()
+                                    }"
+                                >
+                                    <template v-slot="{ field }">
+                                        <Label :for="field.name">Description</Label>
+                                        <Input
+                                            :id="field.name"
+                                            :model-value="field.state.value as string"
+                                            placeholder="Enter a description..."
+                                            @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                            @blur="field.handleBlur"
+                                            class="w-full"
+                                            type="text"
+                                        />
+                                        <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                    </template>
+                                </form.Field>
+                                <form.Field
+                                name="connectionType"
+                                >
+                                    <template v-slot="{ field }">
+                                        <Label :for="field.name">Connection Type</Label>
+                                        <Select 
+                                            :id="field.name" 
+                                            :model-value="field.state.value as string"
+                                            @update:modelValue="(newValue: string) => field.handleChange(newValue)"
+                                            @blur="field.handleBlur"
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Select connection type..." />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectGroup>
+                                                    <SelectItem v-for="(value, key) in connectionTypeEnum" :key="key" :value="value">
+                                                        {{ connectionTypes[key as keyof typeof connectionTypes].displayName }}
+                                                    </SelectItem>
+                                                </SelectGroup>
+                                            </SelectContent>
+                                        </Select>
+                                        <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                    </template>
+
+                                </form.Field>
+                                <form.Field 
+                                name="adapterName"
+                                :validators="{
+                                    onChange: z
+                                        .string({ required_error: 'Must provide adapter name!' })
+                                    }"
+                                >
+                                    <template v-slot="{ field }">
+                                        <Label :for="field.name">Adapter User Name</Label>
+                                        <Select 
+                                            :id="field.name" 
+                                            :model-value="field.state.value as string"
+                                            @update:modelValue="(newValue: string) => field.handleChange(newValue)"
+                                            @blur="field.handleBlur"
+                                        >
+                                            <FormControl>
+                                                <SelectTrigger>
+                                                    <SelectValue placeholder="Select an adapter..." />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectGroup>
+                                                    <SelectItem v-for="adapter in adapterQuery.data?.value" :value="adapter.systemName">
+                                                        {{ adapter.userName }}
+                                                    </SelectItem>
+                                                </SelectGroup>
+                                            </SelectContent>
+                                        </Select>
+                                        <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                    </template>
+                                </form.Field>
+                                <form.Field 
+                                name="address"
+                                :validators="{
+                                    onBlur: z
+                                        .number()
+                                    }"
+                                >
+                                    <template v-slot="{ field }">
+                                        <NumberField 
+                                            :id="field.name" 
+                                            :model-value="field.state.value as number"
+                                            @update:modelValue="(newValue: number) => field.handleChange(newValue)"
+                                            @blur="field.handleBlur"
+                                            class="max-w-40"
+                                            :min="0"
+                                            :max="247"
+                                        >
+                                            <Label>Address</Label>
+                                            <NumberFieldContent>
+                                            <NumberFieldDecrement />
+                                            <NumberFieldInput />
+                                            <NumberFieldIncrement />
+                                            </NumberFieldContent>
+                                        </NumberField>
+                                        <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                    </template>
+                                </form.Field>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Input Configuration</CardTitle>
+                        <CardDescription>
+                            Please define the variables that the inputs will update.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="grid gap-3">
+                            <form.Field 
+                            name="inputBits"
+                            :validators="{
+                                onChange: z
+                                    .number()
+                                    .min(0)
+                                    .max(maxChannelCount, `Maximum value is ${maxChannelCount}.`)
+                                }"
+                            >
+                                <template v-slot="{ field }">
+                                    <NumberField 
+                                        :id="field.name" 
+                                        :model-value="field.state.value as number"
+                                        :min="0"
+                                        :max="maxChannelCount"
+                                        @update:modelValue="(newValue: number) => field.handleChange(newValue)"
+                                        @blur="field.handleBlur"
+                                        class="max-w-40"
+                                    >
+                                        <Label>Input Bits</Label>
+                                        <NumberFieldContent>
+                                        <NumberFieldDecrement />
+                                        <NumberFieldInput />
+                                        <NumberFieldIncrement />
+                                        </NumberFieldContent>
+                                    </NumberField>
+                                    <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="inputStartAddress"
+                            :validators="{
+                                onBlur: z
+                                    .number()
+                                }"
+                            >
+                                <template v-slot="{ field }">
+                                    <NumberField 
+                                        :id="field.name" 
+                                        :model-value="field.state.value as number"
+                                        @update:modelValue="(newValue: number) => field.handleChange(newValue)"
+                                        @blur="field.handleBlur"
+                                        class="max-w-40"
+                                        :min="0"
+                                        :max="65535"
+                                    >
+                                        <Label>Input Start Address</Label>
+                                        <NumberFieldContent>
+                                        <NumberFieldDecrement />
+                                        <NumberFieldInput />
+                                        <NumberFieldIncrement />
+                                        </NumberFieldContent>
+                                    </NumberField>
+                                    <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="inputByteSwap">
+                                <template v-slot="{ field }">
+                                    <span>
+                                        <Label :for="field.name">Input Byte Swap:</Label>
+                                        <Checkbox
+                                            :id="field.name"
+                                            :checked="field.state.value as boolean"
+                                            @update:checked="(newValue: boolean) => field.handleChange(newValue)"
+                                            class="ml-2"
+                                        />
+                                    </span>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="inputWordSwap">
+                                <template v-slot="{ field }">
+                                    <span>
+                                        <Label :for="field.name">Input Word Swap:</Label>
+                                        <Checkbox
+                                            :id="field.name"
+                                            :checked="field.state.value as boolean"
+                                            @update:checked="(newValue: boolean) => field.handleChange(newValue)"
+                                            class="ml-2"
+                                        />
+                                    </span>
+                                </template>
+                            </form.Field>
+                        </div>
+                        <form.Field name="inputMap" v-if="inputBitsState && inputBitsState > 0">
+                            <template v-slot="{ field }">
+                                <Table class="mt-4">
+                                    <TableHeader class="border-t">
+                                    <TableRow>
+                                        <TableHead class="w-[100px]">
+                                        Channel
+                                        </TableHead>
+                                        <TableHead>Variable</TableHead>
+                                    </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        <TableRow 
+                                            v-for="(_, i) of (field.state.value as InputMapping[]).slice(0, inputBitsState)" 
+                                            :key="i"
+                                        >
+                                            <TableCell class="font-medium align-top">
+                                                <h1 class="text-lg font-semibold tracking-tight">
+                                                    {{ (field.state.value as InputMapping[])[i].channel }}
+                                                </h1>
+                                            </TableCell>
+                                            <TableCell>
+                                                <div class="flex items-center justify-between">
+                                                    <h1 class="text-lg font-semibold tracking-tight">
+                                                        <span v-html="(field.state.value as InputMapping[])[i].userName ? (field.state.value as InputMapping[])[i].userName : '<em>None</em>'"></span>
+                                                    </h1>
+                                                    <Button type="button" variant="outline" size="icon" class="h-7 w-7 mr-1" @click.prevent="() => inputMappingIsOpen[i] = !inputMappingIsOpen[i]">
+                                                        <ChevronDown v-if="!inputMappingIsOpen[i]" class="h-4 w-4" />
+                                                        <ChevronUp v-else class="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                                <Collapsible v-model:open="inputMappingIsOpen[i]">
+                                                    <CollapsibleContent>
+                                                        <div class="grid gap-3 ml-2 mt-5 p-1">
+                                                            <form.Field 
+                                                            :name="`inputMap[${i}].systemName`"
+                                                            :validators="{
+                                                                onBlur: z
+                                                                    .string()
+                                                                }"
+                                                            >
+                                                                <template v-slot="{ field }">
+                                                                    <Label :for="field.name">System Name</Label>
+                                                                    <Input
+                                                                        :id="field.name"
+                                                                        :name="field.name"
+                                                                        :model-value="field.state.value as string"
+                                                                        placeholder="Type a name..."
+                                                                        @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                                                        @blur="field.handleBlur"
+                                                                        class="w-full"
+                                                                        type="text"
+                                                                    />
+                                                                    <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                                                </template>
+                                                            </form.Field>
+                                                            <form.Field 
+                                                            :name="`inputMap[${i}].userName`"
+                                                            :validators="{
+                                                                onBlur: z
+                                                                    .string()
+                                                                }"
+                                                            >
+                                                                <template v-slot="{ field }">
+                                                                    <Label :for="field.name">User Name</Label>
+                                                                    <Input
+                                                                        :id="field.name"
+                                                                        :name="field.name"
+                                                                        :model-value="field.state.value as string"
+                                                                        placeholder="Type a name..."
+                                                                        @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                                                        @blur="field.handleBlur"
+                                                                        class="w-full"
+                                                                        type="text"
+                                                                    />
+                                                                    <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                                                </template>
+                                                            </form.Field>
+                                                            <form.Field 
+                                                            :name="`inputMap[${i}].description`"
+                                                            :validators="{
+                                                                onBlur: z
+                                                                    .string()
+                                                                }"
+                                                            >
+                                                                <template v-slot="{ field }">
+                                                                    <Label :for="field.name">Description</Label>
+                                                                    <Input
+                                                                        :id="field.name"
+                                                                        :name="field.name"
+                                                                        :model-value="field.state.value as string"
+                                                                        placeholder="Enter a description..."
+                                                                        @input="(e: any) => field.handleChange((e.target as HTMLInputElement).value)"
+                                                                        @blur="field.handleBlur"
+                                                                        class="w-full"
+                                                                        type="text"
+                                                                    />
+                                                                    <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                                                </template>
+                                                            </form.Field>
+                                                            <form.Field 
+                                                            :name="`inputMap[${i}].tags`"
+                                                            >
+                                                            <template v-slot="{ field }">
+                                                                    <Label :for="field.name">Tags</Label>
+                                                                    <TagsInput 
+                                                                        :id="field.name"
+                                                                        :name="field.name"
+                                                                        :model-value="field.state.value as string[]"
+                                                                        @update:model-value="(newValue) => field.handleChange(newValue as string[])"
+                                                                        @blur="field.handleBlur"
+                                                                        class="w-full"
+                                                                    >
+                                                                        <TagsInputItem v-for="item in field.state.value as string[]" :key="item" :value="item">
+                                                                            <TagsInputItemText />
+                                                                            <TagsInputItemDelete />
+                                                                        </TagsInputItem>
+                                                                        <TagsInputInput placeholder="Tags..." />
+                                                                    </TagsInput>
+                                                                    <div role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</div>
+                                                                </template>
+                                                            </form.Field>
+                                                        </div>
+                                                    </CollapsibleContent>
+                                                </Collapsible>
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableBody>
+                                </Table>
+                            </template>
+                        </form.Field>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Output Configuration</CardTitle>
+                        <CardDescription>
+                            Please select the variables that control the outputs.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="grid gap-3">
+                            <form.Field 
+                            name="outputBits"
+                            :validators="{
+                                onBlur: z
+                                    .number()
+                                    .min(0)
+                                    .max(maxChannelCount, `Maximum value is ${maxChannelCount}.`)
+                                }"
+                            >
+                                <template v-slot="{ field }">
+                                    <NumberField 
+                                        :id="field.name" 
+                                        :model-value="field.state.value as number"
+                                        :min="0"
+                                        :max="maxChannelCount"
+                                        @update:modelValue="(newValue: number) => field.handleChange(newValue)"
+                                        @blur="field.handleBlur"
+                                        class="max-w-40"
+                                    >
+                                        <Label>Output Bits</Label>
+                                        <NumberFieldContent>
+                                        <NumberFieldDecrement />
+                                        <NumberFieldInput />
+                                        <NumberFieldIncrement />
+                                        </NumberFieldContent>
+                                    </NumberField>
+                                    <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="outputStartAddress"
+                            :validators="{
+                                onBlur: z
+                                    .number()
+                                }"
+                            >
+                                <template v-slot="{ field }">
+                                    <NumberField 
+                                        :id="field.name" 
+                                        :model-value="field.state.value as number"
+                                        @update:modelValue="(newValue: number) => field.handleChange(newValue)"
+                                        @blur="field.handleBlur"
+                                        class="max-w-40"
+                                        :min="0"
+                                        :max="65535"
+                                    >
+                                        <Label>Output Start Address</Label>
+                                        <NumberFieldContent>
+                                        <NumberFieldDecrement />
+                                        <NumberFieldInput />
+                                        <NumberFieldIncrement />
+                                        </NumberFieldContent>
+                                    </NumberField>
+                                    <em role="alert" v-if="field.state.meta.errors.length">{{ field.state.meta.errors.join(', ') }}</em>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="outputByteSwap">
+                                <template v-slot="{ field }">
+                                    <span>
+                                        <Label :for="field.name">Output Byte Swap:</Label>
+                                        <Checkbox
+                                            :id="field.name"
+                                            :checked="field.state.value as boolean"
+                                            @update:checked="(newValue: boolean) => field.handleChange(newValue)"
+                                            class="ml-2"
+                                        />
+                                    </span>
+                                </template>
+                            </form.Field>
+                            <form.Field 
+                            name="outputWordSwap">
+                                <template v-slot="{ field }">
+                                    <span>
+                                        <Label :for="field.name">Output Word Swap:</Label>
+                                        <Checkbox
+                                            :id="field.name"
+                                            :checked="field.state.value as boolean"
+                                            @update:checked="(newValue: boolean) => field.handleChange(newValue)"
+                                            class="ml-2"
+                                        />
+                                    </span>
+                                </template>
+                            </form.Field>
+                        </div>
+                        <form.Field name="outputMap" v-if="outputBitsState && outputBitsState > 0">
+                            <template v-slot="{ field }">
+                                <Table class="mt-4">
+                                    <TableHeader class="border-t">
+                                    <TableRow>
+                                        <TableHead class="w-[100px]">
+                                        Channel
+                                        </TableHead>
+                                        <TableHead>Variable</TableHead>
+                                    </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        <TableRow v-for="(_, i) of (field.state.value as OutputMapping[]).slice(0, outputBitsState)" :key="i">
+                                            <TableCell class="font-medium align-top">
+                                                <h1 class="text-lg font-semibold tracking-tight">
+                                                    {{ (field.state.value as OutputMapping[])[i].channel }}
+                                                </h1>
+                                            </TableCell>
+                                            <TableCell>
+                                                <div class="flex items-center justify-between">
+                                                    <h1 class="text-lg font-semibold tracking-tight">
+                                                        <span v-html="(field.state.value as OutputMapping[])[i].sharedVariableName ? (field.state.value as OutputMapping[])[i].sharedVariableName : '<em>None</em>'"></span>
+                                                    </h1>
+                                                    <Button type="button" variant="outline" size="icon" class="h-7 w-7" @click="() => {editingOutput = i;outputPickerOpen = true}">
+                                                        <Search class="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableBody>
+                                </Table>
+                            </template>
+                        </form.Field>
+                    </CardContent>
+                </Card>
+            </div>
+        </form>
+    </div>
+    <Sheet v-model:open="outputPickerOpen">
+        <SheetContent>
+        <SheetHeader>
+            <SheetTitle>Select a boolean shared variable.</SheetTitle>
+            <SheetDescription>
+                You can use the filters below to search.
+            </SheetDescription>
+        </SheetHeader>
+        <SharedVariablePicker @selectVariable="updateOutputMapping" typestring_filter="Boolean" typestring_filter_lock/>
+        </SheetContent>
+    </Sheet>
+</template>