mirror of
https://github.com/Findus23/devicedetector.net.git
synced 2024-09-19 15:43:46 +02:00
clean code
This commit is contained in:
parent
b0d9238a45
commit
cabd5161b8
4 changed files with 35 additions and 30 deletions
21
client/src/utils.ts
Normal file
21
client/src/utils.ts
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g;
|
||||||
|
|
||||||
|
export function syntaxHighlight(jsonstring: string): string {
|
||||||
|
// from https://stackoverflow.com/a/7220510/
|
||||||
|
jsonstring = jsonstring.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||||
|
return jsonstring.replace(regex, (match) => {
|
||||||
|
let cls = "number";
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = "key";
|
||||||
|
} else {
|
||||||
|
cls = "string";
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = "boolean";
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = "null";
|
||||||
|
}
|
||||||
|
return "<span class=\"" + cls + "\">" + match + "</span>";
|
||||||
|
});
|
||||||
|
}
|
|
@ -14,23 +14,25 @@
|
||||||
Device Detecter couldn't detect any information about this user agent.
|
Device Detecter couldn't detect any information about this user agent.
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="dd.isBot" class="box centered">
|
<div v-else-if="dd.isBot" class="box centered">
|
||||||
<div><a :href="dd.botInfo.url">{{dd.botInfo.name}}</a></div>
|
<div><a :href="dd.botInfo.url" target="_blank" rel="noopener">{{dd.botInfo.name}}</a></div>
|
||||||
<div>{{dd.botInfo.category}}</div>
|
<div>{{dd.botInfo.category}}</div>
|
||||||
<div><a :href="dd.botInfo.producer.url">{{dd.botInfo.producer.name}}</a></div>
|
<div><a :href="dd.botInfo.producer.url" target="_blank" rel="noopener">{{dd.botInfo.producer.name}}</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="box-row">
|
<div class="box-row">
|
||||||
<div class="box centered">
|
<div class="box centered" v-if="dd.osInfo && (Object.keys(dd.osInfo).length !== 0)">
|
||||||
<div v-if="dd.osInfo">
|
|
||||||
<icon :title="dd.osInfo.short_name" :icon="dd.icons.os"></icon>
|
<icon :title="dd.osInfo.short_name" :icon="dd.icons.os"></icon>
|
||||||
<div>{{dd.osInfo.name}} {{dd.osInfo.version}}</div>
|
<div>{{dd.osInfo.name}} {{dd.osInfo.version}}</div>
|
||||||
<div>{{dd.osInfo.platform}}</div>
|
<div>{{dd.osInfo.platform}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="box last centered">
|
<div class="box last centered">
|
||||||
<icon :title="dd.clientInfo.short_name" :icon="dd.icons.browser"></icon>
|
<icon :title="dd.clientInfo.short_name" :icon="dd.icons.browser"></icon>
|
||||||
<div>{{dd.clientInfo.name}} {{dd.clientInfo.version}}</div>
|
<div>{{dd.clientInfo.name}} {{dd.clientInfo.version}}</div>
|
||||||
<div v-if="dd.clientInfo.engine">{{dd.clientInfo.engine}} {{dd.clientInfo.engine_version}}</div>
|
<div v-if="dd.clientInfo.engine">{{dd.clientInfo.engine}} {{dd.clientInfo.engine_version}}</div>
|
||||||
|
<div v-if="dd.clientInfo.type!=='browser'">
|
||||||
|
{{dd.clientInfo.type}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-row">
|
<div class="box-row">
|
||||||
|
@ -40,7 +42,7 @@
|
||||||
{{dd.deviceBrand}}
|
{{dd.deviceBrand}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="{box:true, centered:true, last:dd.deviceBrand}">
|
<div v-if="dd.deviceName" :class="{box:true, centered:true, last:dd.deviceBrand}">
|
||||||
<icon :title="dd.deviceName" :icon="dd.icons.device"></icon>
|
<icon :title="dd.deviceName" :icon="dd.icons.device"></icon>
|
||||||
<div>{{dd.deviceName}}</div>
|
<div>{{dd.deviceName}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -63,13 +65,14 @@
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import {ParsedData} from "@/interfaces";
|
import {ParsedData} from "@/interfaces";
|
||||||
import Icon from "../components/Icon.vue";
|
import Icon from "../components/Icon.vue";
|
||||||
import {syntaxHighlight} from "../../utils";
|
import {syntaxHighlight} from "@/utils";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import InputGroup from "bootstrap-vue/es/components/input-group";
|
import InputGroup from "bootstrap-vue/es/components/input-group";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import FormInput from "bootstrap-vue/es/components/form-input";
|
import FormInput from "bootstrap-vue/es/components/form-input";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import Button from "bootstrap-vue/es/components/button";
|
import Button from "bootstrap-vue/es/components/button";
|
||||||
|
|
||||||
Vue.use(InputGroup);
|
Vue.use(InputGroup);
|
||||||
Vue.use(FormInput);
|
Vue.use(FormInput);
|
||||||
Vue.use(Button);
|
Vue.use(Button);
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
export function syntaxHighlight(jsonstring: string): string {
|
|
||||||
// from https://stackoverflow.com/a/7220510/
|
|
||||||
jsonstring = jsonstring.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
||||||
return jsonstring.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
|
|
||||||
var cls = 'number';
|
|
||||||
if (/^"/.test(match)) {
|
|
||||||
if (/:$/.test(match)) {
|
|
||||||
cls = 'key';
|
|
||||||
} else {
|
|
||||||
cls = 'string';
|
|
||||||
}
|
|
||||||
} else if (/true|false/.test(match)) {
|
|
||||||
cls = 'boolean';
|
|
||||||
} else if (/null/.test(match)) {
|
|
||||||
cls = 'null';
|
|
||||||
}
|
|
||||||
return '<span class="' + cls + '">' + match + '</span>';
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -53,5 +53,5 @@ if ($dd->isBot()) {
|
||||||
}
|
}
|
||||||
|
|
||||||
header("Content-Type: application/json; charset=UTF-8");
|
header("Content-Type: application/json; charset=UTF-8");
|
||||||
echo json_encode($data);
|
echo json_encode($data,JSON_FORCE_OBJECT);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue