120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<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>
|
|
<c-input-text
|
|
v-model:value="rawStartAddress"
|
|
label="Start address"
|
|
placeholder="Start IPv4 address..."
|
|
:validation="startIpValidation"
|
|
clearable
|
|
/>
|
|
|
|
<c-input-text
|
|
v-model:value="rawEndAddress"
|
|
label="End address"
|
|
placeholder="End IPv4 address..."
|
|
:validation="endIpValidation"
|
|
clearable
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<ResultRow
|
|
v-for="{ label, getOldValue, getNewValue } in calculatedValues"
|
|
:key="label"
|
|
:label="label"
|
|
:old-value="getOldValue(result)"
|
|
:new-value="getNewValue(result)"
|
|
/>
|
|
</tbody>
|
|
</n-table>
|
|
<n-alert
|
|
v-else-if="startIpValidation.isValid && endIpValidation.isValid"
|
|
title="Invalid combination of start and end IPv4 address"
|
|
type="error"
|
|
>
|
|
<div my-3 op-70>
|
|
The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated.
|
|
In the most cases the solution to solve this problem is to change start and end address.
|
|
</div>
|
|
|
|
<c-button @click="onSwitchStartEndClicked">
|
|
<n-icon mr-2 :component="Exchange" depth="3" size="22" />
|
|
Switch start and end IPv4 address
|
|
</c-button>
|
|
</n-alert>
|
|
</div>
|
|
</template>
|