From b0d9238a4524ca70053c45cfae39ad5ae7a8b036 Mon Sep 17 00:00:00 2001
From: Lukas Winkler <git@lw1.at>
Date: Sat, 20 Apr 2019 21:16:03 +0200
Subject: [PATCH] multiple fixes

---
 client/src/App.vue             |   4 +-
 client/src/components/Icon.vue |  13 +--
 client/src/interfaces.ts       |  82 ++++++++---------
 client/src/main.ts             |   4 +-
 client/src/router.ts           |  24 ++---
 client/src/scss/style.scss     |  20 ++++-
 client/src/views/Main.vue      | 158 +++++++++++++++++----------------
 client/yarn.lock               |  65 +++++++-------
 8 files changed, 197 insertions(+), 173 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 38276b6..359819c 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -26,9 +26,9 @@
                     </b-collapse>
                 </b-navbar>
             </div>
-            <b-container>
+            <div class="container">
                 <router-view :lastUpdated="lastUpdated"/>
-            </b-container>
+            </div>
         </div>
         <footer>
             <div>
diff --git a/client/src/components/Icon.vue b/client/src/components/Icon.vue
index aed0a57..40bdc9c 100644
--- a/client/src/components/Icon.vue
+++ b/client/src/components/Icon.vue
@@ -3,12 +3,15 @@
          role="presentation" :alt="title" class="icon" width="48" height="48">
 </template>
 <script lang="ts">
-    import Vue from "vue";
+import Vue from "vue";
+// @ts-ignore
+import Navbar from "bootstrap-vue/es/components/navbar";
+Vue.use(Navbar);
 
-    export default Vue.extend({
-        props: ["icon", "title"],
-        name: "Icon"
-    });
+export default Vue.extend({
+    props: ["icon", "title"],
+    name: "Icon"
+});
 </script>
 
 <style lang="scss">
