diff options
author | 2023-05-28 23:13:24 +0200 | |
---|---|---|
committer | 2023-05-28 23:29:14 +0200 | |
commit | 33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch) | |
tree | f313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/user-agent-parser/user-agent-parser.vue | |
parent | 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff) | |
download | it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.gz it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.zst it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.zip |
chore(lint): switched to a better lint config
Diffstat (limited to 'src/tools/user-agent-parser/user-agent-parser.vue')
-rw-r--r-- | src/tools/user-agent-parser/user-agent-parser.vue | 59 |
1 files changed, 29 insertions, 30 deletions
diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue index 8a3435d..02d1e56 100644 --- a/src/tools/user-agent-parser/user-agent-parser.vue +++ b/src/tools/user-agent-parser/user-agent-parser.vue @@ -1,36 +1,21 @@ -<template> - <div> - <n-form-item label="User agent string"> - <n-input - v-model:value="ua" - type="textarea" - placeholder="Put your user-agent here..." - clearable - :autosize="{ minRows: 2 }" - /> - </n-form-item> - - <user-agent-result-cards :user-agent-info="userAgentInfo" :sections="sections" /> - </div> -</template> - <script setup lang="ts"> import { computed, ref } from 'vue'; import { UAParser } from 'ua-parser-js'; -import { withDefaultOnError } from '@/utils/defaults'; import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler'; import UserAgentResultCards from './user-agent-result-cards.vue'; import type { UserAgentResultSection } from './user-agent-parser.types'; +import { withDefaultOnError } from '@/utils/defaults'; const ua = ref(navigator.userAgent as string); // If not input in the ua field is present return an empty object of type UAParser.IResult because otherwise // UAParser returns the values for the current Browser. This is confusing because results are shown for an empty // UA field value. -const getUserAgentInfo = (userAgent: string) => - userAgent.trim().length > 0 +function getUserAgentInfo(userAgent: string) { + return userAgent.trim().length > 0 ? UAParser(userAgent.trim()) : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult); +} const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined)); const sections: UserAgentResultSection[] = [ @@ -40,12 +25,12 @@ const sections: UserAgentResultSection[] = [ content: [ { label: 'Name', - getValue: (block) => block?.browser.name, + getValue: block => block?.browser.name, undefinedFallback: 'No browser name available', }, { label: 'Version', - getValue: (block) => block?.browser.version, + getValue: block => block?.browser.version, undefinedFallback: 'No browser version available', }, ], @@ -56,12 +41,12 @@ const sections: UserAgentResultSection[] = [ content: [ { label: 'Name', - getValue: (block) => block?.engine.name, + getValue: block => block?.engine.name, undefinedFallback: 'No engine name available', }, { label: 'Version', - getValue: (block) => block?.engine.version, + getValue: block => block?.engine.version, undefinedFallback: 'No engine version available', }, ], @@ -72,12 +57,12 @@ const sections: UserAgentResultSection[] = [ content: [ { label: 'Name', - getValue: (block) => block?.os.name, + getValue: block => block?.os.name, undefinedFallback: 'No OS name available', }, { label: 'Version', - getValue: (block) => block?.os.version, + getValue: block => block?.os.version, undefinedFallback: 'No OS version available', }, ], @@ -88,17 +73,17 @@ const sections: UserAgentResultSection[] = [ content: [ { label: 'Model', - getValue: (block) => block?.device.model, + getValue: block => block?.device.model, undefinedFallback: 'No device model available', }, { label: 'Type', - getValue: (block) => block?.device.type, + getValue: block => block?.device.type, undefinedFallback: 'No device type available', }, { label: 'Vendor', - getValue: (block) => block?.device.vendor, + getValue: block => block?.device.vendor, undefinedFallback: 'No device vendor available', }, ], @@ -109,7 +94,7 @@ const sections: UserAgentResultSection[] = [ content: [ { label: 'Architecture', - getValue: (block) => block?.cpu.architecture, + getValue: block => block?.cpu.architecture, undefinedFallback: 'No CPU architecture available', }, ], @@ -117,4 +102,18 @@ const sections: UserAgentResultSection[] = [ ]; </script> -<style lang="less" scoped></style> +<template> + <div> + <n-form-item label="User agent string"> + <n-input + v-model:value="ua" + type="textarea" + placeholder="Put your user-agent here..." + clearable + :autosize="{ minRows: 2 }" + /> + </n-form-item> + + <UserAgentResultCards :user-agent-info="userAgentInfo" :sections="sections" /> + </div> +</template> |