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',
 }