diff --git a/client/src/interfaces.ts b/client/src/interfaces.ts
index a32cef9..7f3e114 100644
--- a/client/src/interfaces.ts
+++ b/client/src/interfaces.ts
@@ -1,54 +1,54 @@
 export interface ParsedData {
-    'isBot': boolean;
-    'clientInfo': {
-        'type': string,
-        'name': string,
-        'short_name': string,
-        'version': string,
-        'engine': string,
-        'engine_version': string
+    "isBot": boolean;
+    "clientInfo": {
+        "type": string,
+        "name": string,
+        "short_name": string,
+        "version": string,
+        "engine": string,
+        "engine_version": string
     };
-    'osInfo': {
-        'name': string,
-        'short_name': string,
-        'version': string,
-        'platform': string
+    "osInfo": {
+        "name": string,
+        "short_name": string,
+        "version": string,
+        "platform": string
     };
-    'device': number;
-    'deviceName': string;
-    'deviceBrand': string;
-    'model': string;
-    'icons': {
-        'browser': string | null,
-        'os': string | null,
-        'device': string | null,
-        'brand': string | null
+    "device": number;
+    "deviceName": string;
+    "deviceBrand": string;
+    "model": string;
+    "icons": {
+        "browser": string | null,
+        "os": string | null,
+        "device": string | null,
+        "brand": string | null
     };
-    'botInfo': {
-        'name': string,
-        'category': string,
-        'url': string,
-        'producer': {
-            'name': string,
-            'url': string
+    "botInfo": {
+        "name": string,
+        "category": string,
+        "url": string,
+        "producer": {
+            "name": string,
+            "url": string
         }
     };
 }
 
 export interface Version {
-    'commitHash': string;
-    'date': string;
+    "commitHash": string;
+    "date": string;
 }
 
 export interface SupportedList {
-    'operatingSystems': string[];
-    'browsers': string[];
-    'engines': string[];
-    'libraries': string[];
-    'mediaPlayer': string[];
-    'mobileApps': string[];
-    'PIM': string[];
-    'feedReaders': string[];
-    'brands': string[];
-    'bots': string[];
+    "operatingSystems": string[];
+    "browsers": string[];
+    "engines": string[];
+    "libraries": string[];
+    "mediaPlayer": string[];
+    "mobileApps": string[];
+    "PIM": string[];
+    "feedReaders": string[];
+    "brands": string[];
+    "bots": string[];
 }
diff --git a/client/src/main.ts b/client/src/main.ts
index ce39754..479d41b 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,10 +1,10 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
-import BootstrapVue from "bootstrap-vue";
+// import BootstrapVue from "bootstrap-vue";
 
 Vue.config.productionTip = false;
-Vue.use(BootstrapVue);
+// Vue.use(BootstrapVue);
 
 new Vue({
   router,
diff --git a/client/src/router.ts b/client/src/router.ts
index 6ba50e8..27522b0 100644
--- a/client/src/router.ts
+++ b/client/src/router.ts
@@ -1,32 +1,32 @@
-import Vue from 'vue';
-import Router from 'vue-router';
-import Main from './views/Main.vue';
+import Vue from "vue";
+import Router from "vue-router";
+import Main from "./views/Main.vue";
 
 Vue.use(Router);
 
 export default new Router({
-    mode: 'history',
+    mode: "history",
     base: process.env.BASE_URL,
-    linkActiveClass: 'active',
+    linkActiveClass: "active",
     routes: [
         {
-            path: '/about',
-            name: 'about',
+            path: "/about",
+            name: "about",
             props: true,
             // route level code-splitting
             // this generates a separate chunk (about.[hash].js) for this route
             // which is lazy-loaded when the route is visited.
-            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+            component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
         },
         {
-            path: '/:ua?',
-            name: 'main',
+            path: "/:ua?",
+            name: "main",
             component: Main,
             props: true
         },
         {
-            path: '*',
-            redirect: '/'
+            path: "*",
+            redirect: "/"
         }
     ]
 });
diff --git a/client/src/scss/style.scss b/client/src/scss/style.scss
index c2a5e64..0ab94e2 100644
--- a/client/src/scss/style.scss
+++ b/client/src/scss/style.scss
@@ -1,7 +1,21 @@
 $navbar-background: #3450A3;
 $primary: #43a047;
+//@import '~bootstrap/scss/bootstrap';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/code';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/transitions';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/navbar';
 
-@import '~bootstrap/scss/bootstrap';
 @import '~bootstrap-vue/src/index.scss';
 
 
@@ -42,3 +56,7 @@ h1 {
 .input-group {
   margin-bottom: 9px;
 }
+
+.ml-auto {
+  margin-left: auto;
+}
diff --git a/client/src/views/Main.vue b/client/src/views/Main.vue
index 81b34e1..7611b55 100644
--- a/client/src/views/Main.vue
+++ b/client/src/views/Main.vue
@@ -13,10 +13,10 @@
             <div v-if="!dd.clientInfo && !dd.botInfo" class="box centered">
                 Device Detecter couldn't detect any information about this user agent.
             </div>
-            <div v-if="dd.isBot" class="box centered">
-                <a :href="dd.botInfo.url">{{dd.botInfo.name}}</a>
-                <span>{{dd.botInfo.category}}</span>
-                <a :href="dd.botInfo.producer.url">{{dd.botInfo.producer.name}}</a>
+            <div v-else-if="dd.isBot" class="box centered">
+                <div><a :href="dd.botInfo.url">{{dd.botInfo.name}}</a></div>
+                <div>{{dd.botInfo.category}}</div>
+                <div><a :href="dd.botInfo.producer.url">{{dd.botInfo.producer.name}}</a></div>
             </div>
             <div v-else>
                 <div class="box-row">
@@ -60,79 +60,87 @@
 </template>
 
 <script lang="ts">
-    import Vue from "vue";
-    import {ParsedData} from "@/interfaces";
-    import Icon from "../components/Icon.vue";
-    import {syntaxHighlight} from "../../utils";
+import Vue from "vue";
+import {ParsedData} from "@/interfaces";
+import Icon from "../components/Icon.vue";
+import {syntaxHighlight} from "../../utils";
+// @ts-ignore
+import InputGroup from "bootstrap-vue/es/components/input-group";
+// @ts-ignore
+import FormInput from "bootstrap-vue/es/components/form-input";
+// @ts-ignore
+import Button from "bootstrap-vue/es/components/button";
+Vue.use(InputGroup);
+Vue.use(FormInput);
+Vue.use(Button);
+const baseURL = "/detect/";
 
-    const baseURL = "/detect/";
-
-    export default Vue.extend({
-        name: "Main",
-        props: {
-            ua: String
-        },
-        components: {
-            Icon
-        },
-        data() {
-            return {
-                userAgent: this.ua ? this.ua : navigator.userAgent,
-                dd: {} as ParsedData,
-                gotData: false,
-                processingServerSide: false,
-                showJSON: false
-            };
-        },
-        computed: {
-            prettyJSON(): string {
-                return syntaxHighlight(JSON.stringify(this.dd, null, 2));
-            }
-        },
-        methods: {
-            submit(): void {
-                this.$router.replace({name: "main", params: {"ua": this.userAgent}});
-            },
-            fetchData(ua: string): 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.dd = JSON.parse(req.responseText);
-                            this.gotData = true;
-                            this.processingServerSide = false;
-                        }
-                    }
-                };
-                req.open("GET", baseURL + "?ua=" + ua, true);
-                req.send(null);
-            }
-        },
-        watch: {
-            ua(val: string): void {
-                if (!val) {
-                    this.submit();
-                } else {
-                    this.fetchData(val);
-                }
-            },
-            showJSON(newValue: boolean): void {
-                localStorage.showJSON = newValue;
-            }
-        },
-        mounted(): void {
-            if (this.ua) {
-                this.fetchData(this.ua);
-            } else {
-                this.submit();
-            }
-            if (localStorage.showJSON) {
-                this.showJSON = !!localStorage.showJSON;
-            }
+export default Vue.extend({
+    name: "Main",
+    props: {
+        ua: String
+    },
+    components: {
+        Icon
+    },
+    data() {
+        return {
+            userAgent: this.ua ? this.ua : navigator.userAgent,
+            dd: {} as ParsedData,
+            gotData: false,
+            processingServerSide: false,
+            showJSON: false
+        };
+    },
+    computed: {
+        prettyJSON(): string {
+            return syntaxHighlight(JSON.stringify(this.dd, null, 2));
         }
-    });
+    },
+    methods: {
+        submit(): void {
+            this.$router.replace({name: "main", params: {ua: this.userAgent}});
+        },
+        fetchData(ua: string): 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.dd = JSON.parse(req.responseText);
+                        this.gotData = true;
+                        this.processingServerSide = false;
+                    }
+                }
+            };
+            req.open("GET", baseURL + "?ua=" + ua, true);
+            req.send(null);
+        }
+    },
+    watch: {
+        ua(val: string): void {
+            if (!val) {
+                this.submit();
+            } else {
+                this.fetchData(val);
+            }
+        },
+        showJSON(newValue: boolean): void {
+            localStorage.showJSON = newValue;
+        }
+    },
+    mounted(): void {
+        if (this.ua) {
+            this.fetchData(this.ua);
+        } else {
+            this.submit();
+        }
+        if (localStorage.showJSON) {
+            this.showJSON = !!localStorage.showJSON;
+        }
+    }
+});
 </script>
 
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 6078f98..5074508 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -727,9 +727,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/node@*":
-  version "11.13.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.4.tgz#f83ec3c3e05b174b7241fadeb6688267fe5b22ca"
-  integrity sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==
+  version "11.13.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.6.tgz#37ec75690830acb0d74ce3c6c43caab787081e85"
+  integrity sha512-Xoo/EBzEe8HxTSwaZNLZjaW6M6tA/+GmD3/DZ6uo8qSaolE/9Oarko0oV1fVfrLqOz0tx0nXJB4rdD5c+vixLw==
 
 "@types/q@^1.5.1":
   version "1.5.2"
@@ -1814,9 +1814,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000957, caniuse-lite@^1.0.30000960:
-  version "1.0.30000960"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000960.tgz#ec48297037e5607f582f246ae7b12bee66a78999"
-  integrity sha512-7nK5qs17icQaX6V3/RYrJkOsZyRNnroA4+ZwxaKJzIKy+crIy0Mz5CBlLySd2SNV+4nbUZeqeNfiaEieUBu3aA==
+  version "1.0.30000962"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000962.tgz#6c10c3ab304b89bea905e66adf98c0905088ee44"
+  integrity sha512-WXYsW38HK+6eaj5IZR16Rn91TGhU3OhbwjKZvJ4HN/XBIABLKfbij9Mnd3pM0VEwZSlltWjoWg3I8FQ0DGgNOA==
 
 case-sensitive-paths-webpack-plugin@^2.2.0:
   version "2.2.0"
@@ -2796,9 +2796,9 @@ ejs@^2.6.1:
   integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==
 
 electron-to-chromium@^1.3.124:
-  version "1.3.124"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.124.tgz#861fc0148748a11b3e5ccebdf8b795ff513fa11f"
-  integrity sha512-glecGr/kFdfeXUHOHAWvGcXrxNU+1wSO/t5B23tT1dtlvYB26GY8aHzZSWD7HqhqC800Lr+w/hQul6C5AF542w==
+  version "1.3.125"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.125.tgz#dbde0e95e64ebe322db0eca764d951f885a5aff2"
+  integrity sha512-XxowpqQxJ4nDwUXHtVtmEhRqBpm2OnjBomZmZtHD0d2Eo0244+Ojezhk3sD/MBSSe2nxCdGQFRXHIsf/LUTL9A==
 
 elliptic@^6.0.0:
   version "6.4.1"
@@ -4090,23 +4090,23 @@ is-obj@^1.0.0:
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
 is-path-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.0.0.tgz#d4777a8e227a00096a31f030db3770f84b116c02"
-  integrity sha512-m5dHHzpOXEiv18JEORttBO64UgTEypx99vCxQLjbBvGhOJxnTNglYoFXxwo6AbsQb79sqqycQEHv2hWkHZAijA==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.1.0.tgz#2e0c7e463ff5b7a0eb60852d851a6809347a124c"
+  integrity sha512-Sc5j3/YnM8tDeyCsVeKlm/0p95075DyLmDEIkSgQ7mXkrOX+uTCtmQFm0CYzVyJwcCCmO3k8qfJt17SxQwB5Zw==
 
 is-path-in-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.0.0.tgz#68e452a6eec260500cec21e029c0a44cc0dcd2ea"
-  integrity sha512-6Vz5Gc9s/sDA3JBVu0FzWufm8xaBsqy1zn8Q6gmvGP6nSDMw78aS4poBNeatWjaRpTpxxLn1WOndAiOlk+qY8A==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
   dependencies:
-    is-path-inside "^1.0.0"
+    is-path-inside "^2.1.0"
 
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
   dependencies:
-    path-is-inside "^1.0.1"
+    path-is-inside "^1.0.2"
 
 is-plain-obj@^1.0.0:
   version "1.1.0"
@@ -4691,22 +4691,17 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.38.0 < 2":
+"mime-db@>= 1.38.0 < 2", mime-db@~1.39.0:
   version "1.39.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.39.0.tgz#f95a20275742f7d2ad0429acfe40f4233543780e"
   integrity sha512-DTsrw/iWVvwHH+9Otxccdyy0Tgiil6TWK/xhfARJZF/QFhwOgZgOIvA2/VIGpM8U7Q8z5nDmdDWC6tuVMJNibw==
 
-mime-db@~1.38.0:
-  version "1.38.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad"
-  integrity sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==
-
 mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
-  version "2.1.22"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.22.tgz#fe6b355a190926ab7698c9a0556a11199b2199bd"
-  integrity sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==
+  version "2.1.23"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.23.tgz#d4eacd87de99348a6858fe1e479aad877388d977"
+  integrity sha512-ROk/m+gMVSrRxTkMlaQOvFmFmYDc7sZgrjjM76abqmd2Cc5fCV7jAMA5XUccEtJ3cYiYdgixUVI+fApc2LkXlw==
   dependencies:
-    mime-db "~1.38.0"
+    mime-db "~1.39.0"
 
 mime@1.4.1:
   version "1.4.1"
@@ -5455,7 +5450,7 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@^1.0.1:
+path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
@@ -7319,9 +7314,9 @@ typedarray@^0.0.6:
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 typescript@^3.2.1:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.3.tgz#0eb320e4ace9b10eadf5bc6103286b0f8b7c224f"
-  integrity sha512-FFgHdPt4T/duxx6Ndf7hwgMZZjZpB+U0nMNGVCYPq0rEzWKjEDobm4J6yb3CS7naZ0yURFqdw9Gwc7UOh/P9oQ==
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.4.tgz#aac4a08abecab8091a75f10842ffa0631818f785"
+  integrity sha512-xt5RsIRCEaf6+j9AyOBgvVuAec0i92rgCaS3S+UVf5Z/vF2Hvtsw08wtUTJqp4djwznoAgjSxeCcU4r+CcDBJA==
 
 uglify-js@3.4.x:
   version "3.4.10"