feat: added vue router

app.py

@@ -52,20 +52,13 @@ class CameraListener:
             sio.sleep(0.05)
 
 
-@app.route('/')
+@app.route('/', defaults={'path': ''})
-def index():
+@app.route('/<string:path>')
+@app.route('/<path:path>')  # does not seem to work
+def index(path):
     return send_file('client/dist/index.html')
 
 
-@app.route('/imagestream.mjpg')
-def image_stream():
-    # ps = redisdb.pubsub()
-    # cam = Camera()
-    # return Response(cam.mjpeg_stream(boundary.encode()),
-    #                 mimetype='multipart/x-mixed-replace; boundary=lkajflkasdjlkfaj')
-    return ""
-
-
 @sio.on("camera")
 def camera_message(directions):
     # walle.set_eye_velocity(directions['angle'], directions['force'])

client/package.json

@@ -5,18 +5,20 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "buildw": "vue-cli-service build --watch",
+    "lint": "vue-cli-service lint",
-    "lint": "vue-cli-service lint"
+    "buildw": "vue-cli-service build --watch"
   },
   "dependencies": {
     "core-js": "^3.6.4",
     "nipplejs": "^0.8.5",
     "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
     "vue-socket.io": "^3.0.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.2.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.2.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "babel-eslint": "^10.0.3",

client/src/App.vue

@@ -1,26 +1,19 @@
 <template>
   <div id="app">
-    <div class="toggle-button" @click="toggleFullScreen">
+    <div id="nav">
-      toggleFullScreen
+      <div class="nav-item toggle-button" @click="toggleFullScreen">
+        toggleFullScreen
+      </div> |
+      <router-link to="/">Camera</router-link>
     </div>
-    <image-stream/>
+    <router-view/>
-    <Nipple :position="'left'" @move="moveCamera"/>
-    <Nipple :position="'right'" @move="moveWalle"/>
   </div>
 </template>
 
 <script>
-import ImageStream from './components/ImageStream.vue';
-import Nipple from './components/Nipple.vue';
 
 export default {
   name: 'App',
-  mounted() {
-  },
-  data() {
-    return {
-    };
-  },
   methods: {
     toggleFullScreen() {
       if (document.fullscreenElement) {
@@ -29,20 +22,6 @@ export default {
         window.document.body.requestFullscreen();
       }
     },
-    moveCamera({ force, angle }) {
-      this.$socket.emit('camera', {
-        force, angle,
-      });
-    },
-    moveWalle({ force, angle }) {
-      this.$socket.emit('move', {
-        force, angle,
-      });
-    },
-  },
-  components: {
-    ImageStream,
-    Nipple,
   },
 };
 </script>
@@ -53,13 +32,20 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  color: #2c3e50;
 }
 
-.toggle-button {
+#nav {
-  position: fixed;
+  padding: 30px;
-  top: 0;
+
-  left: 0;
+  a, div.nav-item {
-  background: #42b983;
+    display: inline;
-  color: white;
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 </style>

client/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueSocketIO from 'vue-socket.io';
 import App from './App.vue';
+import router from './router';
 
 Vue.use(new VueSocketIO({
   debug: true,
@@ -13,5 +14,6 @@ Vue.use(new VueSocketIO({
 Vue.config.productionTip = false;
 
 new Vue({
+  router,
   render: (h) => h(App),
 }).$mount('#app');

client/src/router/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Camera from '../views/Camera.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    name: 'Camera',
+    component: Camera,
+  },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // 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'),
+  // },
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

client/src/views/Camera.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <image-stream/>
+    <Nipple :position="'left'" @move="moveCamera"/>
+    <Nipple :position="'right'" @move="moveWalle"/>
+  </div>
+</template>
+
+<script>
+import ImageStream from '../components/ImageStream.vue';
+import Nipple from '../components/Nipple.vue';
+
+export default {
+  name: 'Camera',
+  mounted() {
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    toggleFullScreen() {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        window.document.body.requestFullscreen();
+      }
+    },
+    moveCamera({ force, angle }) {
+      this.$socket.emit('camera', {
+        force, angle,
+      });
+    },
+    moveWalle({ force, angle }) {
+      this.$socket.emit('move', {
+        force, angle,
+      });
+    },
+  },
+  components: {
+    ImageStream,
+    Nipple,
+  },
+};
+</script>

client/yarn.lock

@@ -991,6 +991,13 @@
   dependencies:
     "@vue/cli-shared-utils" "^4.2.2"
 
+"@vue/cli-plugin-router@~4.5.0":
+  version "4.5.8"
+  resolved "https://registry.npm.taobao.org/@vue/cli-plugin-router/download/@vue/cli-plugin-router-4.5.8.tgz?cache=0&sync_timestamp=1603104127291&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-router%2Fdownload%2F%40vue%2Fcli-plugin-router-4.5.8.tgz#db70a69df4edc90690765f8c25749a68b20dd850"
+  integrity sha1-23CmnfTtyQaQdl+MJXSaaLIN2FA=
+  dependencies:
+    "@vue/cli-shared-utils" "^4.5.8"
+
 "@vue/cli-plugin-vuex@^4.2.2":
   version "4.2.2"
   resolved "https://registry.npm.taobao.org/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.2.2.tgz?cache=0&sync_timestamp=1581074021158&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-vuex%2Fdownload%2F%40vue%2Fcli-plugin-vuex-4.2.2.tgz#f504b554e7edde945342e3c42cffad80ffa41933"
@@ -1073,6 +1080,24 @@
     semver "^6.1.0"
     strip-ansi "^6.0.0"
 
+"@vue/cli-shared-utils@^4.5.8":
+  version "4.5.8"
+  resolved "https://registry.npm.taobao.org/@vue/cli-shared-utils/download/@vue/cli-shared-utils-4.5.8.tgz?cache=0&sync_timestamp=1603104132347&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-shared-utils%2Fdownload%2F%40vue%2Fcli-shared-utils-4.5.8.tgz#d454306aaa510e666a34b144afc81830fc23acc9"
+  integrity sha1-1FQwaqpRDmZqNLFEr8gYMPwjrMk=
+  dependencies:
+    "@hapi/joi" "^15.0.1"
+    chalk "^2.4.2"
+    execa "^1.0.0"
+    launch-editor "^2.2.1"
+    lru-cache "^5.1.1"
+    node-ipc "^9.1.1"
+    open "^6.3.0"
+    ora "^3.4.0"
+    read-pkg "^5.1.1"
+    request "^2.88.2"
+    semver "^6.1.0"
+    strip-ansi "^6.0.0"
+
 "@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0":
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.1.1.tgz?cache=0&sync_timestamp=1578324373467&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
@@ -7249,7 +7274,7 @@ request-promise-native@^1.0.8:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.87.0, request@^2.88.0:
+request@^2.87.0, request@^2.88.0, request@^2.88.2:
   version "2.88.2"
   resolved "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&sync_timestamp=1581439170162&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha1-1zyRhzHLWofaBH4gcjQUb2ZNErM=
@@ -8668,6 +8693,11 @@ vue-loader@^15.8.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.2.0:
+  version "3.4.8"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.8.tgz?cache=0&sync_timestamp=1603710690404&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.8.tgz#2c06261d35d8075893470352d42d70b6287b8194"
+  integrity sha1-LAYmHTXYB1iTRwNS1C1wtih7gZQ=
+
 vue-socket.io@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/vue-socket.io/-/vue-socket.io-3.0.7.tgz#fa6db12014243039f2d633d4458e461075d52dc8"