feat: added vue router

client/src/App.vue

@@ -1,26 +1,19 @@
 <template>
   <div id="app">
-    <div class="toggle-button" @click="toggleFullScreen">
-      toggleFullScreen
+    <div id="nav">
+      <div class="nav-item toggle-button" @click="toggleFullScreen">
+        toggleFullScreen
+      </div> |
+      <router-link to="/">Camera</router-link>
     </div>
-    <image-stream/>
-    <Nipple :position="'left'" @move="moveCamera"/>
-    <Nipple :position="'right'" @move="moveWalle"/>
+    <router-view/>
   </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 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: #42b983;
-  color: white;
+#nav {
+  padding: 30px;
+
+  a, div.nav-item {
+    display: inline;
+    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>