Added full-page steps with transitions

summerisgone · summerisgone · commit 7866d7160432 · 2020-04-02T00:17:55.000+05:00
diff --git a/app/static/index.html b/app/static/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-100">
+<html class="h-100" lang="en">
 
 <head>
   <title>Algo VPN</title>
@@ -10,26 +10,42 @@
     integrity="sha256-NSuqgY2hCZJUN6hDMFfdxvkexI7+iLxXQbL540RQ/c4=" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
     integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">
+  <style>
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity 300ms ease-in-out;
+    }
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+      opacity: 0;
+    }
+  </style>
 </head>
 
 <body class="d-flex flex-column h-100">
   <div class="container" id="algo">
     <h1 class="mb-5 text-center">{{ title }}</h1>
-    <div class="row">
-      <user-config class="col-md-4 order-md-2 mb-4"></user-config>
-      <vpn-setup class="col-md-8 order-md-1"
-        v-bind:extra_args="extra_args"
-        v-on:submit="on_setup_submit"></vpn-setup>
-    </div>
-    <provider-setup v-bind:extra_args="extra_args" v-on:submit="on_provider_submit">
-    </provider-setup>
+    <transition name="fade">
+      <div class="row" v-if="step == 'setup'">
+        <user-config class="col-md-4 order-md-2 mb-4"></user-config>
+        <vpn-setup class="col-md-8 order-md-1"
+          v-bind:extra_args="extra_args"
+          v-on:submit="set_step('provider'); update_extra_args"></vpn-setup>
+      </div>
+    </transition>
+    <transition name="fade">
+      <provider-setup v-if="step == 'provider'"
+                      v-bind:extra_args="extra_args"
+                      v-on:submit="update_extra_args"
+                      v-on:back="set_step('setup')">
+      </provider-setup>
+    </transition>
   </div>
 
   <script>
     new window.Vue({
       el: '#algo',
       data: {
         playbook: {},
+        step: 'setup',
         extra_args: {
           server_name: "algo",
           ondemand_cellular: false,
@@ -51,17 +67,15 @@ <h1 class="mb-5 text-center">{{ title }}</h1>
         'provider-setup': window.httpVueLoader('/static/provider-setup.vue'),
       },
       methods: {
-        on_setup_submit: function(extra_args) {
-          Object.assign(this.extra_args, extra_args);
-          debugger;
+        set_step: function(step) {
+          this.step = step;
         },
-        on_provider_submit: function(extra_args) {
+        update_extra_args: function(extra_args) {
           Object.assign(this.extra_args, extra_args);
-          debugger;
         }
       }
     })
   </script>
 </body>
 
-</html>
+</html>
diff --git a/app/static/provider-setup.vue b/app/static/provider-setup.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="row" id="prodiver_id">
     <h2 class="col-12">
+      <button type="button" class="btn btn-secondary back-button" v-on:click="$emit('back')"><</button>
       <span v-if="provider">{{ provider.name }} Setup</span>
       <span v-else>Select cloud provider</span>
     </h2>
@@ -13,7 +14,7 @@
             class="nav-link"
             href="#prodiver_id"
             v-bind:class="{ active: item.alias === (provider && provider.alias) }"
-            @click="set_provider(item)"
+            v-on:click="set_provider(item)"
           >{{item.name}}</a>
         </li>
       </ul>
@@ -60,4 +61,11 @@ module.exports = {
     'digitalocean': window.httpVueLoader('/static/provider-do.vue')
   }
 };
-</script>
+</script>
+<style scoped>
+.back-button {
+  position: absolute;
+  border-radius: 50%;
+  left: -2em;
+}
+</style>
diff --git a/app/static/vpn-setup.vue b/app/static/vpn-setup.vue
@@ -96,7 +96,7 @@
           Each user will have their own account for SSH tunneling
         </label>
       </div>
-      <button @click="$emit('submit')" class="btn btn-primary" type="button">Select Cloud Provider</button>
+      <button v-on:click="$emit('submit')" class="btn btn-primary" type="button">Select Cloud Provider</button>
     </section>
   </div>
 </template>
@@ -108,4 +108,4 @@ module.exports = {
     extra_args: Object
   }
 }
-</script>
+</script>

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@`
`96`	`96`	`Each user will have their own account for SSH tunneling`
`97`	`97`	`</label>`
`98`	`98`	`</div>`
`99`		`- <button @click="$emit('submit')" class="btn btn-primary" type="button">Select Cloud Provider</button>`
	`99`	`+ <button v-on:click="$emit('submit')" class="btn btn-primary" type="button">Select Cloud Provider</button>`
`100`	`100`	`</section>`
`101`	`101`	`</div>`
`102`	`102`	`</template>`
`@@ -108,4 +108,4 @@ module.exports = {`
`108`	`108`	`extra_args: Object`
`109`	`109`	`}`
`110`	`110`	`}`
`111`		`-</script>`
	`111`	`+</script>`