diff --git a/app.py b/app.py index 4b411ca..379268b 100644 --- a/app.py +++ b/app.py @@ -52,20 +52,13 @@ class CameraListener: sio.sleep(0.05) -@app.route('/') -def index(): +@app.route('/', defaults={'path': ''}) +@app.route('/') +@app.route('/') # 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']) diff --git a/client/package.json b/client/package.json index 176af43..3c5432b 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/App.vue b/client/src/App.vue index 3fb961f..7c4ec6c 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,26 +1,19 @@ @@ -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; + } + } } diff --git a/client/src/main.js b/client/src/main.js index fdca08a..f6cd920 100644 --- a/client/src/main.js +++ b/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'); diff --git a/client/src/router/index.js b/client/src/router/index.js new file mode 100644 index 0000000..c4768b9 --- /dev/null +++ b/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; diff --git a/client/src/views/Camera.vue b/client/src/views/Camera.vue new file mode 100644 index 0000000..e3fd374 --- /dev/null +++ b/client/src/views/Camera.vue @@ -0,0 +1,45 @@ + + + diff --git a/client/yarn.lock b/client/yarn.lock index 9d43632..1d9f6db 100644 --- a/client/yarn.lock +++ b/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"