aboutsummaryrefslogtreecommitdiff
path: root/src/tools/ipv4-range-expander/ipv4-range-expander.vue
blob: 0d9f0679bf0c46100eab1c3826b3d22361475717 (plain) (blame)
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
<template>
  <div>
    <n-space item-style="flex:1 1 0">
      <div>
        <n-space item-style="flex:1 1 0">
          <n-form-item label="Start address" v-bind="startIpValidation.attrs as any">
            <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
          </n-form-item>
          <n-form-item label="End address" v-bind="endIpValidation.attrs as any">
            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
          </n-form-item>
        </n-space>

        <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>
            </tr>
          </thead>
          <tbody>
            <result-row
              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"
        >
          <n-space vertical>
            <n-text depth="3">
              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.
            </n-text>
            <c-button @click="onSwitchStartEndClicked">
              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
              Switch start and end IPv4 address
            </c-button>
          </n-space>
        </n-alert>
      </div>
    </n-space>
  </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>
ion value='u/vjpr/zig-0.10'>u/vjpr/zig-0.10 Unnamed repository; edit this file 'description' to name the repository.
aboutsummaryrefslogtreecommitdiff
path: root/src (unfollow)
AgeCommit message (Expand)AuthorFilesLines
2022-10-21Treat invalid buffer value as utf8 stringGravatar Jarred Sumner 1-2/+3
2022-10-21Add test for `fs.createReadStream`Gravatar Jarred Sumner 1-0/+43
2022-10-21Implement `fs.createReadStream`, begin `fs.createWriteStream`Gravatar Jarred Sumner 1-3/+621
2022-10-21Make Node Streams work better in BunGravatar Jarred Sumner 1-140/+214
2022-10-21Fix error handling logic in read()Gravatar Jarred Sumner 1-51/+79
2022-10-21Fix bugs in mask boolean valuesGravatar Jarred Sumner 2-15/+21
2022-10-21Emit errorsGravatar Jarred Sumner 2-2/+37
2022-10-21Add test for ResolveError.position being inspectableGravatar Jarred Sumner 2-0/+12
2022-10-21Fix segfault when logging position object from failed nested importGravatar Jarred Sumner 1-114/+34
2022-10-21Implement `setMaxListeners` and `getMaxListeners`Gravatar Jarred Sumner 1-1/+46
2022-10-21Fix `import Foo, {bar}` when from hardcoded builtin modules in runtimeGravatar Jarred Sumner 2-19/+34
2022-10-21Fix test failureGravatar Jarred Sumner 1-2/+3
2022-10-21Reload node:fs in developmentGravatar Jarred Sumner 1-0/+9
2022-10-21chore: remove outdated `var` usages (#1364)Gravatar Carter Snook 1-34/+34
2022-10-21Fix "/" in exampleGravatar Jarred Sumner 1-3/+10
2022-10-21Fix infinite loopGravatar Jarred Sumner 1-3/+13
2022-10-21micro-optimizeGravatar Jarred Sumner 1-7/+14
2022-10-20Update install script to use secure flagsGravatar Ashcon Partovi 2-5/+5
2022-10-20Add installation method for HomebrewGravatar Ashcon Partovi 1-0/+7
2022-10-20Fix crash in `highWaterMark`Gravatar Jarred Sumner 1-143/+144
2022-10-20Fix Bun.serve error handler error param (#1359)Gravatar zhiyuan 7-4/+37
2022-10-19Fix calling `ws.publish` inside `close` when other clients are connectedGravatar Jarred Sumner 3-28/+111
2022-10-19Cache dir loader: Prefer `$BUN_INSTALL` and `$XDG_CACHE_HOME` to `$HOME`. (#1...Gravatar Lucas Garron 1-5/+5
2022-10-19Improve issue templates (#1353)Gravatar Ashcon Partovi 8-89/+136