Merge pull request #3 from alteryx-vue/dev

Dev merge

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.17.1",
     "npm": "^5.7.1",
     "vue": "^2.5.3",
+    "vue-markdown": "^2.2.4",
     "vuelidate": "^0.6.1",
     "vuetify": "^0.17.4",
     "vuex": "^3.0.1"

src/App.vue

@@ -9,6 +9,8 @@
 
           <nyt-connection v-if="page == 0"></nyt-connection>
           <nyt-sections v-if="page == 1"></nyt-sections>
+
+          <nyt-update></nyt-update>
 
         </v-container>
       </v-content>
@@ -22,12 +24,14 @@
   import nytToolbar from './components/nytToolbar.vue';
   import nytConnection from './components/nytConnection.vue';
   import nytSections from './components/nytSections.vue';
+  import nytUpdate from './components/nytUpdate.vue';
 
   export default {
     components: {
         nytToolbar,
         nytConnection,
-        nytSections
+        nytSections,
+        nytUpdate
     },
     computed: {
       page() {

src/components/nytToolbar.vue

@@ -4,10 +4,24 @@
     <img src="public/banner.png" :alt="appTitle" height="24">
     <v-spacer></v-spacer>
 
+    <v-tooltip left>
+      <v-btn 
+        icon 
+        class="blue--text text--darken-1" 
+        :disabled="!updateAvail" 
+        slot="activator"
+        @click.native="showInfo">
+        <v-icon>cloud_download</v-icon>
+      </v-btn>
+      <span>{{ updateBlurb }}</span>
+    </v-tooltip>
+
     <v-bottom-sheet>
-      <v-btn icon class="grey--text text--darken-1" slot="activator">
-        <v-icon>code</v-icon>
+
+      <v-btn icon slot="activator">
+          <v-icon medium>code</v-icon>
       </v-btn>
+
       <v-card tile>
         <v-list two-line dark>
           <v-subheader>Development Sources</v-subheader>
@@ -63,6 +77,7 @@
             </v-list-tile-avatar>
               <v-list-tile-content>
                 <v-list-tile-title>developer.nytimes.com</v-list-tile-title>
+                <v-list-tile-sub-title>API Key obtained with a valid email address</v-list-tile-sub-title>
               </v-list-tile-content>
           </v-list-tile>
 
@@ -87,6 +102,34 @@
       appTitle() {
         return this.$store.state.config.title
       },
+      updateAvail: {
+        get () {
+          return this.$store.state.config.updateAvail
+        },
+        set (value) {
+          this.$store.commit('dismissUpdate')
+        }
+      },
+      moreInfo: {
+        get () {
+          return this.$store.state.config.moreInfo
+        },
+        set (value) {
+          this.$store.commit('updateMoreInfo', value)
+        }
+      },
+      updateBlurb() {
+        if (this.$store.state.config.updateAvail) {
+          return 'Update available!'
+        } else {
+          return 'No updates available'
+        }
+      }
+    },
+    methods: {
+      showInfo() {
+        this.moreInfo = true
+      }
     }
   }
 </script>

src/components/nytUpdate.vue

@@ -0,0 +1,120 @@
+<template>
+
+	<div>
+
+        <v-snackbar
+          :timeout="timeout"
+          v-model="updatePrompt"
+        >
+          UPDATE AVAILABLE
+          <v-btn 
+            flat 
+            color="yellow lighten-1"
+            @click.native="showInfo"
+            >
+            More Info
+          </v-btn>
+          <v-btn flat icon dark @click.native="updatePrompt = false">
+            <v-icon>close</v-icon>
+          </v-btn>
+        </v-snackbar>
+
+        <v-dialog v-model="moreInfo" persistent fullscreen>
+          <v-card>
+            <div class="headline pl-3 pt-3">
+              Update Available<small class="grey--text ml-2">{{ curVersion }}<v-icon>arrow_right</v-icon>{{ updateVersion }}</small>
+              <v-btn 
+                dark 
+                fab 
+                fixed
+                small
+                top 
+                right 
+                color="red darken-1" 
+                @click.native="moreInfo = false">
+                  <v-icon>close</v-icon>
+              </v-btn>                  
+            </div>
+            <v-card-text>
+
+              <code>{{ updateUrl }}</code><br>
+              <div class="subheading mt-3">
+              Download the latest installer from the address above.  Save your work and close Alteryx before running the installer.
+              </div>
+              <v-divider class="my-3"></v-divider>
+              <div class="grey--text headline mb-3">{{ updateVersion }} Release Notes</div>
+              <div class="pl-3">
+                <vue-markdown :source="releaseNotes"></vue-markdown>
+              </div>
+
+            </v-card-text>
+          </v-card>
+        </v-dialog>
+
+    </div>
+
+</template>
+
+<script>
+
+  import VueMarkdown from 'vue-markdown';
+
+  export default {
+  	name: 'nytUpdate',
+    components: {
+        VueMarkdown
+    },
+    data () {
+      return {
+        timeout: 20000,
+        updateUrl: this.$store.state.config.updateUrl
+      }
+    },
+    computed: {
+      updatePrompt: {
+        get () {
+          return this.$store.state.config.updatePrompt
+        },
+        set (value) {
+          this.$store.commit('dismissUpdate')
+        }
+      },
+      moreInfo: {
+        get () {
+          return this.$store.state.config.moreInfo
+        },
+        set (value) {
+          this.$store.commit('updateMoreInfo', value)
+        }
+      },
+      curVersion: {
+        get () {
+          return this.$store.state.config.appVersion
+        },
+        set (value) {
+        }
+      },
+      updateVersion: {
+        get () {
+          return this.$store.state.config.updateVersion
+        },
+        set (value) {
+        }
+      },
+      releaseNotes: {
+        get () {
+          return this.$store.state.config.updateNotes
+        },
+        set (value) {
+        }
+      }
+    },
+    methods: {
+      showInfo() {
+        this.updatePrompt = false
+        this.moreInfo = true
+      }
+    }
+  }
+
+</script>

src/main.js

@@ -2,14 +2,28 @@ import Vue from 'vue'
 import Vuelidate from 'vuelidate'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
-
 import axios from 'axios'
 import {store} from './store.js'
 import App from './App.vue'
 
 Vue.use(Vuetify)
 Vue.use(Vuelidate)
 
+// GET latest release info for update check
+axios.get(store.state.config.latestUrl)
+.then(response => { 
+					const avail = response.data.name
+					const notes = response.data.body
+					const current = store.state.config.appVersion
+					store.state.config.updateAvail = (avail.length > 0 && avail !== current) ? true : false
+					store.state.config.updatePrompt = store.state.config.updateAvail
+					store.state.config.updateVersion = avail
+					store.state.config.updateNotes = notes
+				  }
+)
+.catch(response => { /* release call failed, just proceed */ }
+)
+
 // render app
 const app = new Vue({
   el: '#app',

src/store.js

@@ -7,6 +7,14 @@ export const store = new Vuex.Store({
 	state: {
 		config: {
 			appTitle: 'New York Times',
+			appVersion: 'v1.1.0',
+			latestUrl: 'https://api.github.com/repos/alteryx-vue/nyt-connector/releases/latest',
+			updateAvail: false,
+			updatePrompt: false,
+			moreInfo: false,
+			updateVersion: 'v?',
+			updateNotes: 'New realease notes',
+			updateUrl: 'https://github.com/alteryx-vue/installers/raw/master/nyt-connector.yxi',
 			icon: 'icon.png',
 			page: 0,
 			pages: [
@@ -50,7 +58,8 @@ export const store = new Vuex.Store({
 			connected: 0,
 			connects: 0,
 			connectError: 0,
-			apiError: ''
+			apiError: '',
+			stopCheck: false
 		}
 	},
 	mutations: {
@@ -77,6 +86,12 @@ export const store = new Vuex.Store({
 	  },
 	  updateLastKey (state) {
 	  	state.ui.lastKey = state.ui.apiKey
+	  },
+	  dismissUpdate (state) {
+	  	state.config.updatePrompt = false
+	  },
+	  updateMoreInfo (state, v) {
+	  	state.config.moreInfo = v
 	  }
 	}
 })

webpack.config.js

@@ -37,7 +37,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(png|jpg|gif|svg)$/,
+        test: /\.(png|jpg|gif|svg|ttf|otf|eot|woff(2)?)$/,
         loader: 'file-loader',
         options: {
           objectAssign: 'Object.assign'