mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-04 21:37:11 -04:00
0fe9a20329
* fix(deps): update dependency oui to v13 * chore(deps): switched from oui to oui-data for mac address lookup --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import db from 'oui-data';
|
|
import { macAddressValidationRules } from '@/utils/macAddress';
|
|
import { useCopy } from '@/composable/copy';
|
|
|
|
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 as Record<string, string>)[getVendorValue(macAddress.value)]);
|
|
|
|
const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info copied to the clipboard' });
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<c-input-text
|
|
v-model:value="macAddress"
|
|
label="MAC address:"
|
|
size="large"
|
|
placeholder="Type a MAC address"
|
|
clearable
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
:validation-rules="macAddressValidationRules"
|
|
mb-5
|
|
/>
|
|
|
|
<div mb-5px>
|
|
Vendor info:
|
|
</div>
|
|
<c-card mb-5>
|
|
<div v-if="details">
|
|
<div v-for="(detail, index) of details.split('\n')" :key="index">
|
|
{{ detail }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else italic op-60>
|
|
Unknown vendor for this address
|
|
</div>
|
|
</c-card>
|
|
|
|
<div flex justify-center>
|
|
<c-button :disabled="!details" @click="copy()">
|
|
Copy vendor info
|
|
</c-button>
|
|
</div>
|
|
</div>
|
|
</template>
|