Merge pull request #23 from imRohan/develop

Added Dashboard, Moved docs to Postman

src/app/components/landingRight.ts

@@ -13,6 +13,7 @@ const { IView } = require('../../interfaces/view.ts')
 
 // Constants
 const API_PATH = configs.apiPath
+const DOCS_PATH = configs.docsPath
 
 const landingRight = {
   props: ['view'],
@@ -82,6 +83,9 @@ const landingRight = {
     signupNameValid() {
       return this.signup.accountName !== null
     },
+    pantryIDValid() {
+      return this.pantry.id !== null
+    },
     getStarted() {
       this.fetchPantry(this.pantry.id)
       this.$emit('change-view', IView.dashboard)
@@ -90,7 +94,7 @@ const landingRight = {
       this.$emit('change-view', IView.home)
     },
     showDocs() {
-      this.$emit('change-view', IView.docs)
+      window.location.href = DOCS_PATH
     },
     copyPantryId() {
       this.$emit('copy-text', this.pantry.id)
@@ -101,6 +105,11 @@ const landingRight = {
         this.showNameField = true
       }
     },
+    loadPantry() {
+      if (this.pantry.id) {
+        this.fetchPantry(this.pantry.id)
+      }
+    },
     fetchURLParams() {
       if (this.view === IView.dashboard) {
         const _pantryId = decodeURIComponent(window.location.search.match(/(\?|&)pantryid\=([^&]*)/)[2])

src/app/components/topbar.ts

@@ -1,9 +1,15 @@
 // External Files
 const topbarTemplate = require('../templates/topbar.html')
 
+// Configs
+const configs = require('../config.ts')
+
 // Interfaces
 const { IView } = require('../../interfaces/view.ts')
 
+// Constants
+const DOCS_PATH = configs.docsPath
+
 const topbar = {
   name: 'topbar',
   template: topbarTemplate,
@@ -13,7 +19,10 @@ const topbar = {
       this.$emit('change-view', IView.about)
     },
     showDocs() {
-      this.$emit('change-view', IView.docs)
+      window.location.href = DOCS_PATH
+    },
+    showDashboard() {
+      this.$emit('change-view', IView.dashboard)
     },
     goHome() {
       this.$emit('change-view', IView.home)

src/app/scss/_images.scss

@@ -22,8 +22,8 @@
   &--getStarted {
     background-image: url('../assets/ReadingSideDoodle.svg'), none;
   }
-  &--docs {
-    background-image: url('../assets/ReadingDoodle.svg'), none;
+  &--dashboard {
+    background-image: url('../assets/UnboxingDoodle.svg'), none;
   }
   &--about {
     background-image: url('../assets/ZombieingDoodle.svg'), none;

src/app/templates/landingLeft.html

@@ -34,10 +34,7 @@
   <template v-if="view === 'about'">
     <div class="images__character images--about"></div>
   </template>
-  <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>
+    <div class="images__character images--dashboard"></div>
   </template>
 </div>

src/app/templates/landingRight.html

@@ -87,73 +87,6 @@ <h2>Contribute</h2>
     </a>
   </template>
 
-  <template v-if="view === 'docs'">
-    <h1>
-      Api Documentation
-    </h1>
-    <h2>Introduction</h2>
-    <p>
-      Below are high-level descriptions of the main API calls that
-      you will need in order to get up and running with Pantry. For a more
-      detailed overview, please download and use the Postman
-      Collection.
-    </p>
-    <a href="https://app.getpostman.com/run-collection/b32d3ed975b9800557d7#?env%5BPantry%20Prod%5D=W3sia2V5IjoicGFudHJ5X2FwaV9wYXRoIiwidmFsdWUiOiJodHRwczovL2dldHBhbnRyeS5jbG91ZC9hcGl2MSIsImVuYWJsZWQiOnRydWV9LHsia2V5IjoicGFudHJ5X3V1aWQiLCJ2YWx1ZSI6IiIsImVuYWJsZWQiOnRydWV9LHsia2V5IjoicGFudHJ5X2FjY291bnRfbmFtZSIsInZhbHVlIjoiUG9zdG1hbl9BY2NvdW50IiwiZW5hYmxlZCI6dHJ1ZX0seyJrZXkiOiJwYW50cnlfYWNjb3VudF9kZXNjcmlwdGlvbiIsInZhbHVlIjoiUG9zdG1hbiBUZXN0IEFjY291bnQiLCJlbmFibGVkIjp0cnVlfSx7ImtleSI6InBhbnRyeV9hY2NvdW50X2NvbnRhY3RFbWFpbCIsInZhbHVlIjoidGVzdEBwb3N0bWFuLmNvbSIsImVuYWJsZWQiOnRydWV9LHsia2V5IjoicGFudHJ5X2Jhc2tldF9uYW1lIiwidmFsdWUiOiJQb3N0bWFuX0Jhc2tldCIsImVuYWJsZWQiOnRydWV9XQ==">
-      <img src="https://run.pstmn.io/button.svg">
-    </a>
-    <h2>Pantry API Root Path</h2>
-    <p class="text__container text--code">
-      {{apiPath}}
-    </p>
-    <p>
-      Every api call must be sent to the root api path. Following that path will be a specific route per call.
-    </p>
-    <h2>Get Pantry Details</h2>
-    <p class="text__container text--code">
-      GET /pantry/{pantryID}
-    </p>
-    <p>
-      To retrieve details about your pantry, simply send a <b>GET</b> request to
-      our API with the <b>pantryID</b> of your pantry
-    </p>
-    <p class="text__container text--code">
-      curl -XGET -H "Content-type: application/json"
-      '{{apiPath}}/pantry/{pantryID}'
-    </p>
-    <h2>Add & Update a Basket</h2>
-    <p class="text__container text--code">
-      POST /pantry/{pantryID}/basket/{basketName}
-    </p>
-    <p>
-      To add or update a basket in 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. If the
-      name matches an existing basket in your pantry, that basket will be updated
-      with the new payload.
-    </p>
-    <p class="text__container text--code">
-      curl -XPOST -H "Content-type: application/json" -d '{
-        "key": "value"
-        }' '{{apiPath}}/pantry/{pantryID}/basket/{basketName}'
-    </p>
-    <h2>Get the contents of a Basket</h2>
-    <p class="text__container text--code">
-      GET /pantry/{pantryID}/basket/{basketName}
-    </p>
-    <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.
-    </p>
-    <p class="text__container text--code">
-      curl -XGET -H "Content-type: application/json"
-      '{{apiPath}}/pantry/{pantryID}/basket/{basketName}'
-    </p>
-    <button
-      @click="goHome"
-      class="button--alt">
-      Go Back
-    </button>
-  </template>
-
   <template v-if="view === 'dashboard'">
     <template v-if="pantry.data">
       <h1>
@@ -205,7 +138,17 @@ <h2>
       </template>
     </template>
     <template v-else>
-      <h1>Uhoh, looks like something broke.</h1>
+      <h1>View Your Pantry</h1>
+      <p>
+        Don't want to use our API? It's ok, we've all been there.
+        Enter your PantryID below and we'll show you what's inside it! 
+      </p>
+      <div class="input__container">
+        <input v-model="pantry.id" placeholder="Please paste your PantryID">
+        <button @click="loadPantry" :disabled="!pantryIDValid()">
+          Explore
+        </button>
+      </div>
       <button
         @click="goHome"
         class="button--alt">

src/app/templates/topbar.html

@@ -19,5 +19,8 @@
     <div class="topbar__link" @click="showDocs">
       Documentation
     </div>
+    <div class="topbar__link" @click="showDashboard">
+      Dashboard
+    </div>
   </div>
 </div>

src/interfaces/view.ts

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