aboutsummaryrefslogtreecommitdiff
path: root/src/tools/ipv4-range-expander/ipv4-range-expander.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/ipv4-range-expander/ipv4-range-expander.vue')
-rw-r--r--src/tools/ipv4-range-expander/ipv4-range-expander.vue131
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">&nbsp;</th>
- <th scope="col">old value</th>
- <th scope="col">new value</th>
+ <th scope="col">
+&nbsp;
+ </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>