1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<script setup lang="ts">
import { Netmask } from 'netmask';
import { useStorage } from '@vueuse/core';
import { ArrowLeft, ArrowRight } from '@vicons/tabler';
import { getIPClass } from './ipv4-subnet-calculator.models';
import { withDefaultOnError } from '@/utils/defaults';
import { isNotThrowing } from '@/utils/boolean';
import SpanCopyable from '@/components/SpanCopyable.vue';
const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');
const getNetworkInfo = (address: string) => new Netmask(address.trim());
const networkInfo = computed(() => withDefaultOnError(() => getNetworkInfo(ip.value), undefined));
const ipValidationRules = [
{
message: 'We cannot parse this address, check the format',
validator: (value: string) => isNotThrowing(() => getNetworkInfo(value.trim())),
},
];
const sections: {
label: string
getValue: (blocks: Netmask) => string | undefined
undefinedFallback?: string
}[] = [
{
label: 'Netmask',
getValue: block => block.toString(),
},
{
label: 'Network address',
getValue: ({ base }) => base,
},
{
label: 'Network mask',
getValue: ({ mask }) => mask,
},
{
label: 'Network mask in binary',
getValue: ({ bitmask }) => ('1'.repeat(bitmask) + '0'.repeat(32 - bitmask)).match(/.{8}/g)?.join('.') ?? '',
},
{
label: 'CIDR notation',
getValue: ({ bitmask }) => `/${bitmask}`,
},
{
label: 'Wildcard mask',
getValue: ({ hostmask }) => hostmask,
},
{
label: 'Network size',
getValue: ({ size }) => String(size),
},
{
label: 'First address',
getValue: ({ first }) => first,
},
{
label: 'Last address',
getValue: ({ last }) => last,
},
{
label: 'Broadcast address',
getValue: ({ broadcast }) => broadcast,
undefinedFallback: 'No broadcast address with this mask',
},
{
label: 'IP class',
getValue: ({ base: ip }) => getIPClass({ ip }),
undefinedFallback: 'Unknown class type',
},
];
function switchToBlock({ count = 1 }: { count?: number }) {
const next = networkInfo.value?.next(count);
if (next) {
ip.value = next.toString();
}
}
</script>
<template>
<div>
<c-input-text
v-model:value="ip"
label="An IPv4 address with or without mask"
placeholder="The ipv4 address..."
:validation-rules="ipValidationRules"
mb-4
/>
<div v-if="networkInfo">
<n-table>
<tbody>
<tr v-for="{ getValue, label, undefinedFallback } in sections" :key="label">
<td font-bold>
{{ label }}
</td>
<td>
<SpanCopyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)" />
<span v-else op-70>
{{ undefinedFallback }}
</span>
</td>
</tr>
</tbody>
</n-table>
<div mt-3 flex items-center justify-between>
<c-button @click="switchToBlock({ count: -1 })">
<n-icon :component="ArrowLeft" />
Previous block
</c-button>
<c-button @click="switchToBlock({ count: 1 })">
Next block
<n-icon :component="ArrowRight" />
</c-button>
</div>
</div>
</div>
</template>
|
