mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 23:06:14 -04:00
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<n-form-item label="MAC address:" v-bind="validationAttrs">
|
||
|
|
<n-input
|
||
|
|
v-model:value="macAddress"
|
||
|
|
size="large"
|
||
|
|
placeholder="Type a MAC address"
|
||
|
|
clearable
|
||
|
|
autocomplete="off"
|
||
|
|
autocorrect="off"
|
||
|
|
autocapitalize="off"
|
||
|
|
spellcheck="false"
|
||
|
|
/>
|
||
|
|
</n-form-item>
|
||
|
|
|
||
|
|
<n-form-item label="Vendor info:">
|
||
|
|
<n-card>
|
||
|
|
<n-text v-if="details">
|
||
|
|
<div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
|
||
|
|
</n-text>
|
||
|
|
|
||
|
|
<n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
|
||
|
|
</n-card>
|
||
|
|
</n-form-item>
|
||
|
|
|
||
|
|
<n-space justify="center">
|
||
|
|
<n-button :disabled="!details" tertiary> Copy vendor info </n-button>
|
||
|
|
</n-space>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useValidation } from '@/composable/validation';
|
||
|
|
import db from 'oui/oui.json';
|
||
|
|
|
||
|
|
const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
|
||
|
|
|
||
|
|
const macAddress = ref('20:37:06:12:34:56');
|
||
|
|
const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
|
||
|
|
|
||
|
|
const { attrs: validationAttrs } = useValidation({
|
||
|
|
source: macAddress,
|
||
|
|
rules: [
|
||
|
|
{
|
||
|
|
message: 'Invalid MAC address',
|
||
|
|
validator: (value) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){2,5}([0-9A-Fa-f]{2})$/),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped></style>
|