Add fab, scrolling, and autofilling

mijdavis2 · Jul 11, 2017 · d4fe3f2 · d4fe3f2
1 parent 8a37a06
commit d4fe3f2
Show file tree

Hide file tree

Showing 14 changed files with 214 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -60,13 +60,15 @@
   "dependencies": {
     "axios": "^0.16.1",
     "fs": "^0.0.1-security",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.18.1",
     "node-async-loop": "^1.2.2",
     "primer-css": "^8.0.0",
     "vue": "^2.3.3",
     "vue-electron": "^1.0.6",
     "vue-floatthead": "^0.0.5",
     "vue-router": "^2.5.3",
+    "vue2-scrollspy": "^1.1.2",
     "vuex": "^2.3.1"
   },
   "devDependencies": {

diff --git a/src/renderer/assets/scroll.svg b/src/renderer/assets/scroll.svg
diff --git a/src/renderer/components/NewReportSetup.vue b/src/renderer/components/NewReportSetup.vue
@@ -21,19 +21,19 @@
           <div>
             <dl class="form-group mr-2">
               <dt><label>Start Bank</label></dt>
-              <dd><input type="number" v-model="startBank"></dd>
+              <dd><input type="number" step="0.01" v-model="startBank"></dd>
             </dl>
             <dl class="form-group">
               <dt><label>End Bank</label></dt>
-              <dd><input type="number" v-model="endBank"></dd>
+              <dd><input type="number" step="0.01" v-model="endBank"></dd>
             </dl>
           </div>
 
           <dl class="form-group">
             <dt><label>Number of Stations</label></dt>
             <dd>
               <select class="form-select" v-model="selectedConfig">
-                <option v-for="config in stationConfigs" :value="config">
+                <option v-for="config in stationConfigs" :value="config" :selected="config.stations === 16">
                   {{ config.stations }} stations at {{ config.spacing }}
                 </option>
               </select>
@@ -89,6 +89,9 @@
         },
         set (bank) {
           this.$store.commit('UPDATE_END_BANK', bank)
+          if (this.startBank && bank > 0) {
+            this.$store.commit('UPDATE_STATION_CONFIG', this.stationConfigs[8])
+          }
         }
       },
       selectedConfig: {
@@ -109,7 +112,7 @@
           for (let i of range(settings.min, settings.max)) {
             const option = {
               stations: i,
-              spacing: Math.round(((parseInt(this.endBank) - parseInt(this.startBank)) / i) * 100) / 100
+              spacing: Math.round(((this.endBank - this.startBank) / i) * 100) / 100
             }
             computedConfigs.push(option)
           }
@@ -122,7 +125,7 @@
         const flowData = [
           {
             'station': 0,
-            'clock': '0',
+            'clock': moment().format('hh:mm a'),
             'tapeFt': this.startBank,
             'maxDepth': 0,
             'spins': 0,
@@ -135,9 +138,9 @@
             'station': flowData.length,
             'clock': '',
             'tapeFt': Math.round((flowData[i].tapeFt + this.selectedConfig.spacing) * 100) / 100,
-            'maxDepth': 0,
-            'spins': 0,
-            'timeSec': 0,
+            'maxDepth': null,
+            'spins': null,
+            'timeSec': null,
             'readingComments': ''
           })
         }
@@ -150,8 +153,8 @@
           'timeSec': 50,
           'readingComments': 'End bank'
         })
-        this.$store.commit('UPDATE_ROWS', flowData)
-        this.$store.commit('UPDATE_REPORT_ID', `${this.site.id}-${moment().format('DD-MM-YY-h.mm.ss')}`)
+        this.$store.commit('UPDATE_FLOW_DATA', flowData)
+        this.$store.commit('UPDATE_REPORT_ID', `${this.site.id}-${moment().valueOf()}`)
         this.$router.push('/report')
       }
     }

diff --git a/src/renderer/components/Report.vue b/src/renderer/components/Report.vue
@@ -17,6 +17,9 @@
   import StreamflowData from './Report/StreamflowCalculator'
 
   export default {
-    components: { ReportMetadata, StreamflowData }
+    components: { ReportMetadata, StreamflowData },
+    data: () => ({
+      scrollPos: 0
+    })
   }
 </script>
diff --git a/src/renderer/components/Report/Metadata.vue b/src/renderer/components/Report/Metadata.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="p-3">
     <div class="card p-3 bg-faded">
-      <h1>Site: {{ $store.getters.site.name }} - {{ $store.getters.site.id }}</h1>
+      <h1>Site: {{ siteName }} - {{ siteId }}</h1>
       <form>
-        <div>
+        <div v-scroll-spy="metadataScrollPos">
           <h3 class="mt-3">Site Visit Summary</h3><hr>
-          <button class="btn btn-small mt-1" v-on:click="autofillDate">Autofill Datetime</button>
-          <div class="flex flex-between flex-wrap">
+          <a class="btn btn-small mt-1" v-on:click="autofillDate">Autofill Datetime</a>
+          <div id="site-visit-summary" class="section flex flex-between flex-wrap">
             <dl v-for="item of Object.keys(siteVisitSummary)" v-if="item !== 'Meter type'" class="form-group" style="width: 45%;">
               <dt><label>{{ item }}</label></dt>
               <dd><input class="form-control" type="text" v-model="siteVisitSummary[item]"></dd>
@@ -21,8 +21,9 @@
               </dd>
             </dl>
           </div>
+
           <h3 class="mt-3">Channel Summary</h3><hr>
-          <div class="flex flex-between flex-wrap">
+          <div id="channel-summary" class="section flex flex-between flex-wrap">
             <dl v-for="item of Object.keys(channelSummary)" class="form-group" style="width: 45%;">
               <dt><label>{{ item }}</label></dt>
               <dd><input class="form-control" type="text" v-model="channelSummary[item]"></dd>
