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