aboutsummaryrefslogtreecommitdiff
path: root/src/tools/user-agent-parser/user-agent-parser.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-05-28 23:13:24 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-05-28 23:29:14 +0200
commit33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch)
treef313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/user-agent-parser/user-agent-parser.vue
parent4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff)
downloadit-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.vue59
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>