@@ -33,25 +34,35 @@
                             v-model="channelSummary['Comments on rating']"></textarea></dd>
             </dl>
           </div>
-        </div>
 
-        <h3 class="mt-3">Comments</h3><hr>
-        <div class="flex flex-between flex-wrap">
-          <dl v-for="item of Object.keys(comments)" class="form-group" style="width: 45%;">
-            <dt><label>{{ item }}</label></dt>
-            <dd><textarea class="form-control" type="text" v-model="comments[item]"></textarea></dd>
-          </dl>
+          <h3 class="mt-3">Comments</h3><hr>
+          <div id="comments" class="section flex flex-between flex-wrap">
+            <dl v-for="item of Object.keys(comments)" class="form-group" style="width: 45%;">
+              <dt><label>{{ item }}</label></dt>
+              <dd><textarea class="form-control" type="text" v-model="comments[item]"></textarea></dd>
+            </dl>
+          </div>
         </div>
-
       </form>
     </div>
+    <a v-if="metadataScrollPos < 9" href="#flowTable" v-on:click="storedPosition = metadataScrollPos">
+      <button class="fab"><img height="30" src="~@/assets/scroll.svg" alt="electron-vue"></button></a>
+    <a v-else @click="$scrollTo(storedPosition)" href="#">
+      <button class="fab"><img height="30" src="~@/assets/scroll.svg" alt="electron-vue"></button>
+    </a>
   </div>
 </template>
 
 <script>
   import moment from 'moment'
+  import debounce from 'lodash.debounce'
+
   export default {
     data: () => ({
+      metadataScrollPos: 0,
+      storedPosition: 0,
+      siteName: '',
+      siteId: '',
       siteVisitSummary: {
         'Date': null,
         'Start time': null,
@@ -64,7 +75,7 @@
         'Atmospheric Cond': null,
         'Staff Plate Reading': null,
         'Meter type': {
-          'name': 'Pygmy Meter'
+          name: 'Pygmy Meter'
         }
       },
       comments: { 'Site comments': null, 'Site repairs needed': null },
@@ -82,21 +93,47 @@
       },
       meterTypes: [
         {
-          'name': 'Pygmy Meter'
+          name: 'Pygmy Meter'
         },
         {
-          'name': 'AA Meter'
+          name: 'AA Meter'
         }
       ]
     }),
+    created () {
+      this.siteName = this.$store.getters.site.name
+      this.siteId = this.$store.getters.site.id
+    },
     methods: {
-      autofillDate () {
+      autofillDate: function () {
         this.siteVisitSummary['Date'] = moment().format('MM/DD/YYYY')
         this.siteVisitSummary['Start time'] = moment().format('hh:mm a')
+      },
+      quickSave: debounce(
+        function () { return true },
+        500
+      )
+    },
+    watch: {
+      siteVisitSummary: function () {
+        this.quickSave()
       }
     }
   }
 </script>
 
 <style scoped lang="stylus">
+  @require '../../style/variables'
+
+  .fab
+    position fixed
+    bottom 40px
+    right 40px
+    border-radius 50%
+    width 60px
+    height 60px
+    background-color theme-primary
+    color: black
+    img
+      margin-bottom -5px
 </style>
diff --git a/src/renderer/components/Report/StreamflowCalculator.vue b/src/renderer/components/Report/StreamflowCalculator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="flowTable">
     <h1 class="alt-h1 m-3">New Streamflow Calculation</h1>
     <div class="table-wrapper">
       <float-thead-table class="table table-sm table-striped table-bordered">
@@ -29,8 +29,9 @@
       </float-thead-table>
     </div>
     <br>
-    <div class="d-flex flex-row-reverse">
-      <button v-on:click="getResults">Calculate Discharge</button><br>
+    <div class="flex flex-row-reverse">
+      <button class="btn btn-large" v-on:click="getResults">Calculate Discharge</button><br>
+      <button class="btn btn-primary btn-large mr-3">Save</button>
     </div>
     <br>
     <div class="table-wrapper">
@@ -92,7 +93,7 @@
       totalDischarge: ''
     }),
     created () {
-      this.items = this.$store.getters.items.length > 0 ? this.$store.getters.items : mockData
+      this.items = this.$store.getters.flowData.length > 0 ? this.$store.getters.flowData : mockData
     },
     methods: {
       autofillClock (station) {

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -5,8 +5,10 @@ import App from './App'
 import router from './router'
 import store from './store'
 import FloatThead from 'vue-floatthead'
+import Scrollspy from 'vue2-scrollspy'
 
 Vue.use(FloatThead)
+Vue.use(Scrollspy)
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios

diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
@@ -4,6 +4,14 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
+  scrollBehavior: function (to, from, savedPosition) {
+    if (to.hash) {
+      return {selector: to.hash}
+    } else {
+      return {x: 0, y: 0}
+    }
+  },
   routes: [
     {
       path: '/',

diff --git a/src/renderer/store/modules/FlowRows.js b/src/renderer/store/modules/FlowRows.js
diff --git a/src/renderer/store/modules/reportData.js b/src/renderer/store/modules/reportData.js
@@ -0,0 +1,28 @@
+const state = {
+  reportId: null,
+  flowData: []
+}
+
+const getters = {
+  flowData (state) {
+    return state.flowData
+  },
+  reportId (state) {
+    return state.reportId
+  }
+}
+
+const mutations = {
+  UPDATE_FLOW_DATA (state, payload) {
+    state.flowData = payload
+  },
+  UPDATE_REPORT_ID (state, site) {
+    state.reportId = site
+  }
+}
+
+export default {
+  state,
+  getters,
+  mutations
+}