Skip to content

Commit e419ed3

Browse files
sharevbsharevb
committed
feat(new tool): CRC calculator
Fix CorentinTh#815
1 parent 80e46c9 commit e419ed3

File tree

7 files changed

+263
-11
lines changed

7 files changed

+263
-11
lines changed

‎components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
5454
ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
5555
CommandPalette: typeof import('./src/modules/command-palette/command-palette.vue')['default']
5656
CommandPaletteOption: typeof import('./src/modules/command-palette/components/command-palette-option.vue')['default']
57+
CrcCalculator: typeof import('./src/tools/crc-calculator/crc-calculator.vue')['default']
5758
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
5859
CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
5960
'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
@@ -166,6 +167,7 @@ declare module '@vue/runtime-core' {
166167
NProgress: typeof import('naive-ui')['NProgress']
167168
NScrollbar: typeof import('naive-ui')['NScrollbar']
168169
NSlider: typeof import('naive-ui')['NSlider']
170+
NSpin: typeof import('naive-ui')['NSpin']
169171
NStatistic: typeof import('naive-ui')['NStatistic']
170172
NSwitch: typeof import('naive-ui')['NSwitch']
171173
NTable: typeof import('naive-ui')['NTable']

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"colord": "^2.9.3",
5252
"composerize-ts": "^0.6.2",
5353
"country-code-lookup": "^0.1.0",
54+
"crc": "^4.3.2",
5455
"cron-validator": "^1.3.1",
5556
"cronstrue": "^2.26.0",
5657
"crypto-js": "^4.1.1",

‎pnpm-lock.yaml

Lines changed: 23 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/composable/queryParams.ts

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useRouteQuery } from '@vueuse/router';
22
import { computed } from 'vue';
3+
import { useStorage } from '@vueuse/core';
34

4-
export { useQueryParam };
5+
export { useQueryParam, useQueryParamOrStorage };
56

67
const transformers = {
78
number: {
@@ -33,3 +34,31 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
3334
},
3435
});
3536
}
37+
38+
function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
39+
const type = typeof defaultValue;
40+
const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
41+
42+
const storageRef = useStorage(storageName, defaultValue);
43+
const storageDefaultValue = storageRef.value ?? defaultValue;
44+
45+
const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
46+
47+
const ref = computed<T>({
48+
get() {
49+
return transformer.fromQuery(proxy.value) as unknown as T;
50+
},
51+
set(value) {
52+
proxy.value = transformer.toQuery(value as never);
53+
},
54+
});
55+
56+
watch(
57+
ref,
58+
(newValue) => {
59+
storageRef.value = newValue;
60+
},
61+
);
62+
63+
return ref;
64+
}

