From 6459e0eafc24563f565ca2d1c289d4b44c44e5e5 Mon Sep 17 00:00:00 2001
From: Dario Ernst <daddel9@nebuk.de>
Date: Fri, 21 Jul 2017 00:58:00 +0200
Subject: [PATCH] Add navigation prototype

---
 client/.eslintrc.js                  |  60 +++++-----
 client/src/components/Error404.vue   |  58 ---------
 client/src/components/Index.vue      | 173 +++++----------------------
 client/src/components/index/foo.vue  |  11 ++
 client/src/components/index/main.vue |  11 ++
 client/src/router.js                 |  38 +++---
 6 files changed, 107 insertions(+), 244 deletions(-)
 delete mode 100644 client/src/components/Error404.vue
 create mode 100644 client/src/components/index/foo.vue
 create mode 100644 client/src/components/index/main.vue

diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index bb84162..535da19 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -1,31 +1,33 @@
 module.exports = {
-  root: true,
-  parserOptions: {
-    sourceType: 'module'
-  },
-  env: {
-    browser: true
-  },
-  globals: {
-    'cordova': true,
-    'DEV': true,
-    'PROD': true,
-    '__THEME': true
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    'one-var': 0,
-    'import/first': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
-  }
+	root: true,
+	parserOptions: {
+		sourceType: 'module'
+	},
+	env: {
+		browser: true
+	},
+	globals: {
+		'cordova': true,
+		'DEV': true,
+		'PROD': true,
+		'__THEME': true
+	},
+	// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+	extends: 'standard',
+	// required to lint *.vue files
+	plugins: [
+		'html'
+	],
+	// add your custom rules here
+	'rules': {
+		// allow paren-less arrow functions
+		'arrow-parens': 0,
+		'one-var': 0,
+		'no-tabs': 0,
+		'indent': 0,
+		'import/first': 0,
+		// allow debugger during development
+		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+		'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
+	}
 }
