first fully working version

client/src/App.vue

@@ -3,14 +3,14 @@
         <div class="content">
             <div>
                 <b-navbar toggleable="lg" type="dark">
-                    <b-navbar-brand to="/main">Device Detector</b-navbar-brand>
+                    <b-navbar-brand :to="{name:'main'}">Device Detector</b-navbar-brand>
 
                     <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
                     <b-collapse id="nav-collapse" is-nav>
                         <b-navbar-nav>
-                            <b-nav-item to="/main">Home</b-nav-item>
-                            <b-nav-item to="/about">About</b-nav-item>
+                            <b-nav-item :to="{name:'main'}">Home</b-nav-item>
+                            <b-nav-item :to="{name:'about'}">About</b-nav-item>
                         </b-navbar-nav>
 
                         <!-- Right aligned nav items -->
@@ -45,15 +45,8 @@
 <script lang="ts">
     import Vue from "vue";
     import {Version} from "@/interfaces";
-    // @ts-ignore
-    import Navbar from "bootstrap-vue/es/components/navbar";
-    // @ts-ignore
-    import Bcontainer from "bootstrap-vue/es/components/layout";
 
-    Vue.use(Navbar);
-    Vue.use(Bcontainer);
-
-    const versionJSON = "http://local.devicedetector.net/version.json";
+    const versionJSON = "/version.json";
 
     export default Vue.extend({
         name: "Main",
@@ -74,7 +67,6 @@
                 if (req.readyState === XMLHttpRequest.DONE) {
                     if (req.status === 200) {
                         const data: Version = JSON.parse(req.responseText);
-                        console.log(data);
                         this.commitHash = data.commitHash;
                         this.lastUpdated = new Date(data.date);
                     }

client/src/main.ts

@@ -2,13 +2,12 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import BootstrapVue from "bootstrap-vue";
-// @ts-ignore
 
 Vue.config.productionTip = false;
+Vue.use(BootstrapVue);
 
 new Vue({
   router,
   render: (h) => h(App)
 }).$mount("#app");
 
-Vue.use(BootstrapVue);

client/src/router.ts

@@ -1,35 +1,32 @@
-import Vue from "vue";
-import Router from "vue-router";
-import Home from "./views/Home.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,
-  linkExactActiveClass: "active",
+    linkActiveClass: 'active',
     routes: [
         {
-      path: "/",
-      name: "home",
-      component: Home
-    },
-    {
-      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: "/main",
-      name: "main",
-      // 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: "main" */ "./views/Main.vue")
+            path: '/:ua?',
+            name: 'main',
+            component: Main,
+            props: true
+        },
+        {
+            path: '*',
+            redirect: '/'
         }
     ]
 });

client/src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
-
-export default Vue.extend({
-  name: "home",
-  components: {
-    HelloWorld
-  }
-});
-</script>

client/src/views/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-    <img v-if="icon" :src="'http://local.devicedetector.net'+icon" :title="title"
+    <img v-if="icon" :src="icon" :title="title"
          role="presentation" :alt="title" class="icon" width="48" height="48">
 </template>
 <script lang="ts">

client/src/views/Main.vue

@@ -62,14 +62,14 @@ const baseURL = "/detect/";
     export default Vue.extend({
         name: "Main",
         props: {
-        msg: String
+            ua: String
         },
         components: {
-        icon: Icon
+            Icon
         },
         data() {
             return {
-            userAgent: navigator.userAgent,
+                userAgent: this.ua ? this.ua : navigator.userAgent,
                 dd: {} as ParsedData,
                 gotData: false,
                 processingServerSide: false
@@ -82,6 +82,9 @@ export default Vue.extend({
         },
         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();
@@ -94,9 +97,25 @@ export default Vue.extend({
                         }
                     }
                 };
-            req.open("GET", baseURL + "?ua=" + this.userAgent, true);
+                req.open("GET", baseURL + "?ua=" + ua, true);
                 req.send(null);
             }
+        },
+        watch: {
+            ua(val: string): void {
+                if (!val) {
+                    this.submit();
+                } else {
+                    this.fetchData(val);
+                }
+            }
+        },
+        mounted(): void {
+            if (this.ua) {
+                this.fetchData(this.ua);
+            } else {
+                this.submit();
+            }
         }
     });
 </script>

client/vue.config.js

@@ -1,20 +1,23 @@
 module.exports = {
-    outputDir: "../public/dist",
-    indexPath: "../",
     devServer: {
         proxy: {
             '^/detect/': {
-                target: 'http://local.devicedetector.net/detect/',
+                target: 'http://local.devicedetector.net/',
                 changeOrigin: true
             },
             '^/supported/': {
-                target: 'http://local.devicedetector.net/supported/',
+                target: 'http://local.devicedetector.net/',
                 changeOrigin: true
             },
             '^/version.json': {
-                target: 'http://local.devicedetector.net/version.json',
+                target: 'http://local.devicedetector.net/',
+                changeOrigin: true
+            },
+            '^/icons': {
+                target: 'http://local.devicedetector.net/',
                 changeOrigin: true
             }
+
         }
     }
 };

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d3f938659b833cca9cdeffaac8e7e4a4",
+    "content-hash": "bae4955578dd6c52b57d0865b48eeab9",
     "packages": [
         {
             "name": "doctrine/cache",
@@ -543,7 +543,8 @@
     "prefer-lowest": false,
     "platform": {
         "ext-json": "*",
-        "ext-redis": "*"
+        "ext-redis": "*",
+        "ext-curl": "*"
     },
     "platform-dev": []
 }

upload.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+rsync -rvzP ./client/dist/* lukas@lw1.at:/var/www/devicedetector/public/ --exclude="*.php" --exclude="icons" --fuzzy --exclude --delete-after -v