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 | |
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')
-rw-r--r-- | src/tools/user-agent-parser/user-agent-parser.types.ts | 18 | ||||
-rw-r--r-- | src/tools/user-agent-parser/user-agent-parser.vue | 59 | ||||
-rw-r--r-- | src/tools/user-agent-parser/user-agent-result-cards.vue | 24 |
3 files changed, 50 insertions, 51 deletions
diff --git a/src/tools/user-agent-parser/user-agent-parser.types.ts b/src/tools/user-agent-parser/user-agent-parser.types.ts index 6c2720b..37dbe9f 100644 --- a/src/tools/user-agent-parser/user-agent-parser.types.ts +++ b/src/tools/user-agent-parser/user-agent-parser.types.ts @@ -1,12 +1,12 @@ import type { Component } from 'vue'; -import { UAParser } from 'ua-parser-js'; +import type { UAParser } from 'ua-parser-js'; -export type UserAgentResultSection = { - heading: string; - icon?: Component; +export interface UserAgentResultSection { + heading: string + icon?: Component content: { - label: string; - getValue: (blocks?: UAParser.IResult) => string | undefined; - undefinedFallback?: string; - }[]; -}; + label: string + getValue: (blocks?: UAParser.IResult) => string | undefined + undefinedFallback?: string + }[] +} 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> diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue index 20226c1..b3901ac 100644 --- a/src/tools/user-agent-parser/user-agent-result-cards.vue +++ b/src/tools/user-agent-parser/user-agent-result-cards.vue @@ -1,3 +1,15 @@ +<script setup lang="ts"> +import { toRefs } from 'vue'; +import type { UAParser } from 'ua-parser-js'; +import type { UserAgentResultSection } from './user-agent-parser.types'; + +const props = defineProps<{ + userAgentInfo?: UAParser.IResult + sections: UserAgentResultSection[] +}>(); +const { userAgentInfo, sections } = toRefs(props); +</script> + <template> <div> <n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen"> @@ -34,15 +46,3 @@ </n-grid> </div> </template> - -<script setup lang="ts"> -import { toRefs } from 'vue'; -import { UAParser } from 'ua-parser-js'; -import type { UserAgentResultSection } from './user-agent-parser.types'; - -const props = defineProps<{ - userAgentInfo?: UAParser.IResult; - sections: UserAgentResultSection[]; -}>(); -const { userAgentInfo, sections } = toRefs(props); -</script> |