diff --git a/client/src/components/Error404.vue b/client/src/components/Error404.vue
deleted file mode 100644
index 4af12d7..0000000
--- a/client/src/components/Error404.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="error-page window-height window-width bg-light column items-center">
-    <div class="error-code bg-primary flex items-center justify-center">
-      404
-    </div>
-    <div>
-      <div class="error-card card bg-white column items-center justify-center">
-        <i class="text-grey-5">error_outline</i>
-        <p class="caption text-center">Oops. Nothing here...</p>
-        <p class="text-center group">
-          <button v-if="canGoBack" class="grey push small" @click="goBack">
-            <i class="on-left">keyboard_arrow_left</i>
-            Go back
-          </button>
-          <router-link to="/">
-            <button class="grey push small">
-              Go home
-              <i class="on-right">home</i>
-            </button>
-          </router-link>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      canGoBack: window.history.length > 1
-    }
-  },
-  methods: {
-    goBack () {
-      window.history.go(-1)
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.error-page
-  .error-code
-    height 50vh
-    width 100%
-    padding-top 15vh
-    font-size 30vmax
-    color rgba(255, 255, 255, .2)
-    overflow hidden
-  .error-card
-    margin-top -25px
-    width 90vw
-    max-width 600px
-    padding 50px
-    i
-      font-size 5rem
-</style>
diff --git a/client/src/components/Index.vue b/client/src/components/Index.vue
index 55e9fc9..3ff1f8b 100644
--- a/client/src/components/Index.vue
+++ b/client/src/components/Index.vue
@@ -1,155 +1,46 @@
 <template>
-  <q-layout>
-    <div slot="header" class="toolbar">
-      <q-toolbar-title :padding="0">
-        Quasar Framework v{{$q.version}}
-      </q-toolbar-title>
-    </div>
+	<q-layout>
 
-    <!--
-      Replace following "div" with
-      "<router-view class="layout-view">" component
-      if using subRoutes
-    -->
-    <div class="layout-view">
-      <div class="logo-container non-selectable no-pointer-events">
-        <div class="logo" :style="position">
-          <img src="~assets/quasar-logo.png">
-          <p class="caption text-center">
-            <span v-if="orienting || rotating">Tilt your device.</span>
-            <template v-else>
-              <span class="desktop-only">Move your mouse.</span>
-              <span class="touch-only">Touch screen and move.</span>
-            </template>
-          </p>
-        </div>
-      </div>
-    </div>
-  </q-layout>
-</template>
+		<!-- Toolbar -->
+		<div slot="header" class="toolbar">
 
-<script>
-const moveForce = 30
-const rotateForce = 40
-const RAD_TO_DEG = 180 / Math.PI
+			<button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
+				<i>menu</i>
+			</button>
 
-import { Utils, Platform } from 'quasar'
+			<q-toolbar-title :padding="0">
+				Vee-Shopping
+			</q-toolbar-title>
+		</div>
 
-function getRotationFromAccel (accelX, accelY, accelZ) {
-  /* Reference: http://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation#answer-30195572 */
-  const sign = accelZ > 0 ? 1 : -1
-  const miu = 0.001
 
-  return {
-    roll: Math.atan2(accelY, sign * Math.sqrt(Math.pow(accelZ, 2) + miu * Math.pow(accelX, 2))) * RAD_TO_DEG,
-    pitch: -Math.atan2(accelX, Math.sqrt(Math.pow(accelY, 2) + Math.pow(accelZ, 2))) * RAD_TO_DEG
-  }
-}
+		<!-- Left-side Drawer -->
+		<q-drawer ref="leftDrawer">
+			<div class="toolbar">
+				<q-toolbar-title>
+					Menu
+				</q-toolbar-title>
+			</div>
 
-export default {
-  data () {
-    return {
-      orienting: window.DeviceOrientationEvent && !Platform.is.desktop,
-      rotating: window.DeviceMotionEvent && !Platform.is.desktop,
-      moveX: 0,
-      moveY: 0,
-      rotateY: 0,
-      rotateX: 0
-    }
-  },
-  computed: {
-    position () {
-      const transform = `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
-      return {
-        top: this.moveY + 'px',
-        left: this.moveX + 'px',
-        '-webkit-transform': transform,
-        '-ms-transform': transform,
-        transform
-      }
-    }
-  },
-  methods: {
-    move (evt) {
-      const {width, height} = Utils.dom.viewport()
-      const {top, left} = Utils.event.position(evt)
-      const halfH = height / 2
-      const halfW = width / 2
+			<div class="list no-border platform-delimiter">
+				<q-drawer-link to="/">
+					Start
+				</q-drawer-link>
+				<q-drawer-link to="/foo">
+					Foo
+				</q-drawer-link>
+			</div>
 
-      this.moveX = (left - halfW) / halfW * -moveForce
-      this.moveY = (top - halfH) / halfH * -moveForce
-      this.rotateY = (left / width * rotateForce * 2) - rotateForce
-      this.rotateX = -((top / height * rotateForce * 2) - rotateForce)
-    },
-    rotate (evt) {
-      if (evt.rotationRate &&
-          evt.rotationRate.beta !== null &&
-          evt.rotationRate.gamma !== null) {
-        this.rotateX = evt.rotationRate.beta * 0.7
-        this.rotateY = evt.rotationRate.gamma * -0.7
-      }
-      else {
-        /* evt.acceleration may be null in some cases, so we'll fall back
-           to evt.accelerationIncludingGravity */
-        const accelX = evt.acceleration.x || evt.accelerationIncludingGravity.x
-        const accelY = evt.acceleration.y || evt.accelerationIncludingGravity.y
-        const accelZ = evt.acceleration.z || evt.accelerationIncludingGravity.z - 9.81
+		</q-drawer>
 
-        const rotation = getRotationFromAccel(accelX, accelY, accelZ)
-        this.rotateX = rotation.roll * 0.7
-        this.rotateY = rotation.pitch * -0.7
-      }
-    },
-    orient (evt) {
-      if (evt.beta === null || evt.gamma === null) {
-        window.removeEventListener('deviceorientation', this.orient, false)
-        this.orienting = false
+		<!-- Main View inside -->
+		<router-view class="layout-view"></router-view>
 
-        window.addEventListener('devicemotion', this.rotate, false)
-      }
-      else {
-        this.rotateX = evt.beta * 0.7
-        this.rotateY = evt.gamma * -0.7
-      }
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      if (this.orienting) {
-        window.addEventListener('deviceorientation', this.orient, false)
-      }
-      else if (this.rotating) {
-        window.addEventListener('devicemove', this.rotate, false)
-      }
-      else {
-        document.addEventListener('mousemove', this.move)
-      }
-    })
-  },
-  beforeDestroy () {
-    if (this.orienting) {
-      window.removeEventListener('deviceorientation', this.orient, false)
-    }
-    else if (this.rotating) {
-      window.removeEventListener('devicemove', this.rotate, false)
-    }
-    else {
-      document.removeEventListener('mousemove', this.move)
-    }
-  }
-}
+	</q-layout>
+</template>
+
+<script>
 </script>
 
 <style lang="stylus">
-.logo-container
-  width 192px
-  height 268px
-  perspective 800px
-  position absolute
-  top 50%
-  left 50%
-  transform translateX(-50%) translateY(-50%)
-.logo
-  position absolute
-  transform-style preserve-3d
 </style>
diff --git a/client/src/components/index/foo.vue b/client/src/components/index/foo.vue
new file mode 100644
index 0000000..69da599
--- /dev/null
+++ b/client/src/components/index/foo.vue
@@ -0,0 +1,11 @@
+<template>
+<div>
+	Foo {{ $route.params.id }}
+</div>
+</template>
+
+<script>
+</script>
+
+<style lang="stylus">
+</style>
diff --git a/client/src/components/index/main.vue b/client/src/components/index/main.vue
new file mode 100644
index 0000000..73fabbc
--- /dev/null
+++ b/client/src/components/index/main.vue
@@ -0,0 +1,11 @@
+<template>
+<div>
+	main {{ $route.params.id }}
+</div>
+</template>
+
+<script>
+</script>
+
+<style lang="stylus">
+</style>
diff --git a/client/src/router.js b/client/src/router.js
index 4676518..3b98021 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -4,24 +4,30 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 function load (component) {
-  return () => System.import(`components/${component}.vue`)
+	return () => System.import(`components/${component}.vue`)
 }
 
 export default new VueRouter({
-  /*
-   * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
-   * it is only to be used only for websites.
-   *
-   * If you decide to go with "history" mode, please also open /config/index.js
-   * and set "build.publicPath" to something other than an empty string.
-   * Example: '/' instead of current ''
-   *
-   * If switching back to default "hash" mode, don't forget to set the
-   * build publicPath back to '' so Cordova builds work again.
-   */
+	/*
+	 * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
+	 * it is only to be used only for websites.
+	 *
+	 * If you decide to go with "history" mode, please also open /config/index.js
+	 * and set "build.publicPath" to something other than an empty string.
+	 * Example: '/' instead of current ''
+	 *
+	 * If switching back to default "hash" mode, don't forget to set the
+	 * build publicPath back to '' so Cordova builds work again.
+	 */
 
-  routes: [
-    { path: '/', component: load('Index') }, // Default
-    { path: '*', component: load('Error404') } // Not found
-  ]
+	routes: [
+		{
+			path: '/',
+			component: load('Index'),
+			children: [
+				{ path: '', component: load('index/main') },
+				{ path: 'foo', component: load('index/foo') }
+			]
+		}
+]
 })