Merge pull request #17 from imRohan/develop

Adds lightweight dashboard

package.json

@@ -51,7 +51,7 @@
     "ts-loader": "^6.2.1",
     "tslint": "^5.12.1",
     "typescript": "^3.2.4",
-    "vue-loader": "^15.2.4",
+    "vue-loader": "^15.9.1",
     "vue-resource": "^1.5.1",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.16.1",
@@ -74,6 +74,7 @@
     "url-loader": "^1.0.1",
     "uuid": "^3.4.0",
     "vue": "^2.5.16",
-    "vue-clipboard2": "^0.3.1"
+    "vue-clipboard2": "^0.3.1",
+    "vue-json-pretty": "^1.6.3"
   }
 }

src/app/components/landingRight.ts

@@ -1,5 +1,6 @@
-// External Libs
+// External Files
 const axios = require('axios')
+const jsonView = require('vue-json-pretty').default
 
 // Configs
 const configs = require('../config.ts')
@@ -16,36 +17,74 @@ const API_PATH = configs.apiPath
 const landingRight = {
   props: ['view'],
   name: 'landingRight',
+  components: {
+    'json-view': jsonView,
+  },
+  template: landingRightTemplate,
   data() {
     return {
-      pantryId: 'Whoops! This was not supposed to happen.',
       apiPath: API_PATH,
-      signupEmail: null,
+      signup: {
+        email: null,
+        accountName: null,
+      },
+      pantry: {
+        id: null,
+        data: null,
+      },
+      basket: null,
+      activeBasket: null,
+      showNameField: false,
       copyPantryIdMessage: 'copy',
     }
   },
-  template: landingRightTemplate,
   methods: {
     async createNewPantry() {
+      const { accountName, email } = this.signup
       const { data } = await axios({
         method: 'POST',
         data: {
-          name: 'defaultName',
+          name: accountName,
           description: 'defaultDescription',
-          contactEmail: this.signupEmail,
+          contactEmail: email,
         },
         url: `${API_PATH}/pantry/create`,
       })
 
-      this.pantryId = data
+      this.pantry.id = data
       this.$emit('change-view', IView.created)
     },
+    async fetchPantry(pantryId: string) {
+      const { data } = await axios({
+        method: 'GET',
+        url: `${API_PATH}/pantry/${pantryId}`,
+      })
+      this.pantry.id = pantryId
+      this.pantry.data = data
+    },
+    async toggleBasket(name: string) {
+      if (this.activeBasket === name) {
+        this.basket = null
+        this.activeBasket = null
+      } else {
+        const { data } = await axios({
+          method: 'GET',
+          url: `${API_PATH}/pantry/${this.pantry.id}/basket/${name}`,
+        })
+        this.basket = data
+        this.activeBasket = name
+      }
+    },
     signupValid() {
       const _emailRegix = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return _emailRegix.test(String(this.signupEmail).toLowerCase());
+      return _emailRegix.test(String(this.signup.email).toLowerCase());
+    },
+    signupNameValid() {
+      return this.signup.accountName !== null
     },
     getStarted() {
-      this.$emit('change-view', IView.getStarted)
+      this.fetchPantry(this.pantry.id)
+      this.$emit('change-view', IView.dashboard)
     },
     goHome() {
       this.$emit('change-view', IView.home)
@@ -54,9 +93,23 @@ const landingRight = {
       this.$emit('change-view', IView.docs)
     },
     copyPantryId() {
-      this.$emit('copy-text', this.pantryId)
+      this.$emit('copy-text', this.pantry.id)
       this.copyPantryIdMessage = 'copied!'
     },
+    enterPantryName() {
+      if (this.signupValid()) {
+        this.showNameField = true
+      }
+    },
+    fetchURLParams() {
+      if (this.view === IView.dashboard) {
+        const _pantryId = decodeURIComponent(window.location.search.match(/(\?|&)pantryid\=([^&]*)/)[2])
+        this.fetchPantry(_pantryId)
+      }
+    },
+  },
+  mounted() {
+    this.fetchURLParams()
   },
 }
 

src/app/scss/_app.scss

@@ -71,3 +71,23 @@ input {
     }
   }
 }
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  margin-bottom: 1em;
+}
+
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.slide-fade-enter, .slide-fade-leave-to {
+  opacity: 0;
+}
+
+

src/app/scss/_basket.scss

@@ -0,0 +1,9 @@
+.basket {
+  &__container {
+  }
+  &__payload {
+    &-container {
+      padding: 1em;
+    }
+  }
+}

src/app/scss/_text.scss

