diff options
Diffstat (limited to 'src/tools/ipv4-range-expander/ipv4-range-expander.vue')
-rw-r--r-- | src/tools/ipv4-range-expander/ipv4-range-expander.vue | 131 |
1 files changed, 68 insertions, 63 deletions
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue index f1b8dc6..16ce62f 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue @@ -1,3 +1,61 @@ +<script setup lang="ts"> +import { Exchange } from '@vicons/tabler'; +import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service'; +import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types'; +import { calculateCidr } from './ipv4-range-expander.service'; +import ResultRow from './result-row.vue'; +import { useValidation } from '@/composable/validation'; + +const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1'); +const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255'); + +const result = computed(() => calculateCidr({ startIp: rawStartAddress.value, endIp: rawEndAddress.value })); + +const calculatedValues: { + label: string + getOldValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined + getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined +}[] = [ + { + label: 'Start address', + getOldValue: () => rawStartAddress.value, + getNewValue: result => result?.newStart, + }, + { + label: 'End address', + getOldValue: () => rawEndAddress.value, + getNewValue: result => result?.newEnd, + }, + { + label: 'Addresses in range', + getOldValue: result => result?.oldSize?.toLocaleString(), + getNewValue: result => result?.newSize?.toLocaleString(), + }, + { + label: 'CIDR', + getOldValue: () => '', + getNewValue: result => result?.newCidr, + }, +]; + +const startIpValidation = useValidation({ + source: rawStartAddress, + rules: [{ message: 'Invalid ipv4 address', validator: ip => isValidIpv4({ ip }) }], +}); +const endIpValidation = useValidation({ + source: rawEndAddress, + rules: [{ message: 'Invalid ipv4 address', validator: ip => isValidIpv4({ ip }) }], +}); + +const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined); + +function onSwitchStartEndClicked() { + const tmpStart = rawStartAddress.value; + rawStartAddress.value = rawEndAddress.value; + rawEndAddress.value = tmpStart; +} +</script> + <template> <div> <div mb-4 flex gap-4> @@ -21,13 +79,19 @@ <n-table v-if="showResult" data-test-id="result"> <thead> <tr> - <th scope="col"> </th> - <th scope="col">old value</th> - <th scope="col">new value</th> + <th scope="col"> + + </th> + <th scope="col"> + old value + </th> + <th scope="col"> + new value + </th> </tr> </thead> <tbody> - <result-row + <ResultRow v-for="{ label, getOldValue, getNewValue } in calculatedValues" :key="label" :label="label" @@ -53,62 +117,3 @@ </n-alert> </div> </template> - -<script setup lang="ts"> -import { useValidation } from '@/composable/validation'; -import { Exchange } from '@vicons/tabler'; -import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service'; -import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types'; -import { calculateCidr } from './ipv4-range-expander.service'; -import ResultRow from './result-row.vue'; - -const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1'); -const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255'); - -const result = computed(() => calculateCidr({ startIp: rawStartAddress.value, endIp: rawEndAddress.value })); - -const calculatedValues: { - label: string; - getOldValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined; - getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined; -}[] = [ - { - label: 'Start address', - getOldValue: () => rawStartAddress.value, - getNewValue: (result) => result?.newStart, - }, - { - label: 'End address', - getOldValue: () => rawEndAddress.value, - getNewValue: (result) => result?.newEnd, - }, - { - label: 'Addresses in range', - getOldValue: (result) => result?.oldSize?.toLocaleString(), - getNewValue: (result) => result?.newSize?.toLocaleString(), - }, - { - label: 'CIDR', - getOldValue: () => '', - getNewValue: (result) => result?.newCidr, - }, -]; - -const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined); -const startIpValidation = useValidation({ - source: rawStartAddress, - rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }], -}); -const endIpValidation = useValidation({ - source: rawEndAddress, - rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }], -}); - -function onSwitchStartEndClicked() { - const tmpStart = rawStartAddress.value; - rawStartAddress.value = rawEndAddress.value; - rawEndAddress.value = tmpStart; -} -</script> - -<style lang="less" scoped></style> |