minor changes

client/package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
+    "bootstrap-vue": "^2.0.0-rc.18",
     "core-js": "^2.6.5",
-    "vue": "^2.6.6",
+    "vue": "^2.6.10",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

client/src/App.vue

@@ -19,6 +19,7 @@
 
 <script lang="ts">
   import Vue from 'vue';
+  import {Version} from "@/interfaces";
 
   const versionJSON = 'http://local.devicedetector.net/version.json';
 
@@ -40,7 +41,7 @@
       req.onreadystatechange = (event: Event): void => {
         if (req.readyState === XMLHttpRequest.DONE) {
           if (req.status === 200) {
-            const data = JSON.parse(req.responseText);
+            const data:Version = JSON.parse(req.responseText);
             console.log(data);
             this.commitHash = data.commitHash;
             this.lastUpdated = new Date(data.date);

client/src/interfaces.ts

@@ -0,0 +1,39 @@
+export interface ParsedData {
+    "isBot": boolean,
+    "clientInfo": {
+        "type": string,
+        "name": string,
+        "short_name": string,
+        "version": string,
+        "engine": string,
+        "engine_version": string
+    },
+    "browserIcon": string|null,
+    "osInfo": {
+        "name": string,
+        "short_name": string,
+        "version": string,
+        "platform": string
+    },
+    "osIcon": string|null,
+    "device": number,
+    "deviceName": string,
+    "deviceIcon": string|null,
+    "deviceBrand": string,
+    "brandIcon": string|null,
+    "model": string,
+    'botInfo': {
+        'name': string,
+        'category': string,
+        'url': string,
+        'producer': {
+            'name': string,
+            'url': string
+        }
+    }
+}
+
+export interface Version{
+    "commitHash": string,
+    "date": string
+}

client/src/views/Main.vue

@@ -2,47 +2,65 @@
     <div class="main">
         <h1>Main</h1>
         <form @submit.prevent="submit">
-            <input type="text" v-model="userAgent">
+            <input type="text" v-model="userAgent" :disabled="processingServerSide">
-            <input type="submit">
+            <input type="submit" :disabled="processingServerSide">
         </form>
+        <div v-if="gotData">
+            <div v-if="!parsedData.clientInfo">
+                Device Detecter couldn't detect any information about this user agent.
+            </div>
+            <div v-if="parsedData.isBot">
+                <a :href="parsedData.botInfo.url">{{parsedData.botInfo.name}}</a>
+                <span>{{parsedData.botInfo.category}}</span>
+                <a :href="parsedData.botInfo.producer.url">{{parsedData.botInfo.producer.name}}</a>
+            </div>
+            <div v-else>
+                <img v-if="parsedData.browserIcon" :src="'http://local.devicedetector.net'+parsedData.browserIcon" :title="parsedData.clientInfo.short_name" role="presentation">
+            </div>
+        </div>
         <pre style="text-align: left">{{prettyJSON}}</pre>
     </div>
 </template>
 
 <script lang="ts">
-    import Vue from 'vue';
+    import Vue from "vue";
+    import {ParsedData} from "@/interfaces";
 
-    const baseURL = 'http://local.devicedetector.net/detect/';
+    const baseURL = "http://local.devicedetector.net/detect/";
 
     export default Vue.extend({
-        name: 'Main',
+        name: "Main",
         props: {
             msg: String
         },
         data() {
             return {
                 userAgent: navigator.userAgent,
-                parsedData: {}
+                parsedData: {} as ParsedData,
+                gotData: false,
+                processingServerSide:false,
             };
         },
         computed: {
-            // need annotation
             prettyJSON(): string {
                 return JSON.stringify(this.parsedData, null, 2);
             }
         },
         methods: {
             submit(): void {
+                this.gotData = false;
+                this.processingServerSide = true;
                 const req = new XMLHttpRequest();
                 req.onreadystatechange = (event: Event): void => {
                     if (req.readyState === XMLHttpRequest.DONE) {
                         if (req.status === 200) {
                             this.parsedData = JSON.parse(req.responseText);
+                            this.gotData = true;
+                            this.processingServerSide=false;
                         }
                     }
                 };
-
+                req.open("GET", baseURL + "?ua=" + this.userAgent, true);
-                req.open('GET', baseURL + '?ua=' + this.userAgent, true);
                 req.send(null);
             }
         }

client/tsconfig.json

@@ -10,6 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "noImplicitAny": true,
     "types": [
       "webpack-env"
     ],

client/yarn.lock

@@ -689,6 +689,15 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@nuxt/opencollective@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.2.2.tgz#17adc7d380457379cd14cbb64a435ea196cc4a6e"
+  integrity sha512-ie50SpS47L+0gLsW4yP23zI/PtjsDRglyozX2G09jeiUazC1AJlGPZo0JUs9iuCDUoIgsDEf66y7/bSfig0BpA==
+  dependencies:
+    chalk "^2.4.1"
+    consola "^2.3.0"
+    node-fetch "^2.3.0"
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz#706f64bcb4a8b9642b48ae3ace444c70334d615d"
@@ -1521,6 +1530,21 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap-vue@^2.0.0-rc.18:
+  version "2.0.0-rc.18"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.18.tgz#7662d0bc96b3c6dd6167a9283249c9677fc14f2b"
+  integrity sha512-pxPIQFAfqCuoPt1IT5nOjece/vuN5H3kxpLQSHHxmtcNs6HV6nqoRjuofHirAlwlONJC7etdylLP8YS3xPYqOg==
+  dependencies:
+    "@nuxt/opencollective" "^0.2.2"
+    bootstrap "^4.3.1"
+    popper.js "^1.15.0"
+    vue-functional-data-merge "^2.0.7"
+
+bootstrap@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2068,6 +2092,11 @@ connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
+consola@^2.3.0:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.5.8.tgz#26afe2ab7f560d285a88578eaae9d9be18029ba9"
+  integrity sha512-fYv1M0rNJw4h0CZUx8PX02Px7xQhA+vNHpV8DBCGMoozp2Io/vrSXhhEothaRnSt7VMR0rj2pt9KKLXa5amrCw==
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -4872,6 +4901,11 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.3.0.tgz#1a1d940bbfb916a1d3e0219f037e89e71f8c5fa5"
+  integrity sha512-MOd8pV3fxENbryESLgVIeaGKrdl+uaYhCSSVkjeOb/31/njTpcis5aWfdqgNlHIrKOLRbMnfPINPOML2CIFeXA==
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -5483,6 +5517,11 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
+popper.js@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
+
 portfinder@^1.0.20:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -7435,6 +7474,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-functional-data-merge@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz#bdee655181eacdcb1f96ce95a4cc14e75313d1da"
+  integrity sha512-pvLc+H+x2prwBj/uSEIITyxjz/7ZUVVK8uYbrYMmhDvMXnzh9OvQvVEwcOSBQjsubd4Eq41/CSJaWzy4hemMNQ==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -7477,7 +7521,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.6:
+vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==

src/IconPath.php

@@ -51,6 +51,10 @@ class IconPath {
      * @throws \Exception
      */
     public function getBrowserLogo() {
+        $client = $this->dd->getClient();
+        if (empty($client["shortname"])) {
+            return null;
+        }
         $short = $this->dd->getClient()["short_name"];
         $path = '/icons/browsers/%s.png';
 
@@ -79,6 +83,9 @@ class IconPath {
      */
     public function getDeviceTypeLogo() {
         $label = $this->dd->getDeviceName();
+        if (empty($label)) {
+            return null;
+        }
         $label = strtolower($label);
         $label = str_replace(' ', '_', $label);
 
@@ -92,8 +99,11 @@ class IconPath {
      */
     function getOsLogo() {
         $path = '/icons/os/%s.png';
-
+        $client = $this->dd->getClient();
-        $short = $this->dd->getOs()["short_name"];
+        if (empty($client["shortname"])) {
+            return null;
+        }
+        $short = $client["short_name"];
 
         $family = OperatingSystem::getOsFamily($short);
         $osFamilies = OperatingSystem::getAvailableOperatingSystemFamilies();