@@ -46,6 +46,7 @@ a:any-link {
   &__button {
     float: right;
     color: $secondary-color;
+    cursor: pointer;
   }
   &--light {
     color: $secondary-color;

src/app/scss/main.scss

@@ -5,3 +5,4 @@
 @import 'images';
 @import 'topbar';
 @import 'bottomBar';
+@import 'basket';

src/app/templates/landingLeft.html

@@ -37,4 +37,7 @@
   <template v-if="view === 'docs'">
     <div class="images__character images--docs"></div>
   </template>
+  <template v-if="view === 'dashboard'">
+    <div class="images__character images--docs"></div>
+  </template>
 </div>

src/app/templates/landingRight.html

@@ -9,23 +9,35 @@ <h1>
       your users, Pantry speeds up development time letting you
       build awesome things - fast!
     </p>
-    <div class="input__container">
-      <input v-model="signupEmail" placeholder="[email protected]">
-      <button @click="createNewPantry" :disabled="!signupValid()">
-        Get a Pantry
-      </button>
-    </div>
-    <template v-if="signupEmail && !signupValid()">
-      <p class="text--light">
-        Sorry, but that email is invalid.
-      </p>
-    </template>
-    <template v-else>
-      <p class="text--light">
-        Don't worry, we'll only contact you if its important.
-      </p>
-    </template>
+    <transition name="slide-fade" mode="out-in">
+      <div v-if="!showNameField" key="enterEmail">
+        <div class="input__container">
+          <input v-model="signup.email" placeholder="[email protected]">
+          <button @click="enterPantryName" :disabled="!signupValid()">
+            Create a Pantry
+          </button>
+        </div>
+        <p v-if="signup.email && !signupValid()" class="text--light">
+          Sorry, but that email is invalid.
+        </p>
+        <p v-else class="text--light">
+          Don't worry, we'll only contact you if its important.
+        </p>
+      </div>
+      <div v-else key="enterPantryName">
+        <div class="input__container">
+          <input v-model="signup.accountName" placeholder="">
+          <button @click="createNewPantry" :disabled="!signupNameValid()">
+            Name your Pantry
+          </button>
+        </div>
+        <p class="text--light">
+          Give your Pantry a creative name
+        </p>
+      </div>
+    </transition>
   </template>
+
   <template v-if="view === 'created'">
     <h1>
       Your Pantry's Ready!
@@ -36,7 +48,7 @@ <h2>Save your PantryID</h2>
       Once you've saved it somewhere, hit the button below and we'll show you how to add items to your pantry.
     </p>
     <p class="text__container text--key">
-      {{ pantryId }}
+      {{ pantry.id }}
       <span class="text__button" @click="copyPantryId">
         {{ copyPantryIdMessage }}
       </span>
@@ -45,36 +57,7 @@ <h2>Save your PantryID</h2>
       Let's Get Started!
     </button>
   </template>
-  <template v-if="view === 'getStarted'">
-    <h1>
-      How to use your Pantry.
-    </h1>
-    <h2>Add & Update Basket</h2>
-    <p>
-      To add or update a basket in your pantry, send a <b>POST</b> request
-      to our API with the <b>name</b> of your basket in the path, and the
-      contents as the <b>payload</b> of the request. Your
-      <b>pantryID</b> has already been added to the api path.
-    </p>
-    <p class="text__container text--code">
-      curl -XPOST -H "Content-type: application/json" -d '{
-        "key": "value"
-      }' '{{apiPath}}/pantry/{{pantryId}}/basket/myNewBasket'
-    </p>
-    <h2>Get the contents of a Basket</h2>
-    <p>
-      To retrieve an basket, send a <b>GET</b> request to our API with the
-      <b>name</b> of the basket in the url.Your <b>pantryID</b> has already
-      been added to the api path.
-    </p>
-    <p class="text__container text--code">
-      curl -XGET -H "Content-type: application/json"
-      '{{apiPath}}/pantry/{{pantryId}}/basket/myNewBasket'
-    </p>
-    <button @click="showDocs">
-      Show Me The API Docs!
-    </button>
-  </template>
+
   <template v-if="view === 'about'">
     <h1>
       About
@@ -103,6 +86,7 @@ <h2>Contribute</h2>
       border-radius: 5px;" >
     </a>
   </template>
+
   <template v-if="view === 'docs'">
     <h1>
       Api Documentation
@@ -169,4 +153,64 @@ <h2>Get the contents of a Basket</h2>
       Go Back
     </button>
   </template>
+
+  <template v-if="view === 'dashboard'">
+    <template v-if="pantry.data">
+      <h1>
+        {{ pantry.data.name }}
+      </h1>
+      <template v-if="pantry.data.baskets && pantry.data.baskets.length !== 0">
+        <h2>
+          {{pantry.data.baskets.length}}
+          {{pantry.data.baskets.length > 1 ? 'Baskets' : 'Basket' }}
+          in this Pantry
+        </h2>
+        <div class="basket__container">
+          <ul>
+            <template v-for="basketName in pantry.data.baskets">
+              <li class="text__container">
+                {{ basketName }}
+              <span class="text__button" @click="toggleBasket(basketName)">
+                {{ activeBasket === basketName ? 'hide' : 'show' }}
+              </span>
+              <template v-if="activeBasket === basketName">
+                <div class="basket__payload-container">
+                  <json-view
+                    :deep="1"
+                    :showLength="true"
+                    :data="basket"/>
+                </div>
+              </template>
+              </li> 
+            </template>
+          </ul>
+        </div>
+      </template>
+      <template v-else>
+        <p>
+          Looks like your pantry is empty and currently has no baskets. 
+        </p>
+        <p>
+          To add a basket to your pantry, simply send a <b>POST</b> request
+          to our API with the <b>name</b> and the <b>payload</b> of the basket
+        </p>
+        <p class="text__container text--code">
+          curl -XPOST -H "Content-type: application/json" -d '{
+            "key": "value"
+            }' '{{apiPath}}/pantry/{{this.pantry.id}}/basket/testBasket'
+        </p>
+        <button @click="showDocs">
+          Show Me The API Docs!
+        </button>
+      </template>
+    </template>
+    <template v-else>
+      <h1>Uhoh, looks like something broke.</h1>
+      <button
+        @click="goHome"
+        class="button--alt">
+        Go Back
+      </button>
+    </template>
+  </template>
 </div>

src/interfaces/view.ts

@@ -1,7 +1,7 @@
 export enum IView {
   home = 'home',
   created = 'created',
-  getStarted = 'getStarted',
   docs = 'docs',
   about = 'about',
+  dashboard = 'dashboard',
 }