‎src/tools/crc-calculator/crc-calculator.vue

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<script setup lang="ts">
2+
import type { lib } from 'crypto-js';
3+
import { enc } from 'crypto-js';
4+
5+
import crc from 'crc';
6+
import InputCopyable from '../../components/InputCopyable.vue';
7+
import { convertHexToBin } from '../hash-text/hash-text.service';
8+
import { useQueryParamOrStorage } from '@/composable/queryParams';
9+
import { withDefaultOnError } from '@/utils/defaults';
10+
11+
const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
12+
const text = ref('');
13+
const file = ref<File | null>(null);
14+
15+
const defaultCRCValues = {
16+
crc1: '',
17+
crc8: '',
18+
crc81wire: '',
19+
crc8dvbs2: '',
20+
crc16: '',
21+
crc16ccitt: '',
22+
crc16modbus: '',
23+
crc16kermit: '',
24+
crc16xmodem: '',
25+
crc24: '',
26+
crc32: '',
27+
crc32mpeg: '',
28+
crcjam: '',
29+
};
30+
type AlgoNames = keyof typeof defaultCRCValues;
31+
32+
function getCRCs(content: Uint8Array | string) {
33+
return {
34+
crc1: crc.crc1(content).toString(16),
35+
crc8: crc.crc8(content).toString(16),
36+
crc81wire: crc.crc81wire(content).toString(16),
37+
crc8dvbs2: crc.crc8dvbs2(content).toString(16),
38+
crc16: crc.crc16(content).toString(16),
39+
crc16ccitt: crc.crc16ccitt(content).toString(16),
40+
crc16modbus: crc.crc16modbus(content).toString(16),
41+
crc16kermit: crc.crc16kermit(content).toString(16),
42+
crc16xmodem: crc.crc16xmodem(content).toString(16),
43+
crc24: crc.crc24(content).toString(16),
44+
crc32: crc.crc32(content).toString(16),
45+
crc32mpeg: crc.crc32mpeg2(content).toString(16),
46+
crcjam: crc.crcjam(content).toString(16),
47+
};
48+
}
49+
const hashes = ref(defaultCRCValues);
50+
async function onUpload(uploadedFile: File) {
51+
status.value = 'processing';
52+
53+
file.value = uploadedFile;
54+
const buffer = await uploadedFile.arrayBuffer();
55+
56+
text.value = '';
57+
try {
58+
hashes.value = getCRCs(new Uint8Array(buffer));
59+
status.value = 'done';
60+
}
61+
catch (e) {
62+
status.value = 'error';
63+
}
64+
}
65+
66+
const algoWasmNames = Object.keys(defaultCRCValues) as AlgoNames[];
67+
type Encoding = keyof typeof enc | 'Bin';
68+
69+
const encoding = useQueryParamOrStorage<Encoding>({ defaultValue: 'Hex', storageName: 'hash-text:encoding', name: 'encoding' });
70+
71+
function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
72+
if (encoding === 'Bin') {
73+
return convertHexToBin(words.toString(enc.Hex));
74+
}
75+
76+
return words.toString(enc[encoding]);
77+
}
78+
79+
const CRCValues = computed(() => withDefaultOnError(() => {
80+
const encodingValue = encoding.value;
81+
const hashesValue = hashes.value;
82+
83+
const ret = defaultCRCValues;
84+
for (const algo of algoWasmNames) {
85+
ret[algo] = formatWithEncoding(enc.Hex.parse(hashesValue[algo]), encodingValue);
86+
}
87+
return ret;
88+
}, defaultCRCValues));
89+
90+
watch(text,
91+
(_, newValue) => {
92+
if (newValue === ''){
93+
return;
94+
}
95+
96+
file.value = null;
97+
hashes.value = getCRCs(newValue);
98+
status.value = 'done';
99+
},
100+
);
101+
</script>
102+
103+
<template>
104+
<div>
105+
<c-card>
106+
<c-file-upload
107+
title="Drag and drop a file here, or click to select a file"
108+
@file-upload="onUpload"
109+
/>
110+
111+
<p>OR</p>
112+
113+
<c-input-text
114+
v-model:value="text"
115+
multiline raw-text
116+
placeholder="Paste string to CRC..." rows="3"
117+
autosize autofocus label="Your text to CRC:"
118+
/>
119+
120+
<n-divider />
121+
122+
<c-select
123+
v-model:value="encoding"
124+
mb-4
125+
label="Digest encoding"
126+
:options="[
127+
{
128+
label: 'Binary (base 2)',
129+
value: 'Bin',
130+
},
131+
{
132+
label: 'Hexadecimal (base 16)',
133+
value: 'Hex',
134+
},
135+
{
136+
label: 'Base64 (base 64)',
137+
value: 'Base64',
138+
},
139+
{
140+
label: 'Base64url (base 64 with url safe chars)',
141+
value: 'Base64url',
142+
},
143+
]"
144+
/>
145+
</c-card>
146+
147+
<div mt-3 flex justify-center>
148+
<c-alert v-if="status === 'error'" type="error">
149+
An error occured hashing file.
150+
</c-alert>
151+
<n-spin
152+
v-if="status === 'processing'"
153+
size="small"
154+
/>
155+
</div>
156+
157+
<c-card v-if="status === 'done'" :title="file === null ? 'CRC of text' : `CRC of ${file?.name}`">
158+
<div v-for="algo in algoWasmNames" :key="algo" style="margin: 5px 0">
159+
<n-input-group>
160+
<n-input-group-label style="flex: 0 0 120px">
161+
{{ algo.toUpperCase() }}
162+
</n-input-group-label>
163+
<InputCopyable :value="CRCValues[algo]" readonly />
164+
</n-input-group>
165+
</div>
166+
</c-card>
167+
</div>
168+
</template>

‎src/tools/crc-calculator/index.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { EyeOff } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'CRC calculator',
6+
path: '/crc-calculator',
7+
description: 'Compute text or file CRC (CRC1, CRC8, CRC8 1-Wire, CRC8 DVB-S2, CRC16, CRC16 CCITT, CRC16 Modbus, CRC16 Kermit, CRC16 XModem, CRC24, CRC32, CRC32 MPEG-2, CRCJAM)',
8+
keywords: ['crc', 'checksum', 'crc1',
9+
'crc8',
10+
'crc8 1-wire',
11+
'crc8 dvb-s2',
12+
'crc16',
13+
'crc16 ccitt',
14+
'crc16 modbus',
15+
'crc16 kermit',
16+
'crc16 xmodem',
17+
'crc24',
18+
'crc32',
19+
'crc32 mpeg-2',
20+
'crcjam'],
21+
component: () => import('./crc-calculator.vue'),
22+
icon: EyeOff,
23+
createdAt: new Date('2024-05-11'),
24+
});

‎src/tools/index.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { tool as base64FileConverter } from './base64-file-converter';
22
import { tool as base64StringConverter } from './base64-string-converter';
33
import { tool as basicAuthGenerator } from './basic-auth-generator';
4+
import { tool as crcCalculator } from './crc-calculator';
45
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
56
import { tool as numeronymGenerator } from './numeronym-generator';
67
import { tool as macAddressGenerator } from './mac-address-generator';
@@ -79,7 +80,20 @@ import { tool as xmlFormatter } from './xml-formatter';
7980
export const toolsByCategory: ToolCategory[] = [
8081
{
8182
name: 'Crypto',
82-
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
83+
components: [
84+
tokenGenerator,
85+
hashText,
86+
crcCalculator,
87+
bcrypt,
88+
uuidGenerator,
89+
ulidGenerator,
90+
cypher,
91+
bip39,
92+
hmacGenerator,
93+
rsaKeyPairGenerator,
94+
passwordStrengthAnalyser,
95+
pdfSignatureChecker,
96+
],
8397
},
8498
{
8599
name: 'Converter',

0 commit comments

Comments
 (0)