From 754ab3351445651275631c65ae997f4e2ef84704 Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Tue, 17 Mar 2020 16:18:05 +0100
Subject: [PATCH] feature complete #1

---
 app/src/App.vue                       |   9 +-
 app/src/components/ScreenCard.vue     |  55 ++--------
 app/src/components/TransitionPage.vue | 139 ++++++++++++++++++++++++++
 app/src/router/index.js               |  10 +-
 app/src/views/Dashboard.vue           |   4 +-
 app/src/views/Settings.vue            |   6 ++
 6 files changed, 165 insertions(+), 58 deletions(-)
 create mode 100644 app/src/components/TransitionPage.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index 9993820..d5a7866 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -68,7 +68,9 @@
 
 			<v-content>
 				<v-container fluid fill-height class="align-start">
-					<router-view></router-view>
+					<transition-page>
+						<router-view></router-view>
+					</transition-page>
 				</v-container>
 			</v-content>
 		</template>
@@ -78,9 +80,12 @@
 <script>
 	import apiDevice from './api/device'
 	import "@/assets/app.css"
+	import transitionPage from "@/components/TransitionPage"
 
     export default {
-        name: 'App',
+		components: {
+			transitionPage
+		},
         data: () => ({
 			isLoading: true,
 
diff --git a/app/src/components/ScreenCard.vue b/app/src/components/ScreenCard.vue
index 94f3dca..d9c1996 100644
--- a/app/src/components/ScreenCard.vue
+++ b/app/src/components/ScreenCard.vue
@@ -1,54 +1,13 @@
 <template>
-  <v-card outlined>
-    <!--
-    <v-toolbar
-      extended
-      extension-height="100"
-      dark
-      prominent
-      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-toolbar-title>Title</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-heart</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-    </v-toolbar>
-    -->
-
-    <!-- bug, border radius oben geht mit skeleton nicht -->
-    <v-skeleton-loader type="image" tile :loading="false">
-      <v-img class="device-screen-image" :aspect-ratio="16/9" :src="device_screen_src"></v-img>
-    </v-skeleton-loader>
-    <!--
-    <v-btn absolute dark fab top right color="white">
-      <v-icon>$settings</v-icon>
-    </v-btn>
-    -->
-    <!--
-    <v-card-text style="height: 100px; position: relative">
-        <v-btn color="pink" dark absolute top right fab>
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-    </v-card-text>
-    -->
+  <v-card color="grey lighten-4" _outlined>
+    <v-img class="device-screen-image" :aspect-ratio="16/9" :src="device_screen_src"></v-img>
 
     <v-card-actions style="position: relative">
-      <v-btn color="white" _dark absolute top right fab elevation="2">
-        <v-icon>$settings</v-icon>
-      </v-btn>
+      <router-link to="/settings">
+        <v-btn color="orange" dark absolute top right fab elevation="2">
+          <v-icon>$settings</v-icon>
+        </v-btn>
+      </router-link>
 
       <v-progress-circular
         :rotate="-90"
diff --git a/app/src/components/TransitionPage.vue b/app/src/components/TransitionPage.vue
new file mode 100644
index 0000000..6eb6445
--- /dev/null
+++ b/app/src/components/TransitionPage.vue
@@ -0,0 +1,139 @@
+<template>
+  <transition
+    :name="transitionName"
+    :mode="transitionMode"
+    :enter-active-class="transitionEnterActiveClass"
+    @beforeLeave="beforeLeave"
+    @enter="enter"
+    @afterEnter="afterEnter"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+const DEFAULT_TRANSITION = `fade`;
+const DEFAULT_TRANSITION_MODE = `out-in`;
+
+export default {
+  name: `TransitionPage`,
+  data() {
+    return {
+      prevHeight: 0,
+      transitionName: DEFAULT_TRANSITION,
+      transitionMode: DEFAULT_TRANSITION_MODE,
+      transitionEnterActiveClass: ``
+    };
+  },
+  created() {
+    this.$router.beforeEach((to, from, next) => {
+      let transitionName =
+        to.meta.transitionName ||
+        from.meta.transitionName ||
+        DEFAULT_TRANSITION;
+
+      if (transitionName === `slide`) {
+        const toDepth = to.path.split(`/`).length;
+        const fromDepth = from.path.split(`/`).length;
+        transitionName = toDepth < fromDepth ? `slide-right` : `slide-left`;
+      }
+
+      this.transitionMode = DEFAULT_TRANSITION_MODE;
+      this.transitionEnterActiveClass = `${transitionName}-enter-active`;
+      if (to.meta.transitionName === `zoom`) {
+        this.transitionMode = `in-out`;
+        this.transitionEnterActiveClass = `zoom-enter-active`;
+        document.body.style.overflow = `hidden`;
+      }
+
+      if (from.meta.transitionName === `zoom`) {
+        this.transitionMode = null;
+        this.transitionEnterActiveClass = null;
+        document.body.style.overflow = null;
+      }
+      this.transitionName = transitionName;
+
+      next();
+    });
+  },
+  methods: {
+    beforeLeave(element) {
+      this.prevHeight = getComputedStyle(element).height;
+    },
+    enter(element) {
+      const { height } = getComputedStyle(element);
+
+      // eslint-disable-next-line no-param-reassign
+      element.style.height = this.prevHeight;
+
+      setTimeout(() => {
+        // eslint-disable-next-line no-param-reassign
+        element.style.height = height;
+      });
+    },
+    afterEnter(element) {
+      // eslint-disable-next-line no-param-reassign
+      element.style.height = `auto`;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition-duration: 0.3s;
+  transition-property: height, opacity;
+  transition-timing-function: ease;
+  overflow: hidden;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition-duration: 0.5s;
+  transition-property: height, opacity, transform;
+  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
+  overflow: hidden;
+}
+
+.slide-left-enter,
+.slide-right-leave-active {
+  opacity: 0;
+  transform: translate(2em, 0);
+}
+
+.slide-left-leave-active,
+.slide-right-enter {
+  opacity: 0;
+  transform: translate(-2em, 0);
+}
+
+.zoom-enter-active,
+.zoom-leave-active {
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+  animation-name: zoom;
+}
+
+.zoom-leave-active {
+  animation-direction: reverse;
+}
+
+@keyframes zoom {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 14c29e5..e66570f 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -3,8 +3,8 @@ import VueRouter from 'vue-router'
 
 const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard')
 const Settings = () => import(/* webpackChunkName: "settings" */ '../views/Settings')
-const Wifi = () => import(/* webpackChunkName: "wifi" */ '../views/Wifi')
-const Sandbox = () => import(/* webpackChunkName: "sandbox" */ '../views/Sandbox')
+//const Wifi = () => import(/* webpackChunkName: "wifi" */ '../views/Wifi')
+//const Sandbox = () => import(/* webpackChunkName: "sandbox" */ '../views/Sandbox')
 
 
 Vue.use(VueRouter);
@@ -12,9 +12,9 @@ Vue.use(VueRouter);
 export default new VueRouter({
     routes: [
         { path: '/', component: Dashboard },
-        { path: '/settings', component: Settings },
-        { path: '/wifi', component: Wifi },
-        { path: '/sandbox', component: Sandbox },
+        { path: '/settings', component: Settings, meta: { transitionName: 'slide' } },
+        //{ path: '/wifi', component: Wifi },
+        //{ path: '/sandbox', component: Sandbox },
 
         { path: '*', redirect: '/' }
     ],
diff --git a/app/src/views/Dashboard.vue b/app/src/views/Dashboard.vue
index 61136b3..95792be 100644
--- a/app/src/views/Dashboard.vue
+++ b/app/src/views/Dashboard.vue
@@ -6,9 +6,7 @@
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <weather-card></weather-card>
-      </v-col>
-      <v-col cols="12" sm="6" md="4">
-        <device-card></device-card>
+        <device-card class="mt-5"></device-card>
       </v-col>
     </v-row>
   </v-container>
diff --git a/app/src/views/Settings.vue b/app/src/views/Settings.vue
index efb82de..3f62552 100644
--- a/app/src/views/Settings.vue
+++ b/app/src/views/Settings.vue
@@ -133,6 +133,10 @@
         </v-tabs-items>
 
         <v-card-actions>
+          <router-link to="/">
+            <v-btn text>i8n:cancel</v-btn>
+          </router-link>
+
           <v-spacer></v-spacer>
 
           <v-btn text color="primary" @click="onSave()">i8n:Save</v-btn>
@@ -242,6 +246,8 @@ export default {
         console.log(data);
         this.isLoading = false;
         this.isSnackbar = true;
+
+        this.$router.push("/");
       });
     }
   }