diff options
Diffstat (limited to 'src/tools/ipv4-subnet-calculator')
4 files changed, 194 insertions, 0 deletions
diff --git a/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue b/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue new file mode 100644 index 0000000..5069b87 --- /dev/null +++ b/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue @@ -0,0 +1,35 @@ +<template> + <n-tooltip trigger="hover"> + <template #trigger> + <span class="ip" @click="handleClick">{{ ip }}</span> + </template> + {{ tooltipText }} + </n-tooltip> +</template> + +<script setup lang="ts"> +import { useClipboard } from '@vueuse/core'; +import { ref, toRefs } from 'vue'; + +const props = withDefaults(defineProps<{ ip?: string }>(), { ip: '' }); +const { ip } = toRefs(props); + +const initialText = 'Copy to clipboard'; +const tooltipText = ref(initialText); + +const { copy } = useClipboard({ source: ip }); + +function handleClick() { + copy(); + tooltipText.value = 'Copied!'; + + setTimeout(() => (tooltipText.value = initialText), 1000); +} +</script> + +<style scoped lang="less"> +.ip { + font-family: monospace; + cursor: pointer; +} +</style> diff --git a/src/tools/ipv4-subnet-calculator/index.ts b/src/tools/ipv4-subnet-calculator/index.ts new file mode 100644 index 0000000..fb4bfb4 --- /dev/null +++ b/src/tools/ipv4-subnet-calculator/index.ts @@ -0,0 +1,11 @@ +import { RouterOutlined } from '@vicons/material'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'IPv4 subnet calculator', + path: '/ipv4-subnet-calculator', + description: 'Parse your IPv4 CIDR blocks and get all the info you need about your sub network.', + keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'], + component: () => import('./ipv4-subnet-calculator.vue'), + icon: RouterOutlined, +}); diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.models.ts b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.models.ts new file mode 100644 index 0000000..7a515ca --- /dev/null +++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.models.ts @@ -0,0 +1,23 @@ +export { getIPClass }; + +function getIPClass({ ip }: { ip: string }) { + const [firstOctet] = ip.split('.').map(Number); + + if (firstOctet < 128) { + return 'A'; + } + if (firstOctet > 127 && firstOctet < 192) { + return 'B'; + } + if (firstOctet > 191 && firstOctet < 224) { + return 'C'; + } + if (firstOctet > 223 && firstOctet < 240) { + return 'D'; + } + if (firstOctet > 239 && firstOctet < 256) { + return 'E'; + } + + return undefined; +} diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue new file mode 100644 index 0000000..7b488c9 --- /dev/null +++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue @@ -0,0 +1,125 @@ +<template> + <div> + <n-form-item label="An IPv4 address with or without mask" v-bind="validationAttrs"> + <n-input v-model:value="ip" /> + </n-form-item> + + <div v-if="networkInfo"> + <n-table> + <tbody> + <tr v-for="{ getValue, label, undefinedFallback } in sections" :key="label"> + <td> + <n-text strong>{{ label }}</n-text> + </td> + <td> + <copyable-ip-like v-if="getValue(networkInfo)" :ip="getValue(networkInfo)"></copyable-ip-like> + <n-text v-else depth="3">{{ undefinedFallback }}</n-text> + </td> + </tr> + </tbody> + </n-table> + + <n-space style="margin-top: 14px" justify="space-between"> + <n-button tertiary @click="switchToBlock({ count: -1 })"> + <n-icon :component="ArrowLeft" /> + Previous block + </n-button> + <n-button tertiary @click="switchToBlock({ count: 1 })"> + Next block + <n-icon :component="ArrowRight" /> + </n-button> + </n-space> + </div> + </div> +</template> + +<script setup lang="ts"> +import { computed } from 'vue'; +import { Netmask } from 'netmask'; +import { withDefaultOnError } from '@/utils/defaults'; +import { useValidation } from '@/composable/validation'; +import { isNotThrowing } from '@/utils/boolean'; +import { useStorage } from '@vueuse/core'; +import { ArrowLeft, ArrowRight } from '@vicons/tabler'; +import { getIPClass } from './ipv4-subnet-calculator.models'; +import CopyableIpLike from './copyable-ip-like.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 { attrs: validationAttrs } = useValidation({ + source: ip, + rules: [ + { + message: 'We cannot parse this address, check the format', + validator: (value) => 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> + +<style lang="less" scoped></style> |